Bolt アプリの構築

学習の目的

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

Bolt アプリが Slack にアクセスできるようにする。
リスナー関数を説明する。
アプリにイベントリスナーを追加する。
アプリにインタラクティブな機能を追加する。

Glitch で Bolt for JavaScript アプリテンプレートをリミックスする

アプリの設定とインストールを完了したら、新しい Bolt アプリにアプリの認証情報を設定します。

開発を容易にするために、このモジュールではアプリの構築とホストを簡素化するツールである Glitch を使用します。無料の Glitch アカウントは、開発には十分ですが、アプリがアイドル状態になるとサーバーは稼働を停止します。つまり、アプリの開発とテストを行っている間、ブラウザーで Glitch を開いたままにする必要があります。

アプリがリリース可能になったら、別の場所でホストするか、Glitch アカウントをアップグレードします。推奨されるホスティングプロバイダーの詳細なリストは API サイトを参照してください。

アプリをローカルで実行する場合は、ngrok のようなツールを使用できます。ドキュメントの『入門ガイド』に ngrok の使用例があります。

Glitch 環境を開きます。
こちらのリンクをクリックして、Bolt スタータープロジェクトをリミックス (またはコピー) します。
リミックスが完了すると、プロジェクトがプロジェクトリストに表示されます。この例では、actually-triangular-pigeon という名前が付いています。
プロジェクトをクリックして読み込みます。
app.js をクリックします。

app.js ファイルで、@slack/bolt パッケージがインポートされて、インスタンス化されているのがわかります。その下に、アプリのサーバーが設定され、Slack からイベントを受信できるように実行されています。

後でさらに追加しますが、まずは Slack アプリの設定から認証情報を追加します。このプロセスの最初から最後まで、必ず Glitch を開いたままにしてください。

Slack api サイトのアプリのページに戻りましょう。

アプリの認証情報を追加する

秘密の署名とボットユーザーの OAuth アクセストークンを取得します。

Slack API サイトの Slack アプリの設定ページに移動します。
サイドバーの [Basic Information (基本情報)] をクリックします。
[App Credentials (アプリの認証情報)] セクションまで下にスクロールします。
[Signing Secret (秘密の署名)] をコピーして、次のステップのためにテキストエディターに保存しておきます。
サイドバーの [OAuth & Permissions (OAuth & 権限)] をクリックします。
[Bot User OAuth Access Token (ボットユーザーの OAuth アクセストークン)] の [Copy (コピー)] をクリックしてコピーし、次のステップのために保存しておきます。

秘密とトークンを保存したら、Glitch に戻ります。

Glitch のプロジェクトで、左サイドバーにある .env ファイルに移動します。
SLACK_BOT_TOKEN (1) のすぐ横にある [Variable Value (変数値)] 項目にボットユーザーの OAuth アクセストークンを貼り付けます。
SLACK_SIGNING_SECRET (2) のすぐ横にある [Variable Value (変数値)] 項目に秘密の署名を貼り付けます。アプリは秘密の署名を使用して、受信した要求が Slack からのものであることを確認します。Bolt は秘密の署名が App コンストラクターに渡されると、自動的に確認を処理します。

Glitch ファイルナビゲーターの一番下にある [Logs (ログ)] をクリックすると、Bolt アプリが実行されていることを確認できます。

「Bolt app is running! (Bolt アプリを実行しています!)」というメッセージが表示されたログ

リスナー関数の概要

Slack アプリは通常、Slack から一対多の要求を受信して応答します。Slack から受信する要求の各型に対応する、処理と応答のリスナー関数があります。

Bolt アプリが関数を渡すことができるリスナーのサブセットは次のとおりです。

リスナー	説明
`app.event(eventType, fn)`	Events API イベントをリスンします。eventType は、特定のイベントを識別するために使用される文字列です。
`app.message([pattern ,], fn)`	message 型のイベントを処理するのに便利なリスナー。パターンは任意のサブ文字列か正規表現 (RegExp) を使用できます。
`app.action(actionId, fn)`	ボタンを使用したユーザー操作など、Block 要素からのインタラクティブイベントをリスンします。actionId 識別子は、block 要素の action_id と一致する文字列です。
`app.shortcut(callbackId, fn)`	グローバルショートカットとメッセージショートカットの呼び出しをリスンします。callbackId はショートカットの callback_id と一致する文字列または正規表現パターンです。callback_id はアプリの設定で指定されます。

詳細なリストは Bolt のリファレンスドキュメントを参照してください。次は、イベント、インタラクション、インタラクティビティをリスンして応答するようにアプリを設定します。

Events API イベントをリスンするには、アプリでイベント登録を有効にする必要があります。

Slack API サイトで Slack アプリのページをまだ開いていない場合は、こちらから移動します。
サイドバーの [Event Subscriptions (イベントの購読)] をクリックします。
イベント登録は自動的に有効化されます。必要であれば、オンに切り替えることもできます。
要求 URLを入力する [Request URL (リクエスト URL)] ボックスが表示されます。要求 URL には、アプリが登録しているイベントの HTTP 要求が送信されます。アプリをテンプレートから作成した場合、要求 URL は現在 https://project-name.glitch.me/slack/events です。
project-name の代わりに、自分の Glitch のプロジェクト名を追加します。
1. [Settings (設定)]、[Go to project page (プロジェクトページに移動)] の順にクリックします[Live site (ライブサイト)] の URL は、https:// と .glitch.me の間にプロジェクト名が挿入されます。
Slack API サイトの [Events Subscriptions (イベントの購読)] ページに戻り、要求 URL を入力します。次のようになります: https://actually-triangular-pigeon.glitch.me/slack/events
Bolt for JavaScript ではデフォルトで /slack/events 経由で受信するすべての要求をリスンするため、これが要求 URL に追加されます。
[Save Changes (変更を保存する)] をクリックして作業を保存します。
次に [Subscribe to bot events (ボットのイベントに登録する)] をクリックして、このセクションを開きます。[Event Name (イベント名)] の下に message.channels が表示されています。このイベントは、アプリが追加されているパブリックチャンネルに投稿されたすべてのメッセージをリスンします。要求 URL が有効であれば、アプリでこのイベントの受信が開始されます。

イベントリスナーを追加する

イベント登録では、event() リスナーが使用されます。このリスナーの例については Bolt のドキュメントを参照してください。ここでは、message() リスナーを使用してメッセージをリスンし、応答します。

Glitch のプロジェクトに移動します。
app.js ファイルの // Space for your code のすぐ下に次を追加します。

app.message('hello', async ({ message, say }) => {
    await say(`Hey there <@${message.user}>`);
});

作業は自動保存されます。

app.js ファイルで // Space for your code のすぐ下にコードが入力されている (赤のボックスで囲まれた部分)

バックグラウンドでは、message() リスナーは app.event(“message”, fn) を使用するのと同じことですが、その他に say() パラメーターがリスナー関数に渡されます。say() パラメーターはイベントの応答 URL を公開します。これは、chat.postMessage() をコールするのとは違い、message イベントに応答するために追加のスコープを必要としません。

Glitch が別のタブで稼働している限り、アプリは自動的に再起動されます。これで、アプリが追加されたチャンネル内で「hello」を含むメッセージを送信すると、アプリが応答するようになりました。

FS3 さんの「hello (こんにちは)」という投稿に対し、sample_app から「Hey there @FS3 (@FS3 さん、こんにちは)」という応答が表示された Slack チャンネル

この基本的な例では、あなたの使用事例に応用できる、アプリの初歩的なカスタマイズを紹介しました。次は、プレーンテキストではなく button 要素を送信して、もう少しインタラクティブな機能を試してみましょう。

インタラクティビティを設定する

ボタン、選択メニュー、日付ピッカー、モーダル、ショートカットなどの機能を使用するには、インタラクティビティを有効にする必要があります。イベント登録と同様に、Slack からアクション要求 (ユーザーがボタンをクリックしたなど) を送信するには、要求 URL を指定する必要があります。

Slack アプリの設定ページに戻り、サイドバーの [Interactivity & Shortcuts (インタラクティブな機能とショートカット)] をクリックします。
[Intaractivity (インタラクティブ性)] をオンに切り替えます。[Request URL (リクエスト URL)] ボックスが表示されます。
Bolt はデフォルトでインタラクティブコンポーネントにイベントと同じエンドポインを使用するよう設定されているため、先ほどと同じ要求 URL を使用します。
ページの右下にある [Save Changes (変更を保存する)] をクリックします。これで、アプリでインタラクティビティが処理されるよう設定されました。

メッセージに応答するアクションリスナーを追加する

インタラクティビティをリスンする場合は、action() リスナーを使用します。action() リスナーを設定する前に、button 要素を送信するように message() リスナーを編集します。

Glitch のプロジェクトに移動します。
app.js で、前のコードスニペットを次に置き換えて新しいセクションを含めます。

// Message listener function called for messages containing "hello"
app.message('hello', async ({ message, say }) => {
    await say({
        "blocks": [
            {
                "type": "section",
                "text": {
                    "type": "mrkdwn",
                    "text": `👋 Hey there <@${message.user}>`
                },
                "accessory": {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "text": "Click Me",
                        "emoji": true
                    },
                    "action_id": "click_me_button"
                }
            }
        ]
    });
});

前のコードが上記のコード (赤のボックスで囲まれた部分) に置き換えられている

say() の値が、blocks の配列を含むオブジェクトになっています。Blocks は Slack メッセージのコンポーネントで、テキスト、画像、日付ピッカーなどがあります。この例では、accessory として button を含む section ブロックが含まれています。

メッセージや他の Block Kit サーフェスを設計するには、Block Kit ビルダーを使用できます。一般的な使用事例の組み込みテンプレートと便利なドラッグアンドドロップ方式のインターフェースが含まれており、対応する JSON ペイロードが右側に表示されます。

Block Kit はデフォルトで、通知を入力したり、検索したりできないようになっているため、メッセージのアクセス性を高めるためには text フィールドを使用します。text フィールドについての詳細は、chat.postMessage リファレンスページを参照してください。

button の accessory オブジェクトに、action_id があります。これは、その block 要素に対応するインタラクティブイベントのみをリスンするように、リスナー関数に渡すことができる一意の識別子として機能します。

アプリが再起動されると、「hello」を含む別のメッセージを送信できます。アプリはこのメッセージに対して button 要素を含むメッセージを返します。ただし、ボタンをクリックしてもまだ何も起こりません。

チャンネル内では、FS3 さんからの「hello」という投稿に、sample_app が手を振る絵文字と一緒に「Hey there @FS3 (@FS3 さん、こんにちは)」と応答している

ボタン操作に応答するアクションリスナーを追加する

ボタンのクリックにフォローアップメッセージで応答する action() リスナー関数を追加しましょう。

Glitch のプロジェクトに戻ります。
app.js に次のアクションリスナーを追加します。

// Action listener function called when an interactive component with action_id of “click_me_button” is triggered
app.action('click_me_button', async ({ ack, body, client, say }) => {
    // Acknowledge action request before anything else
    await ack();
    let channelID = body.channel.id
    let userID = body.user.id
    // Respond to action with an ephemeral message
    await client.chat.postEphemeral({
    channel: channelID,
    user: userID,
    text: `<@${userID}> clicked the button! 🎉 `
  });
});

リスナー関数の内部で ack() がコールされるのがわかります。ack() はアプリが Slack からイベントを受信したことを確認するために使用されます。アプリケーションが再起動した後にボタンをクリックすると、アプリが新しいメッセージで応答します。

チャンネル内では、FS3 さんからの「hello」という投稿に、sample_app が手を振る絵文字と一緒に「Hey there @FS3 (@FS3 さん、こんにちは)」で応答し、ボタンのクリックに対する応答として「@FS3 clicked the button! (@FS3 さんがボタンをクリックしました!)」とクラッカーの絵文字が表示されている

アプリの実行で問題がある場合は、プロジェクトの examples フォルダーにある actions.js で完成したコードを確認してください。

次のステップ

Bolt の基本概念に基づいて、Slack からのさまざまなイベントをリスンして応答する初めての Bolt for JavaScript アプリを構築しました。

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

Glitch のプロジェクト内の examples フォルダーの内容を確認する。プロジェクトにコピーして貼り付けることができるさまざまなサンプルコードを含むファイルがいくつか用意されています。
Bolt for JavaScript のドキュメントで高度な機能について学び、応用可能なコードスニペットを見つける。
Block Kit ビルダーを使用してアプリケーションの設計のレベルアップを図る。

ホームタブやポップアップモーダルなど、アプリケーションがアクセスできる他のサーフェスについても調べてみてください。