Microsoft 365 Copilot用のボットベースのメッセージ拡張プラグインを構築する
注:
- ボットベースの検索メッセージ拡張機能プラグインは、 パブリック開発者プレビューで利用できます。
- Microsoft 365 Copilotでは、ボットベースの検索メッセージ拡張機能のみをプラグインとして拡張できます。
- Microsoft 365 Copilot用のプラグインはプレビュー段階であり、Microsoft TeamsのMicrosoft 365 Copilotでのみ機能します。
最初の Teams アプリを使用して Microsoft Teams アプリの開発を開始します。 JavaScript を使用して、Teams を使用してボットベースのメッセージ拡張機能プラグインを作成できます。
このチュートリアルでは、次の方法について学ぶことができます:
- Teams Toolkit を使用して新しいプロジェクトを設定する方法。
- ボットベースのメッセージ拡張機能プラグインを構築する方法。
- アプリをデプロイする方法。
- Microsoft 365 Copilotでボットベースのメッセージ拡張機能プラグインをトリガーします。
このステップ バイ ステップ ガイドは、Teams Toolkit を使用してボットベースのメッセージ拡張機能プラグインを構築するのに役立ちます。 このガイドを完了すると、次の出力が表示されます。
前提条件
アプリをビルドして展開するための次のツールを必ずインストールしてください。
インストール | 使用するには... | |
---|---|---|
必須 | ||
Visual Studio Code | JavaScript または TypeScript、ビルド環境。 最新バージョンを使用します。 | |
Teams ツールキット | アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 プレリリース バージョンを使用します。 | |
Node.js | バックエンド JavaScript ランタイム環境。 詳細については、「 プロジェクトの種類Node.js バージョン互換性テーブル」を参照してください。 | |
Microsoft Teams | Microsoft Teams、チャット、会議、通話を 1 か所で行うためにアプリを通じて作業するすべてのユーザーと共同作業を行うことができます。 | |
Microsoft Edge (推奨) または Google Chrome | 開発者ツールを備えたブラウザー。 | |
Microsoft 365 開発者アカウント | アプリをインストールするための適切なアクセス許可を持つ Teams アカウントにアクセスします。 | |
Microsoft 365 Copilot | Microsoft 365 Copilotはパブリック プレビュー段階です。 organizationでMicrosoft 365 Copilotが使用可能であることを確認します。 Microsoft 365 Copilotの開発環境を取得するには、次の 2 つの方法があります。 - Microsoft 365 Copilotを持つサンドボックス Microsoft 365 テナント (TAP メンバーシップを通じて限定プレビューで利用できます)。 - Microsoft 365 Copilot ライセンスを持つエンタープライズ顧客の運用環境。 |
|
Optional | ||
Azure Tools for Visual Studio Code および Azure CLI | 保存されたデータにアクセスしたり、Azure で Teams アプリ用のクラウドベースのバックエンドをデプロイしたりするための Azure ツール。 | |
React Chrome 用開発者ツールまたは Microsoft Edge 用 React 開発者ツール | オープン ソース React JavaScript ライブラリのブラウザー DevTools 拡張機能。 |
開発環境を準備する
必要なツールをインストールしたら、開発環境を設定します。
Teams Toolkit のインストール
注:
ボットベースのメッセージ拡張機能に対する Teams Toolkit のサポートは、Teams Toolkit プレリリース バージョンでのみ使用できます。 作業を開始する前に、 Teams Toolkit プレリリース バージョンがインストールされていることを確認してください。
Microsoft Teams Toolkit は、アプリのクラウド リソースをプロビジョニングしてデプロイし、Teams ストアに発行するツールを使用して、開発プロセスを簡略化するのに役立ちます。
Visual Studio Code で Teams Toolkit を使用できます。 Teams Toolkit をインストールするには、次の手順に従います。
Visual Studio Code を開き、[ 拡張機能 ] を選択します (Ctrl + Shift + X / ⌘⇧-X または [ > 拡張機能の表示] )。
検索ボックスに、「Teams Toolkit」と入力します。
[Teams ツールキット] ページで、[ インストール] の横にあるドロップダウン矢印を選択します。
[ プレリリース バージョンのインストール] を選択します。
Teams Toolkit アイコンは、インストール後に Visual Studio Code アクティビティ バー に表示されます。
Teams 開発テナントを設定する
テナントは、Teams のorganizationのスペースまたはコンテナーであり、チャット、ファイルの共有、会議の実行を行います。 この領域は、アプリをアップロードしてテストする場所でもあります。 テナントを使って開発する準備ができているかどうかを確認しましょう。
アプリのアップロード オプションを確認する
アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。 このプロセスは、アプリのアップロードと呼ばれます。 このオプションを表示するには、Microsoft 365 アカウントにサインインします。
注:
Teams ローカル環境でアプリをプレビューおよびテストするためにアプリのアップロードを有効にしていることを確認します。
カスタム アプリのアップロードはテナント経由で有効になっており、管理者はカスタム アプリをアップロードするためのアクセス権を付与する必要があります。 テナントと管理者アクセス権は既にありますか? 実際にあるかどうかを確認しましょう。
Teams でアプリをアップロードできるかどうかを確認します。
Teams クライアントで、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
[カスタム アプリのアップロード] オプションを探します。 オプションが表示されている場合は、カスタム アプリのアップロードが有効になっています。
注:
カスタム アプリをアップロードするオプションが見つからない場合は、Teams 管理者に問い合わせてください。
無料の Teams 開発者テナントを作成する (省略可能)
Teams 開発者アカウントをお持ちでない場合は、無料で入手できます。 Microsoft 365 開発者プログラムに参加します。
Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[E5 サブスクリプションの設定] を選択します。
管理者アカウントを設定します。 完了すると、次の画面が表示されます。
設定した管理者アカウントを使用して Teams にサインインします。 Teams で [カスタム アプリのアップロード] オプションがあることを確認します。
無料の Azure アカウントを取得します。
アプリをホストする場合、または Azure でリソースにアクセスする場合は、Azure サブスクリプションが必要です。 開始する前に無料でアカウントを作成してください。
これで、アカウントを設定するためのツールがすべて揃いました。 次に、開発環境を設定し、ビルドを開始しましょう。 最初に作成するアプリを選択します。
メッセージ拡張機能アプリ用のプロジェクト ワークスペースを作成する
ボット アプリをビルドしました。 次に、最初のメッセージ拡張機能アプリを作成しましょう。
メッセージ拡張機能を使用すると、Web サービスと対話できます。 Teams クライアントの作成領域、コマンド ボックス、またはメッセージングを使用して、外部システムを検索したり、外部システムで操作を開始したりできます。
Teams メッセージ拡張機能には、以下の 2 種類があります。
- 検索コマンド: 外部システムを検索できます。 次に、その結果をカード形式でメッセージに挿入できます。
- アクション コマンド: 情報を収集または表示するためのモーダル ポップアップをユーザーに表示できます。 その後、対話を処理し、Teams に情報を送信できます。
検索コマンドを使用してメッセージ拡張機能を作成しましょう。 それを使用して、外部データを検索し、結果を Teams クライアント内のメッセージに挿入します。
これらのアプリを作成する準備は既に整っているので、メッセージ拡張機能アプリを作成するための新しい Teams プロジェクトを設定できます。
注:
- メッセージ拡張機能は、ユーザーとコードの間のダイアログを提供するボットに依存しています。
- Microsoft 365 Copilotのプラグインとして拡張できるのは、ボットベースの検索メッセージ拡張機能のみです。
このチュートリアルでは以下を学習します。
メッセージ拡張機能プロジェクト ワークスペースを作成する
前提条件を満たしている場合は、始めましょう。
ボットベースのメッセージ拡張機能プラグインを作成するには、次の手順に従います。
Visual Studio Code を開きます。
Visual Studio Code アクティビティ バーの [Teams Toolkit ] アイコンを選択します。
[ 新しいアプリの作成] を選択します。
Teams Toolkit を使用してアプリを作成するには、[ メッセージ拡張機能] を選択します。
[ カスタム検索結果] を選択します。
[ ボットから開始] を選択します。
プログラミング言語として [JavaScript] を選択します。
[既定のフォルダー] を選択して、プロジェクトのルート フォルダーを既定の場所に格納します。
次の手順で既定の場所を変更することもできます。
[ 参照] を選択します。
プロジェクト ワークスペースの場所を選択します。
[ フォルダーの選択] を選択します。
アプリに適した名前を入力します。 Enter キーを押します。
数秒で、Teams Toolkit によりアプリが作成されます。
アプリが作成されると、Teams Toolkit に次のメッセージが表示されます。
[ ローカル デバッグ ] を選択して、プロジェクトをプレビューできます。
Teams アプリを作成する簡単な要約。
Teams アプリを作成するためのこの短い要約をご覧ください。
メッセージ拡張機能アプリのソース コードのツアーを開始する
メッセージ拡張機能では Bot Framework を使用します。 これを使用して、会話を介してサービスと対話します。 スキャフォールディングが完了した後、プロジェクトのディレクトリとファイルを Visual Studio Code のエクスプローラー領域で確認できます。
フォルダー/ファイル | コンテンツ |
---|---|
teamsapp.yml |
メイン プロジェクト ファイルは、アプリケーションの構成を記述し、各ライフサイクル ステージで実行するアクションのセットを定義します。 |
teamsapp.local.yml |
これにより、ローカル実行とデバッグを有効にするアクションで teamsapp.yml がオーバーライドされます。 |
.vscode/ |
ローカル デバッグ用の VS Code ファイル。 |
src/ |
検索アプリケーションのソース コード。 |
appPackage/ |
Teams アプリケーション マニフェストのテンプレート。 |
infra/ |
Azure リソースをプロビジョニングするためのテンプレート。 |
src/searchApp.js |
npm レジストリを照会して結果一覧を返す、このアプリ テンプレートのビジネス ロジックを処理します。 詳細については、「 Teams Toolkit Visual Studio Code v5 ガイド 」を参照して、Teams Toolkit のしくみを理解してください。 |
src/index.js |
index.js は、メッセージ拡張機能の設定と構成に使用されます。 詳細については、「 Teams Toolkit Visual Studio Code v5 ガイド 」を参照して、Teams Toolkit のしくみを理解してください。 |
ヒント
Teams 内でアプリを統合する前に、Teams 外のボットとメッセージ拡張機能に慣れておきましょう。
最初のボット ベースのメッセージ拡張機能プラグインをビルドして実行する
Teams Toolkit を使用してプロジェクト ワークスペースを設定したら、次にプロジェクトをビルドします。 Microsoft 365 アカウントにサインインする必要があります。
Microsoft 365 アカウントにサインインする
このアカウントを使用して、Teams にサインインします。 Microsoft 365 開発者プログラム テナントを使用している場合は、Microsoft 365 アカウントは、登録中に設定した管理者アカウントです。
Visual Studio Code を開きます。
サイド バーで Teams Toolkit アイコンを選択します。
[資格情報 を使用して Microsoft 365 にサインインする ] を選択します。
既定の Web ブラウザーが開き、アカウントにサインインできます。
メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。
Visual Studio Code 内の Teams Toolkit に戻ります。
サイドバーの [アカウント] セクションに、Microsoft 365 アカウントの名前が表示されます。 Microsoft 365 アカウントでカスタム アプリのアップロードが有効になっている場合、Teams Toolkit では サイドローディング が有効と表示されます。
これで、アプリをビルドし、ローカルで実行する準備が整いました。
ローカル環境でアプリをビルドして実行する
メッセージ拡張機能を使用すると、Web サービスを操作できます。 メッセージング機能とボットのセキュリティで保護された通信を利用します。 メッセージ拡張機能アプリは、ボットとして登録された Web サービスに追加されます。
アプリをローカルでビルドして実行する
左側のウィンドウで、 実行とデバッグ (Ctrl + Shift + D) を選択します。
[ Teams でのデバッグ (Edge)] または [ Teams でのデバッグ (Chrome)] の順に選択します。 Teams Toolkit は、Web ブラウザーを使用して Teams でアプリを起動します。
F5 キーを押して、アプリをローカルでビルドして実行します。
注:
Teams Toolkit が特定の前提条件をチェックできない場合は、チェックするように求められます。
デバッガーでアプリをローカルで実行した場合の動作について説明します。
F5 を選択すると、Teams Toolkit によって以下の処理が行われます。
- 次のすべての前提条件を確認します。
- Microsoft 365 アカウントでログインしています。
- カスタム アプリのアップロードは、Microsoft 365 アカウントで有効になっています。
- サポートされている Node.js バージョンがインストールされています。
- ボット アプリで必要なポートを使用できます。
- npm パッケージをインストールする
- Dev Tunnel を開始して HTTP トンネルを作成します。
- Microsoft Entra IDにアプリを登録し、アプリを構成します。
- Bot Framework にボット アプリを登録し、アプリを構成します。
- Teams 開発者ポータルにアプリを登録し、アプリを構成します。
- ローカルでホストされているメッセージ拡張機能アプリを起動します。
- Web ブラウザーで Teams を起動し、Teams アプリをアップロードします。
注:
アプリを初めて実行すると、すべての依存関係がダウンロードされ、アプリがビルドされます。 ビルドが完了すると、ブラウザー ウィンドウが開きます。 このプロセスが完了するまでに 3 分から 5 分かかる場合があります。
[追加] を選択します。 アプリは Teams にインストールされます。
メッセージ拡張機能は、ユーザーと Web サービス間の通信を有効にするためにボットに依存しているため、アプリはボットのチャット機能に読み込まれます。
- メッセージ拡張機能アプリを作成する前にボット アプリを作成した場合は、作成したボット アプリと同じボット アプリに読み込まれていることがわかります。 以前のチャット メッセージが表示されます。
- 最初にメッセージ拡張機能を作成した場合、アプリは、Teams で開かれているすべてのチャットに読み込まれます。
注:
アプリを Outlook と Microsoft 365 に拡張する場合は、Visual Studio Code の [実行とデバッグ] ドロップダウンから、Outlook と Microsoft 365 を使用してアプリをデバッグできます。
アプリのテスト
アプリが初めて読み込まれると、テストを行うためにメッセージ拡張機能アプリが開きます。 このサンプル アプリを使用すると、ソフトウェア レジストリからオープンソースの npm パッケージを検索できます。
検索クエリを実行するには
Teams チャットに移動し、[ アクションとアプリ] を選択します。
メッセージ拡張機能のポップアップ メニューから、検索ボックスからメッセージ拡張機能の名前を入力します。
メッセージ拡張機能を選択し、検索クエリを入力します。
一覧から製品を選択します。 Teams は、メッセージ Compose領域のアダプティブ カードに製品を展開します。
[送信] を選びます。 アダプティブ カードが送信されます。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを実行するには、カスタム アプリのアップロードを許可する Microsoft 365 開発アカウントが必要です。 カスタム アプリのアップロードの詳細については、「前提条件」セクションを参照してください。
Microsoft 365 Copilotでボットベースのメッセージ拡張機能プラグインをトリガーする
Microsoft 365 Copilotでメッセージ拡張機能をトリガーするには、次の手順に従います。
左側のウィンドウで、[ Teams ツールキット] を選択します。
左側のウィンドウで、 実行とデバッグ (Ctrl + Shift + D) を選択します。
[ Copilot (Edge) でデバッグする] または [ Copilot (Chrome)] で [デバッグ] を選択します。
[F5] を選択して、Microsoft 365 Copilotでアプリをビルドして実行します。
[Microsoft Teams>Apps] に移動します。
Copilot を検索し、アプリを開きます。
[ プラグイン] を選択します。
プラグインの一覧から、アプリのトグルをオンにします。
メッセージ作成領域からMicrosoft 365 Copilotにメッセージを送信して、Teams とMicrosoft 365 Copilotで npm パッケージ情報を検索します。 たとえば、npm-searchlocal で teamsfx-react の npm パッケージ情報を見つけます。
注:
このプロンプトでは、メッセージ拡張機能からの応答を含Microsoft 365 Copilot場合があります。 その場合は、他のプロンプトを試すか、Microsoft 365 Copilot応答をサムダウンしてフィードバックを送信し、メッセージを残します。
最初の Teams アプリをデプロイする
メッセージ拡張機能を使用して Teams アプリを作成、ビルド、実行する方法について学習しました。 最後の手順は、アプリを Azure に展開することです。
Teams Toolkit を使用して、Azure に最初のメッセージ拡張機能アプリをデプロイしましょう。
Azure アカウントにサインインする
このアカウントを使用して、Microsoft Azure potral にアクセスし、アプリをサポートする新しいクラウド リソースをプロビジョニングします。
Visual Studio Code を開きます。
メッセージ拡張機能アプリを作成したプロジェクト フォルダーを開きます。
サイド バーで Teams Toolkit アイコンを選択します。
[資格情報 を使用して Azure にサインインする ] を選択します。
ヒント
AZURE ACCOUNT 拡張機能がインストールされていて、同じアカウントを使用している場合は、この手順をスキップできます。 他の拡張機能で使用しているのと同じアカウントを使用します。
既定の Web ブラウザーが開き、アカウントにサインインできます。
メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。
サイドバーの [アカウント] セクションに、2 つのアカウントが個別に表示されます。 また、使用可能な Azure サブスクリプションの数も一覧表示されます。 使用可能な Azure サブスクリプションが少なくとも 1 つあることを確認します。 ない場合は、サインアウトして別のアカウントを使用します。
これで、Azure アカウントにサインインできました。 次に、Teams Toolkit を使用していずれかのアプリを Azure にデプロイする方法について説明します。
アプリを Azure にデプロイする
デプロイは、2 つの手順で構成されます。 まず、必要なクラウド リソースが作成されます (プロビジョニングとも呼ばれます)。 次に、アプリのコードが作成されたクラウド リソースにコピーされます。 このチュートリアルでは、メッセージ拡張機能アプリをデプロイします。
プロビジョニングとデプロイの違いは何ですか?
[プロビジョニング] 手順では、アプリ用の Azure と Microsoft 365 にリソースを作成しますが、コード (HTML、CSS、JavaScript など) はリソースにコピーされません。 [デプロイ] ステップでは、プロビジョニング 手順中に作成したリソースにアプリのコードがコピーされます。 新しいリソースをプロビジョニングせずに複数回デプロイするのが一般的です。 プロビジョニング手順の完了には時間がかかる場合があるため、デプロイ手順とは別です。
Visual Studio Code のサイド バーで Teams Toolkit アイコンを選択します。
[プロビジョニング] を選択します。
Azure リソースに使用するサブスクリプションを選択します。
アプリは Azure リソースを使用してホストされます。 Azure でリソースを実行するときにコストが発生する可能性があることを示すダイアログが表示されます。
[プロビジョニング] を選択します。
プロビジョニング プロセスでは、Azure クラウドにリソースが作成されます。 時間がかかる場合があります。 進行状況を監視するには、右下隅にあるダイアログを確認します。 数分後に、次の通知が表示されます。
必要に応じて、プロビジョニングされたリソースを表示できます。 このチュートリアルでは、リソースを表示する必要はありません。
プロビジョニングされたリソースが [環境 ] セクションに表示されます。
プロビジョニングが完了したら、[ライフサイクル] パネルから [デプロイ] を選択します。
プロビジョニングと同様に、デプロイには時間がかかります。 プロセスを監視するには、右下隅にあるダイアログを確認します。 数分後に完了通知が表示されます。
これで、同じプロセスを使用して、ボットとメッセージ拡張機能アプリを Azure にデプロイできます。
デプロイされたアプリを実行する
プロビジョニングとデプロイの手順が完了したら、次の手順を実行します。
Visual Studio Code からデバッグ パネル (Ctrl + Shift + D / ⌘⇧-D または ビュー > Run) を開きます。
[起動構成] ドロップダウンから [ リモートの起動 (Edge)] を選択します。
[ デバッグの開始 ] (F5) を選択して、Azure からアプリを起動します。
[追加] を選択します。
アプリを Azure にデプロイした場合の動作について説明します
展開前は、このアプリケーションは以下のようにローカルで動作しています。
- バックエンドは、Azure Functions Core Tools を使用して実行します。
- アプリケーションの HTTP エンドポイントは、Microsoft Teams がアプリケーションを読み込む場所でローカルに実行されます。
デプロイは、2 つの手順で構成されるプロセスです。 アクティブな Azure サブスクリプションにリソースをプロビジョニングし、その後アプリケーションのバックエンド コードとフロントエンド コードを Azure にデプロイまたはアップロードします。
- バックエンドが構成済みの場合、Azure App Service や Azure Storage など、さまざまな Azure のサービスが使用されています。
- フロントエンド アプリケーションは、静的 Web ホスティング用に構成された Azure Storage アカウントにデプロイされます。
おめでとうございます!
ボットベースのメッセージ拡張機能を作成し、Microsoft 365 Copilotのプラグインとしてメッセージ拡張機能を拡張しました。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。
Platform Docs