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

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

この最終ステップでは、インタラクティブなボタンと応答を追加して、アプリケーションとの会話を強化します。

メッセージリスナーを追加する

message() リスナーを追加して、ボタンでユーザーに応答します。

say-hello | app.js を開きます。
リスナーを次のコードで置き換えます。この強化されたコードには、ボタン (button) が含まれます。コードブロックの右上にある [Copy (コピー)] をクリックすると、コードをすばやくクリップボードにコピーできます。貼り付けたコードの後ろにあるログ関数 ((async () => { 行で始まる部分) は残しておいてください。作業内容を保存します。

// Listens to incoming messages that contain "hello"
app.message(/hello/i, async ({ message, say }) => {
    await say({
        "text": "Hello!",
        "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 はデフォルトで、通知を入力したり、検索したりできないようになっているため、メッセージのアクセス性を高めるためには text フィールドを使用します。text フィールドについての詳細は、chat.postMessage リファレンスページを参照してください。

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

もう一度テストする

コードはマシン上でホストしていますので、新しいセッションを開始する必要があります。ターミナルウィンドウが開いている場合は閉じます。次に、run コマンドを使用してアプリケーションを再び起動して実行します。

Trailhead Slack Playground が開いていることを確認します。
前のステップからターミナルウィンドウを開いたままにしている場合は、それを閉じて開き、アプリケーションを新しいコードで再リリースします。
ターミナルウィンドウで、cd say-hello と入力します。
slack run と入力します。
先ほどリリースしたアプリケーションを選択し、Return キーを押します。ターミナルウィンドウに、bolt アプリケーションが実行中であることが表示されます。
Trailhead Slack Playground に戻ります。
#welcome-new-team-members を開きます。
もう一度 hello を送信します。今度は👋 の絵文字と [Click Me (ここをクリックして)] ボタンが表示されます。

チャンネル内で新しいチームメンバーが hello と投稿すると、say-hello (local) は、👋 の絵文字と Hey there @USER (@USER さん、こんにちは) というあいさつ、そして [Click Me (ここをクリックして)] ボタンを表示する

ターミナルウィンドウを閉じます。

ボタンをクリックすると、エラーが表示されます。これは、ボタンのクリックに対するリスナーがまだ設定されていないためです。次は、それを変更します。

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

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

say-hello | app.js を開きます。
前のセクションで入力したコードの下に次のアクションリスナーを追加して、作業内容を保存します。コードブロックの右上にある [Copy (コピー)] をクリックして貼り付ければ、時間を節約できます。

// 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 a direct message
    await client.chat.postMessage({
    channel: userID,
    user: userID,
    text: `<@${userID}> clicked the button! 🎉 `
  });
});

リスナー関数の内部で ack() がコールされます。ack() は、アプリが Slack からイベントを受信したことを確認するために使用されます。

上記の説明のとおりに入力された app.action コード。コードがオレンジのボックスで強調表示されている

操作をテストする

確認しましょう。

Trailhead Slack Playground が開いていることを確認します。
前のステップからターミナルウィンドウを開いたままにしている場合は、それを閉じて開き、アプリケーションを新しいコードで再リリースします。
ターミナルウィンドウで、cd say-hello と入力します。
次に、slack run と入力します。
アプリケーションを選択し、Return キーを押します。ターミナルウィンドウに、bolt アプリケーションが実行中であることが表示されます。
Trailhead Slack Playground に戻ります。
#welcome-new-team-members を開きます。
もう一度 hello を送信します。アプリケーションが 👋 の絵文字とフレンドリーな Hey there というあいさつ、そしてボタンで応答します。
[Click Me (ここをクリックして)] をクリックすると、クリックしたことを祝うダイレクトメッセージがアプリから送信されます。

@USER clicked the button! (@USER がボタンをクリックしました) という say-hello (local) からのダイレクトメッセージとクラッカーの絵文字が表示されている。

アプリを改良する。

Bolt の基本概念に基づいて、Slack からのさまざまなイベントをリスンして応答する初めての Bolt for JavaScript アプリを構築しました。これは、ユーザーがあいさつして応答を受け取るための方法です。新しいチームメンバーを歓迎するメッセージにするためにやるべきことはまだあります。

「ブロックキットを使用して有意義なインタラクションを構築する」を参照して、ここで学んだ概念とスキルに基づいてどのように構築できるかを確認してください。

Bolt の詳細を確認する

基本を理解した後は、Bolt とプラットフォームの他の機能をさらに学ぶことができます。いくつかの学習パスを紹介しておきます。

ターミナルウィンドウまたはコマンドラインで slack sample コマンドを使用して、サンプルアプリケーションとアプリケーションチュートリアルを確認します。
Bolt for JavaScript のドキュメントで高度な機能について学び、応用可能なコードスニペットを見つける。
Block Kit ビルダーを使用してアプリケーションの設計のレベルアップを図る。

ホームタブやポップアップモーダルなど、ほかのアプリサーフェスについても調べてみてください。

Slack 開発者プログラムにアクセスする

Slack Playground をプロビジョニングしたら、Slack 開発者プログラムにオプトインされます。このプログラムを通して、Slack 開発者ドキュメント、動画、Web セミナーにアクセスしたり、 API の変更履歴を確認したりすることができます。Trailhead 以外の Sandbox をプロビジョニングして、本番環境に影響を与えずにプラットフォーム上で機能を試したり、構築したりすることもできます。Trailhead と Slack 開発者プログラムを併用して、Slack 開発スキルを高めましょう。

まとめ

このプロジェクトでは、Bolt for JavaScript を使用して Slack アプリを構築しました。メッセージをリスンして、インタラクティブなボタンで応答するようにしました。シンプルなアプリで始めましたが、「ブロックキットを使用して有意義なインタラクションを構築する」を参考にして開発をさらに進めることができます。それまでの間、下記の [Verify Step (ステップを確認)] をクリックして作業内容を確認しましょう。

予想時間

トピック

ヘルプをお探しですか?

Slack のリソース