Slack App のアプリホーム（Home タブ）を構築する方法を確認してみた

こんにちは、CX事業本部 Delivery部の若槻です。

Slack のデスクトップアプリなどにインストールした Slack App で、[Home] タブからアプリの機能の利用や使い方の確認ができるようになっている UI を見たことがあると思います。

この UI をアプリホームと言い、[Home] タブ内に表示される UI をビューと言います。

今回は、Slack App のアプリホーム（Home タブ）を構築する方法を確認してみました。

試してみた

下記を参考にアプリホームを構築してみます。

Slack App の作成

アプリホームの構築対象の Slack App は前回の下記エントリで作成したものを使用します。

権限は、Bot Token Scopes として下記の2つを割り当てています。

• chat:write
• im:write

Home タブを有効にする

Home タブは既定では非表示になっており、使用する場合は表示を有効にする必要があります。

Your Apps で、作成した Slack App を選択し、左メニューの App Home を選択します。

[Show Tabs] セクションで、[Home Tabs] が無効の場合は有効にします。

Slack でアプリを開くと [Home] タブが追加されました。しかしビューは未作成なので UI はまだありません。

Block Kit によるビューの作成

Slack で UI を構築する場合は Block Kit というフレームワークを使用します。

• Block Kit | Slack

Block Kit により 投稿（Message）、モーダル（Modal）および アプリホーム（App Home）など様々な場所の UI を JSON オブジェクトによる一貫した記法で記述し、構築できます。

ここでは Slack の公式ツールである Block Kit Builder から作成してみます。こちらからアクセスできます。（認証が必要です）

プレビューのタイプは [App Home Preview] を選択し、ホームタブ上でのプレビューを確認できるようにします。そしてプレビューと JSON エディターでビューの UI を作成します。

Block Kit による UI の作成については下記でも紹介しているので合わせてご覧ください。

下記は Block Kit の JSON オブジェクトの作成例です。type フィールドに home を指定し、blocks フィールドに UI を構成するブロックを配列で指定します。

{
   "type":"home",
   "blocks":[
      {
         "type":"section",
         "text":{
            "type":"mrkdwn",
            "text":"A simple stack of blocks for the simple sample Block Kit Home tab."
         }
      },
      {
         "type":"actions",
         "elements":[
            {
               "type":"button",
               "text":{
                  "type":"plain_text",
                  "text":"Action A",
                  "emoji":true
               }
            },
            {
               "type":"button",
               "text":{
                  "type":"plain_text",
                  "text":"Action B",
                  "emoji":true
               }
            }
         ]
      }
   ]
}

Block Kit Builder 上で UI のプレビューが確認できます。

ビューの公開

views.publish API を使用します。

呼び出し時に必要な引数は下記の3つです。

• token
  • API 呼び出し時のトークンは自身のアプリケーションのものを使用します。アプリケーションに追加の権限スコープは必要ありません。
• user_id
  • ビューを公開するユーザーの ID を指定します。自分のプロフィールを開き、[Copy member ID] をクリックすれば取得できます。
• view
  • 公開するビューの Block Kit の JSON オブジェクトを指定します。Block Kit Builder などで作成できます。

REST API での呼び出し例は下記のようになります。

POST https://slack.com/api/views.publish
Content-type: application/json
Authorization: Bearer YOUR_TOKEN_HERE
{
  "user_id": "YOUR_USER_ID",
  "view": {
       "type":"home",
       "blocks":[
          {
             "type":"section",
             "text":{
                "type":"mrkdwn",
                "text":"A simple stack of blocks for the simple sample Block Kit Home tab."
             }
          },
          {
             "type":"actions",
             "elements":[
                {
                   "type":"button",
                   "text":{
                      "type":"plain_text",
                      "text":"Action A",
                      "emoji":true
                   }
                },
                {
                   "type":"button",
                   "text":{
                      "type":"plain_text",
                      "text":"Action B",
                      "emoji":true
                   }
                }
             ]
          }
       ]
    }
}

今回は views.publish API のテスター画面からビューの公開を試してみます。

引数を指定して API を叩くと、レスポンスで "ok": "true" となりビューの公開が成功しました。

ビューの更新

ビューの更新も同様に views.publish API を使用します。

Block Kit Builder で JSON オブジェクトを編集します。

先ほどと同様にテスター画面から API を叩きます。

アプリホームのビューが更新されました。

参考

以上