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

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

こんな人向けです。

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

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を指定しているので黄緑色になります。

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

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

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

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

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

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

以下は実際にBlock Kit Builderで作成した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データを雛形の設定しています。

{
  "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は使わないようにしましょう。

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

NOTE: Incoming Webhook自体を知らない人はこちらの記事が参考になります。Slack Legacy Tokensでメッセージを送信することもできますが、基本的に非推奨なのでこちらは使わないようにしましょう。

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

# 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

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

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

おまけ

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

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

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

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