仕事中にTwitterを見てサボっていることをSlackに晒しだすChrome拡張を作った

先日、slack-chikuryというChrome拡張を公開しました。

chrome.google.com

これはなにか

仕事中にTwitterなどを開くと、Slackのstatusにサボっていることを晒しだすChrome拡張です。

動作例

アイコン

f:id:hogesuke_1:20190314192309p:plain

数字はその日の合計サボり時間(分)です。

Slack

f:id:hogesuke_1:20190314192923p:plain

表示しているページのタイトルも表示されます。仕事に関係のないページを見ているのもバレバレです。

なぜ作ったか

仕事の手が止まったとき、ついTwitterを開いてしまうことはないでしょうか。自分はあります。

ビルド、テスト、CI、npm install、docker-compose upなど、あらゆる場面で細かな待ち時間が発生し、そのたびにTwitterを開く誘惑に駆られ、誘惑に負けます。

そして、その時間が生産性を落としているように感じました。

自分の意志では改善を期待できないため、外からの監視の目を頼り、脅威を作り出すことで改善を試みる狙いです。

使い方

Chrome拡張のインストール

以下のリンクから拡張をインストールしてください。

https://chrome.google.com/webstore/detail/slack-chikury/bgeefbiianafjfckcacgjkeglnijljoi?hl=ja&gl=JP

SlackのOAuth tokenを発行する

Slackのstatusの変更リクエストを実行するために、OAuth AccessTokenが必要です。

Slackのappsページを開きます。

https://api.slack.com/apps

Create New Appをクリック

f:id:hogesuke_1:20190314184351p:plain

App名を入力、WorkSpaceを選択し、 CreateAppをクリック

f:id:hogesuke_1:20190314184601p:plain

Add features and functionalityのPermissionsをクリック

f:id:hogesuke_1:20190314184916p:plain

ページ中頃のSelect Permission Scopesで Modify user’s profile を選択し、Save Changes

f:id:hogesuke_1:20190314190020p:plain

ページ上部のOAuth Tokens & Redirect URLsで、Install App to Workspaceをクリック

f:id:hogesuke_1:20190314190627p:plain

Authorizeをクリック

f:id:hogesuke_1:20190314190726p:plain

OAuth Access Tokenをコピー

f:id:hogesuke_1:20190314190941p:plain

OAuth tokenを設定する

Chrome拡張のポップアップを表示し、コピーしたOAuth Tokenをペースト f:id:hogesuke_1:20190314192016p:plain

オプション

拡張のポップアップより以下を設定できます。

f:id:hogesuke_1:20190314194808p:plain:w400

  • Time Range
    • この拡張を有効にする時間の範囲です
  • Day of the week
    • この拡張を有効にする曜日です
  • Emoji
    • チクり時にstatusに表示するEmojiです
  • Sabori URLs

効果はあったか?

Twitterを見る時間はゼロになりませんが、衆目に晒されている感覚を得ることで時間はだいぶ削減されました。

1日のサボり時間を数字で見れるので、自分がどれだけ集中していないかの指標とし、サボり傾向にあるときは「Twitterを見る」以外の方法でリフレッシュできないかといった対策を試みています。

おわりに

みなさんもサボりを晒して生産性を上げていきましょう。

chrome.google.com

Issue, PullRequestも歓迎です。

github.com

Swagger UIをすこしだけ見やすくしてみた

OpenAPIを採用するプロジェクトが増え、Swagger UIで生成されたAPIドキュメントを見る機会も多くなりました。

目にする機会が増えると、ドキュメント上の見づらい部分(個人の感想です)が少し目に付きます。

そこで、Swagger UIのドキュメントをStyleをイジって「すこしだけ」見やすくできないか試みてみました。

Style変更箇所

見づらいと感じたのは以下の点です。

  • RequestやResponseのExample
  • Responseのテーブル

これらの箇所のStyleを変更してみました。

RequestやResponseのExample

f:id:hogesuke_1:20190120180803p:plain

Before

フォントサイズが小さく、weightが太めに設定されているため、文字が潰れて見づらい。

After

  • フォントサイズを大きめに変更
    • 12px -> 15px
  • weightをnormalに変更
  • フォントを等幅のものに変更

Responseのテーブル

f:id:hogesuke_1:20190120233931p:plain

Before

Statusコードとその説明までの横幅が広く、目を動かす必要がある。
また、行の区切りを示す表示がなく、どこまでがどのStatusコードの説明か判別しづらい。

After

  • Statusコードを右寄せにし、説明の近くに配置
  • 行の区切りにborderを表示

Styleの全容

.swagger-ui .opblock-body pre,
.swagger-ui .response-col_description__inner div.markdown {
    font-size: 15px;
    font-style: normal;
    font-weight: normal;
}

.swagger-ui .opblock-body pre {
    font-family: "Courier New", Consolas, monospace;
}

.responses-table .response {
    border-top: 1px solid rgba(59,65,81,.2);
}

.swagger-ui .response-col_status {
    text-align: right;
    padding-right: 15px !important;
}

.swagger-ui table tbody tr td {
    padding-bottom: 10px;
}

.swagger-ui .model {
    font-size: 14px;
}

このStyleを適用する方法

このStyleを使ってみたい!、という方がいるかどうかはさておき、このStyleを適用するための方法をご案内します。

ユーザースタイルシートを適用するためのブラウザ拡張がいくつかあります。
それらをブラウザに導入することで、独自のStyleをwebページに適用することが可能です。

個人的には Stylus という拡張をおすすめします(Chrome, Firefoxともにあり)。

以下に、Stylusを使用する場合の具体的な手順を説明します。

Stylusのインストール

以下のリンクより拡張をブラウザに追加します。

Chrome chrome.google.com

Firefox addons.mozilla.org

Styleの追加

以下のリンクよりStyleをインストールします。

https://userstyles.org/styles/168032/swagger-ui-slightly-easy-to-see

f:id:hogesuke_1:20190121005234p:plain

完了!

以上で完了です。

実際にSwagger UIのドキュメントを開いて、Styleが適用されているか確認してみてください。

https://petstore.swagger.io/#/pet/addPet

おわりに

もっとこうしたほうが良いのでは?とか、いやいやあなたのStyleのほうが見づらいよ!、とかご意見あればお待ちしております。

twitter.com

荒ぶるSlackのEmojiを静める方法

この記事はSlack Advent Calendar 2018の4日目の記事です。

追記

Preferencesの Accesibility - Animation - Allow animated images and emoji のチェックを外すことでアニメーションを止められることが分かりました 😂 ご指摘ありがとうございました 🙇🏻

アホやな…

Emoji

私の参加するワークスペースには、多種多様なEmojiがたくさん登録されています。
そのなかでも一際目を引くEmojiがあります。

f:id:hogesuke_1:20181204002043g:plain
荒ぶるEmojiたち
アニメーションするEmojiです。

荒ぶるEmoji

アニメーションするEmojiは楽しいのですが、これが画面上に並びすぎると治安が悪くなります。

Emojiが目立ってしまい文字を読む注意が削がれ、集中が途切れてしまいます。

これはどうにかしなければ…

Emojiのアニメーションを止めたい

Emojiのアニメーションを止めてしまおう、と考えました。

javascriptでアニメーションgifを操作できるか調べてみたところ、その方法は存在するようで、ライブラリとして提供されているものをいくつか確認できます。

しかし、これらの実装はあまりお手軽ではなく少々ヘビーな印象を受けました。

もっとライトにどうにかできないものかと思案していたところ、Slackユーザー名の隣に表示される「ステータス」のEmojiはアニメーションしていないことに気づきました。

f:id:hogesuke_1:20181204004015p:plain

これはどうやってアニメーションを止めているのでしょうか 🤔

ステータスのEmojiはURLが異なる

デベロッパーツールを開いて確認してみたところ、ステータスのEmojiは通常のタイムラインのEmojiとは異なるURLが使われていることが分かりました。

タイムライン上の絵文字URL

https://emoji.slack-edge.com/*.gif

ステータスの絵文字URL

https://slack-imgs.com/?c=1&o1=gu&url=*

そして、ステータスのEmojiに使われているslack-imgs.comでクエリパラメータurl=に通常のEmojiのURLを渡すと、アニメーションgifの1枚を切り出して返してくれる機能を持つようです。

他の co1 のパラメータがどういった値を受け取るのか分からないのですが、値の組み合わせによって他の機能も呼び出せるのかもしれません。

アニメーションを止めるコード

‼️ 以降はブラウザでSlackを使うことを前提とした内容です ‼️

上記のステータスのEmojiで使われているURLを使用して、タイムライン上のEmojiのアニメーションを止めてみます。

下のようなコードを TampermonkeyGreasemonkey などの拡張機能を使ってSlackのページ上で実行します。

const observer = new MutationObserver(() => {
    Array.from(document.querySelectorAll('.emoji.emoji-sizer')).forEach(emoji => {
        const backgroundImage = emoji.style.backgroundImage || '';
        const m = backgroundImage.match(/^url\("(https:\/\/emoji\.slack-edge\.com\/.*\.gif)"\)$/);
        if (m) {
            emoji.style.backgroundImage = `url("https://slack-imgs.com/?c=1&o1=gu&url=${encodeURIComponent(m[1])}")`;
        }
    });
});

observer.observe(document.querySelector('#client-ui'), {
    childList: true,
    subtree  : true
});

DOMの変更が検知された際に、Emojiの background-image: url(***) をすべて置き換えてしまうというスクリプトです。

ブックマークレット

サクッと試してみたい方は、下のワンライナーをSlackを開いているタブのアドレスバーにコピペして実行してください。

単純にコピペすると先頭の javascript: が消えてしまうので、そこだけ手入力する必要があるようです。

javascript:const observer=new MutationObserver(()=>{Array.from(document.querySelectorAll('.emoji.emoji-sizer')).forEach(emoji=>{const backgroundImage=emoji.style.backgroundImage||'';const m=backgroundImage.match(/^url\("(https:\/\/emoji\.slack-edge\.com\/.*\.gif)"\)$/);if(m){emoji.style.backgroundImage = `url("https://slack-imgs.com/?c=1&o1=gu&url=${encodeURIComponent(m[1])}")`;}});});observer.observe(document.querySelector('#client-ui'), {childList: true,subtree: true});

アニメーションしていたEmojiが止まって見えるようになったら成功です 🎉
(止まらない場合は、別のチャンネルを表示して戻ってみてください)

f:id:hogesuke_1:20181204001737p:plain
Slackに静寂が訪れた

おわりに

Slackに気を取られ過ぎない環境を作って、集中できる時間を増やしていきたいですね!

Qiitaの記事の鮮度を測りやすくするためのChrome拡張を作った

chrome.google.com

これは何?

Qiitaの記事に投稿日時を表示させるChrome拡張です。

なぜ作った?

Qiitaでは、記事の「最終更新日時」を先頭に表示しており、投稿後に一度も更新されていない場合においてのみ「投稿日時」が表示されます。
更新日時をマウスオーバーすると投稿日時が表示されますが、ひと目で確認することはできません。

そしてQiitaでは情報の鮮度を警告する仕組みとして「1年以上経過しています」のアラートを表示する機能が備わっていますが、これは「最終更新日時」を基準に表示されています。
そのため、ちょっとしたtypoを修正するだけでこのアラートは消えてしまいます。

個人的には、このアラートと最終更新日時のみを頼りに記事の鮮度を測るのは情報が不足しているように感じていました。

中には記事を随時アップデートして最新の情報を取り込んでいる記事もあるのでしょうが、そのような記事は少数であるはずです。

投稿日時を基準に記事の鮮度を測るのが多くの場合で自然であるように感じていたため、この拡張を作りました。

こんな感じで表示されます

投稿から1年以内 f:id:hogesuke_1:20171017084334p:plain

投稿から1年より前かつ2年以内 f:id:hogesuke_1:20171017084034p:plain

投稿から2年より前 f:id:hogesuke_1:20171017084105p:plain

おわり

f:id:hogesuke_1:20171017084757p:plain < よかったら使ってみてね chrome.google.com

Issue, PullRequestもお待ちしております github.com

だいぶ昔に作ったwebサービスのSQLを見直したら5倍以上速くなった

f:id:hogesuke_1:20170703013401p:plain

http://nicotune.net/

お気に入りのニコニコ動画投稿者の新着動画を表示してくれるサービス

チューニングした

最近はNetflixにうつつを抜かして、ニコニコ動画を観なくなっていましたがPUBGプレイ動画にハマってしまいニコ厨化しつつあります。

新着動画の確認にはけっこう昔に作ったwebサービスNicotuneを使っていましたが、表示のあまりの遅さがストレスだったのでチューニングを行いました。

チューニング結果

  • 前) 初期表示 約15秒
  • 後) 初期表示 約3秒

DBにindexを貼っていなかった(!)のでindexを貼った上で、実行に10秒近くかかっていたスロークエリを修正しました。 10秒かかっていたものが数十ミリ秒に改善され、なんとか使用に耐えられるものになりました。

SQLのパフォーマンスチューニングは成果が目に見えるうえ、劇的な効果を得られるので楽しいですね。

GitHubでコードリーディングを快適にするChrome拡張を作った

f:id:hogesuke_1:20170528163451p:plain

作ったもの

chrome.google.com

GitHubでのコードリーディングを快適にするChrome拡張です。

以下の機能があります。

  • githubのコード表示領域の幅を調整できる機能
  • githubのdiff表示においてスペースのみの変更行を表示しないようにする機能(w=1のクエリを付与)

作った動機

ネストが深くなっているようなコードでは1行が長くなりすぎて、表示領域に収まらない場合があります。
そのようなコードをレビューする際に、スクロールで右に左に行ったり来たりするのが非常にストレスでした。

また、ファイルのインデントを修正された場合に大量のdiffの中から本質的なコードの変更を探すのが困難であることも悩みのたねでした。

w=1 のクエリを付与することでスペースのみの変更行を無視してくれる機能が提供されているのですが、あのオプションなんだっけ?と忘れてしまうことが度々あります。
w=1 のオプションは公式のUIにて切り替え可能として欲しいところ)

導入

こちらより追加してください。

github-adjuster - Chrome ウェブストア

使い方

f:id:hogesuke_1:20170528213419p:plain

  • < > をクリックすると100px広がります
  • >< をクリックすると100px狭まります
  • w=1 をクリックするとスペースのみの変更行のdiffが無視されます

リンク

問題がありましたらIssue, PullRequestを頂けると嬉しいです。 github.com

f:id:hogesuke_1:20170528164024p:plain < 意味はないけどゴールデン

なかなか覚えられないUnixコマンドの入力を補助してくれるwebアプリケーションを作った

f:id:hogesuke_1:20170524054012p:plain

Unix Command Generator

成果物

Unix Command Generator
http://command.hogesuke.net/

Unixコマンドの引数やオプションの入力を補助するWebアプリケーションです。
説明を読みながらコマンドの組み立てが可能な動的なリファレンスを目指して作っています。

まだ少量しかコマンドを用意できておらず実用的でないですが、これから少しずつ充実させていく予定です。

機能

  • 引数/オプションの入力
  • 入力内容のコピー
  • コピー履歴の参照

基本、マウスでポチポチとオプションを選び、引数を入力し、それをコピーする、というだけのアプリです。

コピーの履歴をLocalStorageに保存しているので、過去に入力したものを使いまわせるという点で便利かもしれない。

※ ここで入力した内容はどこにも送信されません

作った動機

コマンドの引数、オプションを覚えられず、いつもリファレンスを見ながらフムフムといった感じで入力しているのですが、リファレンスとコンソールを行ったり来たりするのが煩わしく面倒であるため、リファレンス読みながら入力できるものがあったらいいのではという気持ちで作りました。

技術スタック

  • Angular2
  • TypeScript

そろそろAngular2を触っておこうと思い試してみました。

Angular1とは似ても似つかず多少うろたえましたが、Controllerが廃止されコンポーネント指向となったことにより現代的な実装が可能になったように思います。 ただ相変わらず覚えることは多く、公式の日本語ドキュメントもないので英語が苦手な自分には少々敷居の高さを感じました。

TypeScriptについてはいままでちゃんと取り組んでいなかったこともあり、型のありがたさをちゃんと認識していませんでしたが「あ、型ええやん」という具合で一気に虜になりました。 安心安全で心に負荷をかけずにクリーンな心持ちでコーディングに向き合えるのは、とても気持ちが良かったです。

VueとTypeScriptを組み合わせるとVueの手触りがかなり変わってしまう(自分調べ)ので、TypeScriptを使うためにAngular2という選択もありかなという気持ちです。

リポジトリ

PullRequest歓迎しています。

github.com