引き続き、SlackBotの基礎部分の解説を行っていきます。
今回はボタン付きメッセージ（InteractiveMessage）の作り方を解説まとめてみたいと思います。
ボタン付きメッセージは少し難易度が高いので一度クッションとなる記事を前回書きました。
SlackのInteractive Componentsに関してあまり知見がない場合は以下の記事を御覧ください↓↓
今回作るもの
今回はボタン投稿を利用した勤怠確認Botを作ります。
投稿に紐付いたボタンを押すと、サーバーに押したボタンの情報が送られてGoogleスプレッドシートに書き込まれます。
Slackでボタン付きメッセージを作るには
これまでのSlashコマンドやアクションボタンと違い、ボタン付きメッセージはサーバーとの連携が多い分、少し複雑です。
図に書き表すと以下のようなルートでデータをやり取りします。
同時に2つの処理を作る必要があり、戸惑うかもしれませんが前回までの記事に書いたことを連携させれば難しいことではありません。
今回の説明では①ボタンを作る処理、②結果を受け取る処理をそれぞれ分けて解説していきます。
それでは、次の章で実際に作っていきます。
Slackボタンを作る
ボタン付きメッセージを投稿する
まずはボタン付きメッセージを投稿する処理を作っていきます。
メッセージの投稿は chat.postMessage を使います。
これまでもpostMessageを使った通知は作ってきましたが、今回はオプションの1つのblocksを使います
attachmentsを使ったボタン付きメッセージを作る方法もありますが、Blockを使った方が楽で綺麗な物が作れるため今回はblocksを使った実装を行っていきます。
Block Kit Builderを使ってレイアウトを作る
Slackの便利なツールの1つにBlock Kit Builder というものがあります。
画像のように左から使いたい機能を選択すると、リアルタイムでプレビュー画面とコードが生成されます。
コードを書き換えてもプレビューが書き換わるのでここでどんな投稿をしたいかを作ってください。
今回作るものに関しては、こちらに作りました。
投稿処理を作る
Block Kit Builderでレイアウトを作ったら、次は投稿です。
投稿の方法はなんでもいいのですが、今回も Integromat を使って実装していきます。
今回の必須パラメータは token, channel, blocksになります。
本来であれば text が必須パラメータとなりますが、blocksがあるとそちらが優先されて、textは使われないようです。
as_user は任意です。今回は点呼BotというBotユーザーとして投稿をさせたかったので、as_user を true にしています。
これだけでボタン作成は完了です。
blocksの入力で注意すること
一点、失敗しそうな点としてblocksの入力には注意が必要です。
Block Kit Builderで表示されたコードをコピペする際、全てをコピペしてblocksに貼り付けてしまってエラーが出てしまいました。
blocksはパラメータのKeyなのでコピペの範囲は画像のようにblocksの中身だけです。
何も考えていないと失敗するので気をつけましょう〜
ボタンを押した結果を受け取る
Interactive Componentsの設定をする
ボタンを押した結果を受け取るには前回の投稿で解説した、Interactive Componentsを使います。
前回の「ブックマーク」ボタンと今回の「出勤」ボタンは同じ仕組みです。
Interactive Components の使い方は前回記事を読んでください。
今回はUI上からのAction実行はないため、Actionsの設定は不要です。
ただし、同じSlackアプリを使ってしまうと同じRequestURLに結果が飛んでいってしまうため、アプリを作り分けた方が良いでしょう。
Interactive Componentsからのリクエストを処理する
Slackからのリクエストを受け取った後の処理を作っていきます。
ざっくりとこのような感じで作りました。
この辺は前回記事を読んで自由に組み立てて貰えればと思います。
受け取り処理が完了したら完成です！お疲れさまでした！
まとめ
今回はSlackでボタン付きメッセージを投稿する方法を解説しました。
- Block Kit Builderを使ってボタンを作る
- ボタンを押したときの処理をInteractive Componentsで設定する
の2点を行えば作ることが出来ます。
個人的にボタン付きメッセージはSlackBotの機能の中では花形だと思っています。
ボタン付きメッセージを作れるようになれば大体のSlackBotの構成を掴めているようになっているはずです。
また、今回紹介したBlock Kit Builder はボタンだけではなく、セレクタや画像が入ったリッチな投稿を簡単に作れる機能です。
これらを駆使して分かりやすく且つ便利な機能をガンガン作っていって頂ければと思います。
ここまで読んで頂きありがとうございました！
コメント
こちらの記事を参考にSlackでボタン付きメッセージを作ることに成功しました。
ありがとうございます。
ボタンを押したら自分のステータスが変更できるようにするには、どうしたらよろしいでしょうか？
＞ボタンを押したときの処理をInteractive Componentsで設定する
こちらが上手くいかず苦戦しております。
宜しくお願いします。
返信遅れてしまいすみません。
一番簡単なのはintegromatにある「Set a Status」を利用する方法ですかね…
UI上からSlackを選択して、addを行うと認証画面に進むので認証を行ったら添付画像を参考に設定を行うとステータスを変更できるようになります。
あとは記事のようにWebhooksから実行されるように設定して頂けると変更されるかと！