hubotでslackにスタンプ機能を追加してみた

slack Advent Calendar 2015 の25日目の記事になります。

はじめに

つい最近触れる機会がありちょろちょろっと使っているのですがいいですねslack。
見た目もいいし、アプリとの連携とか、コードスニペットを貼れたりとか。
また僕が特に気に入ってるものとしてemoji機能があります。
感情を一発で表現できるし自分で好きなemojiを登録することもできます。

ただこれもうちょっと大きく表示したいなー、って時がありまして、そうLINEのスタンプの様に。
この辺については去年のアドカレでも触れられているのですがまた別のアプローチで攻めてみたいと思います。

というわけで作った

github.com

インストール
$ 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)>

例としてはこんな感じ。

f:id:saihoooooooo:20151225030624p:plain

登録したスタンプを表示させる時は

hubot stamp <name(a-z,0-9,_,-)>

とします。
さっき登録したmarieちゃんを呼び出してみましょう。

f:id:saihoooooooo:20151225030636p:plain

いい感じですね!!

動作原理

slackのemojiは連続で入力すると特にパディングやマージンもなくピッチリ隙間なく表示されます。
この動きを利用して、

  1. 指定されたURLの画像を取得
  2. 画像をタイル上に分割
  3. 分割した画像を一枚一枚登録
  4. 綺麗に並べて表示

ということを行っています。
今回の例でいうと実際の文字列は以下のようになっています。

: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のカスタマイズページに行くと分割された画像が登録されているのがわかりますね。

f:id:saihoooooooo:20151225030640p:plain

イラスト: http://seiga.nicovideo.jp/seiga/im4981228

苦労した点、課題

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!!!!!