Slackの投稿をGoogleスプレッドシートにブックマークする機能を作る!

Slack
この記事は約3分で読めます。

前回、前々回に引き続き、今回もSlackについての記事をまとめます。

今回のテーマは Interactive Components という機能を使っていきます。

前回(Slashコマンドの作り方)はこちら↓↓

Interactive Components とは

インタラクティブ(対話的)なコンポーネントのことです(雑

通常、メッセージやSlashコマンドはユーザーがメッセージを投稿してSlackはそれを表示する流れになりますが、Interactive Components は選択肢がSlackから提供され、その選択肢を利用することで決まった処理を行うことが出来ます。

今回作るもの

今回は Interactive Components を使って、特定の投稿の内容とURLをシートに保存する機能を作っていきます。

具体的な内容は以下の動画をご覧ください。

  1. 投稿の横の「・・・」から『ブックマーク』というアクションを呼び出す
  2. 投稿を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からのリクエストを受け取るサーバーが必要
  • セキュリティしっかりやってね

ということを覚えて頂ければと思います。

ここまで読んで頂きありがとうございました〜

コメント

タイトルとURLをコピーしました