前回、前々回に引き続き、今回も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からのリクエストを受け取るサーバーが必要
- セキュリティしっかりやってね
ということを覚えて頂ければと思います。
ここまで読んで頂きありがとうございました〜
コメント