チュートリアル

この記事では、Teams アプリの機能の構築について詳しく説明します。 Teams プラットフォームの機能で使用できるステップバイステップ ガイドの一覧を次に示します。

# 能力 ステップバイステップ ガイド
1. ボット - Microsoft 365 Agents Playground を使用して AI チャット ボットをデバッグする
- 事前対応型メッセージを送信する
2. メッセージ表示オプション - API ベースのメッセージ拡張機能のビルド
- アクションベースのメッセージ拡張機能の構築
- JavaScript を使用して最初のメッセージ拡張機能アプリを構築する
3. タブ C シャープを使用して最初のタブ アプリを構築する
4. SSO - SSO 認証を使用してボットを構築する
- タブとメッセージ拡張機能アプリに SSO を追加する

最初のボット アプリを構築する

最初の Teams アプリで Microsoft Teams アプリ開発を開始します。 Javascript を使用して Teams でボット アプリを作成できます。


最初のボットのビルド

アプリには、独自の UI と UX に付属する機能があります。

図は、このアプリに 3 つの機能があることを示しています。

このチュートリアルでは、次のことを学びます。

  • Microsoft 365 Agents Toolkit (以前は Teams Toolkit と呼ばれていました) を使用して新しいプロジェクトを設定する方法。
  • ボット アプリを構築する方法。
  • アプリをデプロイする方法。

前提条件

アプリのビルドとデプロイには、次のツールを必ずインストールしてください。

  インストール 使用中...
必須    
  Microsoft 365 Agents Toolkit アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 最新バージョンを使用します。
  Microsoft Teams Microsoft Teams は、チャット、会議、通話用のアプリをすべて 1 つの場所で使用し、共同作業するすべてのユーザーと共同作業を行います。
  Node.js バックエンド JavaScript ランタイム環境。 詳細については、「 プロジェクトの種類Node.js バージョン互換性表」を参照してください。
  Microsoft Edge (推奨) または Google Chrome 開発者ツールを備えたブラウザー。
  Visual Studio Code JavaScript、TypeScript、または SharePoint Framework (SPFx) ビルド環境。 最新バージョンを使用します。
オプション    
  Visual Studio Code および Azure CLI 用の Azure ツール 保存されているデータにアクセスしたり、Teams アプリのクラウドベースのバックエンドを Azure にデプロイしたりするための Azure ツール。
  Chrome 用の React 開発者ツールまたは Microsoft Edge 用の React 開発者ツール オープンソースの React JavaScript ライブラリ用のブラウザー DevTools 拡張機能。
  Microsoft Graph エクスプローラー Microsoft Graph エクスプローラー。Microsoft Graph データからクエリを実行できるブラウザーベースのツールです。
  Teams 用開発者ポータル Teams アプリを構成、管理、および発行するための Web ベースのポータル (organization や Microsoft Teams ストアなど)。

ヒント

Microsoft Graph データを操作する場合は、Microsoft Graph エクスプローラーについて理解してブックマークする必要があります。 このブラウザーベースのツールを使用すると、アプリの外部で Microsoft Graph にクエリを実行できます。

前提条件のセットアップ

必要なツールをインストールしたら、開発環境をセットアップします。

Microsoft 365 Agents Toolkit をインストールする

Microsoft 365 Agents Toolkit (旧称 Teams Toolkit) は、アプリのクラウド リソースをプロビジョニングおよび展開し、Teams ストアに公開するためのツールを使用して、開発プロセスを簡素化します。

Agents Toolkit は、Visual Studio Code、または Microsoft 365 Agents Toolkit CLI (以前は TeamsFx CLI と呼ばれていました) と呼ばれるコマンド ライン インターフェイスと共に使用できます。

  1. Visual Studio Code を開き、[拡張機能] (Ctrl+Shift+X または View>拡張機能) を選択します。

  2. 検索ボックスに「 Microsoft 365 Agents Toolkit」と入力します。

  3. [インストール] を選びます。

    スクリーンショットは、Agents Toolkit 拡張機能のインストールを示しています。

    Visual Studio Code アクティビティ バーに Microsoft 365 Agents Toolkit アイコンが表示されます。

Visual Studio Code Marketplace から Agents Toolkit をインストールすることもできます。

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

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

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

カスタム アプリを作成したら、[ カスタム アプリをアップロード ] オプションを使用してアプリを Teams にアップロードする必要があります。 Microsoft 365 アカウントにサインインして、このオプションが有効になっているかどうかチェックします。

次の手順は、Teams でアプリをアップロードできるかどうかを確認するのに役立ちます。

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

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

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

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

    スクリーンショットは、Teams でカスタム アプリをアップロードするオプションを示しています。

注

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

無料の Teams 開発者テナントを作成する

Teams 開発者アカウントをお持ちでない場合は、Microsoft 365 開発者プログラムに参加してください。 この手順は省略できます。

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

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

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

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

    スクリーンショットは、Microsoft 365 開発者プログラムを示しています。

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

無料の Azure アカウントを取得する

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

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

ボット アプリのプロジェクト ワークスペースを作成する

最初のボット アプリを作成しましょう。

Teams アプリのボット機能により、チャットボットまたは会話型ボットが作成されます。 これを使用して、顧客サービスの提供など、単純で自動化されたタスクを実行します。 ボットは Web サービスと通信し、ユーザーがそのサービスを使用できるように支援します。 会話型ボットを使用して、天気予報の取得、予約、その他のサービス提供を行うことができます。

このアプリには 3 つの機能があることを示す図。ボットが強調表示されます。

これらのアプリを作成する準備は既に完了しているので、ボット アプリを作成するための新しい Teams プロジェクトを設定できます。

このチュートリアルでは、次のことについて説明します。

  1. Agents Toolkit を使用して新しいボット プロジェクトを設定する方法。
  2. アプリ プロジェクトのディレクトリ構造について。

重要

ボットは、Government Community Cloud (GCC)、GCC High、国防総省 (DoD)、21Vianet 環境が運用している Teams で利用できます。

ボット プロジェクト ワークスペースを作成する

前提条件が整ったら、始めましょう!

注

表示される Visual Studio Code UI は Mac のものです。 オペレーティング システム、Agents Toolkit のバージョン、環境によって異なる場合があります。

  1. Visual Studio Code を開きます。

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

  3. [新しいエージェント/アプリ>Teams アプリの作成] を選択します。

    このスクリーンショットは、エージェント ツールキット サイドバーの [新しいプロジェクトの作成] リンクの場所を示しています。

  4. [ボット] を選択して、新しいボット プロジェクトを作成します。

    新しいプロジェクトを作成するウィザードを示すスクリーンショット。

  5. アプリにビルドするアプリ機能として [基本ボット ] が選択されていることを確認します。

    スクリーンショットは、新しいアプリに追加するアプリの機能を示しています。

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

    スクリーンショットは、プログラミング言語を選択するオプションを示しています。

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

    スクリーンショットは、既定の場所の選択を示しています。

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

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

      スクリーンショットは、参照場所オプションの選択を示しています。

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

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

      スクリーンショットは、選択するフォルダーを示しています。

  8. アプリに適切な名前を入力し、 Enter キーを押します。

    スクリーンショットは、アプリ名を入力する場所を示しています。

このフォルダー内のファイルの作成者を信頼するには、[はい] または [いいえ] を選択する必要があるダイアログが表示されます。

このフォルダー内のファイルの作成者を信頼するかどうかを確認するダイアログを示すスクリーンショット。

ボット機能を備えた Teams アプリは数秒で作成されます。

スクリーンショットは、作成されたアプリを示しています。

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

スクリーンショットは、機能が正常に作成されたことを示すメッセージを示しています。

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

Teams アプリの作成の簡単な要約。 Teams アプリの作成については、この短い要約をご覧ください。

Teams アプリを作成する

ボット アプリのソース コードのツアーを体験する

スキャフォールディングが完了したら、Visual Studio Code のエクスプローラーでプロジェクト ディレクトリとファイルを表示します。

スクリーンショットはフォルダー構造を示しています。

フォルダー/ファイル 目次
m365agents.yml メイン プロジェクト ファイル
m365agents.local.yml これにより、ローカルでの実行とデバッグを有効にするアクションで m365agents.yml がオーバーライドされます。
.vscode/ ローカル デバッグ用の VSCode ファイル。
appPackage/ Teams アプリケーション マニフェストのテンプレート。
adaptiveCards/ ボットによって送信されたアダプティブ カード。
infra/ Azure リソースをプロビジョニングするためのテンプレート。
index.js アプリケーション エントリ ポイントと express ハンドラー。
teamsBot.js Teams アクティビティ ハンドラー。

ヒント

最初のボットを Teams 内に統合する前に、Teams 外部のボットについて理解してください。

最初のボット アプリをビルドして実行する

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

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

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

  1. Visual Studio Code を開きます。

  2. サイドバーの Microsoft 365 Agents Toolkit アイコンを選択します。

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

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

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

  5. Visual Studio Code 内のエージェント ツールキットに戻ります。

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

    スクリーンショットは、Microsoft 365 と Azure にサインインする場所を示しています。

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

最初のボット アプリをローカルでビルドして実行する

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

  1. Visual Studio Code で F5 キーを押して、アプリをデバッグ モードで実行します。

    注

    Agents Toolkit で特定の前提条件をチェックできない場合は、チェックするように求められます。

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

    疑問に思うように、 F5 キーを押すと、エージェント ツールキット:

    1. 次のすべての前提条件をチェックします。
    • Microsoft 365 アカウントでログインしている。
    • Microsoft 365 アカウントでカスタム アプリのアップロードが有効になっています。
    • サポートされている Node.js バージョンがインストールされています。
    • ボット アプリに必要なポートが利用可能です。
    1. npm パッケージをインストールします。
    2. 開発トンネルを開始して HTTP トンネルを作成します。
    3. Microsoft Entra ID にアプリを登録し、アプリを構成します。
    4. Bot Framework にボット アプリを登録し、ボット アプリを構成します。
    5. Teams デベロッパー ポータルにアプリを登録し、アプリを構成します。
    6. ボット アプリを起動します。
    7. Web ブラウザーで Teams を起動し、カスタム ボット アプリをアップロードします。

    デバッグのために F5 キーが押されたときを示すスクリーンショット。

    注

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

    Teams は Web ブラウザーでアプリを実行します。

  2. メッセージが表示されたら、Microsoft 365 アカウントでサインインします。

  3. [ 追加 ] を選択して、カスタム ボット アプリを Teams にアップロードします。

    ボット アプリを Teams に追加するためのアプリの詳細ダイアログのスクリーンショット。

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

    または、必要な範囲を検索して選択するか、一覧からチャネル、チャット、または会議を選択し、ダイアログ間を移動して [移動] を選択することもできます。

    共有スコープの一覧を含むスコープ選択ダイアログのスクリーンショット。

    これでボットが Teams で正常に実行されるようになりました。 アプリが読み込まれると、ボットとのチャット セッションが開きます。

    スクリーンショットは、ボットが Teams クライアントで実行されていることを示しています。

    「welcome」と入力して概要カードを表示し、「learn」と入力してアダプティブ カードとボット コマンドのドキュメントに移動できます。

    スクリーンショットは、Teams クライアントのボットの学習カードを示しています。

    他の Web アプリケーションの場合と同様に、ブレークポイントの設定など、通常のデバッグ アクティビティを実行できます。 bot/teamsBot.js ファイルを開き、onMessage() メソッドを見つけます。 任意のケースにブレークポイントを設定します。 次に、テキストを入力します。

    アプリがローカルで実行されない場合のトラブルシューティングの方法について説明します。

    Teams でアプリを正常に実行するには、Teams アカウントでカスタム アプリのアップロードが有効になっていることを確認します。 カスタム アプリのアップロードの詳細については、前提条件セクションを参照してください。

    重要

    カスタム アプリのアップロードは Government Community Cloud (GCC) で利用できますが、21Vianet が運用する GCC High、DoD、Teams ではサポートされていません。

    ヒント

    カスタム アプリをアップロードする前に、 アプリ検証ツールを使用して問題を確認します。 このツールはツールキットに含まれています。 エラーを修正してアプリをアップロードします。

最初の Teams アプリを展開する

ボット機能を使用して Teams アプリを作成、構築、実行する方法を説明しました。 最後の手順では、Azure にアプリをデプロイします。

エージェント ツールキットを使用して、ボット機能を備えた最初のアプリを Azure にデプロイしましょう。

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

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

  1. Visual Studio Code を開きます。

  2. ボット アプリを作成したプロジェクト フォルダーを開きます。

  3. サイドバーの Microsoft 365 Agents Toolkit アイコンを選択します。

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

    ヒント

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

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

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

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

これで、Teams アプリが作成されました。 次に、Agents Toolkit を使用してアプリのいずれかを Azure にデプロイする方法を学びましょう。

Azure にアプリをプロビジョニングしてデプロイする

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

プロビジョニングとデプロイの違いは何ですか?
プロビジョニング手順では、アプリ用のリソースが Azure と Microsoft 365 に作成されますが、コード (HTML、CSS、または JavaScript) はリソースにコピーされません。 配置ステップでは、プロビジョニングステップで作成したリソースにアプリのコードがコピーされます。 新しいリソースをプロビジョニングせずに複数回デプロイすることは一般的です。 プロビジョニング手順は完了までに時間がかかる場合があるため、デプロイ手順とは別の手順です。

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

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

    [エージェント ツールキット] の下のクラウドでのプロビジョニングの選択を示すスクリーンショット。

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

    スクリーンショットは、Azure リソースに使用するサブスクリプションを示しています。

    アプリは Azure リソースを使用してホストされています。

    Azure でリソースを実行するときにコストが発生する可能性があることを警告するダイアログが表示されます。

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

    スクリーンショットは、Azure でリソースを実行するときにコストが発生する可能性があるダイアログ ボックスを示しています。

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

    スクリーンショットは、hellomsg がクラウドで正常にプロビジョニングされたことを示す通知を示しています。

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

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

    スクリーンショットは、[環境] セクションでプロビジョニングされているリソースを示しています。

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

    スクリーンショットは、クラウドへの展開が赤で強調表示されていることを示しています。

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

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

展開されたアプリの実行

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

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

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

  3. [ デバッグの開始] (F5) を選択します。 カスタム ボット アプリを Teams にアップロードするように求められます。

    スクリーンショットは、アプリをリモートでデバッグして起動することを示しています。

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

    アプリを Teams に追加するアプリの詳細ダイアログのスクリーンショット。

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

    または、必要な範囲を検索して選択するか、一覧からチャネル、チャット、または会議を選択し、ダイアログ間を移動して [移動] を選択することもできます。

    共有スコープの一覧が表示された、スコープ選択ダイアログのスクリーンショット。

    これで、ボット アプリが Teams クライアントに正常に追加されました。

    スクリーンショットは、Teams クライアントのボットの学習カードを示しています。

アプリを Azure にデプロイした場合に起こることの詳細

デプロイ前、アプリケーションはローカルで実行されています。

  • バックエンドは Azure Functions コア ツールを使用して実行されます。
  • Microsoft Teams がアプリケーションを読み込むアプリケーション HTTP エンドポイントは、ローカルで実行されます。

展開は 2 段階のプロセスです。 アクティブな Azure サブスクリプションでリソースをプロビジョニングし、アプリケーションのバックエンド コードとフロントエンド コードを Azure にデプロイまたはアップロードします。

  • バックエンドは (構成されている場合)、Azure App Service や Azure Storage など、さまざまな Azure サービスを使用します。
  • フロントエンド アプリケーションは、静的 Web ホスティング用に構成された Azure Storage アカウントにデプロイされます。

以上です。

これで完了です。

ボット アプリを作成しました。

基本的なアプリの作成方法を学習したので、より複雑なアプリの作成に進むことができます。 JavaScript を使用してボットを構築するためのチュートリアルを完了しました。

チュートリアル

Microsoft 365 Agents Playground を使用して AI チャット ボットをデバッグする

Teams AI チャット ボット アプリを使用して Microsoft Teams アプリの開発を開始し、Microsoft 365 Agents Playground (以前は Teams アプリ テスト ツールと呼ばれていました) を使用してデバッグします。 Agents Playground を使用すると、ボットベースのアプリのデバッグが簡単になります。 Agents Playground を使用するために、Microsoft 365 開発者アカウント、トンネリング、Teams アプリとボットの登録は必要ありません。


チュートリアル: AI チャット ボットをデバッグする

前提条件

ボットとチャットし、Teams に表示されるメッセージとアダプティブ カードを表示できます。 アクティビティ トリガーを使用して、Agents Playground でアクティビティをモックすることもできます。

注

  • Agents Playground は、Microsoft 365 Agents Toolkit (以前は Teams Toolkit と呼ばれていました) の v5.4.0 でのみ使用できます。
  • Agents Playground は、デスクトップ クライアントと Web クライアントでのみサポートされます。

このステップバイステップ ガイドは、Agents Toolkit を使用して AI チャット ボットを構築し、テスト ツールを使用してデバッグするのに役立ちます。 このガイドの完了後、ユーザーは次の出力が表示され、ユーザーは AI チャット ボットにアクセスして使用できます:

スクリーンショットは、ボットがテスト ツールで開かれていることを示しています。

インストール 使用中...
Visual Studio Code または Visual Studio JavaScript、TypeScript、または C# ビルド環境。 最新バージョンを使用します。
Microsoft 365 Agents Toolkit アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 Agents Toolkit v5.4.0 を使用します。 詳細については、「 エージェント ツールキットのインストール」を参照してください。
Node.js バックエンド JavaScript ランタイム環境。 詳細については、「 プロジェクトの種類Node.js バージョン互換性表」を参照してください。
OpenAI または Azure OpenAI まず、OpenAI の GPT を使用するための OpenAI API キーを作成します。 アプリをホストする場合、または Azure のリソースにアクセスする場合は、Azure OpenAI サービスを作成する必要があります。
Microsoft Edge (推奨) または Google Chrome 開発者ツールを備えたブラウザー。

AI チャット ボット アプリ用のプロジェクト ワークスペースを作成する

Teams アプリのボット機能により、チャットボットまたは会話型ボットが作成されます。 Web サービスと通信し、サービスの使用を容易にします。 このボットは、顧客サービスの提供などの単純な自動化されたタスクを実行できます。 会話型ボットを使用して、天気予報の取得、予約、その他のサービス提供を行うことができます。

スクリーンショットは、3 つの機能を備えたアプリを示しています。ボットが強調表示されます。

これらのアプリを作成する準備は既に完了しているので、AI チャット ボット アプリを作成するための新しい Teams プロジェクトを設定できます。

ボット プロジェクト ワークスペースを作成する

前提条件が整ったら、始めましょう!

  1. Visual Studio Code を開きます。

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

  3. [ 新しいエージェント/アプリの作成] を選択します。

    スクリーンショットは、エージェント ツールキット サイドバーの [新しいプロジェクトの作成] リンクの場所を示しています。

  4. 今すぐ [Teams>Azure OpenAI のエージェント] を選択し>入力Azure API サービス キーに入力を入力します

    Agents Toolkit アプリ テンプレートを示すスクリーンショット。

  5. [Teams の基本エージェント] を選択します。 ボットに別の機能が必要な場合は、必要なオプションを選択します。

    スクリーンショットは、新しいアプリに追加するアプリの機能を示しています。

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

    スクリーンショットには、プログラミング言語を選択するオプションが表示されます。

  7. 既定のフォルダーを選択します。

    スクリーンショットは、既定の場所の選択を表示します。

    既定の場所を変更するには、次の手順を実行します。

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

      スクリーンショットは、参照場所オプションの選択を示しています。

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

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

      スクリーンショットは、選択するフォルダーを示しています。

  8. アプリに適切な名前を入力し、 Enter キーを選択します。

    スクリーンショットは、アプリ名を入力する場所を示しています。

    このフォルダー内のファイルの作成者を信頼するには、[はい] または [いいえ] を選択する必要があるダイアログが表示されます。

    このフォルダー内のファイルの作成者を信頼するかどうかを確認するダイアログを示すスクリーンショット。

これで、AI チャット ボット プロジェクト ワークスペースが正常に作成されました。

ボット アプリのソース コードのツアーを体験する

スキャフォールディングが完了したら、Visual Studio Code の [エクスプローラー ] セクションでプロジェクト ディレクトリとファイルを調べます。

スクリーンショットは、Teams Toolkit サンプル ボット フォルダー構造を示しています。

フォルダーまたはファイル名 目次
env/.env.playground Git にコミットできる環境変数を含む構成ファイル。
env/.env.playground.user 資格情報を含む環境変数を含む構成ファイル。既定では Git にコミットされません。
appPackage アプリ マニフェスト テンプレート ファイルとアプリ アイコン (color.png と outline.png)。
appPackage/manifest.json ローカル環境とリモート環境でアプリを実行するためのアプリ マニフェスト。
src/app.js AI チャット ボットのビジネス ロジックを処理します。
m365agents.yml これはメインの Agents Toolkit プロジェクト ファイルです。 プロジェクト ファイルでは、プロパティと構成、およびステージ定義という 2 つの主要なものを定義します。
m365agents.local.yml これにより、ローカルでの実行とデバッグを有効にするアクションで m365agents.yml がオーバーライドされます。
m365agents.playground.yml これにより、テスト ツールでのローカル実行とデバッグを有効にするアクションで m365agents.yml がオーバーライドされます。

AI チャット ボット アプリを構築して実行する

AI チャット ボットの OpenAI キーとエンドポイントを作成する

  1. Azure portal に移動します。

  2. [リソースの作成] を選択し、Azure OpenAI を検索します。

  3. [Azure OpenAI]、[作成] の順に選択します。

    スクリーンショットは、Azure portal の Azure OpenAI を示しています。

  4. 必要な詳細を入力し、[ 次へ] を選択します。

    スクリーンショットは、Azure OpenAI サブスクリプションとリソース グループを示しています。

  5. [インターネットを含むすべてのネットワークがこのリソースにアクセスできる] を選択し、[次へ] を選択します。

    スクリーンショットは、Azure OpenAI ネットワークの詳細を示しています。

  6. 必要な詳細を入力し、[ 次へ] を選択します。

    スクリーンショットは、Azure OpenAI タグの詳細を示しています。

  7. [作成] を選択します。

    スクリーンショットは、Azure OpenAI をプレビューして作成する方法を示しています。

AI チャット ボットのキーとエンドポイントが正常に作成されました。

スクリーンショットは、Azure OpenAI のデプロイを示しています。

注

AI チャット ボットをデバッグするための OpenAI API キーを取得することもできます。

Azure OpenAI キーとエンドポイントを取得する

  1. [ リソースに移動] を選択します。

    スクリーンショットは、Azure OpenAI のデプロイを示しています。

  2. 左側のウィンドウから [ キーとエンドポイント ] を選択し、[ キー と エンドポイント] をコピーします。 KEY 1 または KEY 2 のどちらかをコピーできます。

    スクリーンショットはキーとエンドポイントを示しています。

    後で使用するために、 キー と エンドポイントを 保存します。

  3. 左側のペインから [ モデルのデプロイ] を選択し、[ デプロイの管理] を選択します。

    スクリーンショットは、Azure OpenAI のモデル デプロイを示しています。

    [Azure OpenAI Studio] ウィンドウが表示されます。

  4. 左側のウィンドウから [デプロイ] を選択し、[ + 新しいデプロイの作成] を選択します。

    スクリーンショットは、Azure OpenAI のモデル デプロイを示しています。

  5. 次の詳細を選択します。

    1. [Select a model] ドロップダウン リストから gpt-35-turbo を選択します。

      注

      AI チャット ボットでは gpt-35-turbo モデルのみがサポートされています。

    2. [モデル バージョン] ドロップダウン リストから [0301 (デフォルト)] を選択します。

    3. [デプロイ名] を入力し、[作成] を選択します。

      スクリーンショットは、Azure OpenAI デプロイのモデルとバージョンを示しています。

    4. 後で使用するために 、デプロイ名 をコピーして保存します。

      スクリーンショットは、Azure OpenAI デプロイのデプロイ名を示しています。

Azure OpenAI キーとエンドポイントを更新する

  1. Visual Studio Code でプロジェクトを開きます。

  2. [ エクスプローラー] で、 env>.env.playground.user ファイルに移動します。

  3. SECRET_AZURE_OPENAI_API_KEYとSECRET_AZURE_OPENAI_ENDPOINTを入力します。

    ...
SECRET_AZURE_OPENAI_API_KEY=<azure-openai-api-key>
SECRET_AZURE_OPENAI_ENDPOINT=<azure-openai-endpoint>

  4. src>app.js file に移動します。

  5. OpenAI コードにコメントを追加し、Azure OpenAI コードのコメントを解除します。

  6. azureDefaultDeployment に Azure OpenAI デプロイ名を入力します。

    
// Use OpenAI
// apiKey: config.openAIKey,
// defaultModel: "gpt-3.5-turbo",

azureApiKey: config.azureOpenAIKey,
azureDefaultDeployment: "gpt-35-turbo",
azureEndpoint: config.azureOpenAIEndpoint,

AI チャット ボット アプリをデバッグして実行する

  1. 左側のウィンドウで、[ 実行]と [デバッグ ] (Ctrl+Shift+D) を選択し、ドロップダウン リストから [ エージェント プレイグラウンドでデバッグ ] を選択します。

    スクリーンショットは、Agents Playground でデバッグを選択するオプションを示しています。

  2. Agents Playground は、AI チャット ボットを Web ページで開きます。

    スクリーンショットは、ボットがテスト ツールで開かれていることを示しています。

アクティビティのトリガー

アクティビティ トリガーには、次の 2 種類があります。

事前定義されたアクティビティ トリガー

Agents Playground には、ボットの機能をテストするための事前定義されたアクティビティ トリガーが用意されています。

[カテゴリ] アクティビティ Handler
インストール更新アクティビティのトリガー ボットのインストール


ボットのアンインストール		 onInstallationUpdate
onInstallationUpdateAdded

onInstallationUpdate
onInstallationUpdateRemove
会話更新アクティビティのトリガー ユーザーを追加する


ボットの追加


チャネルを追加する		 onMembersAdded
onTeamsMembersAddedEvent

onMembersAdded
onTeamsMembersAddedEvent

onTeamsChannelCreatedEvent
ユーザーの削除


ボットの削除


チャネルを削除する

チームを削除する		 onMembersRemoved
onTeamsMembersRemovedEvent

onMembersRemoved
onTeamsMembersRemovedEvent

onTeamsChannelDeletedEvent

onTeamsTeamDeletedEvent
チャネル名の変更

チーム名の変更		 onTeamsChannelRenamedEvent

onTeamsTeamRenamedEvent

注

すべての種類のアクティビティをすべてのスコープで使用できるわけではありません。 たとえば、個人用チャットまたはグループ チャットでチャネルを追加または削除することはできません。

定義済みのアクティビティトリガーは、Agents Playgroundの[ Mock an Activity] メニューで使用できます。

[ ユーザーの追加 ] アクティビティをモックするには、次の手順に従います。

  1. エージェント プレイグラウンドで、[ アクティビティのモック>ユーザーの追加] に移動します。

    アクティビティのモックの下にある [ユーザーの追加] オプションを示すスクリーンショット。

    アクティビティ ハンドラーをプレビューするためのダイアログが表示されます。

  2. [ アクティビティの送信] を選択します。

    スクリーンショットは、定義済みの疑似アクティビティのアクティビティを送信するためのユーザー追加オプションを示しています。

    ボットは次の応答を送信します:

    スクリーンショットは、定義済みのモック アクティビティのユーザー追加の応答を示しています。

カスタム アクティビティ トリガー

カスタム アクティビティを使用して、ボット アプリの要件を満たすreactionsAddedなど、アクティビティ トリガーをカスタマイズできます。 Agents Playground は、アクティビティに必要なプロパティを自動的に設定します。 アクティビティの種類を変更して、その他のプロパティを追加することもできます。

  1. [ アクティビティのモック>カスタム アクティビティ] を選択します。

    スクリーンショットは、アクティビティのモックの下にあるオプションの一覧を示しています。

  2. messageReactionを追加して、type プロパティでアクティビティをカスタマイズします。

    {
    "type": "messageReaction",
    "reactionsAdded": [
    {
        "type": "like"
    }
    ],
    "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47"
}

  3. [ アクティビティの送信] を選択します。

    スクリーンショットは、モック アクティビティのカスタマイズ後にアクティビティを送信するオプションを示しています。

    ボットは応答として onReactionsAdded ハンドラーを送信します。

    スクリーンショットは、カスタム モック アクティビティの応答を示しています。

チャレンジを完了する

このような出力を思いつきましたか?

スクリーンショットは、ボットがテスト ツールで開かれていることを示しています。

以上です。 AI チャット ボット アプリが正常に作成されました。 これで、Agents Playground で AI チャット ボット アプリをデバッグする方法を学びました。

Microsoft 365 Agents Playground

先頭に戻る

事前対応型メッセージを送信する

プロアクティブ メッセージは、ユーザーからチャットで送信された単純なコマンドに応答してボットによって送信されるメッセージです。


チュートリアル: 事前対応型メッセージを送信する

メッセージ応答は次のいずれかの形式になります。

  • ウェルカム メッセージ
  • スケジュール済みメッセージ
  • 通知

このステップバイステップ ガイドは、ボットから事前対応型メッセージを送信するのに役立ちます。 次の出力が表示されます:

スクリーンショットは、Teams チャットの積極的な hello メッセージを示しています。

前提条件

アプリをビルドおよびデプロイするために、次のツールをインストールしてください。

  インストール 使用する場合
  Microsoft Visual Studio Code JavaScript または TypeScript、ビルド環境。 最新バージョンを使用します。
  Microsoft 365 Agents Toolkit (以前は Teams Toolkit と呼ばれていました) アプリのプロジェクト スキャフォールディングを作成する Visual Studio Code 拡張機能。 最新バージョンを使用します。
  Node.js バックエンド JavaScript ランタイム環境。 詳細については、「 プロジェクトの種類Node.js バージョン互換性表」を参照してください。
  Microsoft Teams Teams では、チャット、会議、通話などのアプリを通じて、すべてのユーザーと 1 か所で共同作業を行うことができます。
  Microsoft Edge (推奨) または Google Chrome 開発者ツールを備えたブラウザー。
  Microsoft 365 開発者アカウント アプリをインストールするための適切なアクセス許可を持つ Teams アカウントへのアクセス。

開発環境の準備

必要なツールをインストールしたら、開発環境をセットアップします。

Microsoft 365 Agents Toolkit をインストールする

Microsoft 365 Agents Toolkit (旧称 Teams Toolkit) は、アプリのクラウド リソースをプロビジョニングおよび展開し、Teams ストアに公開するためのツールを使用して、開発プロセスを簡素化します。

Agents Toolkit は、Visual Studio Code、または Microsoft 365 Agents Toolkit CLI (以前は TeamsFx CLI と呼ばれていました) と呼ばれるコマンド ライン インターフェイスと共に使用できます。

  1. Visual Studio Code を開き、[拡張機能] (Ctrl+Shift+X または View>拡張機能) を選択します。

  2. 検索ボックスに「 Microsoft 365 Agents Toolkit」と入力します。

  3. [インストール] を選びます。

    スクリーンショットは、Agents Toolkit 拡張機能のインストールを示しています。

    Visual Studio Code アクティビティ バーに Microsoft 365 Agents Toolkit アイコンが表示されます。

Visual Studio Code Marketplace から Agents Toolkit をインストールすることもできます。

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

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

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

カスタム アプリを作成したら、[ カスタム アプリをアップロード ] オプションを使用してアプリを Teams にアップロードする必要があります。 Microsoft 365 アカウントにサインインして、このオプションが有効になっているかどうかチェックします。

次の手順は、Teams でアプリをアップロードできるかどうかを確認するのに役立ちます。

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

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

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

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

    スクリーンショットは、Teams でカスタム アプリをアップロードするオプションを示しています。

    注

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

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

Teams 開発者アカウントをお持ちでない場合は、Microsoft 365 開発者プログラムに参加してください。

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

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

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

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

    このスクリーンショットは、Microsoft 365 開発者プログラムを示しています。

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

プロアクティブ メッセージ ボットを構築する

Visual Studio Code を使用してプロアクティブ メッセージ ボットを構築するには、次の手順に従います。

  1. Visual Studio Code を開きます。

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

  3. 左側のウィンドウで、[ サンプルの表示] を選択します。

    スクリーンショットは、Visual Studio アクティビティ バーの [サンプルの表示] オプションを示しています。

  4. サンプルの一覧から、[ プロアクティブ メッセージング] を選択します。 デバッグ用のビルド済みのサンプルが開きます。

    スクリーンショットは、サンプルの一覧の事前構築済みのプロアクティブ メッセージング ボット サンプルを示しています。

  5. [作成] を選択します。

    スクリーンショットは、プロアクティブなメッセージング ボットを作成するための [作成] オプションを示しています。

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

    スクリーンショットは、既定の場所を選択するオプションを示しています。

    既定の場所を変更する場合は、次の手順を実行します。

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

      スクリーンショットは、場所を参照するオプションを示しています。

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

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

      スクリーンショットは、フォルダーを選択するオプションを示しています。

    プロアクティブ メッセージ ボットが数秒で作成され、プロアクティブ メッセージ ボットの成功ダイアログが右下隅に、デバッグのオプションが表示されます。

    スクリーンショットは、ボットが作成したプロアクティブ メッセージを示しています。 :::

  7. 左上隅にある [実行してデバッグ ] アイコンを選択します。

  8. ドロップダウン リストから [デバッグ (Edge)] または [デバッグ (Chrome)] を選択します。

    スクリーンショットは、選択できるデバッグ オプションを示しています。

    デバッグが成功すると、ローカル コンピューター上の Teams にプロアクティブ メッセージ ボットをアップロードするように求められます。

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

    [追加] オプションが強調表示されたメッセージ拡張機能の詳細ダイアログのスクリーンショット。

  10. 必要な範囲を検索して選択するか、一覧からチャネル、チャット、会議を選択し、ダイアログ内を移動して [移動] を選択します。

    共有スコープの一覧を示すスコープ選択ダイアログのスクリーンショット。

    プロアクティブ メッセージ ボット アプリが Teams クライアントにアップロードされ、送信されたメッセージに応答して次のメッセージが表示されます。

    チャットでのプロアクティブなメッセージ ボットの応答を示すスクリーンショット。

  11. URL をコピーして貼り付けるか、ブラウザーで URL に移動します。 積極的な Hello メッセージがトリガーされ、チャットで共有されます。

    スクリーンショットは、ボットが Teams でプロアクティブなメッセージで応答するようにトリガーするブラウザーを示しています。

  12. Teams に移動します。 ボットから 積極的な Hello メッセージを受け取ります。

    チャットでのボットの応答を示すスクリーンショット。

ソース コードのツアーを体験する

Agents Toolkit には、アプリを構築するためのコンポーネントが用意されています。 プロジェクトの作成後、Visual Studio Code の [エクスプローラー ] 領域でプロジェクト フォルダーとファイルを表示できます。

スクリーンショットは、[構造] タブを示しています。

新しいプロジェクト フォルダーには、次のコンテンツが含まれます。

フォルダー/ファイル 目次
.vscode/ デバッグ用の Visual Studio Code ファイル。
appManifest/ アプリ マニフェストのテンプレート (以前は Teams アプリ マニフェストと呼ばれていました)。
env/ 名前と値のペアは環境ファイルに格納され、プロビジョニングとデプロイのルールをカスタマイズするために m365agents.yml によって使用されます。
manifest.json Teams のデベロッパー ポータルを使用して公開するためのアプリ マニフェストは Properties/manifest.json に格納されます。
m365agents.yml メイン プロジェクト ファイルでは、アプリの構成について説明し、各ライフサイクル ステージで実行する一連のアクションを定義します。
m365agents.local.yml これにより、ローカルでの実行とデバッグを有効にするアクションで m365agents.yml がオーバーライドされます。

プロアクティブ メッセージ ボットを展開する

プロアクティブなメッセージ ボット機能を備えた Teams アプリを構築して実行する方法を学びました。 エージェント ツールキットを使用して、Azure にプロアクティブ メッセージ ボット機能を備えた最初のアプリをデプロイしましょう。

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

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

  1. Visual Studio Code を開きます。

  2. プロアクティブ メッセージ ボット アプリを作成したプロジェクト フォルダーを開きます。

  3. Visual Studio Code アクティビティ バーの Microsoft 365 Agents Toolkit アイコンを選択します。

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

    ヒント

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

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

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

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

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

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

プロビジョニングとデプロイの違いは何ですか?
プロビジョニングにより、アプリ用のリソースが Azure と Microsoft 365 に作成されますが、コード (HTML、CSS、JavaScript) はリソースにコピーされません。
[配置 ] では、プロビジョニング中に作成したリソースにアプリのコードがコピーされます。 新しいリソースをプロビジョニングせずに複数回デプロイすることは一般的です。 プロビジョニングは完了までに時間がかかる場合があるため、デプロイとは別のものです。

  1. Visual Studio Code アクティビティ バーの Microsoft 365 Agents Toolkit アイコンを選択します。

  2. [ライフサイクル] で [プロビジョニング] を選択します。

    プロビジョニング コマンドを示すスクリーンショット。

  3. 既存のサブスクリプションのいずれかを選択します。

    スクリーンショットは、プロビジョニングのサブスクリプション オプションを示しています。

  4. 既存のリソース グループを選択するか、新しいリソース グループを作成します。 詳細については、 リソース グループの作成を参照してください。

    プロビジョニングのリソース グループ オプションを示すスクリーンショット。

    注

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

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

    プロビジョニング ダイアログのスクリーンショット。

    プロビジョニング プロセスでは、Azure クラウドにリソースが作成されます。 右下隅に表示されるダイアログで進行状況を監視できます。 数分後に、次のダイアログが表示されます。

    プロビジョニング完了ダイアログを示すスクリーンショット。

  6. [ライフサイクル] で [展開] を選択します。

    スクリーンショットは、[ライフサイクル] の下の [展開] オプションを示しています。

  7. [ 展開] を選択します。

    スクリーンショットは、デプロイする確認ダイアログを示しています。

    デプロイには時間がかかります。 右下隅に表示されるダイアログで進行状況を監視できます。 数分後、次のダイアログが表示されます。

    スクリーンショットは、展開確認ダイアログを示しています。

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

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

    スクリーンショットは、リモート デバッグ オプションが強調表示されていることを示しています。

    デバッグが成功すると、プロアクティブ メッセージ ボット アプリを Teams にアップロードするように求められます。

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

    [追加] オプションが強調表示されたメッセージ拡張機能アプリのダイアログのスクリーンショット。

  11. 必要な範囲を検索して選択するか、一覧からチャネル、チャット、会議を選択し、ダイアログ内を移動して [移動] を選択します。

    共有スコープの一覧を含むスコープ選択ダイアログを示すスクリーンショット。

    プロアクティブ メッセージ ボット アプリが Teams クライアントにアップロードされ、送信されたメッセージに応答して次のメッセージが表示されます。

    チャットでのプロアクティブなメッセージ ボットの応答を示すスクリーンショット。

  12. URL をコピーして貼り付けるか、ブラウザーで URL に移動します。 積極的な Hello メッセージがトリガーされ、チャットで共有されます。

    スクリーンショットは、ボットが Teams でプロアクティブなメッセージで応答するようにトリガーするブラウザーを示しています。

  13. Teams に移動します。 ボットから 積極的な Hello メッセージを受け取ります。

    チャットでのボットの応答を示すスクリーンショット。

チャレンジを完了する

こんなことを思いつきましたか?

スクリーンショットは、プロアクティブな hello メッセージを示しています。

シナリオを完了しました。

  • 通知を毎日送信したり、定期的にユーザーからのフィードバックを要求したりできます。
  • 調整制限を処理して、複数の通知を回避できます。

事前対応型メッセージを送信する

先頭に戻る

API ベースのメッセージ拡張機能のビルド

API (API ベース) を使用して構築されたメッセージ拡張機能は、Teams アプリが外部サービスと対話できるようにすることで、Teams アプリの機能を大幅に強化します。 API ベースのメッセージ拡張機能を使用すると、異なるアプリケーションを切り替える必要性が減り、ワークフローの合理化に役立ちます。


チュートリアル: API ベースのメッセージ拡張機能のビルド

注

API ベースのメッセージ拡張機能では、検索コマンドのみがサポートされます。

API ベースのメッセージ拡張機能を使用して、ビジネス ワークフローで一般的に使用される外部サービスを統合できます。 たとえば、顧客管理に CRM システムを頻繁に使用する企業では、メッセージ拡張機能を使用して、Teams から顧客データを直接取得して表示できます。 このアプリは、異なるアプリケーションを切り替える必要性を減らすことで、時間を節約し、効率を向上させるのに役立ちます。 この機能は、デスクトップ、Web、モバイルなど、Teams が利用可能なすべてのプラットフォームでサポートされています。

メッセージ拡張機能を構築するための前提条件

アプリのビルドとデプロイに必要なツールの一覧を次に示します。

インストール 使用中...
Microsoft Teams Microsoft Teams では、チャット、会議、通話用のアプリを通じて、すべてのユーザーと 1 か所で共同作業を行うことができます。
Microsoft Edge (推奨) または Google Chrome 開発者ツールを備えたブラウザー。
Visual Studio Code JavaScript、TypeScript、または SharePoint Framework (SPFx) ビルド環境。 バージョン 1.55 以降を使用してください。
Microsoft 365 開発者アカウント アプリをインストールするための適切なアクセス許可を持つ Teams アカウントへのアクセス。
Azure アカウント Azure リソースへのアクセス。
OpenAPI の説明 (OAD) ドキュメント API の機能を説明するドキュメント。 詳細については、「 OpenAPI の説明」を参照してください。

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

テナントは、チャット、ファイルの共有、会議の実行を行う organization のスペースまたはコンテナーのようなものです。 このスペースは、カスタム アプリのアップロードとテストも行います。 テナントを使用して開発する準備ができているかどうかを確認します。

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

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

注

Teams のローカル環境でアプリのプレビューとテストを行うには、カスタム アプリのアップロードが必要です。 有効になっていない場合、Teams のローカル環境でアプリをプレビューおよびテストすることはできません。

既にテナントがあり、管理者アクセス権を持っていますか? 本当にするかどうかチェックしてみましょう!

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

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

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

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

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

    スクリーンショットはボット ホームを示しています。

注

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

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

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

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

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

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

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

    スクリーンショットは、Microsoft 365 開発者プログラムを示しています。

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

無料の Azure アカウントを取得する

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

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

OpenAPI の説明文書を作成する

OpenAPI Description (OAD) は、OpenAPI ファイルの構造と概要の概要を示す業界標準仕様です。 これは、API を記述するための、言語に依存しない、人間が判読できる形式です。 人間と機械の両方が読み書きするのは簡単です。 スキーマは機械で読み取り可能で、YAML または JSON で表されます。

API と対話するには、OpenAPI の説明ドキュメントが必要です。 OpenAPI の説明ドキュメントは、次の条件を満たしている必要があります。

  • auth プロパティは指定しないでください。

  • JSON と YAML がサポートされている形式です。

  • OpenAPI バージョン 2.0 および 3.0.x がサポートされています。

  • Teams では、oneOf、anyOf、allOf、および Not (swagger.io) 構造はサポートされていません。

  • 要求の配列の作成はサポートされていませんが、JSON 要求本文内の入れ子になったオブジェクトはサポートされています。

  • 要求本文が存在する場合は、広範な API との互換性を確保するために、application/Json である必要があります。

  • servers.url プロパティの HTTPS プロトコル サーバー URL を定義します。

  • 1 パラメーター検索のみがサポートされます。

  • 既定値のない必須パラメーターは 1 つだけ指定できます。

  • POST と GET HTTP メソッドのみがサポートされています。

  • OpenAPI の説明ドキュメントには、 operationIdが必要です。

  • 操作で既定値なしでヘッダーまたは Cookie パラメーターを要求することはできません。

  • コマンドには、1 つのパラメーターだけを指定する必要があります。

  • OpenAPI の説明ドキュメントにリモート参照がないことを確認してください。

  • 既定値を持つ必須パラメーターは、省略可能と見なされます。

    このチュートリアルの例として、次の OpenAPI の説明を使用しました。

    OpenAPI の説明 
        openapi: 3.0.1
    info:
    title: OpenTools Plugin
    description: A plugin that allows the user to find the most appropriate AI tools for their use cases, with their pricing information.
    version: 'v1'
    servers:
        - url: https://gptplugin.opentools.ai
    paths:
    /tools:
    get:
    operationId: searchTools
    summary: Search for AI Tools
        parameters:
        - in: query
          name: search
          required: true
          schema:
          type: string
          description: Used to search for AI tools by their category based on the keywords. For example, a search for "tool to create music" provides a list of tools that can create music.
        responses:
        "200":
          description: OK
          content:
          application/json:
            schema:
            $ref: '#/components/schemas/searchToolsResponse'
        "400":
          description: Search Error
          content:
          application/json:
            schema:
            ref: '#/components/schemas/searchToolsError'
        components:
        schemas:
        searchToolsResponse:
        required:
        - search
        type: object
        properties:
        tools:
        type: array
        items:
        type: object
        properties:
        name:
        type: string
        description: The name of the tool.
        opentools_url:
        type: string
        description: The URL to access the tool.
        main_summary:
        type: string
        description: A summary of what the tool is.
        pricing_summary:
        type: string
        description: A summary of the pricing of the tool.
        categories:
        type: array
        items:
        type: string
        description: The categories assigned to the tool.
        platforms:
        type: array
        items:
        type: string
        description: The platforms that this tool is available on.
        description: The list of AI tools.
        searchToolsError:
        type: object
        properties:
        message:
        type: string
        description: Message of the error.

    注

    required: true プロパティが 1 つのパラメーターに対してのみ使用できることを確認します。 必須パラメーターが複数ある場合は、必須プロパティを更新して他のパラメーター required: false できます。

OpenAPI 説明ドキュメントが有効かどうかを検証できます。 確認するには、次の手順を実行します。

  1. Swagger または OpenAPI バリデーターに移動し、OpenAPI の説明ドキュメントを検証します。

  2. OpenAPI の説明ドキュメントを保存します。

  3. Swagger エディターに移動します。

  4. 左側のウィンドウに、エディターに OpenAPI の説明を貼り付けます。

  5. 右側のウィンドウで [GET] を選択します。

  6. [ 試してみる] を選択します。

  7. 検索パラメーターの値を「ツール」として入力して音楽を作成します。

  8. [ 実行] を選択します。 Swagger エディターは、製品の一覧を含む応答を表示します。

    スクリーンショットには、Swagger エディターのパラメーター、その値、**EXECUTE** オプションが表示されます。

  9. [サーバーの応答>応答本文] に移動します。

  10. [ products] で、リストから最初の製品をコピーし、後で参照できるように保存します。

    スクリーンショットは、応答本文から選択された強調表示された製品を示しています。

応答レンダリング テンプレートの作成

OpenAPI 記述ドキュメントには、アプリが GET または POST 要求に応答するための応答レンダリング テンプレートが必要です。 応答レンダリング テンプレートは、アダプティブ カード テンプレート、プレビュー カード テンプレート、メタデータで構成されます。

アダプティブ カード テンプレート

アダプティブ カード テンプレートを作成するには、次の手順に従います。

  1. ChatGPT に移動し、メッセージ作成エリアで次のクエリを返します。

    
Create an Adaptive Card Template that binds to the following response:
    "categories": [
        "Music Generation",
        "AI Detection"
    ],
    "chatbot_short_url": "https://goto.opentools.ai/c/ai-music-generator",
    "main_summary": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
    "name": "AI Music Generator",
    "opentools_url": "https://goto.opentools.ai/ai-music-generator",
    "platforms": [
        "Web",
        "App",
        "API"
    ]

  2. [ メッセージの送信] を選択します。

  3. ChatGPT は、サンプル データにバインドされたアダプティブ カード テンプレートを使用して応答を生成します。 後で参照できるようにアダプティブ カード テンプレートを保存します。

    アダプティブ カード テンプレートの例を次に示します。

    アダプティブ カード テンプレート 
    
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.4",
"body": [
    {
    "type": "TextBlock",
    "text": "AI Music Generator",
    "weight": "Bolder",
    "size": "Large"
    },
    {
    "type": "TextBlock",
    "text": "Categories",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
     "text": "Music Generation, AI Detection",
     "wrap": true
    },
    {
    "type": "TextBlock",
    "text": "Description",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
    "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. AI Music Generator is powered by advanced AI technology, and it makes music production accessible to everyone.",
    "wrap": true
    },
    {
    "type": "TextBlock",
    "text": "Platform",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
    "text": "Web, App, API",
    "wrap": true
    }
],
"actions": [
    {
    "type": "Action.OpenUrl",
    "title": "Learn More",
    "url": "https://goto.opentools.ai/ai-music-generator"
    },
    {
    "type": "Action.OpenUrl",
    "title": "Try It",
    "url": "https://goto.opentools.ai/c/ai-music-generator"
    }
]
}

  4. 生成されたアダプティブ カードがサンプル データにバインドされているかどうかを確認するには、次の手順を実行します。

    1. Adaptive Card Designer に移動します。

    2. [ ホスト アプリの選択] に移動し、ドロップダウンから [Microsoft Teams] を選択します。

    3. カード ペイロード エディターに移動し、アダプティブ カード テンプレート コードを貼り付けます。

    4. サンプル データ エディター に移動し、先ほど保存した GET API 応答を貼り付けます。

      スクリーンショットは、アダプティブ カード テンプレートとサンプル データを含むアダプティブ カード デザイナーを示しています。

    5. [ プレビュー モード] を選択します。 アダプティブ カード デザイナーには、応答をテンプレートにバインドするデータを含むアダプティブ カードが表示されます。

      スクリーンショットは、アダプティブ カード テンプレートとサンプル データを含むアダプティブ カード デザイナーを示しています。

プレビュー カード テンプレートを作成する

プレビュー カード テンプレートには、title、subtitle、image プロパティを含めることができます。 API 応答に画像が含まれていない場合は、image プロパティを削除できます。

プレビュー カード テンプレートの例を次に示します。

プレビュー カード テンプレート 
   "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    }

titleとsubtitleの if 条件を作成します。

  • 名前が存在する場合、ボットはその名前を使用します。
  • 名前が存在しない場合、ボットは NA を使用します。

たとえば、 "title": "Name: ${if(name, name, 'N/A')}" などです。 後で参照できるようにプレビュー カード テンプレートを保存します。

応答レンダリング テンプレート

応答レンダリング テンプレートは、 https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json でホストされているスキーマに準拠する必要があります。

応答レンダリング テンプレートを作成するには、次の手順に従います。

  1. JSON ファイルを作成し、次のコードを追加します。

    { 
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json", 
  "version": "1.0", 
  "jsonPath": "", 
  "responseLayout": "", 
  "responseCardTemplate": { 
 },
 "previewCardTemplate": {
     }
 }

  2. 次のように、応答レンダリング テンプレートのプロパティを更新します。

    # プロパティ名 Value
    1. "$schema" "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json"
    2. "version" "1.0"
    version 使用するレンダリング テンプレートのバージョンです。
    3. "jsonPath" "tools"
    jsonPath は、応答 JSON 応答の 1 つ以上の結果へのパスです。 API 応答の製品リストの関連するデータ/配列に jsonPath を追加します。 この場合、 jsonPath はツールです。 JSON パスを決定する方法の詳細については、「 JSON パスを使用した JSON のクエリ」を参照してください。
    4. "responseLayout" "list"
    responseLayout 添付ファイルのレイアウトを指定します。 型の結果の応答に使用されます。 サポートされている型はリストとグリッドです。 応答本文にテキスト、タイトル、画像などの複数の要素を持つオブジェクトが含まれている場合は、応答レイアウトを list に設定する必要があります。 API 応答に画像またはサムネイルのみが含まれる場合は、応答レイアウトを grid に設定する必要があります。
    5. "responseCardTemplate" 先ほど保存したアダプティブ カード テンプレート コードを貼り付けます。
    responseCardTemplate は、JSON 応答をアダプティブ カードにマップするアダプティブ カード テンプレートです。
    6. "previewCardTemplate" 先ほど保存したプレビュー カード テンプレート コードを貼り付けます。
    previewCardTemplateは、メッセージ拡張機能ポップアップで結果のプレビューを表示するために使用されるプレビュー カード テンプレートです。

  3. OpenAPI の説明ドキュメントを保存したのと同じフォルダーに応答レンダリング テンプレートを保存します。

次のコードは、応答レンダリング テンプレートの例です。

応答レンダリング テンプレート 

{
    "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json",
    "version": "1.0",
    "jsonPath": "tools",
    "responseLayout": "list",
    "responseCardTemplate": {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
            {
            "type": "TextBlock",
            "text": "AI Music Generator",
            "weight": "Bolder",
            "size": "Large"
            },
            {
            "type": "TextBlock",
            "text": "Categories",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Music Generation, AI Detection",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Description",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Platform",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Web, App, API",
            "wrap": true
            }
        ],
        "actions": [
            {
            "type": "Action.OpenUrl",
            "title": "Learn More",
            "url": "https://goto.opentools.ai/ai-music-generator"
            },
            {
            "type": "Action.OpenUrl",
            "title": "Try It",
            "url": "https://goto.opentools.ai/c/ai-music-generator"
            }
        ]
    },
    "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    } 
}

アプリ マニフェストの作成

次に、アプリ マニフェスト (以前は Teams アプリ マニフェストと呼ばれていました) を作成する必要があります。 アプリ マニフェストは、アプリを Microsoft Teams 製品に統合する方法を記述します。

Teams アプリ マニフェストを作成する

マニフェストを作成するには、次の手順を実行します。

  1. 新しい JSON ファイルを作成します。 アプリ マニフェストは、 アプリ マニフェスト スキーマで定義されているスキーマの 1.20 バージョンに準拠する必要があります。

  2. JSON ファイルに次のコードを追加します。

    アプリケーション マニフェスト 
    {
 "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.schema.json",
 "manifestVersion": "1.20",
 "version": "1.0.3",
 "id": "<<YOUR-MICROSOFT-APP-ID>>",
 "packageName": "com.microsoft.teams.extension",
 "developer": {
     "name": "Teams App, Inc.",
     "websiteUrl": "https://www.example.com",
     "privacyUrl": "https://www.example.com/termofuse",
     "termsOfUseUrl": "https://www.example.com/privacy"
 },
 "icons": {
     "color": "color.png",
     "outline": "outline.png"
 },
 "name": {
     "short": "Search ME API",
     "full": "Search ME API full"
 },
 "description": {
     "short": "product app for testing API Message Extensions",
     "full": "product app for testing API Message Extensions"
 },
 "accentColor": "#FFFFFF",
 "composeExtensions": [
     {
         "composeExtensionType": "",
         "apiSpecificationFile": "",
         "commands": [
             {
                 "context": [
                     "compose"
                 ],
                 "type": "query",
                 "title": "API for fetching Klarna.",
                 "id": "",
                 "parameters": [
                     {
                         "name": "",
                         "title": "",
                         "description": ""
                     }
                 ],
                 "description": "",
                 "apiResponseRenderingTemplateFile": ""
             }
         ]
     }
 ],
 "permissions": [
     "identity",
     "messageTeamMembers"
 ],
 "validDomains": []
}

  3. 次のように、アプリ マニフェストのプロパティを更新します。

    • <<YOUR-MICROSOFT-APP-ID>>ボットの Microsoft アプリ ID に置き換えます。
    • composeExtensionType の値を apiBased に更新します。
    • apiSpecificationFile の値を OpenAPI 記述ファイルのパスに更新します。
    • commands.id の値を searchTools に更新します。
    • commands.title の値を Search for AI Tools に更新します。
    • commands.description の値を Search for AI Tools に更新します。
    • parameters.name の値を search に更新します。 パラメーターがない場合、値はクエリ パラメーターである必要があり、要求本文スキーマのプロパティを参照する場合は properties.name 必要があります。
    • 応答レンダリング テンプレート ファイルのパスに apiResponseRenderingTemplateFile を更新します。
    • validDomains の値を、OpenAPI 記述ファイルで定義されたservice URLエンドポイントに更新します。

  4. OpenAPI の説明ドキュメントと応答レンダリング テンプレートを保存したのと同じフォルダーに Teams アプリ マニフェストを保存します。

    • カラー画像と輪郭画像が必要です。 これらの画像はフォルダーに含め、Teams アプリ マニフェストで参照する必要があります。

    • フォルダーの内容を圧縮します。 zip ファイルには以下のファイルが含まれている必要があります。

      • OpenAPI の説明ドキュメント
      • 応答レンダリング テンプレート
      • アプリケーション マニフェスト
      • カラー アイコン
      • アウトライン アイコン

Teams にカスタム アプリをアップロードする

Teams テスト環境にサインインして、Teams でアプリをテストします。 Teams でカスタム アプリをアップロードするには、次の手順に従います。

  1. Microsoft Teams に移動し、テスト テナントの資格情報を使用してサインインします。

  2. [アプリ]> [アプリの管理] > [アプリをアップロード] に移動します。

  3. [ カスタマイズしたアプリをアップロード] を選択します。

  4. 作成した zip ファイルを選択し、[ 開く] を選択します。

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

    [追加] オプションが強調表示されたメッセージ拡張機能アプリのスクリーンショット。

  6. [開く] を選びます。

    [開く] オプションが強調表示されたメッセージ拡張機能アプリのスクリーンショット。

  7. チャットに移動し、メッセージ作成領域から + を選択して、アプリを検索します。

  8. アプリを選択し、検索クエリを実行します。

    スクリーンショットは、チャット メニューのプラス アイコンから、ユーザーがポップアップ メニューに表示されるメッセージ拡張機能アプリを呼び出すことを示しています。

  9. アプリはチャット ウィンドウでアダプティブ カードを使用して応答します。

  10. [送信] を選択します。

    スクリーンショットは、Teams のチャット メッセージの検索結果を含むアダプティブ カードを示しています。

以上です。 すばらしい! OpenAPI の説明ドキュメントを使用して API ベースのメッセージ拡張機能を作成する方法について学習しました。

API ベースのメッセージ拡張機能を作成する

先頭に戻る

アクションベースのメッセージ拡張機能の構築

Teams アクション ベースのメッセージ拡張機能を使用すると、ユーザーは Microsoft Teams クライアントで Web サービスを操作できます。 メッセージ拡張機能を使用すると、メッセージ作成領域、コマンド ボックスから、またはメッセージから直接、外部システムのアクションを開始するのに役立ちます。


チュートリアル: アクションベースのメッセージ拡張機能を構築する

アクション ベースのメッセージ拡張機能の主な機能:

  • 情報を収集または表示するためのモーダル ポップアップをユーザーに表示します。
  • メッセージ作成領域、コマンド ボックス、またはメッセージからアクション コマンドをトリガーします。

このステップバイステップ ガイドは、Teams アクションベースのメッセージ拡張機能を構築して、メッセージの作成とメッセージ領域からアクションを開始するのに役立ちます。 このチュートリアルを完了すると、次の出力が得られます。

ステップ バイ ステップ ガイドを正常に完了した後のメッセージ拡張機能出力のスクリーンショット。

前提条件

次のツールをインストールし、開発環境をセットアップしてください。

  インストール 使用中...
  Microsoft Teams Microsoft Teams は、チャット、会議、通話用のアプリをすべて 1 つの場所で使用し、共同作業するすべてのユーザーと共同作業を行います。
  Visual Studio 2022 Visual Studio 2022 にエンタープライズ バージョンをインストールし、ASP.NET および Web 開発ワークロードをインストールできます。 最新バージョンを使用します。
  .NET Core SDK ローカル デバッグと Azure Functions アプリのデプロイ用にカスタマイズされたバインド。 最新バージョンをインストールしていない場合は、移植可能なバージョンをインストールしてください。
  開発トンネル Teams アプリの機能 (会話ボット、メッセージ拡張機能、受信 Webhook) には受信接続が必要です。 トンネルは、開発システムを Teams に接続します。 開発トンネルは、ローカルホストをインターネットに対して安全に開放し、アクセスできるユーザーを制御するための強力なツールです。 開発トンネルは、Visual Studio 2022 バージョン 17.7.0 以降で使用できます。
または
また、開発システムを Teams に接続するためのトンネルとして ngrok を使用することもできます。 タブのみを含むアプリには必要ありません。 このパッケージは、プロジェクト ディレクトリ内にインストールされます (npm devDependencies を使用)。

注

ngrok をダウンロードしたら、サインアップして authtoken をインストールします。

ローカル環境の設定

  1. Microsoft-Teams-Samples を開きます。

  2. [ コード] を選択します。

  3. ドロップダウン メニューから [ GitHub Desktop で開く] を選択します。

    スクリーンショットは、ローカルでリポジトリを複製するオプションを示しています。

  4. [ Clone] を選択します。

Microsoft Entra アプリを登録する

次の手順は、Azure portal でボットを作成して登録するのに役立ちます。

  • Azure アプリを作成して登録します。
  • クライアント シークレットを作成して、ボットの SSO 認証を有効にします。
  • Teams チャネルを追加してボットを展開します。
  • 開発トンネル (推奨) または ngrok を使用して、Web サーバーのエンドポイントへのトンネルを作成します。
  • 作成した開発トンネルにメッセージング エンドポイントを追加します。

アプリ登録の追加

  1. Azure portal に移動します。

  2. [アプリの登録] を選択します。

    スクリーンショットは、アプリの登録を選択する Azure サービスを示しています。

  3. [ +新規登録] を選択します。

    スクリーンショットは、Microsoft Entra 管理センターの [新規登録] ページを示しています。

  4. アプリの名前を入力します。

  5. 任意の組織ディレクトリ (任意の Microsoft Entra ID テナント - マルチテナント) 内のアカウントを選択します。

  6. [ 登録] を選択します。

    スクリーンショットは、ボットを Microsoft Entra 管理センターに登録するオプションを示しています。

    アプリは Microsoft Entra ID に登録されています。 アプリの概要ページが表示されます。

    スクリーンショットは、アプリ登録の概要ページを示しています。

    注

    後で使用するために、 アプリケーション (クライアント) ID と ディレクトリ (テナント) ID のアプリ ID を保存します。

トンネルを作成する

次の 2 つの方法のいずれかに従って、トンネルを作成します。

  1. Visual Studio を開きます。

  2. [ 新しいプロジェクトの作成] を選択します。

    スクリーンショットは、新しいプロジェクトを作成するための選択を示しています。

  3. 検索ボックスに「 ASP.NET」と入力します。 検索結果から [ASP.NET Core Web アプリ] を選択します。

  4. [次へ] を選択します。

    テンプレートの検索と選択を示すスクリーンショット。

  5. プロジェクト名を入力し、[次へ] を選択します。

    スクリーンショットは、入力するプロジェクト名を示しています。

  6. [作成] を選択します。

    プロジェクトの追加情報を示すスクリーンショット。

    概要ウィンドウが表示されます。

    スクリーンショットは、概要ウィンドウを示しています。

  7. [デバッグ] ドロップダウン リストで、[開発トンネル (アクティブなトンネルなし)]>[トンネルの作成]..

    スクリーンショットは、開発トンネルを選択するドロップダウンを示しています。

    ポップアップ ウィンドウが表示されます。

  8. ポップアップ ウィンドウで、次の詳細を更新します。

    1. アカウント: Microsoft または GitHub のアカウントを入力します。
    2. 名前: トンネルの名前を入力します。
    3. トンネルの種類: ドロップダウン リストから [ 一時] を選択します。
    4. アクセス: ドロップダウン リストから [ パブリック] を選択します。

  9. [OK] を選択します。

    スクリーンショットは、トンネルの作成のために更新する詳細を示しています。

    開発トンネルが正常に作成されたことを示すポップアップ ウィンドウが表示されます。

  10. [OK] を選択します。

    スクリーンショットは、トンネルが作成されたことを示すポップアップ メッセージを示しています。

    作成したトンネルは、次のようにデバッグ ドロップダウン リストで見つけることができます。

    スクリーンショットは、トンネルがアクティブで選択されていることを示しています。

  11. F5 キーを押して、アプリケーションをデバッグ モードで実行します。

  12. [セキュリティの警告] ダイアログが表示された場合は、[はい] を選択します。

    スクリーンショットは、セキュリティ警告を受け入れるダイアログ ボックスを示しています。

    ポップアップ ウィンドウが表示されます。

  13. [Continue] (続行) を選択します。

    スクリーンショットは、トンネルの URL を示しています。

    新しいブラウザー ウィンドウで開発トンネルのホーム ページが開き、開発トンネルがアクティブになります。

    スクリーンショットは、ブラウザーの開発トンネルのウェルカム ページを示しています。

  14. Visual Studio に移動し、[ 出力 > 表示] を選択します。

  15. [ 出力 コンソール] ドロップダウン メニューから、[ 開発トンネル] を選択します。

    出力コンソールには、開発トンネルの URL が表示されます。

    スクリーンショットは、Visual Studio 出力コンソールの URL を示しています。

Web 認証の追加

  1. 左側のウィンドウの [管理] で、[ 認証] を選択します。

  2. プラットフォームの追加>Web を選択します。

    スクリーンショットは、Web 認証の選択を示しています。

  3. 完全修飾ドメイン名に auth-end を追加して、アプリのリダイレクト URI を入力します。 たとえば、 https://your-devtunnel-domain/auth-end や https://your-ngrok-domain/auth-end などです。

  4. [ 暗黙的な許可フローとハイブリッド フロー] で、[ アクセス トークン] と [ID トークン] チェック ボックスをオンにします 。

  5. [ 構成] を選択します。

    スクリーンショットは、リダイレクト URI を追加し、暗黙的な許可とハイブリッド フローを選択するオプションを示しています。

  6. [Web] で、[URI の追加] を選択します。

  7. https://token.botframework.com/.auth/web/redirectと入力します。

  8. [保存] を選択します。

    スクリーンショットは、リダイレクト URI を追加し、暗黙的な許可とハイブリッド フローを選択するオプションを示しています。

クライアント シークレットの作成

注

" クライアント シークレットはテナント全体のポリシーによってブロックされています" というエラーが発生した場合。詳細については、テナント管理者にお問い合わせください。代わりに証明書を作成できます。 詳しい手順については、「アプリ登録用の証明書を作成する」を参照してください。

  1. 左側のウィンドウの [管理] で、[ 証明書 & シークレット] を選択します。

  2. [ クライアント シークレット] で、[ + 新しいクライアント シークレット] を選択します。

    新しいクライアント シークレットの選択を示すスクリーンショット。

    [ クライアント シークレットの追加] ウィンドウが表示されます。

  3. 説明を入力します。

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

    追加するクライアント シークレットの説明オプションを示すスクリーンショット。

  5. [ 値] で、[ クリップボードにコピー] を選択して、後で使用するためにクライアント シークレット値を保存します。

    スクリーンショットは、クライアント シークレット ID 値をコピーして値をクリップボードにコピーするオプションを示しています。

API アクセス許可の追加

  1. 左側のウィンドウで、[ API アクセス許可] を選択します。

  2. [ + アクセス許可の追加] を選択します。

    スクリーンショットは、[アクセス許可の追加] を選択するオプションを示しています。

  3. [Microsoft Graph] を選択します。

  4. [ 委任されたアクセス許可] を選択します。

  5. User>User.Read を選択します。

  6. [ アクセス許可の追加] を選択します。

    スクリーンショットは、アクセス許可を選択するオプションを示しています。

    注

    • アプリに IT 管理者の同意が付与されていない場合、ユーザーは初めてアプリを使用するときに同意する必要があります。
    • ユーザーが API アクセス許可に同意する必要があるのは、Microsoft Entra アプリが別のテナントに登録されている場合のみです。

アプリケーション ID URI の追加

  1. 左側のウィンドウ の [管理] で、[ API の公開] を選択します。

  2. [ アプリケーション ID URI] の横にある [追加] を選択します。

    スクリーンショットは、アプリのアプリケーション ID URI を追加するオプションを示しています。

  3. アプリケーション ID URI をapi://botid-{AppID}形式で更新し、[保存] を選択します。

    スクリーンショットは、アプリ ID URI を追加して保存するオプションを示しています。

スコープの追加

  1. 左側のウィンドウ の [管理] で、[ API の公開] を選択します。

  2. [ + スコープの追加] を選択します。

    スクリーンショットは、[スコープの追加] の選択を示しています。

  3. スコープ名として「access_as_user」と入力します。

  4. [ 同意できるユーザー] で、[ 管理者とユーザー] を選択します。

  5. 残りのフィールドの値を次のように更新します。

    • 「Teams はユーザーのプロファイルに管理同意の表示名としてアクセスできます」と入力します。

    • Enter Teams が現在のユーザーとしてアプリの Web API を管理の同意の説明として呼び出すことを許可します。

    • 「 Teams はユーザー プロファイルにアクセスし、ユーザーの代わりに要求をユーザー同意の表示名として行えます」と入力します。

    • [ Teams がユーザーと同じ権利でこのアプリの API を呼び出すことができるようにする] と入力します。 ユーザーの 同意の説明。

  6. [状態] が [有効] に設定されていることを確認します。

  7. [ スコープの追加] を選択します。

    次の図は、フィールドと値を示しています:

    スクリーンショットは、範囲を追加するフィールドに入力された値を示しています。

    注

    スコープ名は、末尾に /access_as_user が追加されたアプリケーション ID URI と一致する必要があります。

    スクリーンショットは、[スコープ] の詳細を示しています。

クライアント アプリケーションの追加

  1. 左側のウィンドウ の [管理] で、[ API の公開] を選択します。

    [ 承認済みクライアント アプリケーション] で、アプリの Web アプリケーションに対して承認するアプリケーションを特定します。

  2. [ + クライアント アプリケーションの追加] を選択します。

    スクリーンショットは、[クライアント アプリケーションの選択] オプションを示しています。

  3. Teams モバイルまたはデスクトップと Teams Web アプリケーションを追加します。

    1. Teams モバイルまたはデスクトップの場合: クライアント ID を 1fec8e78-bce4-4aaf-ab1b-5451cc387264 として入力します。

      スクリーンショットは、モバイルまたはデスクトップ クライアント ID アプリケーションを示しています。

    2. Teams Web の場合: クライアント ID を 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 として入力します。

      スクリーンショットは、Web クライアント ID アプリケーションを示しています。

  4. [ 許可されたスコープ] チェック ボックスをオンにします。

  5. [ アプリケーションの追加] を選択します。

    スクリーンショットは、承認されたスコープを選択してアプリケーションを追加するオプションを示しています。

    次の図は、 クライアント ID を表示します。

    スクリーンショットは、クライアント アプリケーションの出力を示しています。

ボットを作成する

Azure ボット リソースを作成する

注

既に Teams でボットをテストしている場合は、このアプリと Teams からサインアウトします。 この変更を確認するには、もう一度サインインします。

  1. [ ホーム] に移動します。

  2. [ + リソースの作成] を選択します。

  3. 検索ボックスに「Azure Bot」と入力します。

  4. Enter キーを押します。

  5. Azure ボットを選択します。

  6. [作成] を選択します。

    スクリーンショットは、Azure ボットの作成を示しています。

  7. ボット ハンドルにボット名を入力します。

  8. ドロップダウン リストから サブスクリプション を選択します。

  9. ドロップダウン リストから リソース グループ を選択します。

    スクリーンショットは、Azure portal のオプションのリソース グループとサブスクリプションを示しています。

    既存のリソース グループがない場合は、新しいリソース グループを作成できます。 新しいリソース グループを作成するには、次の手順を実行します。

    1. 新規 作成を選択します。
    2. リソース名を入力し、[ OK] を選択します。
    3. 新しいリソース グループの場所ドロップダウン リストから場所を選択します。

    スクリーンショットは、Azure portal の新しいリソース グループ オプションを示しています。

  10. [ 価格] で、[ プランの変更] を選択します。

    スクリーンショットは、Azure portal の価格オプションを示しています。

  11. [FO Free>Select] を選択します。

    [無料] を選択するオプションを示すスクリーンショット。

  12. [Microsoft アプリ ID] で、[マルチ テナント] として [アプリの種類] を選択します。

  13. [ 作成] の種類で、 既存のアプリの登録を使用する を選択します。

  14. アプリ ID を入力します。

    注

    同じ Microsoft アプリ ID を使用して複数のボットを作成することはできません。

  15. [ レビュー + 作成] を選択します。

    スクリーンショットは、新しいボットの作成を示しています。

  16. 検証に合格したら、[ 作成] を選択します。

    ボットのプロビジョニングには数分かかります。

  17. [ リソースに移動] を選択します。

    スクリーンショットは、Azure portal の [リソースに移動] オプションを示しています。

    Azure ボットが正常に作成されました。

    ボットの出力を示すスクリーンショット。

Teams チャネルを追加する

  1. 左側のウィンドウで、[ チャネル] を選択します。

  2. [ 利用可能なチャネル] で、[ Microsoft Teams] を選択します。

    スクリーンショットは、チャネルでの Teams の選択を示しています。

  3. チェック ボックスをオンにして、 利用規約に同意します。

  4. [ 同意する] を選択します。

    スクリーンショットは、サービス利用規約への同意を示しています。

  5. [適用する] を選択します。

    スクリーンショットは、適用するメッセージングとしての Microsoft Teams を示しています。

メッセージング エンドポイントの追加

メッセージング エンドポイントを追加するには、次のいずれかの方法を使用します。

  1. メッセージング エンドポイントとして 出力コンソールの開発 トンネル URL を使用します。

    スクリーンショットは、Visual Studio 出力コンソールの URL を示しています。

  2. 左側のウィンドウの [設定] で、[ 構成] を選択します。

  3. メッセージング エンドポイントを https://your-devtunnel-domain/api/messages の形式で更新します。

    スクリーンショットは、メッセージング エンドポイントの追加 API を示しています。

  4. [適用する] を選択します。

    Azure Bot Service でボットを正常にセットアップしました。

    注

    Application Insights インストルメンテーション キーにエラーが表示された場合は、アプリ ID で更新します。

アプリ設定とマニフェスト ファイルをセットアップする

  1. 複製されたリポジトリの appsettings.json ファイルに移動します。

    スクリーンショットは、appsettings json ファイルの場所を示しています。

  2. appsettings.json ファイルを開き、次の情報を更新します。

    • "MicrosoftAppId"ボットの Microsoft アプリ ID に設定します。
    • "MicrosoftAppPassword"ボットのクライアント シークレット ID 値に設定します。
    • ConnectionNameを OAuth 接続名として設定します。
    • "MicrosoftAppType"をマルチテナントに設定します。
    • "MicrosoftAppTenantId" を共通に設定します。

    スクリーンショットは、appsettings json を示しています。

  3. 複製されたリポジトリの manifest.json ファイルに移動します。

    スクリーンショットは、マニフェスト json ファイルの選択を示しています。

  4. manifest.json ファイルを開き、次の変更を更新します。

    • すべての出現箇所の "{TODO: MicrosoftAppId}" を Microsoft アプリ ID に置き換えます。
    • "<<domain-name>>"を ngrok または開発トンネル ドメインに設定します。

    スクリーンショットは、Visual Studio のマニフェスト ファイルに入力された詳細を示しています。

サービスをビルドして実行する

サービスをビルドして実行するには、Visual Studio またはコマンド ラインを使用します。

  1. Visual Studio を開きます。

  2. ファイル>開く>プロジェクト/ソリューション.....

    プロジェクト/ソリューションが赤で強調表示されている Visual Studio のスクリーンショット。

  3. csharp フォルダーから、TeamsMessagingExtensionsAction.csproj ファイルを選択します。

    TeamsMessagingExtensionsAction.csproj が赤で強調表示された、複製されたリポジトリのスクリーンショット。

  4. F5 キーを押してプロジェクトを実行します。

  5. 次のダイアログが表示されたら、[ はい ] を選択します。

    スクリーンショットは、[はい] オプションが赤で強調表示されたセキュリティ警告を示しています。

    " ボットの準備ができました!" というメッセージを含む Web ページが表示されます。

    表示される Web ページのスクリーンショット ボットの準備ができました。

Teams にアクション メッセージ拡張機能アプリを追加する

  1. 複製されたリポジトリで、 samples>msgext-action>csharp>TeamsAppManifest に移動します。

  2. Manifest フォルダーに存在する次のファイルを使用して .zip を作成します。

    • manifest.json
    • icon-outline.png
    • icon-color.png

    Messaging 拡張 zip ファイルが赤で強調表示された、複製されたリポジトリのスクリーンショット。

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

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

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

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

    スクリーンショットは、[カスタム アプリのアップロード] を示しています。

    注

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

  7. [ 開く] を選択して、TeamsAppManifest フォルダーで作成した messaging.zip ファイルをアップロードします。

    メッセージング zip ファイルが表示された複製されたリポジトリのスクリーンショット。

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

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

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

    または、必要な範囲を検索して選択するか、一覧からチャネル、チャット、または会議を選択し、ダイアログ間を移動して [移動] を選択することもできます。

    必要なスコープを選択するためのスコープ選択ダイアログのスクリーンショット。

Teams でアプリを操作する

  1. 作成ボックスのコマンド リストから [ カードの作成 ] コマンドを選択します。

    [カードの作成] が赤で強調表示されたメッセージ作成ボックスのオーバーフロー メニューのスクリーンショット。

  2. モーダル ポップアップ ウィンドウに情報を入力します。

    スクリーンショットは、アクション メッセージング拡張機能の [カードの作成] モデル ポップアップを示しています。

  3. [Submit] (送信) を選択します。

    [送信] オプションが赤で強調表示されている [カードの作成] モデル ポップアップのスクリーンショット。

  4. オーバーフロー メニューから [その他のオプション (...)] を選択します。

  5. [その他のアクション]>[メッセージの共有] を選択します。

    スクリーンショットは、メッセージ オーバーフロー メニューを示しています。[メッセージの共有] と [その他の] アクションが赤で強調表示されています。

  6. 画像を含める場合は、[ ヒーロー カードに画像を含める] チェック ボックスをオンにしてから、[ 送信] を選択します。

    [ヒーロー カードに画像を含める] チェックボックスと [送信] オプションが赤で強調表示されているアクション メッセージング拡張機能のスクリーンショット。

チャレンジを完了する

こんなことを思いつきましたか?

ステップ バイ ステップ ガイドを正常に完了した後のメッセージ拡張機能出力のスクリーンショット。

これで、 アクション メッセージ拡張機能 アプリを使い始めるためのチュートリアルを完了しました。

アクション コマンド

先頭に戻る

SSO 認証を使用してボットを構築する

Microsoft Teams の会話型ボットは、カスタマー サービスなど、ユーザーが開始する反復的な自動タスクを実行します。 ユーザーは、シングル サインオン (SSO) 認証なしで複数回サインインする必要があります。 SSO 認証方法を使用すると、ユーザーはボットに複数回サインインする必要はありません。


チュートリアル: SSO 認証を使用してボットを構築する

ボットは、関与している会話に応じて異なる動作をします。

  • チャネルおよびグループ チャット会話のボットは、ユーザーがボットを @mention する必要があります。
  • 1 対 1 の会話のボットには @mentionは必要ありません。 ユーザーが送信したすべてのメッセージはボットにルーティングされます。

このステップバイステップ ガイドは、SSO 認証を使用してボットを構築するのに役立ちます。 次の出力が表示されます:

ステップ バイ ステップ ガイドを正常に完了した後の SSO 認証出力を含むボットのスクリーンショット。

ボットを構築するための前提条件

次のツールをインストールし、開発環境をセットアップしてください。

インストール 使用中...
Microsoft Teams Microsoft Teams は、チャット、会議、通話用のアプリをすべて 1 か所で使用して、共同作業するすべてのユーザーと共同作業を行います。
Visual Studio 2022 Visual Studio 2022 にエンタープライズ バージョンをインストールし、ASP.NET および Web 開発ワークロードをインストールできます。 最新バージョンを使用します。
Microsoft 365 開発者アカウント アプリをインストールするための適切なアクセス許可を持つ Teams アカウントへのアクセス。
開発トンネル Teams アプリの機能 (会話ボット、メッセージ拡張機能、受信 Webhook) には受信接続が必要です。 トンネルは、開発システムを Teams に接続します。 開発トンネルは、ローカルホストをインターネットに対して安全に開放し、アクセスできるユーザーを制御するための強力なツールです。 開発トンネルは、Visual Studio 2022 バージョン 17.7.0 以降で使用できます。
または
また、開発システムを Teams に接続するためのトンネルとして ngrok を使用することもできます。 タブのみを含むアプリには必要ありません。 このパッケージは、プロジェクト ディレクトリ内にインストールされます (npm devDependencies を使用)。

注

ngrok をダウンロードしたら、サインアップして authtoken をインストールします。

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

テナントは、Teams でチャット、ファイルの共有、会議の実行を行うためのスペースまたはコンテナーのようなものですorganization。 カスタム アプリをアップロードしてテストすることもできます。

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

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

注

Teams のローカル環境でアプリのプレビューとテストを行うには、カスタム アプリのアップロードが必要です。 アプリのアップロードを有効にして、Teams でアプリをローカルでプレビューおよびテストします。

既にテナントがあり、管理者アクセス権を持っていますか? 本当にするかどうかチェックしてみましょう!

Teams でカスタム アップロード アプリを確認するには:

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

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

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

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

    Teams アプリ、アプリの管理、アプリのアップロード、カスタム アプリのアップロードが赤で強調表示されているスクリーンショット。

注

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

無料の Teams 開発者テナントを作成する

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

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

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

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

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

    Microsoft 365 開発者プログラム サブスクリプションのスクリーンショット。

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

ローカル環境の設定

次の手順を実行して、リポジトリを複製します。

  1. Microsoft-Teams-Samples を開きます。

  2. [ コード] を選択します。

  3. ドロップダウン メニューから [ GitHub Desktop で開く] を選択します。

    スクリーンショットは、ローカルでリポジトリを複製するオプションを示しています。

  4. [ Clone] を選択します。

Microsoft Entra アプリを登録する

次の手順は、Azure portal でボットを作成して登録するのに役立ちます。

  • Azure アプリを作成して登録します。
  • クライアント シークレットを作成して、ボットの SSO 認証を有効にします。
  • Teams チャネルを追加してボットを展開します。
  • 開発トンネル (推奨) または ngrok を使用して、Web サーバーのエンドポイントへのトンネルを作成します。
  • 作成した開発トンネルにメッセージング エンドポイントを追加します。

アプリ登録の追加

  1. Azure portal に移動します。

  2. [アプリの登録] を選択します。

    スクリーンショットは、アプリの登録を選択する Azure サービスを示しています。

  3. [ +新規登録] を選択します。

    スクリーンショットは、Microsoft Entra 管理センターの [新規登録] ページを示しています。

  4. アプリの名前を入力します。

  5. 必要に応じて、テナント オプションを選択します。

  6. [ 登録] を選択します。

    スクリーンショットは、ボットを Microsoft Entra 管理センターに登録するオプションを示しています。

    アプリは Microsoft Entra ID に登録されています。 アプリの概要ページが表示されます。

    スクリーンショットは、アプリ登録の概要ページを示しています。

    注

    後で使用するために、 アプリケーション (クライアント) ID と ディレクトリ (テナント) ID のアプリ ID を保存します。

トンネルを作成する

次の 2 つの方法のいずれかに従って、トンネルを作成します。

  1. Visual Studio を開きます。

  2. [ 新しいプロジェクトの作成] を選択します。

    スクリーンショットは、新しいプロジェクトを作成するための選択を示しています。

  3. 検索ボックスに「 ASP.NET」と入力します。 検索結果から [ASP.NET Core Web アプリ] を選択します。

  4. [次へ] を選択します。

    テンプレートの検索と選択を示すスクリーンショット。

  5. プロジェクト名を入力し、[次へ] を選択します。

    スクリーンショットは、入力するプロジェクト名を示しています。

  6. [作成] を選択します。

    プロジェクトの追加情報を示すスクリーンショット。

    概要ウィンドウが表示されます。

    スクリーンショットは、概要ウィンドウを示しています。

  7. [デバッグ] ドロップダウン リストで、[開発トンネル (アクティブなトンネルなし)]>[トンネルの作成]..

    スクリーンショットは、開発トンネルを選択するドロップダウンを示しています。

    ポップアップ ウィンドウが表示されます。

  8. ポップアップ ウィンドウで、次の詳細を更新します。

    1. アカウント: Microsoft または GitHub のアカウントを入力します。
    2. 名前: トンネルの名前を入力します。
    3. トンネルの種類: ドロップダウン リストから [ 一時] を選択します。
    4. アクセス: ドロップダウン リストから [ パブリック] を選択します。

  9. [OK] を選択します。

    スクリーンショットは、トンネルの作成のために更新する詳細を示しています。

    開発トンネルが正常に作成されたことを示すポップアップ ウィンドウが表示されます。

  10. [OK] を選択します。

    スクリーンショットは、トンネルが作成されたことを示すポップアップ メッセージを示しています。

    作成したトンネルは、次のようにデバッグ ドロップダウン リストで見つけることができます。

    スクリーンショットは、トンネルがアクティブで選択されていることを示しています。

  11. F5 キーを押して、アプリケーションをデバッグ モードで実行します。

  12. [セキュリティの警告] ダイアログが表示された場合は、[はい] を選択します。

    スクリーンショットは、セキュリティ警告を受け入れるダイアログ ボックスを示しています。

    ポップアップ ウィンドウが表示されます。

  13. [Continue] (続行) を選択します。

    スクリーンショットは、トンネルの URL を示しています。

    新しいブラウザー ウィンドウで開発トンネルのホーム ページが開き、開発トンネルがアクティブになります。

    スクリーンショットは、ブラウザーの開発トンネルのウェルカム ページを示しています。

  14. Visual Studio に移動し、[ 出力 > 表示] を選択します。

  15. [ 出力 コンソール] ドロップダウン メニューから、[ 開発トンネル] を選択します。

    出力コンソールには、開発トンネルの URL が表示されます。

    スクリーンショットは、Visual Studio 出力コンソールの URL を示しています。

Web 認証の追加

  1. 左側のウィンドウの [管理] で、[ 認証] を選択します。

  2. プラットフォームの追加>Web を選択します。

    スクリーンショットは、Web 認証の選択を示しています。

  3. 完全修飾ドメイン名に auth-end を追加して、アプリのリダイレクト URI を入力します。 たとえば、 https://your-devtunnel-domain/auth-end や https://your-ngrok-domain/auth-end などです。

  4. [ 暗黙的な許可フローとハイブリッド フロー] で、[ アクセス トークン] と [ID トークン] チェック ボックスをオンにします 。

  5. [ 構成] を選択します。

    スクリーンショットは、リダイレクト URI を追加し、暗黙的な許可とハイブリッド フローを選択するオプションを示しています。

  6. [Web] で、[URI の追加] を選択します。

  7. https://token.botframework.com/.auth/web/redirectと入力します。

  8. [保存] を選択します。

    スクリーンショットは、リダイレクト URI を追加し、暗黙的な許可とハイブリッド フローを選択するオプションを示しています。

クライアント シークレットの作成

注

" クライアント シークレットはテナント全体のポリシーによってブロックされています" というエラーが発生した場合。詳細については、テナント管理者にお問い合わせください。代わりに証明書を作成できます。 詳しい手順については、「アプリ登録用の証明書を作成する」を参照してください。

  1. 左側のウィンドウの [管理] で、[ 証明書 & シークレット] を選択します。

  2. [ クライアント シークレット] で、[ + 新しいクライアント シークレット] を選択します。

    新しいクライアント シークレットの選択を示すスクリーンショット。

    [ クライアント シークレットの追加] ウィンドウが表示されます。

  3. 説明を入力します。

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

    追加するクライアント シークレットの説明オプションを示すスクリーンショット。

  5. [ 値] で、[ クリップボードにコピー] を選択して、後で使用するためにクライアント シークレット値を保存します。

    スクリーンショットは、クライアント シークレット ID 値をコピーして値をクリップボードにコピーするオプションを示しています。

API アクセス許可の追加

  1. 左側のウィンドウで、[ API アクセス許可] を選択します。

  2. [ + アクセス許可の追加] を選択します。

    スクリーンショットは、[アクセス許可の追加] を選択するオプションを示しています。

  3. [Microsoft Graph] を選択します。

  4. [ 委任されたアクセス許可] を選択します。

  5. User>User.Read を選択します。

  6. [ アクセス許可の追加] を選択します。

    スクリーンショットは、アクセス許可を選択するオプションを示しています。

    注

    • アプリに IT 管理者の同意が付与されていない場合、ユーザーは初めてアプリを使用するときに同意する必要があります。
    • ユーザーが API アクセス許可に同意する必要があるのは、Microsoft Entra アプリが別のテナントに登録されている場合のみです。

アプリケーション ID URI の追加

  1. 左側のウィンドウ の [管理] で、[ API の公開] を選択します。

  2. [ アプリケーション ID URI] の横にある [追加] を選択します。

    スクリーンショットは、アプリのアプリケーション ID URI を追加するオプションを示しています。

  3. アプリケーション ID URI をapi://botid-{AppID}形式で更新し、[保存] を選択します。

    スクリーンショットは、アプリ ID URI を追加して保存するオプションを示しています。

スコープの追加

  1. 左側のウィンドウ の [管理] で、[ API の公開] を選択します。

  2. [ + スコープの追加] を選択します。

    スクリーンショットは、[スコープの追加] の選択を示しています。

  3. スコープ名として「access_as_user」と入力します。

  4. [ 同意できるユーザー] で、[ 管理者とユーザー] を選択します。

  5. 残りのフィールドの値を次のように更新します。

    1. 「Teams はユーザーのプロファイルに管理同意の表示名としてアクセスできます」と入力します。

    2. Enter Teams が現在のユーザーとしてアプリの Web API を管理の同意の説明として呼び出すことを許可します。

    3. 「 Teams はユーザー プロファイルにアクセスし、ユーザーの代わりに要求をユーザー同意の表示名として行えます」と入力します。

    4. [ Teams がユーザーと同じ権利でこのアプリの API を呼び出すことができるようにする] と入力します。 ユーザーの 同意の説明。

  6. [状態] が [有効] に設定されていることを確認します。

  7. [ スコープの追加] を選択します。

    次の図は、フィールドと値を示しています:

    スクリーンショットは、範囲を追加するフィールドに入力された値を示しています。

    注

    スコープ名は、末尾に /access_as_user が追加されたアプリケーション ID URI と一致する必要があります。

    スクリーンショットは、[スコープ] の詳細を示しています。

クライアント アプリケーションの追加

  1. 左側のウィンドウ の [管理] で、[ API の公開] を選択します。

    [ 承認済みクライアント アプリケーション] で、アプリの Web アプリケーションに対して承認するアプリケーションを特定します。

  2. [ + クライアント アプリケーションの追加] を選択します。

    スクリーンショットは、[クライアント アプリケーションの選択] オプションを示しています。

  3. Teams モバイルまたはデスクトップと Teams Web アプリケーションを追加します。

    1. Teams モバイルまたはデスクトップの場合: クライアント ID を 1fec8e78-bce4-4aaf-ab1b-5451cc387264 として入力します。

      スクリーンショットは、モバイルまたはデスクトップ クライアント ID アプリケーションを示しています。

    2. Teams Web の場合: クライアント ID を 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 として入力します。

      スクリーンショットは、Web クライアント ID アプリケーションを示しています。

  4. [ 許可されたスコープ] チェック ボックスをオンにします。

  5. [ アプリケーションの追加] を選択します。

    スクリーンショットは、承認されたスコープを選択してアプリケーションを追加するオプションを示しています。

    次の図は、 クライアント ID を表示します。

    スクリーンショットは、クライアント アプリケーションの出力を示しています。

マニフェストの更新

  1. 左側のウィンドウで、[ マニフェスト] を選択します。

  2. requestedAccessTokenVersionの値を [2] に設定し、[保存] を選択します。

    スクリーンショットは、Azure portal のマニフェスト オプションとアクセストークンの詳細を示しています。

ボットを作成する

Azure ボット リソースを作成する

注

既に Teams でボットをテストしている場合は、このアプリと Teams からサインアウトします。 この変更を確認するには、もう一度サインインします。

  1. [ ホーム] に移動します。

  2. [ + リソースの作成] を選択します。

  3. 検索ボックスに「Azure Bot」と入力します。

  4. Enter キーを押します。

  5. Azure ボットを選択します。

  6. [作成] を選択します。

    スクリーンショットは、Azure ボットの作成を示しています。

  7. ボット ハンドルにボット名を入力します。

  8. ドロップダウン リストから サブスクリプション を選択します。

  9. ドロップダウン リストから リソース グループ を選択します。

    スクリーンショットは、Azure portal のオプションのリソース グループとサブスクリプションを示しています。

    既存のリソース グループがない場合は、新しいリソース グループを作成できます。 新しいリソース グループを作成するには、次の手順を実行します。

    1. 新規 作成を選択します。
    2. リソース名を入力し、[ OK] を選択します。
    3. 新しいリソース グループの場所ドロップダウン リストから場所を選択します。

    スクリーンショットは、Azure portal の新しいリソース グループ オプションを示しています。

  10. [ 価格] で、[ プランの変更] を選択します。

    スクリーンショットは、Azure portal の価格オプションを示しています。

  11. [FO Free>Select] を選択します。

    [無料] を選択するオプションを示すスクリーンショット。

  12. [Microsoft アプリ ID] で、[マルチ テナント] として [アプリの種類] を選択します。

  13. [ 作成] の種類で、 既存のアプリの登録を使用する を選択します。

  14. アプリ ID を入力します。

    注

    同じ Microsoft アプリ ID を使用して複数のボットを作成することはできません。

  15. [ レビュー + 作成] を選択します。

    スクリーンショットは、新しいボットの作成を示しています。

  16. 検証に合格したら、[ 作成] を選択します。

    ボットのプロビジョニングには数分かかります。

  17. [ リソースに移動] を選択します。

    スクリーンショットは、Azure portal の [リソースに移動] オプションを示しています。

    Azure ボットが正常に作成されました。

    ボットの出力を示すスクリーンショット。

Teams チャネルを追加する

  1. 左側のウィンドウで、[ チャネル] を選択します。

  2. [ 利用可能なチャネル] で、[ Microsoft Teams] を選択します。

    スクリーンショットは、チャネルでの Teams の選択を示しています。

  3. チェック ボックスをオンにして、 利用規約に同意します。

  4. [ 同意する] を選択します。

    スクリーンショットは、サービス利用規約への同意を示しています。

  5. [適用する] を選択します。

    スクリーンショットは、適用するメッセージングとしての Microsoft Teams を示しています。

メッセージング エンドポイントの追加

メッセージング エンドポイントを追加するには、次のいずれかの方法を使用します。

  1. メッセージング エンドポイントとして 出力コンソールの開発 トンネル URL を使用します。

    スクリーンショットは、Visual Studio 出力コンソールの URL を示しています。

  2. 左側のウィンドウの [設定] で、[ 構成] を選択します。

  3. メッセージング エンドポイントを https://your-devtunnel-domain/api/messages の形式で更新します。

    スクリーンショットは、メッセージング エンドポイントの追加 API を示しています。

  4. [適用する] を選択します。

    Azure Bot Service でボットを正常にセットアップしました。

    注

    Application Insights インストルメンテーション キーにエラーが表示された場合は、アプリ ID で更新します。

OAuth 接続設定を追加する

  1. 左側のウィンドウで、 [ 構成] を選択します。

  2. [ OAuth 接続設定の追加] を選択します。

  3. [ 新しい接続設定] で、次の詳細を更新します。

    • 名前: 新しい接続設定の名前を入力します。 この名前は、ボット サービス コードの設定で使用できます。
    • サービス プロバイダー: ドロップダウン リストから [Azure Active Directory v2] を選択します。
    • クライアント id: Microsoft アプリ ID を更新します。
    • クライアント シークレット: クライアント シークレット の値を更新します。
    • トークン交換 URL: アプリケーション ID URI を更新します。
    • テナント ID: 共通と入力します。
    • スコープ: User.Read と入力します。

  4. [保存] を選択します。

    スクリーンショットは、OAuth 接続を設定するために追加された値を示しています。

アプリ設定とマニフェスト ファイルをセットアップする

  1. 複製されたリポジトリの appsettings.json ファイルに移動します。

    スクリーンショットは、appsettings json ファイルの場所を示しています。

  2. appsettings.json ファイルを開き、次の情報を更新します。

    • "MicrosoftAppId"ボットの Microsoft アプリ ID に設定します。
    • "MicrosoftAppPassword"ボットのクライアント シークレット ID 値に設定します。
    • ConnectionNameを OAuth 接続名として設定します。
    • "MicrosoftAppType"をマルチテナントに設定します。
    • "MicrosoftAppTenantId" を共通に設定します。

    スクリーンショットは、appsettings json を示しています。

  3. 複製されたリポジトリの manifest.json ファイルに移動します。

    スクリーンショットは、マニフェスト json ファイルの選択を示しています。

  4. manifest.json ファイルを開き、次の変更を更新します。

    • すべての出現箇所の "{TODO: MicrosoftAppId}" を Microsoft アプリ ID に置き換えます。
    • "<<domain-name>>"を ngrok または開発トンネル ドメインに設定します。

    スクリーンショットは、Visual Studio のマニフェスト ファイルに入力された詳細を示しています。

サービスをビルドして実行する

  1. Visual Studio を開きます。

  2. ファイル>開く>プロジェクト/ソリューション....

    Visual Studio のファイル メニューのスクリーンショット。[ファイル] メニューの [開く] と [開く] の [プロジェクト/ソリューション] というメニュー エントリが赤で強調表示されます。

  3. from bot-conversation-sso-quickstart>csharp_dotnetcore フォルダーを開き、[BotConversationSsoQuickstart.sln ファイル] を選択します。

    ファイル パスと BotSSOCSharp.csproj ファイルが赤で強調表示されているプロジェクト ファイルのスクリーンショット。

  4. F5 キーを押してプロジェクトを実行します。

  5. [セキュリティの警告] ダイアログが表示された場合は、[はい] を選択します。

    [はい] オプションが赤で強調表示されたセキュリティ警告のスクリーンショット。

    Web ページが開き、" ボットの準備ができました!" というメッセージが表示されます。

    注

    このページは、ローカルホスト URL に移動した場合にのみ表示されます。

    ボットの準備ができましたと表示されている Web ページのスクリーンショット。

    トラブルシューティング

    「 パッケージが見つかりません」 というエラーが表示された場合は、次の手順を実行します。

    1. [ツール]>NuGet パッケージ マネージャー>パッケージ マネージャーの設定に移動します。
    2. 表示される [オプション] ウィンドウで、[NuGet パッケージ マネージャー] > [パッケージ ソース] を選択します。
    3. [追加] を選択します。
    4. [ 名前] に「 nuget.org 」と入力し、[ ソース] に「 https://api.nuget.org/v3/index.json」と入力します。
    5. [ 更新してOK] を選択します。
    6. プロジェクトをリビルドします。

Teams でボットをアップロードする

  1. 複製したリポジトリで、 Microsoft-Teams-Samples>samples>bot-conversation-sso-quickstart>csharp_dotnetcore>TeamsApp>appPackage に移動します。

  2. 以下のファイルを appPackage フォルダーに含めて、.zip ファイルを作成します。

    • manifest.json
    • outline.png
    • color.png

    Teams Bot zip フォルダーが赤で強調表示されているマニフェスト フォルダーのスクリーンショット。

  3. Microsoft Teams に移動します。

    1. Teams クライアントで、[ アプリ] を選択します。
    2. [ アプリの管理] を選択します。
    3. [ アプリのアップロード] を選択します。
    4. [カスタム アプリをアップロードする] オプションを探します。

    [アプリ] アイコン、[アプリの管理] が表示され、[カスタム アプリをアップロードする] オプションの選択が赤で強調表示されている Teams アプリのスクリーンショット。

  4. [ 開く] を選択して、 マニフェスト フォルダーに作成した .zip ファイルをアップロードします。

    Teams ボットの zip ファイルをアップロードするための [開く] オプションが赤で強調表示されているマニフェスト フォルダーのスクリーンショット。

  5. [ 追加 ] を選択してボットをチャットに追加します。

    [追加] オプションが強調表示された会話ボットのスクリーンショット。

  6. [開く] を選びます。

    [開く] オプションが強調表示されたスコープ選択ダイアログのスクリーンショット。

    ボットにメッセージを送信することで、ボットと対話できます。 ボットは SSO トークンを交換し、ユーザーの代わりに Graph API を呼び出します。 サインアウトするようにメッセージを送信しない限り、サインインしたままになります。

  7. ボットにメッセージを送信します。 会話ボットは初めて同意を求めます。

  8. デスクトップの場合: [ 続行] を選択して、ボットにアクセスするためのアクセス許可を Teams クライアントに付与します。

    [続行] オプションが赤で強調表示されている追加のアクセス許可のスクリーンショット。

    注

    これで、ボット アプリで SSO が構成されたので、同意を与える必要があるのは今回だけです。

  9. モバイルの場合: [同意する] を選択します。

    注

    これで、モバイルのボット アプリで SSO が構成されたので、同意を与える必要があるのは今回だけです。

    ステップバイステップ ガイドを正常に完了した後のボット SSO 出力のスクリーンショット。

こんなことを思いつきましたか?

ステップ バイ ステップ ガイドを正常に完了した後の出力のスクリーンショット。

これで、チュートリアルを完了して、SSO 認証を使用したボットの構築を開始することができます。

ボットの SSO を有効にする

先頭に戻る

JavaScript を使用して最初のメッセージ拡張機能アプリを構築する

JavaScript を使用して最初の Teams アプリから Microsoft Teams アプリ開発を開始します。

このチュートリアルでは、次のことを学びます。

  • Microsoft 365 Agents Toolkit (以前は Teams Toolkit と呼ばれていました) を使用して新しいプロジェクトを設定する方法。
  • メッセージ拡張機能アプリを構築する方法。
  • アプリをデプロイする方法。
チュートリアル: JavaScript を使用して最初のメッセージ拡張機能アプリを構築する

このステップバイステップ ガイドは、Visual Studio Code で Agents Toolkit を使用して、メッセージ拡張機能 Teams アプリを構築するのに役立ちます。 このガイドの完了後、次の出力が表示されます。

スクリーンショットは、Teams のメッセージ拡張機能アプリの最終出力を示しています。

前提条件

アプリのビルドとデプロイには、次のツールを必ずインストールしてください。

  インストール 使用中...
必須    
  Visual Studio Code JavaScript または TypeScript ビルド環境。 最新バージョンを使用します。
  Microsoft 365 Agents Toolkit アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 最新バージョンを使用します。
  Node.js バックエンド JavaScript ランタイム環境。 詳細については、「 Node.js バージョン互換性表」を参照してください。
  Microsoft Teams チャット、会議、通話のためのアプリを 1 か所で行い、共同作業するユーザーと共同作業を行います。
  Microsoft Edge (推奨) または Google Chrome デバッグとテストに不可欠な開発者ツールを備えたブラウザー。
  Microsoft 365 開発者アカウント カスタム アプリをインストールするための適切なアクセス許可を持つ Teams アカウントへのアクセス。
オプション    
  Visual Studio Code および Azure CLI 用の Azure ツール 保存されているデータにアクセスしたり、Teams アプリのクラウドベースのバックエンドを Azure にデプロイしたりするための Azure ツール。
  Chrome 用の React 開発者ツールまたは Microsoft Edge 用の React 開発者ツール オープンソースの React JavaScript ライブラリ用のブラウザー DevTools 拡張機能。

開発環境の準備

必要なツールをインストールしたら、開発環境をセットアップします。

Microsoft 365 Agents Toolkit をインストールする

Microsoft 365 Agents Toolkit (旧称 Teams Toolkit) は、アプリのクラウド リソースをプロビジョニングおよび展開し、Teams ストアに公開するためのツールを使用して、開発プロセスを簡素化します。

Agents Toolkit は、Visual Studio Code、または Microsoft 365 Agents Toolkit CLI (以前は TeamsFx CLI と呼ばれていました) と呼ばれるコマンド ライン インターフェイスと共に使用できます。

  1. Visual Studio Code を開き、[拡張機能] (Ctrl+Shift+X または View>拡張機能) を選択します。

  2. 検索ボックスに「 Microsoft 365 Agents Toolkit」と入力します。

  3. [インストール] を選びます。

    スクリーンショットは、Agents Toolkit 拡張機能のインストールを示しています。

    Visual Studio Code アクティビティ バーに Microsoft 365 Agents Toolkit アイコンが表示されます。

Visual Studio Code Marketplace から Agents Toolkit をインストールすることもできます。

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

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

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

カスタム アプリを作成したら、[ カスタム アプリをアップロード ] オプションを使用してアプリを Teams にアップロードする必要があります。 Microsoft 365 アカウントにサインインして、このオプションが有効になっているかどうかチェックします。

次の手順は、Teams でアプリをアップロードできるかどうかを確認するのに役立ちます。

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

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

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

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

    スクリーンショットは、Teams でカスタム アプリをアップロードするオプションを示しています。

    注

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

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

Teams 開発者アカウントをお持ちでない場合は、Microsoft 365 開発者プログラムに参加してください。

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

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

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

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

    スクリーンショットは、Microsoft 365 開発者プログラムを示しています。

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

無料の Azure アカウントを取得する

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

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

それでは、最初のメッセージ拡張機能アプリを作成しましょう。

メッセージ拡張機能を使用すると、ボタンとフォームを使用して Web サービスを操作できます。 メッセージ作成領域、コマンド ボックス、または Teams クライアントでメッセージを直接使用して、外部システムでアクションを検索して開始します。 メッセージ拡張機能は、ボットを利用してユーザーとコードの間でダイアログを提供します。

図は、メッセージ拡張機能が強調表示されたさまざまな種類のアプリ機能を示しています。

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

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

検索コマンド付きのメッセージ拡張機能アプリを作成しましょう。 最初に、メッセージ拡張機能アプリを作成するための新しい Teams プロジェクトを設定します。

このチュートリアルでは、次のことを学びます。

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

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

前提条件が整ったら、始めましょう!

注

表示される Visual Studio Code UI は、オペレーティング システム、Toolkit のバージョン、テーマ、環境によって異なる場合があります。

  1. Visual Studio Code を開きます。

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

  3. [新しいエージェント/アプリ>Teams アプリの作成] を選択します。

    スクリーンショットは、Agents Toolkit サイドバーから新しいアプリを作成するオプションを示しています。

  4. [メッセージ表示オプション] を選択します。

    スクリーンショットは、新しい Teams アプリを作成するオプションを示しています。

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

    スクリーンショットは、新しいアプリの機能を選択するオプションを示しています。

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

    スクリーンショットは、メッセージ拡張機能のアーキテクチャのオプションを示しています。

  7. [JavaScript] を選択します。

    スクリーンショットは、プログラミング言語を選択するオプションを示しています。

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

    スクリーンショットは、既定の場所の選択を示しています。

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

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

      スクリーンショットは、参照オプションを示しています。

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

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

      スクリーンショットは、プロジェクト ワークスペース フォルダーの場所を選択する方法を示しています。

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

    スクリーンショットは、アプリ名を入力するオプションを示しています。

    Agents Toolkit は数秒でアプリを作成します。

    スクリーンショットは、新しく作成されたメッセージ拡張機能アプリを示しています。

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

    メッセージ拡張機能アプリが作成されたことを示すダイアログを示すスクリーンショット。

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

メッセージ拡張機能は Bot Framework を使用して、会話を通じてサービスと対話します。 スキャフォールディングの後、 EXPLORER でプロジェクト ディレクトリとファイルを表示します。

スクリーンショットは、メッセージ拡張機能アプリのファイルを示しています。

フォルダー/ファイル 目次
m365agents.yml メイン プロジェクト ファイルには、アプリケーション構成が記述され、各ライフサイクル ステージで実行する一連のアクションが定義されています。
m365agents.local.yml ローカル実行とデバッグを有効にするアクションで m365agents.yml をオーバーライドします。
.vscode/ ローカル デバッグ用の Visual Studio Code ファイル。
appPackage/ Teams アプリケーション マニフェストのテンプレート。
infra/ Azure リソースをプロビジョニングするためのテンプレート。
index.js アプリケーション エントリ ポイントと express ハンドラー。

ヒント

アプリを Teams 内に統合する前に、Teams 外部のボットとメッセージ拡張機能について理解してください。

最初のメッセージ拡張機能アプリをビルドして実行する

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

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

Microsoft 365 開発者プログラムへの参加中に作成した管理者アカウントでサインインします。

  1. Visual Studio Code を開きます。

  2. アクティビティ バーの Microsoft 365 Agents Toolkit アイコンを選択します。

  3. [資格情報を使用して Microsoft 365 にサインイン する] を選択します。 既定の Web ブラウザーが開き、サインインできます。

    スクリーンショットは、Microsoft 365 と Azure にサインインする場所を示しています。

  4. 資格情報を使用してサインインした後、ブラウザーを閉じます。

  5. Visual Studio Code 内のエージェント ツールキットに戻ります。

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

スクリーンショットには、Microsoft 365 にサインインしたユーザーとアップロードが有効になっているメッセージが表示されます。

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

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

これで、最初の Teams メッセージ拡張機能アプリをローカルでビルドしてデバッグできます。

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

  1. Visual Studio Code で F5 キーを選択して、アプリケーションをデバッグ モードで実行します。

    注

    エージェント ツールキットで特定の前提条件を検証できない場合は、チェックするように求められます。


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

    F5 キーを押すと、エージェント ツールキットは次の機能を実行します。

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

      1. Microsoft 365 アカウントでサインインしています。
      2. Microsoft 365 アカウントでカスタム アプリのアップロードが有効になっています。
      3. サポートされている Node.js バージョンがインストールされています。
      4. ボット アプリに必要なポートが利用可能です。

    2. npm パッケージをインストールします

    3. 開発トンネルを開始して HTTP トンネルを作成します。

    4. Microsoft Entra ID にアプリを登録し、アプリを構成します。

    5. Bot Framework にボット アプリを登録し、アプリを構成します。

    6. Teams デベロッパー ポータルにアプリを登録し、アプリを構成します。

    7. ローカルでホストされているメッセージ拡張機能アプリを起動します。

    8. Web ブラウザーで Teams を起動し、Teams アプリをアップロードします。

    スクリーンショットは、メッセージ拡張機能アプリのデバッグ プロセスを示しています。

    アプリを初めてデバッグするとき、Teams は依存関係をダウンロードしてアプリをビルドします。 このプロセスを完了するまでに 3 分から 5 分かかる場合があります。

  2. ビルドが完了すると、Teams がブラウザー ウィンドウで開きます。 メッセージが表示されたら、Microsoft 365 アカウントでサインインします。

  3. メッセージ拡張機能アプリを Teams に追加するダイアログ ボックスが開きます。 [追加] を選択します。

    スクリーンショットは、Teams にカスタム アプリを追加するオプションを示しています。

    Teams がメッセージ拡張機能アプリを読み込みます。

    スクリーンショットは、Teams ボット チャットで開いているメッセージ拡張機能アプリを示しています。

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

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

アプリをテストする

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

検索クエリを実行する方法

  1. cli などのメッセージ拡張機能の検索ボックスにオープンソースの npm パッケージの名前を入力します。 メッセージ拡張機能は、一致するアイテムの一覧を表示します。

    スクリーンショットは、メッセージ拡張機能アプリの検索文字列を示しています。

  2. 一覧からいずれかの項目を選択します。 アプリによってメッセージ作成領域内のアイテムを含むアダプティブ カードが作成され、ユーザーがチャットやチャネルでアイテムを送信できるようになります。

    スクリーンショットは、メッセージ作成領域の検索結果を示しています。

  3. Enter キーを押します。 メッセージ拡張機能アプリは、チャットまたはチャネル内のアイテムと共にアダプティブ カードを送信します。

    スクリーンショットは、チャットで送信された検索結果を示しています。

メッセージ拡張機能アプリを開く方法

前の手順で、メッセージ拡張機能アプリの検索機能をテストしました。 それでは、メッセージ拡張機能アプリを開くさまざまな方法について説明します。

コマンド ボックスからアプリを開く

  1. コマンド ボックスに / に続けてメッセージ拡張機能アプリの名前を入力します。

    スクリーンショットは、メッセージ拡張機能アプリを呼び出す方法を示しています。

    アプリがコマンド ボックスで開き、それを使用してクエリを実行できます。

    注

    • / を使用してコマンド ボックスからメッセージ拡張機能アプリを開く方法は、新しい Teams クライアントでのみ機能します。
    • @ を使用して、従来の Teams クライアントのコマンド ボックスからメッセージ拡張機能アプリを開きます。

メッセージ作成領域からアプリを開きます

  1. メッセージ作成領域の下部にある 3 つのドットを選択します。

  2. メッセージ拡張機能アプリを選択します。

    スクリーンショットは、メッセージ作成領域からメッセージ拡張機能アプリを開く方法を示しています。

    メッセージ拡張機能アプリが読み込まれ、検索を実行するためのオプションが表示されます。


アップロードされたカスタム アプリからアプリを開く

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

  2. アプリの一覧からアプリのドロップダウンを選択し、[ 個人用アプリ] を選択します。

    スクリーンショットは、Teams にアップロードされたアプリを示しています。

  3. アプリを試すことを提案するダイアログ ボックスが表示されます。 [ 確認] を選択すると、ダイアログ ボックスは閉じられます。 [ 試してみる] を選択します。

    メッセージ拡張機能アプリを今すぐ試すように、または後で試すようにというメッセージを示すスクリーンショット。

  4. メッセージ拡張機能アプリの一覧が、最新の Teams チャットに表示されます。 一覧からメッセージ拡張機能アプリを選択します。

アプリがローカルで実行されない場合のトラブルシューティング方法について説明します

Teams でアプリを実行するには、カスタム アプリのアップロードを許可する Microsoft 365 開発アカウントが必要です。 カスタム アプリのアップロードの詳細については、「前提条件」セクションを参照してください。

最初の Teams アプリを展開する

エージェント ツールキットを使用して、Azure に最初のメッセージ拡張機能アプリをデプロイしましょう。

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

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

  1. Visual Studio Code を開きます。

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

  3. アクティビティ バーの Microsoft 365 Agents Toolkit アイコンを選択します。

  4. [資格情報を使用して Azure にサインインする] を選択します。 既定の Web ブラウザーが開き、サインインできます。

    ヒント

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

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

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

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

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

プロビジョニングとデプロイの違いは何ですか?
プロビジョニング手順では、アプリ用のリソースが Azure と Microsoft 365 に作成されますが、コード (HTML、CSS、JavaScript など) はリソースにコピーされません。 配置ステップでは、プロビジョニングステップで作成したリソースにアプリのコードがコピーされます。 新しいリソースをプロビジョニングせずに複数回デプロイすることは一般的です。 プロビジョニング手順は完了までに時間がかかるため、デプロイ手順とは別の手順です。

Visual Studio Code アクティビティ バーの Microsoft 365 Agents Toolkit アイコンを選択します。

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

    [エージェント ツールキット] の下のクラウドでのプロビジョニングの選択を示すスクリーンショット。

  2. サブスクリプションを選択します。

    スクリーンショットは、選択する Azure サブスクリプション グループ オプションを示しています。

  3. リソース グループを選択します。

    スクリーンショットは、Azure リソースに使用するサブスクリプションを示しています。

    選択するリソース グループがない場合は、次の手順で新しいリソース グループを作成できます。

    1. [ +新しいリソース グループ] を選択します。

      スクリーンショットは、新しい Azure リソース グループを作成するオプションを示しています。

    2. 既定の名前を選択するか、リソース グループに適した名前を入力します。

      スクリーンショットは、新しい Azure リソース グループの既定の名前を示しています。

    3. リソース グループの場所を選択します。

      スクリーンショットは、新しい Azure リソース グループの場所のオプションを示しています。

  4. Azure でリソースを実行するときにコストが発生する可能性があることを警告するダイアログ ボックスが表示されます。 [ プロビジョニング] を選択します。

    スクリーンショットは、Azure リソースのプロビジョニング中にコストが発生する可能性があることをユーザーに警告するダイアログ ボックスを示しています。

    プロビジョニング プロセスでは、Azure クラウドにリソースが作成されます。 お時間をいただく場合があります。 数分後、次のメッセージが表示されます。

    スクリーンショットは、クラウドで正常にプロビジョニングされた拡張機能アプリというメッセージを表示する通知を示しています。

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

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

    スクリーンショットは、[環境] セクションでプロビジョニングされているリソースを示しています。

  5. [ ライフサイクル] で、[ 展開] を選択します。

    スクリーンショットは、アプリがクラウドに展開されていることを示しています。

  6. 開発環境にリソースをデプロイするかどうかを確認するダイアログ ボックスが表示されます。 [ 展開] を選択します。

    スクリーンショットは、Azure にアプリをデプロイするための確認ダイアログ ボックスを示しています。

    プロビジョニングと同様に、デプロイには時間がかかります。 数分後に、完了メッセージが表示されます。

展開されたアプリの実行

プロビジョニングとデプロイの手順が完了したら、Agents Toolkit の 実行とデバッグ (Ctrl+Shift+D または実行>表示) に移動します。

  1. [ 実行とデバッグ] ドロップダウン メニューを選択します。

  2. [ Teams (Edge) でリモートで起動] を選択します。

  3. ▷ ボタンを選択します。

    スクリーンショットは、[Teams でアプリをリモートで起動する] オプションを示しています。

  4. 展開されたアプリを Teams にインストールするためのダイアログ ボックスが開きます。 [追加] を選択します。

    スクリーンショットは、展開されたアプリを追加するメッセージを示しています。

    Teams が最新のチャットでメッセージ拡張機能アプリを開きます。

    チャットで開いているメッセージ拡張機能を示すスクリーンショット。

アプリを Azure にデプロイした場合に起こることの詳細

デプロイする前に、アプリはローカルで実行されます。

  • バックエンドは Azure Functions コア ツールを使用して実行されます。
  • Microsoft Teams がアプリケーションを読み込むアプリケーション HTTP エンドポイントは、ローカルで実行されます。

展開は 2 段階のプロセスです。 アクティブな Azure サブスクリプションでリソースをプロビジョニングし、アプリのバックエンド コードとフロントエンド コードを Azure にデプロイまたはアップロードします。

  • バックエンドは、構成されている場合、Azure App Service や Azure Storage など、さまざまな Azure サービスを使用します。
  • フロントエンド アプリは、静的 Web ホスティング用に構成された Azure Storage アカウントにデプロイされます。

おめでとうございます

JavaScript を使ったメッセージ拡張機能アプリを構築するためのチュートリアルを完了しました。

こんなことを思いつきましたか?

スクリーンショットは、Teams のメッセージ拡張機能アプリの最終出力を示しています。

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

先頭に戻る

C シャープを使用して最初のタブ アプリを構築する

タブ機能を備えた最初の Teams アプリを作成して、Microsoft Teams アプリ開発を開始します。

このチュートリアルでは、次のことを学びます。

  • 新しいプロジェクトを設定する方法。
  • C# と Microsoft Visual Studio 2022 を使用してタブ機能を備えたアプリを構築する方法。
チュートリアル: C を使用して最初のタブ アプリを構築する#

このステップバイステップ ガイドは、Microsoft 365 Agents Toolkit (以前は Teams Toolkit と呼ばれていた) を使用してタブを作成するのに役立ちます。 このガイドの完了後、次の出力が表示されます:

スクリーンショットは、[Teams] タブ アプリの最終出力を示しています。

アプリをビルドするための前提条件

Teams アプリを構築して展開するためにインストールする必要があるツールの一覧を次に示します。

インストール 使用中...
Microsoft Teams Microsoft Teams は、チャット、会議、通話用のアプリをすべて 1 つの場所で使用し、共同作業するすべてのユーザーと共同作業を行います。
Visual Studio 2022
 Visual Studio 2022 にエンタープライズ バージョンをインストールし、ASP.NET および Web 開発ワークロードをインストールできます。 最新バージョンを使用します。
Microsoft 365 Agents Toolkit アプリのプロジェクト スキャフォールディングを作成する Visual Studio 拡張機能。 最新バージョンを使用します。

エージェント ツールキットのインストール

Agents Toolkit は、アプリのプロジェクト スキャフォールディングを作成するためのツールを使用して、開発プロセスを簡素化するのに役立ちます。 選択したすべての機能に必要なディレクトリ構造が作成され、必要なファイルが配置され、プロジェクトをビルドする準備が整います。

最新の Visual Studio インストーラーをダウンロードできます。 エージェント ツールキットは、Visual Studio の拡張機能として使用できます。

Visual Studio インストーラーをポップアップ ワークロード ウィンドウで開いたら、次の手順を実行します。

  1. [ ASP.NET と Web 開発] を選択します。

  2. [インストールの詳細>省略可能] で、[Microsoft Teams開発ツール] を選択します。

  3. [インストール] を選びます。

    スクリーンショットは、Visual Studio のインストールを示しています。

  4. [ 起動] を選択します。 Visual Studio 2022 アプリ ウィンドウが表示されます。

    スクリーンショットは、Visual Studio での [起動] の選択を示しています。

  5. [ 拡張機能>拡張機能の管理] に移動します。

    スクリーンショットは、[拡張機能] の選択を示しています。

    [拡張機能の管理] ウィンドウが表示されます。

    スクリーンショットは、[拡張機能の管理] を示しています。

  6. 左側のウィンドウで、[ インストール済み] を選択します。 Microsoft 365 Agents Toolkit 拡張機能が利用可能です。

    スクリーンショットは、Agents Toolkit の選択を示しています。

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

テナントは、チャット、ファイルの共有、会議の実行を行う organization のスペースまたはコンテナーのようなものです。 このスペースは、カスタム アプリのアップロードとテストも行う場所です。 テナントを使用して開発する準備ができているかどうかを確認します。

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

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

注

Teams のローカル環境でアプリのプレビューとテストを行うには、カスタム アプリのアップロードが必要です。 有効になっていない場合、Teams のローカル環境でアプリをプレビューおよびテストすることはできません。

既にテナントと管理者アクセス権がありますか? そのかどうかチェックしてみましょう!

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

  1. Microsoft Teams を開き、[ アプリ ] アイコンを選択します。

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

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

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

    図は、Teams でカスタム アプリをアップロードするオプションを示しています。

注

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

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

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

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

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

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

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

    スクリーンショットは、Microsoft 365 開発者プログラムにサインアップした後に表示される内容の例を示しています。

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

無料の Azure アカウントを取得する

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

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

C シャープを使用してタブ アプリのプロジェクト ワークスペースを作成する

最初のアプリを作成して Microsoft Teams アプリ開発を開始します。 このアプリはタブ機能を使用します。 前提条件が整ったら、始めましょう!

次の手順は、Visual Studio でタブ アプリのプロジェクト ワークスペースを作成するのに役立ちます。

  1. Visual Studio を開きます。

  2. [ 新しいプロジェクト] を選択します。

    スクリーンショットは、Visual Studio での [新しいプロジェクト] の選択を示しています。

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

  4. [ Microsoft 365 エージェント>次へ] を選択します。

    スクリーンショットは、Teams の選択を示しています。

  5. 次の詳細を入力して、新しいプロジェクトを構成します。

  6. 必要なプロジェクト名を プロジェクト名に入力します。

  7. プロジェクト ファイルとフォルダーを保存する必要な場所を選択します。

  8. [作成] を選択します。

    スクリーンショットは、プロジェクト名の作成を示しています。

  9. [ タブ>作成] を選択します。

    スクリーンショットは、タブの選択を示しています。

Teams タブ アプリは数秒で作成されます。

スクリーンショットは、プロジェクトの作成を示しています。

C シャープを使用して最初のタブ アプリをビルドして実行する

Agents Toolkit を使用してプロジェクト ワークスペースを設定したら、タブ アプリをビルドします。

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

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

  1. ソリューション エクスプローラーの [ソリューション MyTeamsApp] で、[MyTeamsApp] を右クリックします。

  2. [Microsoft 365 エージェント ツールキット] を選択します>[Microsoft 365 アカウント] を選択します。

    スクリーンショットは、[Teams アプリの依存関係] の選択を示しています。

  3. [ Microsoft 365 アカウント>続行] を選択します。

    スクリーンショットは、M365 アカウントの選択を示しています。

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

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

  1. [デバッグ>デバッグの開始] を選択するか、F5 キーを押します。

    スクリーンショットは、[デバッグの開始] アクションの選択を示しています。

    Visual Studio はデバッグ プロセスを開始し、ブラウザーで Teams Web クライアントを開きます。 メッセージが表示されたら、Microsoft 365 アカウントでサインインします。

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

    タブ アプリを Teams に追加するアプリの詳細ダイアログのスクリーンショット。

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

または、必要な範囲を検索して選択するか、一覧からチャネルまたはチャットを選択し、ダイアログ間を移動して [Go] を選択することもできます。

スクリーンショットは、共有スコープの一覧を含むスコープ選択ダイアログを表示します。

おめでとうございます。最初のタブ アプリが Teams で実行されました。

スクリーンショットは、[Teams] タブ アプリの最終出力を示しています。

アプリがローカルで実行されない場合のトラブルシューティングの方法について説明します。

Teams でアプリを正常に実行するには、Teams アカウントでカスタム アプリのアップロードが有効になっていることを確認します。 カスタム アプリのアップロードの詳細については、 前提条件 セクションを参照してください。

C# を使用してタブ アプリが正常に作成されました。 Agents Toolkit によって、アプリのディレクトリ構造に必要な足場が追加されました。 これでチュートリアルは完了です。

タブを作成する

Microsoft 365 Agents Toolkit を使用して新しい Teams プロジェクトを作成する

先頭に戻る

タブとメッセージ拡張機能アプリに SSO を追加する

Microsoft Entra シングル サインオン (SSO) により、Teams でシームレスなユーザー認証が可能になります。

Microsoft Entra SSO の重要な側面:

  • ユーザーが最初のサインイン後に自動的にサインインできるようにします。
  • ユーザーが資格情報を再入力せずに他のデバイスにサインインすることを許可します。
  • サインインしているユーザーのトークンを取得します。
チュートリアル: タブとメッセージ拡張機能アプリに SSO を追加する

このステップバイステップ ガイドは、Microsoft Entra SSO 認証を有効にするタブとメッセージ拡張機能を作成するのに役立ちます。 次の出力が表示されます:

ステップ バイ ステップ ガイドを正常に完了した後の SSO 認証出力を含むタブとメッセージ拡張機能のスクリーンショット。

アプリに SSO を追加するための前提条件

次のツールをインストールし、開発環境をセットアップしてください。

# インストール 使用中...
1. Microsoft Teams Microsoft Teams は、チャット、会議、通話用のアプリをすべて 1 か所で使用して、共同作業するすべてのユーザーと共同作業を行います。
2. Microsoft 365 開発者アカウント アプリをインストールするための適切なアクセス許可を持つ Teams アカウントへのアクセス。
3. .NET Core SDK ローカル デバッグと Azure Functions アプリのデプロイ用にカスタマイズされたバインド。 最新バージョンをインストールしていない場合は、移植可能なバージョンをインストールしてください。
4. Visual Studio 2022 Visual Studio 2022 にエンタープライズ バージョンをインストールし、ASP.NET および Web 開発ワークロードをインストールできます。 最新バージョンを使用します。
5. 開発トンネル Teams アプリの機能 (会話ボット、メッセージ拡張機能、受信 Webhook) には受信接続が必要です。 トンネルは、開発システムを Teams に接続します。 開発トンネルは、ローカルホストをインターネットに対して安全に開放し、アクセスできるユーザーを制御するための強力なツールです。 開発トンネルは、Visual Studio 2022 バージョン 17.7.0 以降で使用できます。
または
また、開発システムを Teams に接続するためのトンネルとして ngrok を使用することもできます。 タブのみを含むアプリには必要ありません。 このパッケージは、プロジェクト ディレクトリ内にインストールされます (npm devDependencies を使用)。

注

ngrok をダウンロードしたら、サインアップして authtoken をインストールします。

ローカル環境の設定

  1. Microsoft-Teams-Samples を開きます。

  2. [ コード] を選択します。

  3. ドロップダウン メニューから [ GitHub Desktop で開く] を選択します。

    スクリーンショットは、ローカルでリポジトリを複製するオプションを示しています。

  4. [ Clone] を選択します。

Microsoft Entra アプリを登録する

次の手順は、Azure portal でボットを作成して登録するのに役立ちます。

  • Azure アプリを作成して登録します。
  • クライアント シークレットを作成して、ボットの SSO 認証を有効にします。
  • Teams チャネルを追加してボットを展開します。
  • 開発トンネル (推奨) または ngrok を使用して、Web サーバーのエンドポイントへのトンネルを作成します。
  • 作成した開発トンネルにメッセージング エンドポイントを追加します。

アプリ登録の追加

  1. Azure portal に移動します。

  2. [アプリの登録] を選択します。

    スクリーンショットは、アプリの登録を選択する Azure サービスを示しています。

  3. [ +新規登録] を選択します。

    スクリーンショットは、Microsoft Entra 管理センターの [新規登録] ページを示しています。

  4. アプリの名前を入力します。

  5. 任意の組織ディレクトリ (任意の Microsoft Entra ID テナント - マルチテナント) 内のアカウントを選択します。

  6. [ 登録] を選択します。

    スクリーンショットは、ボットを Microsoft Entra 管理センターに登録するオプションを示しています。

    アプリは Microsoft Entra ID に登録されています。 アプリの概要ページが表示されます。

    スクリーンショットは、アプリ登録の概要ページを示しています。

    注

    後で使用するために、 アプリケーション (クライアント) ID と ディレクトリ (テナント) ID のアプリ ID を保存します。

トンネルを作成する

トンネルを作成するには、次のいずれかの方法を選択します。

  1. Visual Studio を開きます。

  2. [ 新しいプロジェクトの作成] を選択します。

    スクリーンショットは、新しいプロジェクトを作成するための選択を示しています。

  3. 検索ボックスに「 ASP.NET」と入力します。 検索結果から [ASP.NET Core Web アプリ] を選択します。

  4. [次へ] を選択します。

    テンプレートの検索と選択を示すスクリーンショット。

  5. プロジェクト名を入力し、[次へ] を選択します。

    スクリーンショットは、入力するプロジェクト名を示しています。

  6. [作成] を選択します。

    プロジェクトの追加情報を示すスクリーンショット。

    概要ウィンドウが表示されます。

    スクリーンショットは、概要ウィンドウを示しています。

  7. [デバッグ] ドロップダウン リストで、[開発トンネル (アクティブなトンネルなし)]>[トンネルの作成]..

    スクリーンショットは、開発トンネルを選択するドロップダウンを示しています。

    ポップアップ ウィンドウが表示されます。

  8. ポップアップ ウィンドウで、次の詳細を更新します。

    1. アカウント: Microsoft または GitHub のアカウントを入力します。
    2. 名前: トンネルの名前を入力します。
    3. トンネルの種類: ドロップダウン リストから [ 一時] を選択します。
    4. アクセス: ドロップダウン リストから [ パブリック] を選択します。

  9. [OK] を選択します。

    スクリーンショットは、トンネルの作成のために更新する詳細を示しています。

    開発トンネルが正常に作成されたことを示すポップアップ ウィンドウが表示されます。

  10. [OK] を選択します。

    スクリーンショットは、トンネルが作成されたことを示すポップアップ メッセージを示しています。

    作成したトンネルは、次のようにデバッグ ドロップダウン リストで見つけることができます。

    スクリーンショットは、トンネルがアクティブで選択されていることを示しています。

  11. F5 キーを押して、アプリケーションをデバッグ モードで実行します。

  12. [セキュリティの警告] ダイアログが表示された場合は、[はい] を選択します。

    スクリーンショットは、セキュリティ警告を受け入れるダイアログ ボックスを示しています。

    ポップアップ ウィンドウが表示されます。

  13. [Continue] (続行) を選択します。

    スクリーンショットは、トンネルの URL を示しています。

    新しいブラウザー ウィンドウで開発トンネルのホーム ページが開き、開発トンネルがアクティブになります。

    スクリーンショットは、ブラウザーの開発トンネルのウェルカム ページを示しています。

  14. Visual Studio を選択し、[ 出力 > 表示] を選択します。

  15. [ 出力 コンソール] ドロップダウン メニューから、[ 開発トンネル] を選択します。

    出力コンソールには、開発トンネルの URL が表示されます。

    スクリーンショットは、Visual Studio 出力コンソールの URL を示しています。

Web 認証を追加する

  1. 左側のウィンドウの [管理] で、[ 認証] を選択します。

  2. プラットフォームの追加>Web を選択します。

    スクリーンショットは、Web 認証の選択を示しています。

  3. 完全修飾ドメイン名に auth-end を追加して、アプリのリダイレクト URI を入力します。 たとえば、 https://your-devtunnel-domain/auth-end や https://your-ngrok-domain/auth-end などです。

  4. [ 暗黙的な許可フローとハイブリッド フロー] で、[ アクセス トークン] と [ID トークン] チェック ボックスをオンにします 。

  5. [ 構成] を選択します。

    スクリーンショットは、リダイレクト URI を追加し、暗黙的な許可とハイブリッド フローを選択するオプションを示しています。

  6. [Web] で、[URI の追加] を選択します。

  7. https://token.botframework.com/.auth/web/redirectと入力します。

  8. [保存] を選択します。

    スクリーンショットは、リダイレクト URI を追加し、暗黙的な許可とハイブリッド フローを選択するオプションを示しています。

クライアント シークレットの作成

注

" クライアント シークレットはテナント全体のポリシーによってブロックされています" というエラーが発生した場合。詳細については、テナント管理者にお問い合わせください。代わりに証明書を作成できます。 詳しい手順については、「アプリ登録用の証明書を作成する」を参照してください。

  1. 左側のウィンドウの [管理] で、[ 証明書 & シークレット] を選択します。

  2. [ クライアント シークレット] で、[ + 新しいクライアント シークレット] を選択します。

    新しいクライアント シークレットの選択を示すスクリーンショット。

    [ クライアント シークレットの追加] ウィンドウが表示されます。

  3. 説明を入力します。

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

    追加するクライアント シークレットの説明オプションを示すスクリーンショット。

  5. [ 値] で、[ クリップボードにコピー] を選択して、後で使用するためにクライアント シークレット値を保存します。

    スクリーンショットは、クライアント シークレット ID 値をコピーして値をクリップボードにコピーするオプションを示しています。

API アクセス許可の追加

  1. 左側のウィンドウで、[ API アクセス許可] を選択します。

  2. [ + アクセス許可の追加] を選択します。

    スクリーンショットは、[アクセス許可の追加] を選択するオプションを示しています。

  3. [Microsoft Graph] を選択します。

  4. [ 委任されたアクセス許可] を選択します。

  5. User>User.Read を選択します。

  6. [ アクセス許可の追加] を選択します。

    スクリーンショットは、アクセス許可を選択するオプションを示しています。

    注

    • アプリに IT 管理者の同意が付与されていない場合、ユーザーは初めてアプリを使用するときに同意する必要があります。
    • ユーザーが API アクセス許可に同意する必要があるのは、Microsoft Entra アプリが別のテナントに登録されている場合のみです。

アプリケーション ID URI の追加

  1. 左側のウィンドウ の [管理] で、[ API の公開] を選択します。

  2. [ アプリケーション ID URI] の横にある [追加] を選択します。

    スクリーンショットは、アプリケーション ID URI を追加するオプションを示しています。

  3. アプリケーション ID URI を api://your-devtunnel-domain/botid-{AppID} または api://your-ngrok-domain/botid-{AppID} の形式で更新し、[保存] を選択します。

    スクリーンショットは、リダイレクト URI を追加して保存するオプションを示しています。

    次の図にドメイン名を示します。

    スクリーンショットは、リダイレクト URI を示しています。

スコープの追加

  1. 左側のウィンドウ の [管理] で、[ API の公開] を選択します。

  2. [ + スコープの追加] を選択します。

    スクリーンショットは、[スコープの追加] の選択を示しています。

  3. スコープ名として「access_as_user」と入力します。

  4. [ 同意できるユーザー] で、[ 管理者とユーザー] を選択します。

  5. 残りのフィールドの値を次のように更新します。

    • 「Teams はユーザーのプロファイルに管理同意の表示名としてアクセスできます」と入力します。

    • Enter Teams が現在のユーザーとしてアプリの Web API を管理の同意の説明として呼び出すことを許可します。

    • 「 Teams はユーザー プロファイルにアクセスし、ユーザーの代わりに要求をユーザー同意の表示名として行えます」と入力します。

    • [ Teams がユーザーと同じ権利でこのアプリの API を呼び出すことができるようにする] と入力します。 ユーザーの 同意の説明。

  6. [状態] が [有効] に設定されていることを確認します。

  7. [ スコープの追加] を選択します。

    次の図は、フィールドと値を示しています:

    スクリーンショットは、[スコープを追加する] フィールドに入力された値を示しています。

    注

    スコープ名は、末尾に /access_as_user が追加されたアプリケーション ID URI と一致する必要があります。

    スクリーンショットは、[スコープ] の詳細を示しています。

クライアント アプリケーションの追加

  1. 左側のウィンドウ の [管理] で、[ API の公開] を選択します。

    [ 承認済みクライアント アプリケーション] で、アプリの Web アプリケーションに対して承認するアプリケーションを特定します。

  2. [ + クライアント アプリケーションの追加] を選択します。

    スクリーンショットは、[クライアント アプリケーションの選択] オプションを示しています。

  3. Teams モバイルまたはデスクトップと Teams Web アプリケーションを追加します。

    1. Teams モバイルまたはデスクトップの場合: クライアント ID を 1fec8e78-bce4-4aaf-ab1b-5451cc387264 として入力します。

      スクリーンショットは、モバイルまたはデスクトップ クライアント ID アプリケーションを示しています。

    2. Teams Web の場合: クライアント ID を 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 として入力します。

      スクリーンショットは、Web クライアント ID アプリケーションを示しています。

  4. [ 許可されたスコープ] チェック ボックスをオンにします。

  5. [ アプリケーションの追加] を選択します。

    スクリーンショットは、承認されたスコープを選択してアプリケーションを追加するオプションを示しています。

    次の図は、 クライアント ID を表示します。

    スクリーンショットは、クライアント アプリケーションの出力を示しています。

マニフェストの更新

  1. 左側のウィンドウで、[ マニフェスト] を選択します。

  2. requestedAccessTokenVersionの値を [2] に設定し、[保存] を選択します。

    スクリーンショットは、Azure portal のマニフェスト オプションとアクセストークンの詳細を示しています。

ボットを作成する

Azure ボット リソースを作成する

注

既に Teams でボットをテストしている場合は、このアプリと Teams からサインアウトします。 この変更を確認するには、もう一度サインインします。

  1. [ ホーム] に移動します。

  2. [ + リソースの作成] を選択します。

  3. 検索ボックスに「Azure Bot」と入力します。

  4. Enter キーを押します。

  5. Azure ボットを選択します。

  6. [作成] を選択します。

    スクリーンショットは、Azure ボットの作成を示しています。

  7. ボット ハンドルにボット名を入力します。

  8. ドロップダウン リストから サブスクリプション を選択します。

  9. ドロップダウン リストから リソース グループ を選択します。

    スクリーンショットは、Azure portal のオプションのリソース グループとサブスクリプションを示しています。

    既存のリソース グループがない場合は、新しいリソース グループを作成できます。 新しいリソース グループを作成するには、次の手順を実行します。

    1. 新規 作成を選択します。
    2. リソース名を入力し、[ OK] を選択します。
    3. 新しいリソース グループの場所ドロップダウン リストから場所を選択します。

    スクリーンショットは、Azure portal の新しいリソース グループ オプションを示しています。

  10. [ 価格] で、[ プランの変更] を選択します。

    スクリーンショットは、Azure portal の価格オプションを示しています。

  11. [FO Free>Select] を選択します。

    [無料] を選択するオプションを示すスクリーンショット。

  12. [Microsoft アプリ ID] で、[マルチ テナント] として [アプリの種類] を選択します。

  13. [ 作成] の種類で、 既存のアプリの登録を使用する を選択します。

  14. アプリ ID を入力します。

    注

    同じ Microsoft アプリ ID を使用して複数のボットを作成することはできません。

  15. [ レビュー + 作成] を選択します。

    スクリーンショットは、新しいボットの作成を示しています。

  16. 検証に合格したら、[ 作成] を選択します。

    ボットのプロビジョニングには数分かかります。

  17. [ リソースに移動] を選択します。

    スクリーンショットは、Azure portal の [リソースに移動] オプションを示しています。

    Azure ボットが正常に作成されました。

    ボットの出力を示すスクリーンショット。

Teams チャネルを追加する

  1. 左側のウィンドウで、[ チャネル] を選択します。

  2. [ 利用可能なチャネル] で、[ Microsoft Teams] を選択します。

    スクリーンショットは、チャネルでの Teams の選択を示しています。

  3. チェック ボックスをオンにして、 利用規約に同意します。

  4. [ 同意する] を選択します。

    スクリーンショットは、サービス利用規約への同意を示しています。

  5. [適用する] を選択します。

    スクリーンショットは、適用するメッセージングとしての Microsoft Teams を示しています。

メッセージング エンドポイントを追加するには

  1. メッセージング エンドポイントとして 出力コンソールの開発 トンネル URL を使用します。

    スクリーンショットは、Visual Studio 出力コンソールの URL を示しています。

  2. 左側のウィンドウの [設定] で、[ 構成] を選択します。

  3. メッセージング エンドポイントを https://your-devtunnel-domain/api/messages の形式で更新します。

    スクリーンショットは、メッセージング エンドポイントの追加 API を示しています。

  4. [適用する] を選択します。

    Azure Bot Service でボットを正常にセットアップしました。

    注

    Application Insights インストルメンテーション キーにエラーが表示された場合は、アプリ ID で更新します。

OAuth 接続設定を追加する

  1. 左側のウィンドウで、 [ 構成] を選択します。

  2. [ OAuth 接続設定の追加] を選択します。

  3. [ 新しい接続設定] で、次の詳細を更新します。

    • 名前: 新しい接続設定の名前を入力します。 この名前は、ボット サービス コードの設定で使用できます。
    • サービス プロバイダー: ドロップダウン リストから [Azure Active Directory v2] を選択します。
    • クライアント id: Microsoft アプリ ID を更新します。
    • クライアント シークレット: クライアント シークレット の値を更新します。
    • トークン交換 URL: アプリケーション ID URI を更新します。
    • テナント ID: 共通と入力します。
    • スコープ: User.Read と入力します。

  4. [保存] を選択します。

    スクリーンショットは、OAuth 接続を設定するために追加された値を示しています。

アプリの設定をセットアップする

  1. 複製されたリポジトリの appsettings.json ファイルに移動します。

    appsettings.json ファイルが赤で強調表示されているプロジェクト ファイルのスクリーンショット。

  2. Visual Studio で appsettings.json ファイルを開きます。

  3. 次の情報を更新します。

    • "MicrosoftAppId"ボットの Microsoft アプリ ID に置き換えます。
    • "MicrosoftAppPassword"をボットのクライアント シークレットに置き換えます 値。
    • "SiteUrl"を ngrok URL に置き換えます。
    • "ConnectionName"を OAuth 接続設定の名前に置き換えます。
    • "TenantId"アプリが使用されているテナントのテナント ID に置き換えます。
    • "ClientId"ボットの Microsoft アプリ ID に置き換えます。
    • "AppSecret"をボットのクライアント シークレットに置き換えます 値。
    • "ApplicationIdURI"をapi://*******.ngrok.io/botid-{AppID}の形式で置き換えます。

    入力した値が赤で強調表示されている appsettings.json ファイルのスクリーンショット。

マニフェスト ファイルの設定

  1. 複製されたリポジトリの manifest.json ファイルに移動します。

    マニフェスト ファイルが赤で強調表示されているマニフェスト フォルダーのスクリーンショット。

  2. Visual Studio で manifest.json ファイルを開き、次の変更を行います。

    • DOMAIN-NAMEを ngrok URL に置き換えます。

    • YOUR-MICROSOFT-APP-IDボットの Microsoft アプリ ID に置き換えます。

      注

      シナリオによっては、 [YOUR-MICROSOFT-APP-ID] と [DOMAIN-NAME] が複数回発生する場合があります。

    • resource をapi://*******.ngrok.io/botid-{AppID}に置き換えます。

      入力された値が赤で強調表示されているmanifest.json ファイルのスクリーンショット。

サービスをビルドして実行する

サービスをビルドして実行するには、Visual Studio またはコマンド ラインを使用します。

  1. Visual Studio を開きます。

  2. [ファイル]>開く> *プロジェクト/ソリューション...

    Visual Studio のファイル メニューのスクリーンショット。[ファイル] メニューの [開く] と [開く] の [プロジェクト/ソリューション] というメニュー エントリが赤で強調表示されます。

  3. csharp フォルダーで、[App SSO Sample.csproj ファイル] を選択します。

    アプリ SSO Sample.csproj ファイルが赤で強調表示されているプロジェクト ファイルのスクリーンショット。

  4. F5 キーを押してプロジェクトを実行します。

  5. 次のダイアログが表示されたら、[ はい ] を選択します。

    [はい] オプションが赤で強調表示されたセキュリティ警告のスクリーンショット。

"ボットの準備ができました!" というメッセージを含む Web ページが表示されます。

表示される Web ページのスクリーンショット ボットの準備ができました。

先頭に戻る

  • Last updated on