インタラクティビティの管理

学習の目的

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

インタラクティビティを処理するようにアプリを設定する。
Block Kit メッセージから送信されたメッセージペイロードを処理し、応答する。

シームレスなユーザーエクスペリエンスの作成

ここまで、Block Kit とは何か、さまざまな種類のメッセージを作成する方法、それらのメッセージを Slack 内のどこで使用できるかを学習しました。次は、Block Kit メッセージを実際に使用できるようにして、ユーザー操作を処理する方法を見てみましょう。ユーザー操作は、ボタンを押すことだったり、ドロップダウンオプションを選択することだり、モーダルから送信することだったりします。シームレスなユーザーエクスペリエンスを提供するためには、これらのアクションすべてがアプリで処理されなければなりません。

インタラクティビティのライフサイクル

ボタン、ドロップダウン、モーダルなどを使用して、ユーザーがアプリの応答を呼び出すことができる操作エントリポイントを設定することができます。エントリポイントのいずれかをトリガーすると、インタラクションペイロードが作成されます。このペイロードはユーザーアクションのコンテキストを説明する一連の情報で、アプリが理路整然とした応答を作成するために十分な情報を提供します。

インタラクションフローは次のようになります。

ユーザーがアプリのエントリポイントのいずれかを使用してインタラクションをトリガーする。
アプリがインタラクションペイロードを受信し、処理する。
このコンテキストを使用して、アプリがインタラクションに対する応答を生成する。

アプリが最後の 2 つのステップを実行できることが必要です。

インタラクティビティの設定

アプリがインタラクションペイロードを受信するには、Slack に送信先が設定されていなければなりません。各アプリには、ホストされているアプリに属する Web エンドポイントを示す要求 URL を設定することができます。

アプリの要求 URL を設定する手順は次のとおりです。

Slack API サイトでアプリの管理ダッシュボードを開きます。
サイドバーの [Interactivity & Shortcuts (インタラクティブな機能とショートカット)] をクリックします。
[Interactivity (インタラクティブ性)] を有効にします。

新しいオプションがいくつか表示されます。インタラクティブな Block Kit メッセージに関連するオプションは次のとおりです。

Request URL (リクエスト URL): インタラクティブコンポーネントまたはショートカットが使用されると、要求ペイロードをこの URL に送信します (1)。これらのペイロードを処理するには、ホストされているアプリの URL を追加する必要があります。

Options Load URL (オプションのロード用 URL）: これは Block Kit コンポーネント (選択メニューと複数選択メニュー) によって使用される設定です (2)。これらのコンポーネントは、外部ソースからメニューオプションを読み込むことができます。メニューオプションを返すために、どの URL がクエリされるかはオプションのロード用 URL によって決まります。

Sample app の [Interactivity & Shortcuts (インタラクティブな機能とショートカット)] セクション。上記で説明した [Request URL (リクエスト URL)] と [Options Load URL (オプションのロード用 URL)] に番号が付いている

アプリが受信するペイロードの本文には、インタラクションのソースを示す type 項目があります。ユーザー操作は、block_actions ペイロードに含まれます。このペイロードは、Block Kit メッセージ内で発生したインタラクションの完全なコンテキストを提供します。操作したユーザー、使用されたインタラクティブコンポーネントの事前定義された状況の項目、インタラクションが発生した場所などを含みます。

ペイロードの処理

ペイロードを受信したら、アプリはユーザーに応答する必要があります。応答が数多く存在することがありますが、ここでは確認応答とメッセージ応答について見てみましょう。

確認応答はすべてのアプリに必須で、有効なインタラクションペイロードを受信したことを確認します。また、メッセージ応答は、アプリの応答に無数の可能性を提供します。標準のお礼メッセージを返信したり、一時的な応答を公開したり、ソースメッセージを更新したりすることもできます。どの活用法を選ぶにしても、response_url を使用してインタラクティブな Block Kit メッセージで次のステップを返す必要があります。response_url はペイロードごとに異なり、インタラクションが発生した場所にメッセージを公開するために使用できます。

では、block_actions ペイロードといくつかの重要な項目を詳しく見てみましょう。

次の例は、ユーザーが複数選択メニューから選択した後に送信されるペイロードです。

ユーザーがメニューから [Save it (保存する)] を選択します。

Slack アプリから「Use Case Catalogue (使用事例カタログ)」が検索結果として返され、ユーザーが [Save it （保存する)] を選択している

次のペイロードがアプリに送信されます。

{
    "type": "block_actions",
    "user": {
        "id": "U018AF3MLPQ",
        "username": "hshavers",
        "name": "hshavers",
        "team_id": "TG4KUE8JV"
    },
    "api_app_id": "A02",
    "token": "Shh_its_a_seekrit",
    "container": {
        "type": "message",
        "text": "The contents of the original message where the action originated"
    },
    "trigger_id": "12466734323.1395872398",
    "team": {
        "id": "TG4KUE8JV",
        "domain": "community"
    },
    "enterprise": null,
    "is_enterprise_install": false,
    "state": {
        "values": {
            "enhWA": {
                "NfSha": {
                    "type": "static_select",
                    "selected_option": {
                        "text": {
                            "type": "plain_text",
                            "text": "Save it",
                            "emoji": true
                        },
                        "value": "value-2"
                    }
                }
            }
        }
    },
    "response_url": "https://www.postresponsestome.com/T123567/1509734234",
    "actions": [
        {
            "type": "static_select",
            "block_id": "enhWA",
            "action_id": "NfSha",
            "selected_option": {
                "text": {
                    "type": "plain_text",
                    "text": "Save it",
                    "emoji": true
                },
                "value": "value-2"
            },
            "placeholder": {
                "type": "plain_text",
                "text": "Manage",
                "emoji": true
            },
            "action_ts": "1623954664.372376"
        }
    ]
}

このペイロードには、複数選択メニューの保存された値、選択したユーザー (user の下)、複数選択メニューとボタンに関連付けられている block_id が格納されています。

ここから、これらの値を渡してユーザーに確認を送信することができます。user の情報を使用してダイレクトメッセージを開始し、block_id の情報を使用してユーザーの選択を確認します。アプリでは、ペイロードの他の情報を使用して、重要なワークフローまたはオートメーションを続行できます。アイデア (と Slack API) 次第で実にさまざまな活用法があります。

まとめ

このモジュールでは、Block Kit の概要、Block Kit を使用して Slack アプリで視覚的に豊かなメッセージを作成する方法、アプリを次のレベルへと高める方法を学習しました。使用可能なレイアウトブロックの種類、Slack 内で強力なメッセージを使用できる場所、メッセージのインタラクティブ性を有効にし、アクションを追加する方法についても学習しました。Block Kit を使用すれば、仕事をより快適、シンプル、生産的にするクリエイティブな方法を多数見つけ出だすことができます。

次のステップ

基本を理解した後は、Block Kit とプラットフォームの他の機能の学習に進むことができます。この後の学習として以下をお勧めします。

Block Kit のドキュメントで Block Kit コンポーネントについての詳細を参照する。
Block Kit ビルダーを試し、自分のアプリに使用できそうなテンプレートを確認する。