「目が炎」のSlackカスタム絵文字を作る

この記事は、[Business Bank Group Developers Advent Calendar](https://qiita.com/advent-calendar/2018/bbg_developers) 23日目の記事です。

# [🤩](https://emojipedia.org/grinning-face-with-star-eyes/)

私の職場のSlackでのチャットでは、いろんな絵文字が飛び交っています。
[🤩](https://emojipedia.org/grinning-face-with-star-eyes/)(目が星、star-struck)が私の好みでよく使っているのですが、ある同僚から目が炎のやる気があるカスタム絵文字が欲しいと言われたので、作ってみました。

# [🔥](https://emojipedia.org/fire/)

まずは準備としてSlackをブラウザ(Chrome)で開きます。
Slackアプリで投稿についている日時を右クリックして、「Open Link in New Window」をクリックします。
（ちなみに私は[Sblack](https://www.sblack.online/)というアプリを使っているので、Slackアプリとは少し違うかもしれません。）
![OpenLinkInNewWindow.png](https://qiita-image-store.s3.amazonaws.com/0/62293/7511317c-91a0-41a6-d06f-c61981753e28.png)

ブラウザが開いて、「Slack.appを開きますか？」と聞かれます。ブラウザで開きたいので「キャンセル」を選択してください。
![スクリーンショット 2018-12-22 23.56.05.png](https://qiita-image-store.s3.amazonaws.com/0/62293/d627870b-1d9f-d2a5-2d5c-c057cf5c1d3c.png)

「open this link in your browser」というリンクをクリックします。
![スクリーンショット 2018-12-22 23.56.17.png](https://qiita-image-store.s3.amazonaws.com/0/62293/c581c88e-477d-e327-bc63-cfc83a4ac434.png)

これでブラウザでSlackが表示されます。

# [😀](https://emojipedia.org/grinning-face/)

ブラウザでSlackが開いたら、その中の絵文字を右クリックして「検証」を選択します。絵文字のbackgroundに設定されている画像のURLがわかるので、それを開いてください。
![検証.png](https://qiita-image-store.s3.amazonaws.com/0/62293/c49e9f31-dabe-63c1-ac59-4ff6ab38fe88.png)

実は、絵文字は１つの画像にすべて載っているのですね！
![スクリーンショット 2018-12-22 23.49.08.png](https://qiita-image-store.s3.amazonaws.com/0/62293/860d95f6-e4dc-406c-4a94-ad074e8b9485.png)

ダウンロードして、[GIMP](https://www.gimp.org/)などの画像編集ソフトで開きます。
![スクリーンショット 2018-12-21 19.08.12.png](https://qiita-image-store.s3.amazonaws.com/0/62293/68bdfb99-619f-96e6-b4f3-a1eab7adb1ec.png)

# [😍](https://emojipedia.org/smiling-face-with-heart-shaped-eyes/)

加工のベースは、[😀](https://emojipedia.org/grinning-face/)(あはは、grinning)です。[🤩](https://emojipedia.org/grinning-face-with-star-eyes/)(目が星、star-struck)と近い絵文字ですが、目が小さいから加工のベースに向いています。たくさん並んでいる絵文字からがんばって探し出します。
![スクリーンショット 2018-12-21 19.12.06.png](https://qiita-image-store.s3.amazonaws.com/0/62293/ce0a2678-4960-9671-1b0d-92c3aa3dc991.png)

64x64の画像として切り出します。
![スクリーンショット 2018-12-21 19.13.11.png](https://qiita-image-store.s3.amazonaws.com/0/62293/df8e1da8-8e32-90a7-de2d-41340d750fd4.png)

[🔥](https://emojipedia.org/fire/)(火、fire)も見つけて、64x64の画像に切り出しておきます。
![スクリーンショット 2018-12-22 23.40.25.png](https://qiita-image-store.s3.amazonaws.com/0/62293/9c192422-669e-fd91-96d2-c25148893b3c.png)

[🔥](https://emojipedia.org/fire/)(火、fire)は半分の大きさに縮小して、2個にして、目の当たりに配置します。
![スクリーンショット 2018-12-23 1.21.42.png](https://qiita-image-store.s3.amazonaws.com/0/62293/2e8416ca-9a07-1a5a-8235-e9c2e99f01dd.png)

pngファイルとしてエクスポートします。
![fire_struck.png](https://qiita-image-store.s3.amazonaws.com/0/62293/1f9f8ab2-6264-2a25-d3bc-4807cb58b7b6.png)

出来上がってみると、当初の予定は「目が炎のやる気があるカスタム絵文字」でしたが、口が笑っているので「火が大好きな人」みたいに見えちゃいますね。。。まあ、いいことにしましょう。

# [🤪](https://emojipedia.org/grinning-face-with-one-large-and-one-small-eye/)

あとはSlackのカスタム絵文字として登録するだけです。
[「Customize Your Workspace」](https://allin.slack.com/customize/emoji)を開いて作ったファイルを登録します。
![スクリーンショット 2018-12-23 1.28.38.png](https://qiita-image-store.s3.amazonaws.com/0/62293/eaf92ca1-1e0c-6072-c6fe-36d46bc98de4.png)

思う存分、「目が炎」の絵文字を送りあってください！

# [🎄](https://emojipedia.org/christmas-tree/)

明日は @tronperidot の「Angular4.4 -> 6.0 にした話（後編）」です！
なぜか「Angular4.4 -> 6.0 にした話（前編）」と「Angular4.4 -> 6.0 にした話（後編）」にサンドイッチされた、絵文字の作り方のエントリーでした。