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

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

追記

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

アホやな…

Emoji

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

荒ぶるEmojiたち

アニメーションするEmojiです。

荒ぶるEmoji

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

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

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

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

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

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

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

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

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

ステータスの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が止まって見えるようになったら成功です 🎉
(止まらない場合は、別のチャンネルを表示して戻ってみてください)

Slackに静寂が訪れた

おわりに

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