Slack / ブロックを使って複雑なメッセージを作成する
前回まではこちら。
4. Slack / ボタン付きのメッセージを投稿する
3. Slack / Google Cloud Platformと連携してスラッシュコマンドを作成する
2. Slack / Functions FrameworkでサクッとCloud Functionsをカスタマイズ
1. Slack / ローカルの開発環境を整える
前の記事でボタン付きのメッセージを送りましたが、
今回はさらにカスタマイズしてみたいと思います。
ブロック
ボタン付きのメッセージを送ったときは attachments キーを使用していました。実は attachments の他に blocks というキーも使うことができます。 blocks は新しいSlackの機能で、より複雑なメッセージのカスタマイズが可能になるとのこと。
blocks と attachments の違いはこちらに解説があります。
attachments も残るらしいので、既に使用しているメッセージを変更しなくても良いです。
https://api.slack.com/messaging/attachments-to-blocks
ブロックを使用する場合のメッセージですが、
基本的には要素を blocks の配列の中に追加していくだけです。
何がどう入れ子にできるのかは、けっこう厳しく決まっていて、下記のようなヒエラルキーになっています。上から順に大きな入れ物と考えてもらえば良いかと思います。
1. メッセージ
https://api.slack.com/reference/messaging/payload
メッセージそのものの入れ物。
2. レイアウト
https://api.slack.com/reference/messaging/blocks#section
レイアウトで大枠を決めます。
Section / Image / Actions / Context / File といったような種類があり、このレイアウトの中に下で説明するブロックを挿入していきます。
特殊なレイアウトとして Divider があります。これを使うと区切り線を挿入することができます。HTMLでいうと <hr /> ということころですね。
3. ブロック
https://api.slack.com/reference/messaging/block-elements#button
Image / Button / Select Menus / Overflow Menu / Date Picker などがあります。
Section / Actions / Context といったレイアウト要素の中に入れ込むことができます。
Image はレイアウト要素にも同じ名前がありますが違うものです。画像だけを挿入したければレイアウト要素を使いなさいとドキュメントに書いてあります。
この辺りちょっと命名規則がとても分かりにくいですね。。。
4. オブジェクト
https://api.slack.com/reference/messaging/composition-objects
メッセージ構成要素の最小単位に近いけど、オブジェクトの中にオブジェクトが入れ子になるケースもあるみたい。
ざっくり言うとこんな感じですが、あまり直感的ではなさそうです。
カスタマイズの例
例えば、ボタンを押した時に確認ダイアログがでるようにしたい場合、下記のようなJSONを作成します。
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
blocks: {
"type": "actions", // レイアウト
"elements": [
{
"type": "button", // ブロックエレメント
"value": "click_me_123",
"text": { // オブジェクト（ブロックの中身）
"type": "plain_text",
"text": "Button",
"emoji": true
},
"confirm": { // 確認ダイアログ
"title": {
"type": "plain_text",
"text": "Are you sure?",
"emoji": true
},
"text": { // ここにもオブジェクトはネストされる
"type": "plain_text",
"text": "blur blur blur",
"emoji": true
}
}
}
]
}
}
うーんちょっと暗記するのは辛いですね。。
何をどうネストして良いのかとても複雑。
実際に作成するときはこちらのビルダーを使用すると良いと思います。
https://api.slack.com/tools/block-kit-builder
Start with a Template ボタンを押すといろいろなテンプレートが選択できるので、
その中から必要な要素のJSONをコピーしてカスタマイズしていく流れかな、と。
スケジュールを調整するようなメッセージを作ってみましたが、
これくらいになるとJSONの記述はかなり大きくなってしまいます。
以上、ブロックを使ったメッセージのカスタマイズでした。