hubotでslackにスタンプ機能を追加してみた
slack Advent Calendar 2015 の25日目の記事になります。
はじめに
つい最近触れる機会がありちょろちょろっと使っているのですがいいですねslack。
見た目もいいし、アプリとの連携とか、コードスニペットを貼れたりとか。
また僕が特に気に入ってるものとしてemoji機能があります。
感情を一発で表現できるし自分で好きなemojiを登録することもできます。
ただこれもうちょっと大きく表示したいなー、って時がありまして、そうLINEのスタンプの様に。
この辺については去年のアドカレでも触れられているのですがまた別のアプローチで攻めてみたいと思います。
というわけで作った
インストール
$ npm install hubot-slack-stamp $ vim external-scripts.json # 配列内に"hubot-slack-stamp"を追加
必要なもの
- hubot
- Node.js >= v4.0.0 (or --harmony or --harmony-generators flag)
- PhantomJS
- ImageMagick
設定
- HUBOT_SLACK_STAMP_TEAM_NAME - slackのチーム名
- HUBOT_SLACK_STAMP_EMAIL - ログイン用のメールアドレス
- HUBOT_SLACK_STAMP_PASSWORD - ログイン用のパスワード
使ってみよう
チャンネル内のhubotに対してスタンプ名と画像URL、そして分割数を入力することでスタンプが登録されます。
hubot makestamp <name(a-z,0-9,_,-)> <image_url> <split_num(2-10)>
例としてはこんな感じ。
登録したスタンプを表示させる時は
hubot stamp <name(a-z,0-9,_,-)>
とします。
さっき登録したmarieちゃんを呼び出してみましょう。
いい感じですね!!
動作原理
slackのemojiは連続で入力すると特にパディングやマージンもなくピッチリ隙間なく表示されます。
この動きを利用して、
- 指定されたURLの画像を取得
- 画像をタイル上に分割
- 分割した画像を一枚一枚登録
- 綺麗に並べて表示
ということを行っています。
今回の例でいうと実際の文字列は以下のようになっています。
:marie_3x3_1-1::marie_3x3_1-2::marie_3x3_1-3: :marie_3x3_2-1::marie_3x3_2-2::marie_3x3_2-3: :marie_3x3_3-1::marie_3x3_3-2::marie_3x3_3-3:
emojiのカスタマイズページに行くと分割された画像が登録されているのがわかりますね。
苦労した点、課題
slackにはまだemoji登録のAPIがないのでphantomjsを使ってスクレイピングするのがちょっとつらみでした。
はよこいAPI。
参考URL:oti/slack-reaction-decomoji · GitHub
あと課題としては一応スタンプの削除機能も用意しているのですがこれがまた遅い。。
正直5x5枚の削除とかになってくると遅すぎて嫌になってきます。
この辺も整備したかったのですがちょっと時間が足りなかったのでまた公開後に。。
プルリクも絶賛お待ちしております。
おまけ
今回のスクリプトは企業対抗スプラトゥーン大会ことSplathon(スプラソン)の連絡事項をslack上で交わしている際に皆のemojiのやりとりを見て思いつきました。
githubのリポジトリもsplathon名義であげています。
スプラトゥーンも楽しめて開発も楽しめるsplathon、最高すぎるぜ!
第2回(締め切り済み?)、第3回と予定しているようなので気になった方はチェックしてみてください。
最後に
今日は楽しいクリスマス〜♪
ということで12/25になりました。
slack Advent Calendar 2015を書かれた皆さん、お疲れ様でした。
それではHave a nice Xmas!!!!!