Block Kitを使用したSlackメッセージ作成&送信 (必要最低限)

2019年にSlackが導入したBlock Kitを利用したモダンなSlackメッセージ作成＆送信を行うための必要最低限の雛形および手順をまとめてます。

こんな人向けです。

- Slackメッセージを作成したことはないけど、これから始めるならBlock Kitを活用してメッセージを作成＆送信したい。
    - より構造的にメッセージを構築できる。
    - Block Kit Builderである程度はGUI上でデザインできる。
- メッセージの左側にカラー縦棒も付けたい。
- 新旧メッセージ仕様の違い、Block Kitの詳細なレイアウト仕様などは後回しにしたい。
    - まずは動いてくれる最低限の雛形＆手順が欲しい。

|![slack-message.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174502/934302c8-09fb-0fc3-2467-5dee3b4bb401.png) |
| ---- |

> NOTE: 
> 普段Slack APIやメッセージ作成をしない人にとっては、Block KitのJSONデータ、送信メッセージ自体のJSONデータなどがゴチャゴチャになりますね。ドキュメント上ではこれらのJSONデータが混在して登場するため、blocksとattachmentsの連携や動作確認は特に分かりづらかったです。

# 雛形

以下にBlock Kitを使うことを想定した必要最低限の雛形を示します。

- `text`: `blocks`の前に表示されるメッセージを設定します。
    - `text`がない場合はSlackメッセージのポップアップ通知に`[no preview available]`と表示されるため、これを回避するために`text`を指定する必要がある。
    - `text`の値が空文字の場合は未指定と同じ扱いになるため、ポップアップ通知に`[no preview available]`と表示される。
- `blocks`: Block Kit Builderで作成したJSON配列を指定します。(雛形で空配列となってる箇所を丸ごと置き換えるイメージ)
  - `attachments`内の`blocks`のメッセージは左側カラー縦棒がつく。
  - `attachments`外の`blocks`のメッセージは左側カラー縦棒がつかない。
- `color`: メッセージ左側カラー縦棒の色を指定します。雛形では`#00FF00`を指定しているので黄緑色になります。

```json
{
  "text": "",
  "blocks": [],
  "attachments": [
    {
      "color": "#00FF00",
      "blocks": []
    }
  ]
}
```


# メッセージ作成から送信までの流れ

ここでは以下のメッセージを作成して送信する流れを記載します。

- 冒頭のメッセージをプレビュー表示に含めたい。
- 後続メッセージの左側にはカラー縦棒を付けたい。

## 1. Block Kit BuilderでJSONデータ作成

Block Kit Builderを利用して雛形の`blocks`に指定するJSONデータを作成します。GUI画面からインタラクティブにJSONデータを作成することができます。

https://api.slack.com/tools/block-kit-builder

以下は実際にBlock Kit Builderで作成したJSONデータです。

```json
[
  {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": "A message *with some bold text* and _some italicized text_."
    }
  }
]                  
```

ここで注意が必要なのは、**Block Kit Builderで作成するのはSlackメッセージ送信APIで指定するJSONデータのうち`blocks`に指定するJSONデータのみ**であり、Slackメッセージ送信API用JSONデータではないということです。Block Kit Builderで作成したJSONデータだけを送信しても`missing_text_or_fallback_or_attachments`のようなエラーがSlackから返却されることになります。


## 2. 作成したJSONデータを雛形に埋め込む

前手順で作成したJSONデータを雛形に埋め込みます。どのblocksにJSONデータを指定するかは左側カラー縦棒を表示させるかどうかによりますが、今回は表示させるようにJSONデータを指定します。

- `text`の値として通知結果の文字列を指定しています。
    - この内容はメッセージ受信時のポップアップ通知にプレビュー表示されます。
- `attachments`内の`blocks`の値として、前手順で作成したJSONデータを雛形の設定しています。

```json
{
  "text": "Result: :apple:",
  "blocks": [],
  "attachments": [
    {
      "color": "#00FF00",
      "blocks": [
        {
          "type": "section",
          "text": {
            "type": "mrkdwn",
            "text": "A message *with some bold text* and _some italicized text_."
          }
        }
      ]
    }
  ]
}
```

これでSlackメッセージ送信API用JSONデータは完成です。

ちなみに下記URLのMessage Builderは何故か`blocks`に対応していないためエラー扱いになりますが、Incoming WebhookでSlackにメッセージ送信すればちゃんと動きます。このためBlock Kitを利用する場合は、下記URLのMessage Builderは使わないようにしましょう。

https://api.slack.com/docs/messages/builder


## 3. Incoming Webhookでメッセージを送信する

> NOTE: Incoming Webhook自体を知らない人は[こちらの記事](https://qiita.com/ik-fib/items/b4a502d173a22b3947a0)が参考になります。Slack Legacy Tokensでメッセージを送信することもできますが、基本的に非推奨なのでこちらは使わないようにしましょう。

前手順で作成したSlackメッセージ送信API用JSONデータをmessage.jsonに保存して、以下のようなcurlコマンドを使ってIncoming Webhook経由でメッセージを送信します。これでIncoming Webhookに対応したSlackチャンネルにメッセージが送信されます。

```bash
# NOTE: Token部分は"X../Y../Z.."と無効なものにしているので、取得したToken/URLを指定してください。
curl -X POST \
     -d @message.json \
     -H 'Content-type: application/json' \
     https://hooks.slack.com/services/XXXXXXXXX/YYYYYYYYY/ZZZZZZZZZZZZZZZZZZZZZ
```

今回の例だと以下のようなメッセージが対象チャンネルに送信されます。

|![slack-message.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174502/934302c8-09fb-0fc3-2467-5dee3b4bb401.png) |
| ---- |

あとは完成したJSONデータをもとに必要な通知プログラム等を作成しましょう。

# おまけ

## jqでJSON文字列を整形 (リダイレクト/パイプラインを利用)

jqコマンドはコマンド引数として`'.'`を指定することで、シェルのリダイレクトやパイプラインで利用できます。

```bash
# jq '.'
cat message.json | jq '.' > formatted_message.json
```

vimとかでJSONデータを全て選択した状態で外部コマンドをかける場合にも利用できます。