Block Kit Builder を使ってインタラクティブな Slack アプリをプロトタイピングしよう

## Block Kit とは？

Slack は昨年 [Block Kit](https://api.slack.com/block-kit) という仕組みをリリースしました。これは既定の JSON の定義に従うことで、デスクトップ・モバイル両方に最適な形で対応した UI を簡単に組み立てることができるものです。チャットのメッセージだけではなく、[モーダル](https://api.slack.com/surfaces/modals)、[Home タブ](https://api.slack.com/surfaces/tabs/using)のようなその他の UI にも同じ JSON を流用することができます。[^1]

[^1]: `"type": "input"` のブロックはモーダルでのみ利用可能です

Block Kit 自体については、まずは[公式ドキュメント（英語）](https://api.slack.com/block-kit)と、こちらのチュートリアルを読むと理解が深まるかと思います。

* 「[Slack API 新機能の Block Kit を使ってより情報的なレストラン検索コマンドを作ろう](https://qiita.com/girlie_mac/items/2254183edf9277455c51)」 by @girlie_mac  [^2]

[^2]: 同じものがこちらにもあります: https://api.slack.com/lang/ja-jp/slash-block-kit

また、昨年夏にいち早く Block Kit を活用されたナビタイムジャパンさんの記事も読んでいただくと、よりイメージが湧くかと思います。

* 「[Block KitでリッチなSlackアプリを作る -乗換経路案内での実例-](https://qiita.com/navitime_tech/items/85de33072486e7d323a5)」 by @navitime_tech

## Block Kit Builder とは？

[Block Kit Builder](https://api.slack.com/tools/block-kit-builder) はブラウザだけで、この Block Kit の表示を確認したり、簡単にプロトタイピングすることができるツールです。

上記の NAVITIME アプリの記事からも実際にどのようにあのユーザーインターフェースが実現されているかを見ることができる Block Kit Builder の URL がリンクされています。そちらにアクセスすると以下のように表示されます。

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/e98aebab-d825-d59a-c2c1-61d9afd9b133.png">

NAVITIME アプリもあくまで標準的なブロックを組み合わせているだけなので、このような UI は必要に応じてラベルなどだけを変えて似た構造を持つだけで誰でも実装することができます。

## とりあえずぽちぽち押してみる

Block Kit Builder を開いたら、とりあえずいろんなところを押してみましょう。何かおかしくなってもそのブラウザタブの中だけの話です！（「Send to Slack」だけは**送り先のワークスペース**に注意してください :pray: ）

左のペインにいろいろと並んでいますが、これらはすべて押せます。押すと Section や Image のブロックがどんどん今表示されているものの末尾に追加されていきます。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/14fcbf5d-038f-d6a6-0570-ebb96b5d81f3.png">

要らないものはマウスホバーするとゴミ箱のアイコンが出てきますので、これを押せば消せます。JSON を編集することに慣れている方はもちろん直接右ペインの JSON を変更しても OK です。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/79be73bb-6739-050b-cf1b-c0d5cc651858.png">

あまりにも追加しすぎたので一旦全部消したいというときは **"blocks"** の配列の要素を手動で全部消すか、右上にある「Clear Code」ボタンを押すと同様に初期化することができます。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/b0986c98-0897-c242-6597-3e026d287342.png">


## テンプレートを使いこなそう

とはいえ、つぎはぎな見た目だけ見ていてもなかなかインスピレーションが湧きにくいかと思います。Block Kit Builder はよくある UI パターンをテンプレートとして提供しています。

中央にある「Select a Template」というボタンを押してみてください。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/dc3f3934-69b4-d4e4-4126-ecc89c9d5fc0.png">

以下のようなメッセージ、モーダル、Home タブそれぞれに最適なテンプレートが複数用意されています。

<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/d9aafd37-182e-835f-55e8-7fa7bbda1f9a.png"><img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/93c8e6fc-fcd0-4e65-bc54-340f7ce365c2.png"><img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/a9fa2ee4-984b-ca6b-c54a-6124f16e3b3d.png">

## 3 パターンのプレビューを理解する

Block Kit Builder の左上のあたりに「Message Preview」がデフォルトで選択されているプルダウンがあるかと思います。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/d71ffef1-8d22-a52f-8dad-d748821b38f7.png">

それぞれ役割が異なります。

|名前|説明|
|---|---|
|Message Preview|チャンネル上のメッセージでの Block Kit の見た目を扱うモード|
|Modal Preview|[モーダル（英語）](https://api.slack.com/surfaces/modals) での Block Kit の見た目を扱うモード|
|App Home Preview|[Home タブ（英語）](https://api.slack.com/surfaces/tabs/using) での Block Kit の見た目を扱うモード|

Modal や App Home の Preview も選択してみてください。今表示されている Block がそれぞれの UI に合った形でそのまま表示されます。

### Message Preview 
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/a4d10a0b-a025-4921-59b5-e76884a463a5.png">
### Modal Preview 
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/bb30d3f6-88a5-2597-4060-c7e770e4e347.png">
### App Home Preview 
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/819c4b67-9efd-93b3-7953-8c771c0a636e.png">

このように目的に合わせて切り替えることができます。モーダルでは Input のブロック（フォーム送信で情報を一括送信するためのブロックの種別です）が使えるようになるため、左側のブロック単位でのサンプル選択にそれらが追加されています。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/eeb595c9-130e-86ca-9c5b-2aa988ca217e.png">

また、さきほど紹介したテンプレートもそれぞれ用意されています。以下に直接アクセスできるリンクを置いておきますので、眺めてみてください。

* [Message Preview のテンプレート一覧（英語）](https://api.slack.com/tools/block-kit-builder?mode=message&template=1)
* [Modal Preview のテンプレート一覧（英語）](https://api.slack.com/tools/block-kit-builder?mode=modal&template=1)
* [App Home Preview のテンプレート一覧（英語）](https://api.slack.com/tools/block-kit-builder?mode=appHome&template=1)

## Send to Slack

右上に「Send to Slack」というボタンがあることに気づかれたかもしれません。これは、Block Kit Builder でつくった見た目をそのまま実際の Slack ワークスペース内で確認できる機能です。

特にデスクトップの Slack だけでなくモバイルの実機で見た目を確認したいときに大変便利です。また、そのブラウザでログイン中の Slack ユーザからのメッセージとして送信されるので、普通の入力フォームではつくることができないリッチなメッセージを送信するツールとしても使えたりします。

Message Preview の状態で、このボタンを押すとワークスペースと送信先のチャンネルを指定するよう促されます。選択して送信すると実際にメッセージとしてワークスペース内に送信されます。注意点として、**ボタンやプルダウンのようなインタラクティブなコンポーネントは表示はされますが、動作はしません**。これらを実際に動作せるためには Slack アプリをつくって Slack API からのリクエストを受け付ける Web のエンドポイントを開発・運用する必要があります。

一方、モーダル・Home タブについてはある程度インタラクティブな表示を確認することが先日できるようになりました。Modal Preview もしくは App Home Preview で「Send to Slack」を押すと [Slack Developer Tools](https://my.slack.com/apps/APXEJ79UY) を使って動作を確認することができます。 

Slack Developer Tools がすでにインストール済の場合 [^3] は以下のように実際に試すことができるようになります。ボタンなどを押すとサーバーにどのようなペイロードが飛ぶかが確認できます。

[^3]: まだワークスペースにインストールされていない場合は一旦許可確認画面に遷移します

モーダルの場合は、メッセージとして投稿されて「Open Modal」というボタンが末尾についていますので、これを押します。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/d1b6b1f0-f2ab-9553-f7b5-bff48ac0a106.png">

Home タブの場合はそのままタブに反映されます。

<img height="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/6cb70bc0-d797-e652-11c6-0890c3f95e65.png">


## 日本語でのサンプル集

最後に私がつくった日本語対応されているサンプルを共有したいと思います。

* [チームランチ招待の作成モーダル](https://api.slack.com/tools/block-kit-builder?mode=modal&view=%7B%22type%22%3A%22modal%22%2C%22title%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%3Awave%3A%20%E3%83%81%E3%83%BC%E3%83%A0%E3%83%A9%E3%83%B3%E3%83%81%E3%81%AE%E6%8B%9B%E5%BE%85%22%2C%22emoji%22%3Atrue%7D%2C%22submit%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E7%A2%BA%E8%AA%8D%E7%94%BB%E9%9D%A2%E3%81%B8%22%2C%22emoji%22%3Atrue%7D%2C%22close%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%BB%E3%83%AB%22%2C%22emoji%22%3Atrue%7D%2C%22blocks%22%3A%5B%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%3Awave%3A%20%E3%83%81%E3%83%BC%E3%83%A0%E3%83%A9%E3%83%B3%E3%83%81%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%A6%E3%80%81%E3%83%81%E3%83%BC%E3%83%A0%E3%83%A1%E3%83%B3%E3%83%90%E3%83%BC%E3%82%92%E6%8B%9B%E5%BE%85%E3%81%97%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%EF%BC%81%5Cn%5Cn%E4%B8%80%E4%BA%BA%201%2C200%20%E5%86%86%E3%81%BE%E3%81%A7%E3%81%AA%E3%82%89%E3%83%81%E3%83%BC%E3%83%A0%E3%83%93%E3%83%AB%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E8%B2%BB%E3%81%A8%E3%81%97%E3%81%A6%E7%B5%8C%E8%B2%BB%E7%94%B3%E8%AB%8B%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%EF%BC%81%20%3Amoneybag%3A%22%2C%22emoji%22%3Atrue%7D%7D%2C%7B%22type%22%3A%22divider%22%7D%2C%7B%22type%22%3A%22input%22%2C%22element%22%3A%7B%22type%22%3A%22datepicker%22%2C%22placeholder%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E9%96%93%E9%81%95%E3%81%88%E3%81%A6%E7%A5%9D%E6%97%A5%20%3Ajp%3A%20%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%EF%BC%81%22%2C%22emoji%22%3Atrue%7D%7D%2C%22label%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E5%80%99%E8%A3%9C%E6%97%A5%22%2C%22emoji%22%3Atrue%7D%7D%2C%7B%22type%22%3A%22input%22%2C%22label%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E5%8F%82%E5%8A%A0%E8%80%85%22%2C%22emoji%22%3Atrue%7D%2C%22element%22%3A%7B%22type%22%3A%22multi_users_select%22%2C%22placeholder%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E3%83%81%E3%83%BC%E3%83%A0%E3%83%A1%E3%83%B3%E3%83%90%E3%83%BC%E5%85%A8%E5%93%A1%E3%82%92%E5%BF%98%E3%82%8C%E3%81%9A%E3%81%AB%20%3Apray%3A%22%2C%22emoji%22%3Atrue%7D%7D%7D%2C%7B%22type%22%3A%22input%22%2C%22label%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%A7%E5%91%BC%E3%81%B3%E3%81%8B%E3%81%91%22%2C%22emoji%22%3Atrue%7D%2C%22optional%22%3Atrue%2C%22element%22%3A%7B%22type%22%3A%22multi_conversations_select%22%2C%22placeholder%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%3Amega%3A%20%E9%80%9A%E7%9F%A5%E3%81%97%E3%81%9F%E3%81%84%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%82%92%E5%85%A8%E3%81%A6%E9%81%B8%E6%8A%9E%EF%BC%81%22%2C%22emoji%22%3Atrue%7D%7D%7D%5D%7D)
* [カレンダーアプリの Home タブ（日本語版）](https://api.slack.com/tools/block-kit-builder?mode=appHome&view=%7B%22type%22%3A%22home%22%2C%22blocks%22%3A%5B%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*%E4%BB%8A%E6%97%A5%E3%81%AE%E4%BA%88%E5%AE%9A*%22%7D%2C%22accessory%22%3A%7B%22type%22%3A%22button%22%2C%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E8%A8%AD%E5%AE%9A%22%2C%22emoji%22%3Atrue%7D%2C%22value%22%3A%22settings%22%7D%7D%2C%7B%22type%22%3A%22actions%22%2C%22elements%22%3A%5B%7B%22type%22%3A%22datepicker%22%2C%22placeholder%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E6%97%A5%E4%BB%98%E3%82%92%E9%81%B8%E6%8A%9E%22%2C%22emoji%22%3Atrue%7D%7D%5D%7D%2C%7B%22type%22%3A%22divider%22%7D%2C%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*%3Cfakelink.toUrl.com%7C%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E5%AE%9A%E4%BE%8B%3E*%5Cn11%3A30%20%E2%80%94%2012%3A30%20%7C%20%E6%9C%AC%E7%A4%BE%2017F%20Kotobuki%20(12)%5Cn%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%3A%20%E2%9C%85%20%E5%8F%82%E5%8A%A0%22%7D%2C%22accessory%22%3A%7B%22type%22%3A%22overflow%22%2C%22options%22%3A%5B%7B%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E8%A9%B3%E7%B4%B0%E3%82%92%E8%A1%A8%E7%A4%BA%22%2C%22emoji%22%3Atrue%7D%2C%22value%22%3A%22view_event_details%22%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E5%8F%82%E5%8A%A0%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%82%92%E5%A4%89%E6%9B%B4%22%2C%22emoji%22%3Atrue%7D%2C%22value%22%3A%22change_response%22%7D%5D%7D%7D%2C%7B%22type%22%3A%22actions%22%2C%22elements%22%3A%5B%7B%22type%22%3A%22button%22%2C%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E3%83%93%E3%83%87%E3%82%AA%E4%BC%9A%E8%AD%B0%E3%81%AB%E5%8F%82%E5%8A%A0%22%2C%22emoji%22%3Atrue%7D%2C%22style%22%3A%22primary%22%2C%22value%22%3A%22join%22%7D%5D%7D%2C%7B%22type%22%3A%22divider%22%7D%2C%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*%3Cfakelink.toUrl.com%7C%E8%A8%AD%E8%A8%88%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E4%BC%9A%E8%AD%B0%3E*%5Cn13%3A30%20%E2%80%94%2014%3A00%20%7C%20%E7%AC%AC%E4%BA%8C%E3%82%AA%E3%83%95%E3%82%A3%E3%82%B9%204F%20Ruby%20(8)%5Cn%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%3A%20%E6%9C%AA%E8%BF%94%E7%AD%94%22%7D%2C%22accessory%22%3A%7B%22type%22%3A%22overflow%22%2C%22options%22%3A%5B%7B%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E8%A9%B3%E7%B4%B0%E3%82%92%E8%A1%A8%E7%A4%BA%22%2C%22emoji%22%3Atrue%7D%2C%22value%22%3A%22view_event_details%22%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E5%8F%82%E5%8A%A0%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%82%92%E5%A4%89%E6%9B%B4%22%2C%22emoji%22%3Atrue%7D%2C%22value%22%3A%22change_response%22%7D%5D%7D%7D%2C%7B%22type%22%3A%22actions%22%2C%22elements%22%3A%5B%7B%22type%22%3A%22static_select%22%2C%22placeholder%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F%22%2C%22emoji%22%3Atrue%7D%2C%22options%22%3A%5B%7B%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E5%8F%82%E5%8A%A0%22%2C%22emoji%22%3Atrue%7D%2C%22value%22%3A%22going%22%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E4%BF%9D%E7%95%99%22%2C%22emoji%22%3Atrue%7D%2C%22value%22%3A%22maybe%22%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E4%B8%8D%E5%8F%82%E5%8A%A0%22%2C%22emoji%22%3Atrue%7D%2C%22value%22%3A%22decline%22%7D%5D%7D%5D%7D%2C%7B%22type%22%3A%22divider%22%7D%2C%7B%22type%22%3A%22context%22%2C%22elements%22%3A%5B%7B%22type%22%3A%22image%22%2C%22image_url%22%3A%22https%3A%2F%2Fapi.slack.com%2Fimg%2Fblocks%2Fbkb_template_images%2Fplaceholder.png%22%2C%22alt_text%22%3A%22placeholder%22%7D%5D%7D%2C%7B%22type%22%3A%22context%22%2C%22elements%22%3A%5B%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%E9%81%8E%E5%8E%BB%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%22%7D%5D%7D%2C%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%81%E3%83%BC%E3%83%A0%20%E6%9C%9D%E9%A3%9F%20MTG*%5Cn8%3A30%20%E2%80%94%209%3A30%20%7C%20%E6%9C%AC%E7%A4%BE%209F%20Kagayaki%20(8)%22%7D%7D%2C%7B%22type%22%3A%22divider%22%7D%2C%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%20w%2F%20%E6%8E%A1%E7%94%A8%E5%86%85%E5%AE%9A%E8%80%85*%5Cn10%3A30%20%E2%80%94%2011%3A00%20%7C%20%E6%9C%AC%E7%A4%BE%2016F%20%E3%82%AB%E3%83%95%E3%82%A7%E3%83%86%E3%83%AA%E3%82%A2%22%7D%7D%5D%7D)
* [タスクの登録モーダル](https://api.slack.com/tools/block-kit-builder?mode=modal&view=%7B%22type%22%3A%22modal%22%2C%22title%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E3%82%BF%E3%82%B9%E3%82%AF%E3%81%AE%E6%96%B0%E8%A6%8F%E7%99%BB%E9%8C%B2%20%3Apencil%3A%22%2C%22emoji%22%3Atrue%7D%2C%22submit%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E9%80%81%E4%BF%A1%22%2C%22emoji%22%3Atrue%7D%2C%22close%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%BB%E3%83%AB%22%2C%22emoji%22%3Atrue%7D%2C%22blocks%22%3A%5B%7B%22type%22%3A%22input%22%2C%22block_id%22%3A%22input-title%22%2C%22element%22%3A%7B%22type%22%3A%22plain_text_input%22%2C%22action_id%22%3A%22input%22%2C%22placeholder%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E4%BB%B6%E5%90%8D%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%22%2C%22emoji%22%3Atrue%7D%7D%2C%22label%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E4%BB%B6%E5%90%8D%22%2C%22emoji%22%3Atrue%7D%2C%22optional%22%3Afalse%7D%2C%7B%22type%22%3A%22input%22%2C%22block_id%22%3A%22input-assignee%22%2C%22element%22%3A%7B%22type%22%3A%22multi_users_select%22%2C%22action_id%22%3A%22input%22%2C%22placeholder%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E6%8B%85%E5%BD%93%E3%81%99%E3%82%8B%E3%83%A6%E3%83%BC%E3%82%B6%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%22%2C%22emoji%22%3Atrue%7D%7D%2C%22label%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E6%8B%85%E5%BD%93%E8%80%85%22%2C%22emoji%22%3Atrue%7D%2C%22optional%22%3Atrue%7D%2C%7B%22type%22%3A%22input%22%2C%22block_id%22%3A%22input-priority%22%2C%22element%22%3A%7B%22type%22%3A%22radio_buttons%22%2C%22action_id%22%3A%22input%22%2C%22initial_option%22%3A%7B%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E4%B8%AD%22%7D%2C%22value%22%3A%22m%22%7D%2C%22options%22%3A%5B%7B%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E9%AB%98%22%7D%2C%22value%22%3A%22h%22%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E4%B8%AD%22%7D%2C%22value%22%3A%22m%22%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E4%BD%8E%22%7D%2C%22value%22%3A%22l%22%7D%5D%7D%2C%22label%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E3%83%97%E3%83%A9%E3%82%A4%E3%82%AA%E3%83%AA%E3%83%86%E3%82%A3%22%2C%22emoji%22%3Atrue%7D%2C%22optional%22%3Afalse%7D%2C%7B%22type%22%3A%22input%22%2C%22block_id%22%3A%22input-deadline%22%2C%22element%22%3A%7B%22type%22%3A%22datepicker%22%2C%22action_id%22%3A%22input%22%2C%22placeholder%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E6%97%A5%E4%BB%98%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%22%2C%22emoji%22%3Atrue%7D%7D%2C%22label%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E6%9C%9F%E9%99%90%22%2C%22emoji%22%3Atrue%7D%2C%22optional%22%3Atrue%7D%2C%7B%22type%22%3A%22input%22%2C%22block_id%22%3A%22input-description%22%2C%22element%22%3A%7B%22type%22%3A%22plain_text_input%22%2C%22action_id%22%3A%22input%22%2C%22multiline%22%3Atrue%2C%22placeholder%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%A0%E3%81%91%E5%85%B7%E4%BD%93%E7%9A%84%E3%81%AB%E8%A8%98%E5%85%A5%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%22%2C%22emoji%22%3Atrue%7D%7D%2C%22label%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E8%A9%B3%E7%B4%B0%22%2C%22emoji%22%3Atrue%7D%2C%22optional%22%3Atrue%7D%5D%7D)
* [旅行日程確認モーダル（日本語版）](https://api.slack.com/tools/block-kit-builder?mode=modal&view=%7B%22type%22%3A%22modal%22%2C%22title%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E3%81%94%E4%BA%88%E7%B4%84%E5%86%85%E5%AE%B9%22%2C%22emoji%22%3Atrue%7D%2C%22submit%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%22%2C%22emoji%22%3Atrue%7D%2C%22close%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22%E9%96%89%E3%81%98%E3%82%8B%22%2C%22emoji%22%3Atrue%7D%2C%22blocks%22%3A%5B%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%3Abulb%3A%20%E3%81%94%E4%BE%9D%E9%A0%BC%E3%81%AE%E6%96%BD%E8%A8%AD%E3%81%AE%E6%89%8B%E9%85%8D%E3%81%8C%E5%AE%8C%E4%BA%86%E3%81%84%E3%81%9F%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%E4%BA%88%E7%B4%84%E5%86%85%E5%AE%B9%E3%81%AE%E3%81%94%E7%A2%BA%E8%AA%8D%E3%82%92%E3%81%8A%E9%A1%98%E3%81%84%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%3Abow%3A%22%7D%7D%2C%7B%22type%22%3A%22divider%22%7D%2C%7B%22type%22%3A%22section%22%2C%22fields%22%3A%5B%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%3Alock_with_ink_pen%3A%20*%E3%81%94%E4%BA%88%E7%B4%84%E8%80%85*%5Cn%E5%B1%B1%E7%94%B0%20%E5%A4%AA%E9%83%8E%22%7D%2C%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%3Acalendar%3A%20*%E6%97%A5%E3%81%AB%E3%81%A1*%5Cn%3Chttps%3A%2F%2Fcalendar.google.com%2Fcalendar%2Fr%7C2020%E5%B9%B410%E6%9C%8822~23%E6%97%A5%3E%22%7D%5D%7D%2C%7B%22type%22%3A%22context%22%2C%22elements%22%3A%5B%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%3Ahouse%3A%20%E5%AE%BF%E6%B3%8A%E5%85%88%22%7D%5D%7D%2C%7B%22type%22%3A%22divider%22%7D%2C%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*%3Chttps%3A%2F%2Fwww.example.com%7C%3Ahouse%3A%20%E6%B2%B3%E5%8F%A3%E6%B9%96%E3%83%97%E3%83%AC%E3%83%9F%E3%82%A2%E3%83%A0%E3%82%B3%E3%83%86%E3%83%BC%E3%82%B8%3E*%5Cn*(%E2%80%BB6%E5%90%8D%E3%81%BE%E3%81%A7%E5%AE%BF%E6%B3%8A%E5%8F%AF)*%20%3Aguitar%3A%20%3Abath%3A%20%3Atv%3A%20%3Abed%3A%20%3Acooking%3A%20%3Atent%3A%5Cn%E9%9F%B3%E6%A5%BD%E3%82%B9%E3%82%BF%E3%82%B8%E3%82%AA%E5%AE%8C%E5%82%99%2F%E6%9C%80%E6%96%B0%E3%83%90%E3%82%B9%E3%83%AB%E3%83%BC%E3%83%A0%2FTV%2F%E6%9A%96%E6%88%BF%E8%A8%AD%E5%82%99%2F%E3%82%AD%E3%83%83%E3%83%81%E3%83%B3%2F%E3%83%91%E3%83%86%E3%82%A3%E3%82%AA%20%E3%83%A9%E3%82%A6%E3%83%B3%E3%82%B8%E3%83%81%E3%82%A7%E3%82%A2%E3%83%BC%2F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%A4%E3%83%BC%E3%82%B0%E3%83%AA%E3%83%AB%22%7D%2C%22accessory%22%3A%7B%22type%22%3A%22image%22%2C%22image_url%22%3A%22https%3A%2F%2Fapi.slack.com%2Fimg%2Fblocks%2Fbkb_template_images%2Fredwood-suite.png%22%2C%22alt_text%22%3A%22Redwood%20Suite%22%7D%7D%2C%7B%22type%22%3A%22context%22%2C%22elements%22%3A%5B%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%3Afork_and_knife%3A%20%E3%81%8A%E9%A3%9F%E4%BA%8B%E3%81%AE%E5%88%B6%E9%99%90%E7%AD%89%22%7D%5D%7D%2C%7B%22type%22%3A%22divider%22%7D%2C%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%3Awhite_check_mark%3A%20*%E3%82%AA%E3%83%BC%E3%83%AB%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%80%E3%83%BC*%5Cn%E8%82%89%E3%83%BB%E9%AD%9A%E3%83%BB%E4%B9%B3%E8%A3%BD%E5%93%81%E3%83%BB%E9%87%8E%E8%8F%9C%E4%BD%95%E3%81%A7%E3%82%82%E5%8F%AF%22%7D%7D%2C%7B%22type%22%3A%22context%22%2C%22elements%22%3A%5B%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%3Awoman-running%3A%20%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%93%E3%83%86%E3%82%A3%22%7D%5D%7D%2C%7B%22type%22%3A%22divider%22%7D%2C%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*%E6%B2%B3%E5%8F%A3%E6%B9%96%E9%81%8A%E8%A6%A7%E8%88%B9%E3%83%84%E3%82%A2%E3%83%BC*%22%7D%2C%22fields%22%3A%5B%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%222020%E5%B9%B410%E6%9C%8822%E6%97%A5%2014%3A00-17%3A00%22%2C%22emoji%22%3Atrue%7D%2C%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%3Chttps%3A%2F%2Fwww.example.com%7C%E6%B2%B3%E5%8F%A3%E6%B9%96%E9%81%8A%E8%A6%A7%E8%88%B9%E3%81%AE%E3%82%8A%E3%81%B0%3E%20%3Chttps%3A%2F%2Fwww.google.com%2Fmaps%7C%3Acar%3A%3E%22%7D%5D%7D%2C%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*%E3%82%B9%E3%83%9A%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%87%E3%82%A3%E3%83%8A%E3%83%BC*%22%7D%2C%22fields%22%3A%5B%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%222020%E5%B9%B410%E6%9C%8822%E6%97%A5%2018%3A00-20%3A30%22%2C%22emoji%22%3Atrue%7D%2C%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%3Chttps%3A%2F%2Fwww.example.com%7C%E3%83%AA%E3%82%B9%E3%83%88%E3%83%A9%E3%83%B3%E3%83%86%20%E3%83%95%E3%82%B8%3E%20%3Chttps%3A%2F%2Ftabelog.com%2F%7C%3Aknife_fork_plate%3A%3E%20%3Chttps%3A%2F%2Fwww.google.com%2Fmaps%7C%3Acar%3A%3E%22%7D%5D%7D%2C%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*%E5%AF%8C%E5%A3%AB%E5%B1%B1%E5%90%88%E5%94%B1%E5%9B%A3%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9*%22%7D%2C%22fields%22%3A%5B%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%222020%E5%B9%B410%E6%9C%8823%E6%97%A5%2010%3A00-10%3A30%22%2C%22emoji%22%3Atrue%7D%2C%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%3Chttps%3A%2F%2Fwww.example.com%7C%E6%B2%B3%E5%8F%A3%E6%B9%96%E5%B8%82%E6%B0%91%E4%BC%9A%E9%A4%A8%3E%20%3Chttps%3A%2F%2Fwww.google.com%2Fmaps%7C%3Acar%3A%3E%22%7D%5D%7D%5D%7D)

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/876a24a3-c9a6-b3f8-63d7-28bf77233b57.png"><img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19163/eaaddc45-247d-d9c0-1626-8436b2a7be8f.png">

「**他の人も使えそうなテンプレートをつくったので共有したい！**」という方は、その URL を編集リクエストで送っていただければ反映いたします。もちろんご自身の記事を書かれて、この記事をリンクしていただく形でも嬉しいです！

ということで、この記事が [Block Kit Builder](https://api.slack.com/tools/block-kit-builder) の理解のお役に立っていれば幸いです。いろいろ遊んでみてください :wave: