Slack で UI を構築するためのフレームワーク「Block Kit」の基本を確認してみた

2023.05.03

こんにちは、CX事業本部 Delivery部の若槻です。

Slack を利用していると、次のようなボタンが付いたインタラクティブな UI を目にすることがあると思います。(画像は投票アプリの Polly の投稿)

Slack では、このような UI を Block Kit というフレームワークを利用することで簡単に構築することができます。

今回は、この Block Kit の基本的な仕様や使い方について確認してみました。

※本記事では Block Kit の UI のみを扱います。UI の操作により実際にインタラクティブなアクションを実現する方法については扱いません。

Block Kit とは

Block Kit は、Slack の様々な場所で利用できる、インタラクティブな UI を構築するためのフレームワークです。

Slack では Slack App を実装することにより様々な機能をアプリケーションとして追加することができますが、この Slack App を実装する際には、アプリの要件に応じて Message、Modal および App Home などのサーフェスを構築することになります。

  • 投稿(Message)
  • モーダル(Modal)
  • アプリホーム(App Home)

これらサーフェスの構築に共通して利用できるフレームワークが Block Kit です。

Block Kit ではブロックを組み合わせて UI を構築する

Block Kit では、その名の通りブロックを組み合わせることにより UI を構築します。

各ブロックは次のような JSON オブジェクトとして表されます。

{
  "type": "section",
  "text": {
    "type": "mrkdwn",
    "text": "New Paid Time Off request from <example.com|Fred Enriquez>\n\n<https://example.com|View request>"
  }
}

上記のブロックは次のような UI として表示されます。

ブロックのタイプは9つの種類があり type フィールドで指定します。(各種類の詳細はこちらをご覧ください。)

また下記のように複数のブロックを積み重ねて、より複雑な UI を表現することも可能です。

[
	{
		"type": "header",
		"text": {
			"type": "plain_text",
			"text": "New request"
		}
	},
	{
		"type": "section",
		"fields": [
			{
				"type": "mrkdwn",
				"text": "*Type:*\nPaid Time Off"
			},
			{
				"type": "mrkdwn",
				"text": "*Created by:*\n<example.com|Fred Enriquez>"
			}
		]
	},
	{
		"type": "section",
		"fields": [
			{
				"type": "mrkdwn",
				"text": "*When:*\nAug 10 - Aug 13"
			}
		]
	},
	{
		"type": "section",
		"text": {
			"type": "mrkdwn",
			"text": "<https://example.com|View request>"
		}
	}
]

上記のブロックは次のような UI として表示されます。

Block Kit では様々なブロック要素が用意されている

Block Kit では、ユーザーが UI 上でインタラクティブな操作を行うことができる様々なブロック要素(Block elements)が用意されています。

ブロック要素は、JSON の elements フィールドに配列として指定することで利用できます。

{
	"blocks": [
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "This is a section block with a button."
			},
			"accessory": {
				"type": "button",
				"text": {
					"type": "plain_text",
					"text": "Click Me"
				},
				"value": "click_me_123",
				"action_id": "button"
			}
		},
		{
			"type": "actions",
			"block_id": "actionblock789",
			"elements": [
				{
					"type": "button",
					"text": {
						"type": "plain_text",
						"text": "Primary Button"
					},
					"style": "primary",
					"value": "click_me_456"
				},
				{
					"type": "button",
					"text": {
						"type": "plain_text",
						"text": "Link Button"
					},
					"url": "https://api.slack.com/block-kit"
				}
			]
		}
	]
}

ブロック要素は下記が利用可能です。それぞれのフィールド仕様につていはこちらをご覧ください。

  • Button
  • Checkboxes
  • Date picker
  • Datetime picker
  • Email input
  • Image
  • Multi-select menu
  • Number input
  • Overflow menu
  • Plain-text input
  • Radio button group
  • Select menus
  • Time picker
  • URL input
  • Workflow button
    • Link triggers を実行できるボタンを配置する要素。

Block Kit Builder

Block Kit の UI は、公式ツールの Block Kit Builder を利用することにより簡単に構築することができます。

Block Kit Builder の画面は下記のように左からブロック要素一覧、プレビュー、JSON が表示されます。

左ペインのブロック要素一覧でクリックした要素はプレビューの一番下に追加されます。この操作は JSON 側にも反映されます。

そして JSON 側で修正を行うとプレビューにも反映されます。

さらにプレビュー上でブロック要素をドラッグ&ドロップで移動することにより要素の並び替えをすることができます。この操作は JSON 側にも反映されます。

プレビューをサーフェスや端末種類(デスクトップ、モバイル)を選択して変更することもできます。

画面右上の [Send to Slack] をクリックすることにより、Block Kit Builder で表示中の UI のメッセージを指定のチャンネルにテスト送信することができます。

エディターが表示されない場合

ちなみに、Block Kit Builder のページを開くブラウザの横幅が足りないとエディターが表示されないのでご注意ください。

テスター画面から送信してみる

chat.postMessage method テスター画面から、Block Kit Builder で作成した JSON を貼り付けて送信してみます。(アプリは前回のエントリで作成した Slack App を使用しました)

送信が成功すると、アプリから Block Kit Builder で作成した UI が表示されました。

参考

以上