Slackのemojiをデカくする

こんにちは。デザイングループの_ringogirlです。

唐突ですが、先週めでたく最終回を迎えた『けものフレンズ』というアニメはご存知でしょうか。

• 技術フェローが「すごーい」「そうなんだー」「たのしー」しか言わなくなった件
• プログラマーの三大美徳 その２

上記の様なブログも書かれていて、かなり流行っていましたね。
僕自身もハマってしまい、11話〜最終回のアツい展開に深夜に1人で涙してしまいました。

けものフレンズの emoji を使いたい

弊社では社内でのチャットに Slack を使っているのですが、Slackには独自のemojiを登録できる機能があります。今さら最終回を迎えたアニメの話で恐縮ですが、『けものフレンズ』の emoji を登録したくなり、素材を探していたところ以下のようなものが見つかりました。

けものフレンズアイコンまとめ【フリーアイコン】

@Kiguchi1902さんありがとうございます。

emoji が小さい

emoji を登録はしたものの、実際に使ってみるとサイズの問題でセリフが小さく、「すごーい！」という感情を上手く表現できないというもどかしさがありました。

Slack の custom emoji は最大 128x128 でアップロードできますが、Developer Toolsで覗いてみると、サイズが縮められているようだったので、どうにか元の画像を表示できる方法を探していたところ、APIで画像のURLを取得できることがわかりました。

Slack API | emoji.list method

このURLã‚’ attachments に設定することができれば、emojiをデカくするということが可能では、と思い実装をはじめました。

emoji をデカくする

実際に作ったものはGitHubに置いています。

Slash commandsを使う

Slash Commandsを使って以下のコマンドを発行することで、emojiを大きくするようにしました

/stamp :custom_emoji:

Slash commandsを入力すると、Outgoing Webhooksの要領で、 コマンド（/stamp） と テキスト（:custom_emoji:） を受け取ることができます。それらを受け取った後で、emoji.list から該当する custom_emoji のURLを取得し、attachmentsに画像を埋め込んでメッセージを返すようにしています。

ユーザーの認証を行う

Slash Commandsだけでは不十分で、Private GroupやDirect Messagesではデカい emoji を投稿できる権限が無いので、ユーザー毎に認証してtokenを保存するようにしています。

SlackでAppを作り適切なScopeを与えて、チームにインストールしています。

たーのしー！

これで custom emoji をデカくする機能の実装が完了しました。すごいことがあったら「すごーい！」と感情が表現できるようになりました！

その他のcustom emojiも使える

emoji.listというAPIを使っているので、custom emojiであれば全て元サイズで表示することができます。

気をつけていること

この機能でデカいemojiが氾濫すると、本来のコミュニケーションが取れなくなりチーム内でストレスが溜まってしまう可能性もあるので、用法用量を守るようにしています。
弊社内のSlackではたまに使用される程度で、支障が出るほどではありませんでした。

まとめ

『けものフレンズ』のアイコンを使いたいという思いがことの始まりだったのですが、custom emoji全てを扱うことができるので、Slackでのコミュニケーションが賑やかになりました。

また、今回はじめて hapi という Node.js のWebフレームワークを使ったのですが、hapijs/joi というバリデーションのライブラリや認証周りがプラグインとして準備されていて便利でした。

デザイナー採用

株式会社groovesではデザインとフロントエンドがやりたいフレンズを募集中です！よろしくねー！

jobs.forkwell.com

www.wantedly.com

www.moreworks.jp