こんにちは。
iPhoneからSlackに簡単にメッセージを飛ばせるようにしました。
デスクトップのショートカットから定型文を投稿して、付近の天気図をもらっています。
目次
書くまでの経緯
Slack便利ですね。
@naname さんに「ヘッドレスブラウザーで特定のURLを切り取ってSlackに画像を投稿する」ですとか、「Googleの画像検索結果を画像として投稿する」というモジュールを作ってもらいました。
@sak39 くんには「サーバを監視して落ちていたら通知する」モジュールを作ってもらいました。
すべてhubotです。ありがとうございます！
さてそんなSlackなんですが、「近辺の降水量天気図を見たいなぁ」という時には、「webshot 会津天気」みたいな発言をすると天気図を見ることができます。
アプリを使っても良いんですけれど、Slackに投げることで「あ、近くで大雨だね」とかそういう認識ができるんですね。
ちなみに住んでいる地域が内陸部のためか天気予報が当たりにくいんですね。「現在の降水確率が100%」なんてこともあります。
そういうときはつい「ちゃんと当ててくれよー」って思っちゃうんですが、天気図を見れば自分で雨雲の動きを判断できるので納得できますよね。
ただこの「画像をbotに投稿させる」というトリガについては、「特定のチャンネルで定型文を発言する」ということが必要です。
iPhoneからだと日本語入力の履歴から行えばある程度は楽だったんですが、やっぱりちょっと大変で、IFTTTを使ってボタン化していました。
こんな感じで動きます。
以前は「DO BUTTON」という名前だったかと思いますが、今は「Widget」という名前になっています。
これはこれで便利なのですが、
- アプリを開いて
- 送信を完了させる
という２ステップになっていたんですね。ちょっと分かりにくいんです。
またIFTTTを使っているとインテグレーションを一つ使うで、フリープランの制限を圧迫していました。
今のSlackでは１０個までのインテグレーションを使えるのですが、他のSlack Appも使ってると上限に達しちゃうんですよね。
またIFTTTに限らず「他のユーザーも使いたい」となった場合、１ユーザー１インテグレーションとなってしまうので、やはりすぐに上限に達してしまいます。
そこで「Incoming Webhook」を使って一元化できないかな、ということでまとめてみました。
Slack アプリケーションではアクセストークンを生成してアプリケーションに割り当て、それぞれのアプリケーションで読み書きをさせることができます。
Hubotのようにメッセージを読み取って応答することもできます。
Incoming Webhook
それに対して「Incoming Webhook」はアプリケーションと違い、簡単なメッセージング機能しかありません。
基本的な使い方はこんな感じです。
$ curl -X POST --data-urlencode 'payload={"channel": "#random_l2tp", "username": "webhookbot", "text": "This is posted to #general and comes from a bot named webhookbot.", "icon_emoji": ":ghost:"}' https://hooks.slack.com/services/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
リクエストはPOSTにして、bodyにJSONなpayloadという文字列を作って投げます。
そうするとチャンネルにメッセージが飛びます。
ウェブフックを作成する時にチャンネルやアイコンを指定しますが、payloadを見ると分かるようにリクエスト時に変更することが可能です。
そのため一つのウェブフックで名前やアイコンを変えたbot（っぽいメッセージング）が作れます。
これをつかってiPhoneで投稿させるようにします。
Incoming Webhookは次のURLから取得できます。
取得方法のページも色々とありますね。
「デスクトップに追加」
iPhoneではSafariで開いたURLを「デスクトップに追加」させることができます。
いわば「ブックマークを開くショートカット」なんですが、アプリのような感じで振る舞うので便利です。
これを使ってメッセージの投稿を簡単に行わせます。
コード
SlackのIncoming WebhookはPOSTしか受け付けません。
ですがデスクトップに追加と組み合わせてSafariなどのブラウザで開く場合にはGETしか送ることができません。
なのでPHPを使って適当なサーバにコード置いて、GETからPOSTにメッセージを変えてやります。
コードはこんな感じです。
$hoge = 'hoge';
このコードをどこかの公開しているサーバに置いてブラウザでアクセスします。
アクセスするときにはGETのクエリストリングを与えてやります。
クエリストリングは下記のものが参照されます。
| キー名 | 値 |
|---|---|
| text | メッセージ本文 |
| channel | 投稿先チャンネル名 |
| username | 投稿者名 |
| icon_emoji | 投稿者アイコン |
| secret（任意） | 投稿用パスワード。コード側に設定。デフォルトは some-password-here |
例えばこういう感じのURLにします。
https://www.l2tp.org/slack/post-slack-message.php?text=hola!&channel=#random
このURLにブラウザからアクセスするとSlackに投稿されます。
URLの調整はパソコンから、確認できたらそのURLをiPhoneのSafariで開けることを確認しておきます。
またメッセージなどはURLエンコードが必要な場合があります。
チャンネル名のシャープ（#）とかアットマーク（@）、日本語や記号、特にイコール、ハテナなどは注意が必要かもしれません。
意外にも（？）iPhoneのSafariだとそのまま送れました。
送信すると結果画面が出てきます。
ブックマークの登録とデスクトップへの登録
定型文を決めてURLの投稿ができるようになったら「デスクトップに登録」を行っておきます。
これで一発で定型文を投稿できます！
感想
「iPhoneからちょっとSlackに投稿するだけ…」のハズがなんだか大掛かりになってしまいました。他に良い方法もありそうですが、知っている人がいたら教えてください。
というかSlackに投げるだけのライブラリってありそうですよね。
あとアイコンがダサいですよね。
恐らくですが「デスクトップに追加」の場合のURL（？）にMIMEエンコードされたアイコンを指定できるみたいで、そうすれば良いかもですね。
若しくはスクショ画面とかFaviconになるみたいなので、そのあたりを整備すると良さそうです。
注意
コードを見るとわかりますがトークンが書かれたファイルを外部に置きます。
トークンの漏れやGETで受け付けるURLの漏れには気をつけてください。スパムを食らう可能性があります。