Amazon API GatewayとAWS LambdaでつくるインタラクティブなSlackAppその２（Interactive Components）

昨日はコマンドを作成し、レスポンスによってボタンを表示しましたが、
今回の記事ではSlackAppにおける機能としてInteractive Componentsを利用しています。

また、この記事では以下の要素を利用して、SlackAppを構築するための基本的な部分を実装していますが、
個々の要素の具体的な利用方法や言語の実装についてはあまり触れません。

• Amazon API Gateway
• AWS Lambda (Golang)
• CloudFormation (AWS SAM)

TL;DR

昨日の続き
ボットが送信したボタンのクリックに対して対応した内容にメッセージを書き換える仕組み

以下の動作を参考にしてください。

前提条件

昨日の記事を読んでいる事

Interactive Componentsの有効化

有効化しないで実行するとこのような状態になります

アプリの設定の左メニューから「Interactive Components」を選択し、OFFになっているのをONに変更します。
変更すると以下のような画面になるので、「Request URL」に昨日利用したAPIのURLとその後ろにinteractiveと入力して保存してください。

動作確認

エラーになっているところをもう一度クリックすることで設定のURLにリクエストが飛んでメッセージの書き換えの処理が走りました。

アプリケーション全体の流れ

思ったより内容薄すぎるので、前回のものと合わせアプリケーションの全体の流れを整理しました。

1. SlackのUIからコマンド/chatops channel list送信
2. APIGateway(slash command用)が受けてLambdaに転送
3. LambdaはSlackAPIをコールしてチャネルのリストを取得しインタラクティブ用ボタンのメッセージを作成して返却
4. APIGatewayはその内容をそのまま返却
5. SlackのUI側で返却値を元にメッセージを表示（※成功時は全員に表示するが、エラー時は送信者のみになるよう制御している）
6. ユーザーがUI上に表示されたボタンをクリック
7. APIGateway(interactive components用)が受けてLambdaに転送（送信者やレスポンス送信用のURLなどが渡されている）
8. Lambdaはレスポンス送信用URLに書き換え用メッセージを送信（非同期で３０分以内に5回まで送信可能）し、200 OKと空レスポンスを返却
9. APIGatewayはその内容をそのまま返却（リクエストから3秒以内に返さないとエラーになる）

なお、リクエストをうける側としてSlackからのリクエストが正しいものかどうかを検証する処理が必要です。
詳しくは公式の説明を確認してください

あとがき

サンプル実装においてslash commandはサブコマンド毎に分岐できるようにアプリケーションを作ってますが、interactive componentsはアクション毎の分岐をするように作っていません。
本来はアクション毎の分岐を実装しないといけないのでもし実装を参考にされる場合にはその点をご注意ください。
なお、コマンドとインタラクションの両方ともがアプリケーション内の分岐をしっかり制御しないとif文だらけの実装になりますので、注意してください。