0. はじめに
ビジネスコミュニケーションツールである Slack では、ユーザーとのインタラクションを可能にする Block Kit という仕組みが提供されています。
Block Kit は、JSON形式で定義されるパーツを組み合わせることで、デバイスに最適なUIを構築することができるフレームワークです。メッセージ送信API を利用することで、ユーザーがアクション可能なメッセージをチャット上に送ることができ、ユーザーの応答 (入力パーツへの入力結果) を任意のサーバーに送信することが可能です。
Microsoftでも Adaptive Card というフレームワークが提供されていますが、同じような目的・思想に基づいています。
メッセージ送信 API を利用するので、Logic Apps や Power Automate からも Slack のチャットに向けて Block Kit メッセージを送ることができます。
今回は Block Kit メッセージを Slack の Incoming Webhook を利用して Power Automate/Logic Appsから送信し、ユーザーの応答を受信する方法を紹介します。
1. Incoming Webhook の設定
Slack では Incoming Webhook を使ってアプリからチャンネルにメッセージを投稿することができます。 この Incoming Webhookを利用するためには、まず https://api.slack.com/ に ご自身の Slack アカウントでサインインし、「Create New App」をクリックします。
アプリをつくるための基本設定を行います。 表示されたダイアログで 「From scratch」を選択し、さらにアプリの名前、利用するワークスペースを選択してください。
名前を付け終わったらアプリに対して機能を有効化していきます。今回でいえばまずは Incoming Webhookです。
赤枠で囲った 「Incoming Webhook」 をクリックし、表示された画面でトグルスイッチをONにします。
画面をスクロールすると最下部に「Add New Webhook to Workspace」というボタンがあるのでクリックしましょう。
追加ボタンを押すと、どこのチャンネルにメッセージ送信をできるようにするかを聞かれます。
(最初は) テストで使う用のチャンネルを指定して「許可する」をクリックします。 するとWebhook 用の URLが表示されます。
あとはここにHTTPリクエスト でメッセージを送るだけで、チャンネルに対してメッセージが送られます。
以上でWebhookの設定は完了です。
2. Block Kit Builder でのメッセージ作成
Slack 上で インタラクティブなUIを手軽に作れる Block Kitには、UIをドラッグ＆ドロップで作れる Block Kit Builder というデザイナーページが用意されています。
Block Kitで作られるUIはJSONで書かれるわけですが、このデザイナーを使えば直接JSONをコネコネすることなく、UIをデザインできるのでとても便利です。
Block Kit Builder は主に3つの要素で構成されています。
- UI 要素の一覧
- UIのプレビュー
- 生成されたJSON
基本は左側の要素一覧から +ボタンでコントロールを追加していって、プレビューで確認し、文言などは右側のJSONをいじるかたちで作成していきます。
今回はユーザー入力を伴うようなメッセージを作りたいので、下図のように構成してみました。
あとでこのまま Power Automate からのメッセージ送信につかうので、「Copy Payload」をクリックしてJSONをコピーしておきましょう。 (念のため以下がコピーしたJSONです）
{ "blocks": [ { "type": "section", "text": { "type": "plain_text", "text": "メッセージを入力してください", "emoji": true } }, { "type": "input", "element": { "type": "plain_text_input", "multiline": true, "action_id": "plain_text_input-action" }, "label": { "type": "plain_text", "text": "夏の思い出", "emoji": true } }, { "type": "actions", "elements": [ { "type": "button", "text": { "type": "plain_text", "text": "送信", "emoji": true }, "value": "click_me_123", "action_id": "actionId-0" } ] } ] }
メッセージをMarkdownで装飾するような場合、あるいはチャンネルにメンションしたい場合には "type": "plain_text" になっている箇所を "type": "mrkdwn" におきかえてください。
メッセージフォーマットの詳細は以下
Formatting text for app surfaces | Slack
これで送信するメッセージは完成です。あとは Power Automate から送信してみましょう。
3. メッセージ送信フロー作成
Block Kit メッセージが出来上がったので、Power Automate を利用して Incoming Webhook に対してメッセージを送信してみます。
今回は簡単のために、ボタンを押したらメッセージ送信を行うだけのシンプルなフローを作成します。
HTTPアクションの設定は以下の通りです。
| 設定項目 | 設定値 |
|---|---|
| Method | POST |
| URI | {Webhook作成時にコピーしたURL} |
| Headers | Content-Type : application/json |
| Body | {Block Kit Builderで作成したJSON} |
これだけでメッセージ送信のフローは完成です。 試しにテストしてみてください。以下のようにアプリからメッセージが送信できていれば成功です！
注意事項
ここではPower AutomateのHTTPアクションを利用しています。これはプレミアム (有償) のアクションであることに注意してください。
4. 応答受信フロー作成
3で送ったメッセージに何か入力して「送信」を押しても、何も起こらないことに気づくと思います。
これはまだメッセージに入力された内容を受信するような設定・用意をしていないためです。
メッセージへの入力を受信して、元のアプリからのBlock Kitメッセージを更新するようなフローを先に作っておきます。
概要は以下のとおり。ここでは「HTTP要求の受信時」のトリガーから始めています。（Block Kitメッセージの入力を送る先を作っている)
ポイントは２つ目のアクション。
Block Kit メッセージで入力し、送信を行うとデータは Content-Type : application/x-www-form-urlencoded で入ってきます。（JSONではない！）
これは厄介ですね。 では入力内容は？というと、 ”$formdata"の中の "value" というところに含まれていることがわかります。
残念ながらこれは文字列として入っているので、これを扱いやすいJSONに変換する必要があります。
そこで２つ目のアクションでは 式を使って
json(triggerBody()?['$formdata']?[0]?['value'])
で入力内容をJSONオブジェクトにしているわけです。これがおそらく最大のポイント！
４つ目のアクションはまたHTTPアクションが入っています。
ここでは Block Kitメッセージに誰かしらが入力して送信を押したら、２回目以降の入力を受け付けないようにしています。
これを実現するために、元のBlock Kit メッセージをプレーンなもので上書きしているわけです。
このあたりは公式レファレンスでは以下にサラっと書かれています。
ポイントは、JSON化しておいたデータに含まれる response_url に対してメッセージを送る。その際"replace_original": "true", というデータをくっつけておく ということです。
こうしておくと、先ほど送ったメッセージに入力＆送信後、下図のようにメッセージが自動で更新されます。
これでデータ受信用のフローは完成です。
フローを保存したら、最後にトリガーに表示されているURLをコピーしておきましょう。
5. 応答の送信先設定
あと一息。受け口になるフローは作ったので、Slack アプリのほうに「Block Kitメッセージに入力があったらここにデータを送信してね」という設定を施します。
先ほど作成した Slack アプリのページで、左側のメニューにある「Interactivity & Shortcuts」という項目をクリックします。
ページ上部に表示されている Interactivity の トグルスイッチを ON にすると URL の入力欄が表示されるので、ここに 先ほど 4 の最後にコピーしたURL をペーストします。
必ず 忘れずに 「Save Changes」してください！
以上で設定は完了です。
メッセージ送信のフローボタンを押して、メッセージに入力、元のメッセージが更新されるところまでは以下のツイートの動画をご覧ください。
SlackにもAdaptive Cardのようなインタラクティブメッセージがあると知ったので、Power Automateで送信とレスポンスの受信とメッセージ更新までやってみた。
— Hiro (@mofumofu_dance) 2021年6月8日
手軽だわー。。
右：SlackにBlock Kitのメッセージ送信
左：Blockの中の入力の値を受け取る＆メッセージの更新 pic.twitter.com/Z0aeNMEkCh
6. まとめ
今回は Slack で提供されているインタラクティブなメッセージフォーマット、Block Kit メッセージを送信し、ユーザーのアクションを受信するところまでを Power Automate を利用して構築してみました。
Block Kit Builder を使えば難解なJSONのスキーマを知らなくても、リッチなメッセージUIを作成でき、Power Automate を使えば送信～受信までの仕組みをノーコードで作成することができます。
今回はメッセージへの入力を捨てていましたが、Automate のフローのなかでどこかのデータソースに保存したり、メールを飛ばしたり、チケットを発行するなど、いろいろと活用が考えられるかと思います。
ぜひお手軽に試してみてください。
