前回、前々回に引き続き、今回もSlackについての記事をまとめます。
今回のテーマは Interactive Components という機能を使っていきます。
前回(Slashコマンドの作り方)はこちら↓↓
Interactive Components とは

インタラクティブ(対話的)なコンポーネントのことです(雑
通常、メッセージやSlashコマンドはユーザーがメッセージを投稿してSlackはそれを表示する流れになりますが、Interactive Components は選択肢がSlackから提供され、その選択肢を利用することで決まった処理を行うことが出来ます。




今回作るもの
今回は Interactive Components を使って、特定の投稿の内容とURLをシートに保存する機能を作っていきます。
具体的な内容は以下の動画をご覧ください。
- 投稿の横の「・・・」から『ブックマーク』というアクションを呼び出す
- 投稿をGoogleスプレッドシートに保存
ということをやっています。
作成手順
Interactive Componentsのリクエスト先を用意する
Slashコマンドの実装時と同様にリクエスト先を用意します。
今回も安定の Integomat で簡単に環境を用意しました。




Interactive Componentsを設定する
Slashコマンド同様に https://api.slack.com/apps からInteractive Componentsの設定していきます。
(SlackAppの作り方が分からない方はこちらの記事をどうぞ)








Request URLは先程用意したWebhookのURLを入力してください。
Callback ID はアクションのIDとして使うもので、ユーザーには見えないパラメータになります。
この設定を保存すると、「・・・」の項目の中に「ブックマーク」が作られるようになります。




サーバー側の処理を作る
先程受け取ったデータを確認すると以下のようなデータが送られてきます。




受け取るとわかりますが、Slashコマンドは各パラメータが綺麗に整理されて送られますが、Interactive Componentsの場合はpayloadというKeyにJSON形式で詰め込まれています。
そのため、Slashコマンドとは異なり、JSONをParseする処理が必要です。
今回は「投稿の内容」と「投稿URL」と「登録時刻」を纏めたいので、以下のように構成を組みました。




動作確認
ここまで実装するとブックマーク機能を作ることが出来るようになっていると思います。
注意事項
セキュリティ面を意識した実装を行ってください!(2回目)
基本的に侵害されませんが、Slack側でセキュリティのルールが作られているのでそれに則るようにしましょう。
まとめ
今回はブックマーク機能を作る工程の中で Interactive Components について触れました。
Interactive Components と聞いて「Slackのボタンの事でしょ」と思う方は多いと思います。
ただ、Slackのボタンの実装は結構複雑だったので、最もシンプルに Interactive Components を扱えるテーマで解説記事を作ってみました。
- Interactive Components の設定自体は簡単
- Slackからのリクエストを受け取るサーバーが必要
- セキュリティしっかりやってね
ということを覚えて頂ければと思います。
ここまで読んで頂きありがとうございました〜
コメント