こんにちは。デザイングループの_ringogirlです。
唐突ですが、先週めでたく最終回を迎えた『けものフレンズ』というアニメはご存知でしょうか。
上記の様なブログも書かれていて、かなり流行っていましたね。
僕自身もハマってしまい、11話〜最終回のアツい展開に深夜に1人で涙してしまいました。
けものフレンズの emoji を使いたい
弊社では社内でのチャットに Slack を使っているのですが、Slackには独自のemojiを登録できる機能があります。今さら最終回を迎えたアニメの話で恐縮ですが、『けものフレンズ』の emoji を登録したくなり、素材を探していたところ以下のようなものが見つかりました。
@Kiguchi1902さんありがとうございます。
emoji が小さい
emoji を登録はしたものの、実際に使ってみるとサイズの問題でセリフが小さく、「すごーい!」という感情を上手く表現できないというもどかしさがありました。
Slack の custom emoji は最大 128x128
でアップロードできますが、Developer Toolsで覗いてみると、サイズが縮められているようだったので、どうにか元の画像を表示できる方法を探していたところ、APIで画像のURLを取得できることがわかりました。
このURLを attachments
に設定することができれば、emojiをデカくするということが可能では、と思い実装をはじめました。
emoji をデカくする
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ではデザインとフロントエンドがやりたいフレンズを募集中です!よろしくねー!