概要

先日「むすめちゃんスタンプス」という LINE スタンプを公開しました

せっかくスタンプを作成したのですが、前回の記事で紹介したように家族の連絡に LINE を使うのをやめてしまいました
これはもったいないと思い Slack でもスタンプが使えないかなと調べたところ微妙なやり方ですができそうだったのでそのやり方を紹介したいと思います

仕組み

やり方は正直たくさんあると思います
ググってみると同じような内容の記事がいろいろと出てくると思います

今回紹介するのはボットを使う方法です
と言っても大元の機能は Slack にある画像の URL を投稿するとその画像を取得してチャネルに流してくれるという機能を使います
察しの言い方はもうだいたい仕組みがわかると思います

今回の構成は以下の通りです

ボットをコマンド形式にする場合 @bot help みたいな感じでボットを呼び出しますが、それだとスタンプを呼ぶのに少し面倒なのである特定の自然言語でコメントするとそのコメントにあった画像のスタンプを投稿する感じにしています
Slack の API はイベント API を使いメッセージの受信のイベントをハンドリングします

ボットは今回 Ruby で作成しました
Slack には Hubot Apps があるので Hubot を使って簡単に作成することもできますが、Ruby が好きなので Ruby で作成しました
あとはそれを Heroku 上で動かします

スタンプ画像をどうやって公開するか

これが一番悩んだかもしれません
Slack に画像の URL を投稿する場合はその URL はパブリックな URL でなければなりません
なので認証がかかっていたり、アクセスできないネットワーク上にある画像では Slack 上に表示することができません

とは言えば自分でサーバを立ててスタンプ画像だけを配信するのも大げさかな、、、
ボットを Heroku 上で動かすのでそのボット上で画像の配信を行ってもよかったのですがボットと画像配信用の Web アプリを同居させるのが面倒くさそうでやめました

で、最終的な結論は imgur にしました
無料で使えて画像への直リンクも取得可能です
また、URL が短いのも魅力でした
Slack に画像の URL をボットが投稿したときに異様に長いとスタンプっぽさがなくなってしまいます

imgur にはアルバムレベルで限定公開できる機能もあるの今回はそれを使って画像をホスティングしてます

ボットを作成する

あとは imgur でホスティングした画像の URL を Slack にポストするボットを作成すれば OK です
今回はコマンドベースではなく自然言語を特定してマッチした場合に imgur の画像 URL を Slack 上にポストします
なので、イベント API を使って message イベントに反応するボットを作成します

一から API をコールしても良いですが Ruby で Slack ボットを作成するための slack-ruby-bot というライブラリがあるのでこれを素直に使います

コードは以下の通りです

vim bot.rb

require 'slack-ruby-bot'
require 'json'
SlackRubyBot::Client.logger.level = Logger::WARN

class Bot
  def initialize
    @answer = JSON.parse(File.read('./answer.json'))
  end
  def call(client, data)
    client.say(text: @answer.keys.join(", "), channel: data.channel) if data.text == "へるぷ"
    client.say(text: @answer[data.text], channel: data.channel) if @answer.has_key?(data.text)
  end
end

server = SlackRubyBot::Server.new(
  token: ENV["TOKEN"],
  hook_handlers: {
    message: Bot.new
  }
)
server.run

非常にシンプルに書けるのがうれしいです
別途 answer.json という自然言語と画像の URL を紐付ける設定ファイルを用意しましょう

vim answer.json

{
  "えっへん": "https://i.imgur.com/I5OjXAn.png"
}

こんな感じです
これをスタンプ 40 個分追加していきます
エイリアス的なの張りたいのであれば同じ URL に対して別のキーワードを紐付けてあげれば OK です
今回はおまけで「へるぷ」という文字列が来たときには json に記載されているキーワードの一覧を表示するようにしてみました

あとは Procfile なり、Dockerfile なりを準備して Heroku への push or container:push をすれば OK です
Procfile の場合は Web アプリではないので push 後に heroku ps:scale bot=1 的なことをしてあげましょう

ボットが起動したら忘れずに環境変数でトークンを設定してあげましょう

heroku config set TOKEN=xoxb-222222222222-xxxxxxxxxxxxxxxxxxxxxxxx

動作確認

Heroku 上にデプロイできたらボットと会話してみましょう
こんな感じで画像 (スタンプ) が表示されれば OK です

問題点

実は今回の方法には大きな欠点があります
それは同じ画像 URL が連投されると Slack さんがその画像を展開してくれないという点です

今回、画像のホスティングに imgur を使ったので URL を変更するのは結構大変なので回避する方法はありません
適当に文字をコメントしてから再度ボットから画像を取得するようにしてください

うーん、やってしまった、、、ごめんなさい

最後に

自作 LINE スタンプを作ったので Slack 上でも使えるようにしてみました
欠点ありですが、個人で使う分にはこのレベルで十分かなと思います
無料ですし簡単な技術しか使っていないので

ついでに宣伝ですが LINE スタンプ出してるのでよろしくお願いします

kakakikikekeのブログ

2017年12月16日土曜日

LINE スタンプを家族 Slack でも使えるようにしたお話

概要

仕組み

スタンプ画像をどうやって公開するか

ボットを作成する

動作確認

問題点

最後に