メッセージ拡張機能アプリを構築する

メッセージ拡張機能を使用すると、ユーザーは Microsoft Teams クライアントのボタンとフォームを使用して Web サービスを操作できます。 ユーザーは、外部システムのメッセージ作成領域、コマンド ボックスから、またはメッセージから直接、操作を検索したり、開始したりできます。 その操作の結果は、書式設定されたカードの形式で Teams クライアントに送り返すことができます。

スクリーンショットは、Teams クライアントの概念的なメッセージ拡張機能を示しています。

このチュートリアルでは、検索ベースのメッセージ拡張機能アプリを構築する方法について説明し、このアプリを使用すると、ユーザーはノード パッケージ マネージャー (npm) ディレクトリから npm パッケージを検索できます。

次のいずれかの方法で、検索ベースのメッセージ拡張機能アプリについて理解します。

  • GitHub Codespaces: codespace インスタンスを使用すると、Teams アプリを即座に体験できます。 Visual Studio Code (VS Code) が開き、Microsoft 365 Agents Toolkit (以前は Teams Toolkit と呼ばれていました) 拡張機能、アプリのソース コード、およびすべての依存関係が事前にパッケージ化されています。
  • ステップバイステップ ガイド: 開発環境をセットアップし、最初から Teams アプリを構築できます。

codespace を作成する前に、次の前提条件があることを確認してください。

ヒント

GitHub Codespaces には、1 か月あたりの固定使用量までの無料プランが用意されています。 さらにスペースを解放する必要がある場合は、 github.com/codespaces に移動して、不要になったコードスペースを削除します。

GitHub Codespaces を使用して検索ベースのメッセージ拡張機能アプリを作成するには、次の手順に従います。

  1. 次のボタンを選択して GitHub Codespaces を開きます。

    GitHub Codespaces でメッセージ拡張機能を開く

    まだサインインしていない場合は、GitHub アカウントにサインインするように求められることがあります。

  2. [ 新しい codespace の作成] を選択します。

    スクリーンショットは、メッセージ拡張機能用の codespace を作成する GitHub ページを示しています。

    [ Codespace のセットアップ] ページが表示されます。

    スクリーンショットは、メッセージ拡張機能を構築する codespace を示しています。

    Agents Toolkit によってメッセージ拡張機能が準備され、ブラウザーの VS Code で開かれます。 VS Code のアクティビティ バーに Microsoft 365 Agents Toolkit アイコンが表示されます。

  3. [Microsoft 365 にサインイン] と [Azure にサインイン] を選択して、Microsoft 365 アカウントでサインインします。

    サインインするためのブラウザーのエージェント ツールキット ウィンドウを示すスクリーンショット。

    注:

    アプリをビルドすると、GitHub Codespaces によって新しいタブで Teams クライアントにアプリが読み込まれます。ブラウザーがポップアップ タブまたはウィンドウをブロックする場合は、アプリを開くためのポップアップを許可する必要があります。

  4. [ Teams アプリのプレビュー] (F5) を選択して、メッセージ拡張機能を構築します。

    スクリーンショットは、メッセージ拡張機能を使用したブラウザーの [エージェント ツールキット] ウィンドウを示しています。

    GitHub Codespaces はメッセージ拡張機能アプリをビルドし、Teams クライアントに読み込むと、別のブラウザー タブで開きます。

  5. [ 追加] を選択して、Teams にメッセージ拡張機能をインストールします。

    Teams にメッセージ拡張機能アプリを追加するためのアプリの詳細ダイアログのスクリーンショット。

  6. [ 開く] を選択して、個人用スコープでアプリを開きます。

    個人用スコープでアプリを開くためのスコープ選択ダイアログのスクリーンショット。

    検索ベースのメッセージ拡張機能が正常に作成され、Teams クライアントに読み込まれました。

    スクリーンショットは、Teams クライアントに読み込まれたメッセージ拡張機能を示しています。

メッセージ表示オプションの詳細については、「 メッセージ表示オプション」を参照してください。

関心のあるボットは、次を選択します。

基本的なタブ アプリを構築する場合は、次を選択します。

次の手順

関連項目

npm ディレクトリ