Microsoft 365 用 Copilot 用のボットベースのメッセージ拡張機能プラグインを構築する

最初の Teams アプリを使用して Microsoft Teams アプリの開発を開始します。 JavaScript を使用して、Teams を使用してボットベースのメッセージ拡張機能プラグインを作成できます。

このチュートリアルでは、次の方法について学ぶことができます:

• Teams Toolkit を使用して新しいプロジェクトを設定する方法。
• ボットベースのメッセージ拡張機能プラグインを構築する方法。
• アプリをデプロイする方法。
• M365 Chat でボットベースのメッセージ拡張機能プラグインをトリガーします。

このステップ バイ ステップ ガイドは、Teams Toolkit を使用してボットベースのメッセージ拡張機能プラグインを構築するのに役立ちます。 このガイドを完了すると、次の出力が表示されます。

前提条件

• 残り 6 分

アプリをビルドして展開するための次のツールを必ずインストールしてください。

開発環境を準備する

必要なツールをインストールしたら、開発環境を設定します。

Teams Toolkit のインストール

Microsoft Teams Toolkit は、アプリのクラウド リソースをプロビジョニングしてデプロイし、Teams ストアに発行するツールを使用して、開発プロセスを簡略化するのに役立ちます。

Visual Studio Code で Teams Toolkit を使用できます。 Teams Toolkit をインストールするには、次の手順に従います。

1. Visual Studio Code を開き、[ 拡張機能 ] を選択します (Ctrl + Shift + X / ⌘⇧-X または [ > 拡張機能の表示] )。

2. 検索ボックスに、「Teams Toolkit」と入力します。

3. [Teams ツールキット] ページで、[インストール] の横にあるドロップダウン矢印を選択します。

4. [ プレリリース バージョンのインストール] を選択します。

   Teams Toolkit アイコンは、インストール後に Visual Studio Code アクティビティ バー に表示されます。

Teams 開発テナントを設定する

テナントは、Teams の組織のスペースまたはコンテナーであり、チャット、ファイルの共有、会議の実行を行います。 この領域は、アプリをアップロードしてテストする場所でもあります。 テナントを使って開発する準備ができているかどうかを確認しましょう。

アプリのアップロード オプションを確認する

アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。 このプロセスは、アプリのアップロードと呼ばれます。 このオプションを表示するには、Microsoft 365 アカウントにサインインします。

カスタム アプリのアップロードはテナント経由で有効になっており、管理者はカスタム アプリをアップロードするためのアクセス権を付与する必要があります。 テナントと管理者アクセス権は既にありますか? 実際にあるかどうかを確認しましょう。

Teams でアプリをアップロードできるかどうかを確認します。

1. Teams クライアントで、[ アプリ ] アイコンを選択します。

2. [アプリの管理] を選択します。

3. [ アプリのアップロード] を選択します。

4. [カスタム アプリのアップロード] オプションを探します。 オプションが表示されている場合は、カスタム アプリのアップロードが有効になっています。

   

   注:

   カスタム アプリをアップロードするオプションが見つからない場合は、Teams 管理者に問い合わせてください。

無料の Teams 開発者テナントを作成する (省略可能)

Teams 開発者アカウントをお持ちでない場合は、無料で入手できます。 Microsoft 365 開発者プログラムに参加します。

1. Microsoft 365 開発者プログラムに移動します。

2. [今すぐ参加] を選択し、画面の指示に従います。

3. ようこそ画面で、[E5 サブスクリプションの設定] を選択します。

4. 管理者アカウントを設定します。 完了すると、次の画面が表示されます。

   

5. 設定した管理者アカウントを使用して Teams にサインインします。 Teams で [カスタム アプリのアップロード] オプションがあることを確認します。

無料の Azure アカウントを取得します。

アプリをホストする場合、または Azure でリソースにアクセスする場合は、Azure サブスクリプションが必要です。 開始する前に無料でアカウントを作成してください。

これで、アカウントを設定するためのツールがすべて揃いました。 次に、開発環境を設定し、ビルドを開始しましょう。 最初に作成するアプリを選択します。

メッセージ拡張機能アプリ用のプロジェクト ワークスペースを作成する

• 残り 5 分

ボット アプリをビルドしました。 次に、最初のメッセージ拡張機能アプリを作成しましょう。

メッセージ拡張機能を使用すると、Web サービスと対話できます。 Teams クライアントの作成領域、コマンド ボックス、またはメッセージングを使用して、外部システムを検索したり、外部システムで操作を開始したりできます。

Teams メッセージ拡張機能には、以下の 2 種類があります。

• 検索コマンド: 外部システムを検索できます。 次に、その結果をカード形式でメッセージに挿入できます。
• アクション コマンド: 情報を収集または表示するためのモーダル ポップアップをユーザーに表示できます。 その後、対話を処理し、Teams に情報を送信できます。

検索コマンドを使用してメッセージ拡張機能を作成しましょう。 それを使用して、外部データを検索し、結果を Teams クライアント内のメッセージに挿入します。

これらのアプリを作成する準備は既に整っているので、メッセージ拡張機能アプリを作成するための新しい Teams プロジェクトを設定できます。

このチュートリアルでは以下を学習します。

1. Teams Toolkit を使用して新しいメッセージ拡張機能プロジェクトを設定する方法。
2. アプリ プロジェクトのディレクトリ構造について。

メッセージ拡張機能プロジェクト ワークスペースを作成する

前提条件を満たしている場合は、始めましょう。

ボットベースのメッセージ拡張機能プラグインを作成するには、次の手順に従います。

1. Visual Studio Code を開きます。

2. Visual Studio Code アクティビティ バーの [Teams Toolkit ] アイコンを選択します。

3. [ 新しいアプリの作成] を選択します。

   

4. Teams Toolkit を使用してアプリを作成するには、[ メッセージ拡張機能] を選択します。

   

5. [ カスタム検索結果] を選択します。

   

6. [ ボットから開始] を選択します。

   

7. プログラミング言語として [JavaScript] を選択します。

   

8. [既定のフォルダー] を選択して、プロジェクトのルート フォルダーを既定の場所に格納します。

   

   次の手順で既定の場所を変更することもできます。

   1. [ 参照] を選択します。

      

   2. プロジェクト ワークスペースの場所を選択します。

   3. [ フォルダーの選択] を選択します。

      

9. アプリに適した名前を入力します。 Enter キーを押します。

   

   数秒で、Teams Toolkit によりアプリが作成されます。

   

   アプリが作成されると、Teams Toolkit に次のメッセージが表示されます。

   

   [ ローカル デバッグ ] を選択して、プロジェクトをプレビューできます。

メッセージ拡張機能アプリのソース コードのツアーを開始する

メッセージ拡張機能では Bot Framework を使用します。 これを使用して、会話を介してサービスと対話します。 スキャフォールディングが完了した後、プロジェクトのディレクトリとファイルを Visual Studio Code のエクスプローラー領域で確認できます。

最初のボット ベースのメッセージ拡張機能プラグインをビルドして実行する

• 残り 4 分

Teams Toolkit を使用してプロジェクト ワークスペースを設定したら、次にプロジェクトをビルドします。 Microsoft 365 アカウントにサインインする必要があります。

Microsoft 365 アカウントにサインインする

このアカウントを使用して、Teams にサインインします。 Microsoft 365 開発者プログラム テナントを使用している場合は、Microsoft 365 アカウントは、登録中に設定した管理者アカウントです。

1. Visual Studio Code を開きます。

2. サイド バーで Teams Toolkit アイコンを選択します。

3. [資格情報 を使用して M365 にサインイン する] を選択します。

   既定の Web ブラウザーが開き、アカウントにサインインできます。

4. メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。

5. Visual Studio Code 内の Teams Toolkit に戻ります。

   サイドバーの [アカウント] セクションに、Microsoft 365 アカウントの名前が表示されます。 Microsoft 365 アカウントでカスタム アプリのアップロードが有効になっている場合、Teams Toolkit では サイドローディング が有効と表示されます。

   

   これで、アプリをビルドし、ローカルで実行する準備が整いました。

ローカル環境でアプリをビルドして実行する

メッセージ拡張機能を使用すると、Web サービスを操作できます。 メッセージング機能とボットのセキュリティで保護された通信を利用します。 メッセージ拡張機能アプリは、ボットとして登録された Web サービスに追加されます。

アプリをローカルでビルドして実行する

1. 左側のウィンドウで、 実行とデバッグ (Ctrl + Shift + D) を選択します。

2. [ Teams でのデバッグ (Edge)] または [ Teams でのデバッグ (Chrome)] の順に選択します。 Teams Toolkit は、Web ブラウザーを使用して Teams でアプリを起動します。

3. F5 キーを押して、アプリをローカルでビルドして実行します。

   注:

   Teams Toolkit で特定の前提条件を確認できない場合は、確認を求めるメッセージが表示されます。

   デバッガーでアプリをローカルで実行した場合の動作について説明します。

   F5 を選択すると、Teams Toolkit によって以下の処理が行われます。

   1. 次のすべての前提条件を確認します。

   • Microsoft 365 アカウントでログインしています。
   • カスタム アプリのアップロードは、Microsoft 365 アカウントで有効になっています。
   • サポートされている Node.js バージョンがインストールされています。
   • ボット アプリで必要なポートを使用できます。

   2. npm パッケージをインストールする
   3. Dev Tunnel を開始して HTTP トンネルを作成します。
   4. Microsoft Entra ID でアプリを登録し、アプリを構成します。
   5. Bot Framework にボット アプリを登録し、アプリを構成します。
   6. Teams 開発者ポータルにアプリを登録し、アプリを構成します。
   7. ローカルでホストされているメッセージ拡張機能アプリを起動します。
   8. Web ブラウザーで Teams を起動し、Teams アプリをアップロードします。

   

   注:

   アプリを初めて実行すると、すべての依存関係がダウンロードされ、アプリがビルドされます。 ビルドが完了すると、ブラウザー ウィンドウが開きます。 このプロセスが完了するまでに 3 分から 5 分かかる場合があります。

4. [追加] を選択します。 アプリは Teams にインストールされます。

   

   メッセージ拡張機能は、ユーザーと Web サービス間の通信を有効にするためにボットに依存しているため、アプリはボットのチャット機能に読み込まれます。

   • メッセージ拡張機能アプリを作成する前にボット アプリを作成した場合は、作成したボット アプリと同じボット アプリに読み込まれていることがわかります。 以前のチャット メッセージが表示されます。
   • 最初にメッセージ拡張機能を作成した場合、アプリは、Teams で開かれているすべてのチャットに読み込まれます。

   注:

   アプリを Outlook と Microsoft 365 に拡張する場合は、Visual Studio Code の [実行とデバッグ] ドロップダウンから、Outlook と Microsoft 365 を使用してアプリをデバッグできます。

アプリのテスト

アプリが初めて読み込まれると、テストを行うためにメッセージ拡張機能アプリが開きます。 このサンプル アプリを使用すると、ソフトウェア レジストリからオープンソースの npm パッケージを検索できます。

検索クエリを実行するには

1. Teams チャットに移動し、[ アクションとアプリ] を選択します。

2. メッセージ拡張機能のポップアップ メニューから、検索ボックスからメッセージ拡張機能の名前を入力します。

3. メッセージ拡張機能を選択し、検索クエリを入力します。

   

4. 一覧から製品を選択します。 Teams は、メッセージ作成領域のアダプティブ カードに製品を展開します。

5. [送信] を選びます。 アダプティブ カードが送信されます。

   

M365 チャットでボットベースのメッセージ拡張機能プラグインをトリガーする

• 残り 3 分

M365 チャットでメッセージ拡張機能をトリガーするには、次の手順に従います。

1. 左側のウィンドウで、[ Teams ツールキット] を選択します。

2. 左側のウィンドウで、 実行とデバッグ (Ctrl + Shift + D) を選択します。

3. [ Copilot (Edge) でデバッグする] または [ Copilot (Chrome)] で [デバッグ] を選択します。

4. [F5] を選択して、M365 チャットでアプリをビルドして実行します。

5. [Microsoft Teams>Apps] に移動します。

6. M365 チャットを検索し、アプリを開きます。

7. [ プラグイン] を選択します。

8. プラグインの一覧から、アプリのトグルをオンにします。

   

9. メッセージ作成領域から M365 Chat にメッセージを送信して、Teams と Copilot で npm パッケージ情報を検索します。 たとえば、npm-searchlocal で teamsfx-react の npm パッケージ情報を見つけます。

   

最初の Teams アプリをデプロイする

• 残り 2 分

メッセージ拡張機能を使用して Teams アプリを作成、ビルド、実行する方法について学習しました。 最後の手順は、アプリを Azure に展開することです。

Teams Toolkit を使用して、Azure に最初のメッセージ拡張機能アプリをデプロイしましょう。

Azure アカウントにサインインする

このアカウントを使用して、Microsoft Azure potral にアクセスし、アプリをサポートする新しいクラウド リソースをプロビジョニングします。

1. Visual Studio Code を開きます。

2. メッセージ拡張機能アプリを作成したプロジェクト フォルダーを開きます。

3. サイド バーで Teams Toolkit アイコンを選択します。

4. [資格情報 を使用して Azure にサインインする ] を選択します。

   ヒント

   AZURE ACCOUNT 拡張機能がインストールされていて、同じアカウントを使用している場合は、この手順をスキップできます。 他の拡張機能で使用しているのと同じアカウントを使用します。

   既定の Web ブラウザーが開き、アカウントにサインインできます。

5. メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。

   サイドバーの [アカウント] セクションに、2 つのアカウントが個別に表示されます。 また、使用可能な Azure サブスクリプションの数も一覧表示されます。 使用可能な Azure サブスクリプションが少なくとも 1 つあることを確認します。 ない場合は、サインアウトして別のアカウントを使用します。

   これで、Azure アカウントにサインインできました。 次に、Teams Toolkit を使用していずれかのアプリを Azure にデプロイする方法について説明します。

アプリを Azure にデプロイする

デプロイは、2 つの手順で構成されます。 まず、必要なクラウド リソースが作成されます (プロビジョニングとも呼ばれます)。 次に、アプリのコードが作成されたクラウド リソースにコピーされます。 このチュートリアルでは、メッセージ拡張機能アプリをデプロイします。

Visual Studio Code のサイド バーで Teams Toolkit アイコンを選択します。

1. [プロビジョニング] を選択します。

   

2. Azure リソースに使用するサブスクリプションを選択します。

   

   アプリは Azure リソースを使用してホストされます。 Azure でリソースを実行するときにコストが発生する可能性があることを示すダイアログが表示されます。

3. [プロビジョニング] を選択します。

   

   プロビジョニング プロセスでは、Azure クラウドにリソースが作成されます。 時間がかかる場合があります。 進行状況を監視するには、右下隅にあるダイアログを確認します。 数分後に、次の通知が表示されます。

   

   必要に応じて、プロビジョニングされたリソースを表示できます。 このチュートリアルでは、リソースを表示する必要はありません。

   プロビジョニングされたリソースが [環境 ] セクションに表示されます。

   

4. プロビジョニングが完了したら、[ライフサイクル] パネルから [デプロイ] を選択します。

   

プロビジョニングと同様に、デプロイには時間がかかります。 プロセスを監視するには、右下隅にあるダイアログを確認します。 数分後に完了通知が表示されます。

これで、同じプロセスを使用して、ボットとメッセージ拡張機能アプリを Azure にデプロイできます。

デプロイされたアプリを実行する

プロビジョニングとデプロイの手順が完了したら、次の手順を実行します。

1. Visual Studio Code からデバッグ パネル (Ctrl + Shift + D / ⌘⇧-D または ビュー > Run) を開きます。

2. [起動構成] ドロップダウンから [ リモートの起動 (Edge)] を選択します。

3. [ デバッグの開始 ] (F5) を選択して、Azure からアプリを起動します。

   

4. [追加] を選択します。

   

おめでとうございます!

• 100% 完了しました

ボットベースのメッセージ拡張機能を作成し、M365 Chat でメッセージ拡張機能をプラグインとして拡張しました。