Block Kit メッセージの作成

学習の目的

この単元を完了すると、次のことができるようになります。

Block Kit ビルダーを使用して Block Kit メッセージを作成する。
テンプレートを使用してカスタムメッセージを作成する。
メッセージペイロードとは何かを説明する。

Block Kit メッセージの送信

バックグラウンドでは、Block Kit メッセージは使用されているブロックの種類を分類する JSON ペイロードで、Slack Web API を介してアプリと Slack の間で渡されます。メッセージのブロックは手動で作成することができますが、Block Kit ビルダーを使うよりシンプルで直観的な方法があります。

Block Kit ビルダーを使用したメッセージの作成

ブロックの種類、ブロック要素、サーフェスについて理解したところで、次は単純な Block Kit メッセージと複雑な Block Kit メッセージの両方を作成する方法を学習しましょう。

Block Kit ビルダーの 1 か所で、左ペイン (1) からブロックを選択し、中央ペイン (2) にドラッグアンドドロップで配置して、Block Kit レイアウトをデザインし、プレビューすることができます。Block Kit メッセージを作成したら、Slack アプリで必要とされる JSON 配列をコピーするか (3)、ボタンをクリックして Slack に直接送信できます (4)。

上記で説明した各セクションに番号が表示された Block Kit ビルダーインターフェース

Block Kit ビルダーには、承認、アンケート、研修、ニュースレターなどに使用できるテンプレートメッセージもあります。

または、ブロックのリファレンスガイドを使用して、完全なブロック配列を手動で生成できます。

メッセージペイロードの構造の確認

メッセージペイロードの構造 (block ステートメント) はユニバーサルです。すべての block には、使用されているブロックの種類を指定する type 項目と、その block のコンテンツを記述する他の項目が含まれています。

次の研修用のテンプレートをご覧ください。このメッセージは、レイアウト用の section、image、context ブロックを使用して作成されています。また、section の 1 つに conversations_select というインタラクティブ要素がネストされています。このテンプレートはそのまま使用することもできますが、新しいチームメンバー向けのより強力な研修ワークフローを作成するためのたたき台として使用できます。

{
    "blocks": [
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "Hey there 👋 I'm TaskBot. I'm here to help you create and manage tasks in Slack.\nThere are two ways to quickly create tasks:"
            }
        },
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "*1️⃣ Use the `/task` command*. Type `/task` followed by a short description of your tasks and I'll ask for a due date (if applicable). Try it out by using the `/task` command in this channel."
            }
        },
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "*2️⃣ Use the _Create a Task_ action.* If you want to create a task from a message, select `Create a Task` in a message's context menu. Try it out by selecting the _Create a Task_ action for this message (shown below)."
            }
        },
        {
            "type": "image",
            "title": {
                "type": "plain_text",
                "text": "image1",
                "emoji": true
            },
            "image_url": "https://api.slack.com/img/blocks/bkb_template_images/onboardingComplex.jpg",
            "alt_text": "image1"
        },
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "➕ To start tracking your team's tasks, *add me to a channel* and I'll introduce myself. I'm usually added to a team or project channel. Type `/invite @TaskBot` from the channel or pick a channel on the right."
            },
            "accessory": {
                "type": "conversations_select",
                "placeholder": {
                    "type": "plain_text",
                    "text": "Select a channel...",
                    "emoji": true
                }
            }
        },
        {
            "type": "divider"
        },
        {
            "type": "context",
            "elements": [
                {
                    "type": "mrkdwn",
                    "text": "👀 View all tasks with `/task list`\n❓Get help at any time with `/task help` or type *help* in a DM with me"
                }
            ]
        }
    ]
}

その結果、各ステップ、スクリーンショット、ユーザがボットをチャンネルに追加できるインタラクティブ要素を含めて、チームが設定したワーククフローに従って新しい Slack ユーザがタスクを作成するのに役立つ豊かで有意義なメッセージが作成されます。

/task コマンドの使用方法、タスクの作成アクションの使用方法、チャンネルへの TackBot の追加方法を説明する、TaskBot からの研修メッセージのプレビュー

ユーザはこのメッセージをどう操作するのでしょうか? 次の単元では、Block Kit ペイロードでインタラクティビティを処理する方法について説明します。ユーザ操作の処理は、機能的な Block Kit メッセージとワークフローの作成において極めて重要なステップです。

リソース

Slack アプリ: Block Kit ビルダー (サインインが必要)