5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-08

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

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

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

TL;DR

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

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

前提条件

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

Interactive Componentsの有効化

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

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

スクリーンショット 2019-12-08 21.49.47.png

動作確認

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

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

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

slackappdiagram.png

  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に書き換え用メッセージを送信(非同期で30分以内に5回まで送信可能)し、200 OKと空レスポンスを返却
  9. APIGatewayはその内容をそのまま返却(リクエストから3秒以内に返さないとエラーになる)

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

あとがき

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

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?