Slack Block Kit の新ブロックを試してみた【データ編】
2026 年に入ってから、Slack の Block Kit に新しいブロックが続々と追加されています。本シリーズでは、これらの新ブロックを実際に試しながら紹介していきます。
- 第 1 弾: データ編（本記事）
- 第 2 弾: 汎用表示編
- 第 3 弾: エージェント編
- 第 4 弾: ストリーミング編
- 第 5 弾: 検証・CI 編
今回は第 1 弾として、data table block と data visualization block を使い、集計結果を表とグラフに変換してチャンネルに投稿してみます。
なお、Block Kit の基本については以下の記事をご参照ください。
2 つのブロックの概要
data table block は、2026 年 5 月 20 日に追加されたページネーション・ソート・フィルタに対応する表ブロックです[1]。
これまで Slack に表を出すには、mrkdwn のコードブロックで桁を手作業で揃えるか、table block[^2] を使う方法がありました。しかし、これらはどちらもインタラクティブな操作ができませんでした。一方 data table block なら、難しい設定なしに列のソートやページネーションが行えます。
また、data visualization block は、2026 年 6 月 16 日に追加された pie / bar / area / line の 4 種類に対応するグラフブロックです[2]。
グラフはこれまで、matplotlib などでアプリ側が画像を生成し、files.upload 系の API でアップロードするのが定石でした。一方 data visualization block では、JSON を chat.postMessage の blocks に渡すだけでよく、描画は Slack クライアント側が行います。つまり画像生成のコードもアップロードの往復も不要になります。これは楽ですね！
data table block の仕様[3]
| 項目 | 内容 |
|---|---|
| 行数 | ヘッダー込みで最小 2、最大 201 |
| 列数 | 最小 1、最大 20。全行の要素数を揃える必要あり |
| セルの型 | rich_text / raw_text / raw_number の 3 種類 |
| ヘッダー | 1 行目がヘッダー。ヘッダーセルに rich_text は使用不可 |
caption |
必須。HTML の caption 要素の値として使われる |
page_size |
1〜100。省略時は 5 |
| 文字数上限 | 1 テーブルおよび 1 メッセージ全体で、全セル合計 20,000 文字。超える場合はメッセージを分割 |
なお、ソートはデフォルトでアルファベット順ですが、列のセルがすべて raw_number の場合だけ数値ソートになります。集計結果の数値列は、文字列ではなく raw_number で送るのがポイントです。
data visualization block の仕様[4]
| 項目 | 内容 |
|---|---|
| チャートの種類 | pie / bar / area / line の 4 種類 |
| ブロック数 | 1 メッセージに 2 ブロックまで |
title |
必須。最大 50 文字 |
| pie | segment は最小 1、最大 12。value は 0 より大きい数値で、全 segment の合計に対する割合として描画される |
| bar / area / line | series は最小 1、最大 12 で、axis_config が必須。データ点は 1 series あたり最大 20 |
| ラベルの文字数 | segment の label、series の name、データ点の label、axis_config.categories の各要素は最大 20 文字。x_label と y_label は最大 50 文字 |
実行時の検証ルールとして、全データ点の label が axis_config.categories のいずれかと一致すること、series はカテゴリに対応するデータ点を省略できないこと、series 名が重複しないことが定められています。
やってみた
直近 5 週間の問い合わせ件数を Web とアプリの流入別に集計した想定のデータを使います。今回はアプリを作らず、Block Kit Builder に JSON を貼り付けて検証します。
なお、Block Kit Builder の詳細については下記の記事をご参照ください。
data table block
{
"blocks": [
{
"type": "data_table",
"caption": "週次問い合わせ件数",
"page_size": 3,
"rows": [
[
{ "type": "raw_text", "text": "週" },
{ "type": "raw_text", "text": "Web" },
{ "type": "raw_text", "text": "アプリ" }
],
[
{ "type": "raw_text", "text": "6/29 週" },
{ "type": "raw_number", "value": 42, "text": "42" },
{ "type": "raw_number", "value": 31, "text": "31" }
],
[
{ "type": "raw_text", "text": "7/6 週" },
{ "type": "raw_number", "value": 55, "text": "55" },
{ "type": "raw_number", "value": 28, "text": "28" }
],
[
{ "type": "raw_text", "text": "7/13 週" },
{ "type": "raw_number", "value": 38, "text": "38" },
{ "type": "raw_number", "value": 45, "text": "45" }
],
[
{ "type": "raw_text", "text": "7/20 週" },
{ "type": "raw_number", "value": 61, "text": "61" },
{ "type": "raw_number", "value": 39, "text": "39" }
],
[
{ "type": "raw_text", "text": "7/27 週" },
{ "type": "raw_number", "value": 47, "text": "47" },
{ "type": "raw_number", "value": 52, "text": "52" }
]
]
}
]
}
表の列ヘッダーをクリックするとソートできます。また、page_size を 3 にしたので、5 行のデータが 2 ページに分かれてページ送りの UI が表示されます。省略時は 5 行ごとになります。
data visualization block
同じデータを折れ線グラフにします。
{
"blocks": [
{
"type": "data_visualization",
"title": "問い合わせ件数の推移",
"chart": {
"type": "line",
"series": [
{
"name": "Web",
"data": [
{ "label": "6/29 週", "value": 42 },
{ "label": "7/6 週", "value": 55 },
{ "label": "7/13 週", "value": 38 },
{ "label": "7/20 週", "value": 61 },
{ "label": "7/27 週", "value": 47 }
]
},
{
"name": "アプリ",
"data": [
{ "label": "6/29 週", "value": 31 },
{ "label": "7/6 週", "value": 28 },
{ "label": "7/13 週", "value": 45 },
{ "label": "7/20 週", "value": 39 },
{ "label": "7/27 週", "value": 52 }
]
}
],
"axis_config": {
"categories": ["6/29 週", "7/6 週", "7/13 週", "7/20 週", "7/27 週"],
"x_label": "週",
"y_label": "件数"
}
}
}
]
}
グラフにマウスオーバーすると、その週の件数がツールチップで表示されます。
既存の table block との違い
概要で触れた table block と、スキーマ上の違いを整理します。
| 項目 | table block | data table block |
|---|---|---|
| ソート | なし | あり |
| ページネーション | なし | あり。page_size で行数指定 |
| 列の書式指定 | column_settings で揃えと折り返しを指定 |
なし |
| 文字数上限 | 10,000 文字 | 20,000 文字 |
caption |
なし | 必須 |
data table block には column_settings がないため、右揃えなどの列書式が必要な場合は table block を使うことになります。
まとめ
data table block と data visualization block を活用すると、集計結果を JSON に組み立てるだけで、ソート可能な表とグラフを簡単に Slack に表示できます。
表やグラフを活用している定期レポートアプリ等があれば、置き換えを検討してみてはいかがでしょうか？
次回の第 2 弾では汎用表示系ブロックを試します。お楽しみに！
