映画館のイス

映画館のイスが好きです

荒ぶる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枚を切り出して返してくれる機能を持つようです。

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

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

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

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

下のようなコードを Tampermonkey や Greasemonkey などの拡張機能を使って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

GitHubのREADMEによく使われる英単語を集計して効率的にドキュメントを読むのに必要な英語力をつける

はずだったんですが、失敗しました。

はじまり

READMEを読みながらライブラリの使い方を探っていたりすると、意味を知らない英単語に出くわすことがある。
プログラミングに集中するためにも英語はスラスラ読みたい。とくにREADMEぐらいは。

それには英語の学習が必要なんだけど、READMEでよく使われている英単語を調べてそれを上から順に覚えると効率が良いのではと考えました。

作ったもの

github.com

GitHubスター数ランキングの上位N件のリポジトリからREADMEをもってきて、そこで使われている英単語の出現回数を集計してくれるプログラムです。

結果

上位1000リポジトリのREADMEを集計した全結果をGistに貼りました。

スター数ランキングトップ1000リポジトリのREADME頻出英単語 · GitHub

また、結果の雰囲気を見てもらうため頻出英単語トップ20を以下に貼ります。

# 英単語 出現数
1 the 49458
2 to 33463
3 and 27561
4 a 27336
5 for 20314
6 of 18335
7 in 16349
8 is 15101
9 you 13960
10 with 10987
11 on 8299
12 that 7871
13 or 7870
14 your 7669
15 this 7649
16 can 7348
17 it 6998
18 be 6865
19 if 6810
20 an 5943

見てもらうと分かる通り、上位は中学英語で習うような単語やオープンソースのプロダクト名などが占めています。
（あとうまく抽出できていないノイズのようなワード）

頻出する英単語は、さすがにこれは分かるなーというものが多く、当初思い描いたいたような上から順に覚えればハッピーみたいな目論見は外れました。
全体で6万件ちかくある結果の中から自分が知らない単語を探しだして学習するぐらいであれば、ふつうに英単語帳で勉強したほうがよさそうです。

本当はREADME固有の英単語出現傾向みたいなものが分かるかと期待していたんですが、雑な集計方法ではそれもうまく読み取れませんでした。

ただ、gulpよりwebpackのほうが出現回数が多いことや、オープンソースプロダクトとして出現する回数が最も多いのはReact（プロダクトを指して使われていない場合もありそうなので確かではないけど）だということが分かったのは「へぇー」といった感じでした。
英単語というよりもトレンドを把握するツールとして使ったほうが有用かもしれません。

おわりに

ふつうに市販の単語帳で勉強します 😭

Chrome拡張のcssで画像のパスを指定するときの注意点

Chrome拡張のcssで背景画像を指定するような場合に、普通の書き方だと画像を読み込むことができません。

NG

#hoge {
  background: url(img/hoge.png);
}

OK

以下のように chrome-extension://__MSG_@@extension_id__/ を先頭に付与します。

#hoge {
  background: url(chrome-extension://__MSG_@@extension_id__/img/hoge.png);
}

また、 manifest.json に以下のような記述も加えて画像の読み込みを許可してください。

"web_accessible_resources": [
  "img/hoge.png"
]