この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは。福岡のyoshihitohです。9/26(木)に福岡の Engineer Cafe でSlack APIハンズオンが開催されたので参加してきました！
今回はハンズオンの内容をレポートします。ハンズオンの内容や作業手順はリポジトリにまとめられています。非常に詳細かつ丁寧に説明されているので、今回参加できなかった方もリポジトリ見るだけですすめられるんじゃないかなと思います。
GitHub - seratch/slack-api-workshop-in-fukuoka-2019: Slack API workshop for Japanese developers
タイムテーブル
登壇: Slack Japan 瀬良 和弘さん (@seratch_ja)
| 時間 | タイトル |
|---|---|
| 19:00 - 19:50 | Slack アプリ開発ハンズオン・初級編 |
| 20:50 - 21:00 | 休憩 |
| 20:00 - 20:50 | Slack アプリ開発ハンズオン・中級編 |
| 21:00 | 撤収（ぜひ有志で懇親会へ） |
ハンズオンの概要
実際にSlackの連携アプリを作って試してみるハンズオンでした。SlackのIncoming WebhooksやSlack APIを使うと手軽にアプリを連動させることができます。今回はこれらの機能を実際に試してみました。
今回は初級編・中級編と2段階に分けてのハンズオンでしたが、どちらもサンプルアプリが準備されていて非常にわかりやすかったです。
ハンズオンでは以下4種類のSlackアプリをつくりました。初級編ではSlack APIの説明や環境構築の手順、言語・ライブラリの紹介もありました。
- 初級編
- Incoming Webhooks を試す
- キーワードに反応するボットをつくってみる
- 中級編
- Boltを使ったSlackアプリサーバ
- ランチのお店を選ぶボットをつくってみる
事前準備
ワークスペースをつくる
level-1/00_preparation - GitHub
Slack APIを使うと他のユーザにメンションを飛ばしたりチャンネルを追加・削除できたりします。他の利用者に迷惑がかからないように気をつけながら開発するのはしんどいので、専用のワークスペースを作って開発することをおすすめしているとのことでした。
ワークスペースの作成手順はリポジトリにまとめられています。スクリーンショットもついていて、特にはまることなく設定できました。
初級編
Slack Appをつくる
level-1/00_preparation - GitHub
ワークスペースにSlackアプリを作っていきます。以下の手順で管理画面を操作します。
- Slack Appをつくる
- Botユーザをつくる
- ワークスペースにインストールする
この操作もスクリーンショットつきで説明されています。
Incoming Webhooksをやってみよう
level-1/01_incoming-webhooks - GitHub
Incoming Webhooksを有効にしてcurlコマンドでデータを送り込んでみました。
Windows環境で試す場合、そのままだとcurlコマンドが動作しないかもしれません。curlコマンドを利用できる場合は -H オプションと --data オプションで指定している引用符(')を二重引用符(")に置き換えると動作するようでした。
curl -X POST -H "Content-type: application/json" --data "{\"text\": \"Hello, World!\"}" https://hooks.slack.com/services/...curlコマンドが利用できない場合は代の方法でデータを送り込みます。PowerShell・ブラウザの拡張機能・手順書に記載のある Postman を使うなど、やりやすい方法でアクセスするとよさそうです。
キーワードに反応するボットをつくろう
イベントに応じた反応や処理をする場合は、Real Time Messaging API を利用します。 今回のハンズオンではHelloというキーワードに反応するボットを作ってみました。
主催者の瀬良さんが色々な言語・環境で試せるようにサンプルコードを用意してくれています。
- CoffeeScript (HUBOT)
- Kotlin (jSlack)
- Node.js (Node Slack SDK)
- Python (slackbot / slackclient)
- Ruby (slack-ruby-bot)
他の言語でも動かせるとのことだったので、試しにRustで同じような機能を実装してみました。slack-rs を使うと他の言語・環境と同様な感じで簡単に実装できました。
こんな感じでちゃんと動いてくれました。 hi bot と発言した場合はキーワードを含まないので応答なし、 Hello bot! の場合はキーワードの Hello を含んでるので反応ありといった感じです。
中級編
Slack Appをつくる
level-2/00_slack_app_preparation - GitHub
初級編と同様で、手順に従いSlack Appをつくります。中級編では以下の機能を使ってSlackアプリをつくりました
- Slash Commands
/で始まるコマンド。ゲーム内チャットとかでよくみるやつ- 今回は
/lunchコマンドを作るため有効化する
- Interactive Components
- ボタンや日付選択といったUIコンポーネント
- 今回はボタンを使うため有効化する
ドキュメントに詳細が記載されているので、使う前に一読しておくとよさそうです。
また、今回は持参したPCでサーバを動作させるため ngrok を利用しました。コマンド一発で外部公開できるHTTP/HTTPSのエンドポイントを用意できて非常に便利でした。 Slack CommandsとInteractive Componentsの設定項目 Request URL にはngrokで取得したHTTPSのURLを利用して設定します。
手順の記載にあるように、URLの末尾に /slack/events を追加します。これを忘れるとコマンドやボタンが応答しなくなるので注意してください。
Boltアプリをつくる
level-2/01_bolt_app_preparation - GitHub
SlackアプリのフレームワークBoltを使ってみました。Boltを使うとSlackユーザの認証やHTTPリクエストの正当性の検証など、手間はかかるが必ず必要になるところの面倒を見てくれます。そのため開発者はアプリケーションの開発に注力できるようになっています。
ここでは /lunch コマンドをBoltアプリにリクエストが飛んできて、 app.js に書いたとおりの内容で応答していることが確認できればOKです。
ランチのお店をおすすめするボットをつくる
level-2/02_lunch_recommendation - GitHub
直前に作ったBoltアプリを改良して、ランチのお店をおすすめするボットをつくりました。 /lunch のコマンドと、メッセージ中に表示されるボタンの操作を組み合わせて1つの機能になっていることが確認できました。
さらなる改善 に挙げられている項目に挑戦するとさらに楽しめると思います！
おわりに
今回のハンズオンでSlackアプリの開発手順を知ることができました。
Slash Commandsや特定のキーワードに反応する仕組みを活用すると、いわゆるChatOps的な仕組みを手軽に構築できそうです。 今回のハンズオンで試した機能以外にも便利なものが多くありそうなので、今後も試していきたいと思います！
14
