この記事では、Teams アプリ機能の構築の詳細について説明します。 Teams プラットフォーム機能で使用できるステップ バイ ステップ ガイドの一覧を次に示します。
| # | 機能 | ステップ バイ ステップのガイド |
|---|---|---|
| 1. | Bot | Microsoft 365 Agents Playground を使用して AI チャット ボットをデバッグする |
| 2. | メッセージ拡張機能: | API ベースのメッセージ拡張機能を構築する |
| 3。 | Tab | C シャープを使用して最初のタブ アプリをビルドする |
| 4. | SSO | SSO 認証を使用してボットを構築する |
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 でアクティビティをモックすることもできます。
注:
- エージェントプレイグラウンドは、Microsoft 365 Agents Toolkit (以前は Teams Toolkit と呼ばれる) の v5.4.0 でのみ使用できます。
- Agent Playground は、デスクトップ クライアントと Web クライアントでのみサポートされています。
このステップ バイ ステップ ガイドは、エージェント ツールキットを使用して 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 API キーを作成して、OpenAI の GPT を使用します。 アプリをホストする場合、またはAzureでリソースにアクセスする場合は、Azure OpenAI サービスを作成する必要があります。 |
| Microsoft Edge (推奨) または Google Chrome | 開発者ツールを備えたブラウザー。 |
AI チャット ボット アプリのプロジェクト ワークスペースを作成する
Teams アプリのボット機能により、チャットボットまたは会話型ボットが作成されます。 Web サービスと通信し、そのサービスの使用を容易にします。 ボットは、顧客サービスの提供など、シンプルで自動化されたタスクを実行できます。 天気予報、予約、または会話型ボットを使用して提供されるその他のサービスを取得できます。
これらのアプリを作成する準備が完了したら、AI チャット ボット アプリを作成するための新しい Teams プロジェクトを設定できます。
ボット プロジェクト ワークスペースを作成する
前提条件が整っている場合、始めましょう。
Visual Studio Code を開きます。
Visual Studio Code アクティビティ バーの [Microsoft 365 Agents Toolkit
] アイコンを選択します。[ Create a New Agent/App]\(新しいエージェント/アプリの作成\) を選択します。
![[エージェント ツールキット] サイドバーの [新しいプロジェクトの作成] リンクの場所を示すスクリーンショット。](../assets/images/toolkit-v2/create-project.png)
[エージェント for Teams>Azure OpenAI] を選択>入力Azure API サービス キーに入力を入力します
[ Teams の基本エージェント] を選択します。 ボットに別の機能が必要な場合は、必要なオプションを選択します。
プログラミング言語を JavaScript として選択します。
[ 既定のフォルダー] を選択します。
既定の場所を変更するには、次の手順に従います。
[ 参照] を選択します。
![[場所の参照] オプションの選択を示すスクリーンショット。](../assets/images/toolkit-v2/first-bot/select-browse.png)
プロジェクト ワークスペースの場所を選択します。
[ フォルダーの選択] を選択します。
アプリに適した名前を入力し、 Enter キーを選択します。
ダイアログが表示されます。このフォルダー内のファイルの作成者を信頼するには、[はい] または [いいえ] を選択する必要があります。
これで、AI チャット ボット プロジェクト ワークスペースが正常に作成されました。
ボット アプリのソース コードのツアーを開始する
スキャフォールディングが完了したら、Visual Studio Code の [エクスプローラー ] セクションでプロジェクト のディレクトリとファイルを調べます。
| フォルダーまたはファイル名 | コンテンツ |
|---|---|
env/.env.playground |
Git にコミットできる環境変数を含む構成ファイル。 |
env/.env.playground.user |
既定では Git にコミットされていない資格情報を含む環境変数を含む構成ファイル。 |
appPackage |
アプリ マニフェスト テンプレート ファイルとアプリ アイコン (color.png と outline.png)。 |
appPackage/manifest.json |
ローカルおよびリモートの環境でアプリを実行するためのアプリ マニフェスト。 |
src/app.js |
AI チャット ボットのビジネス ロジックを処理します。 |
m365agents.yml |
これは、エージェント ツールキットのメイン プロジェクト ファイルです。 プロジェクト ファイルには、プロパティと構成とステージの定義という 2 つの主要な要素が定義されています。 |
m365agents.local.yml |
これにより、ローカル実行とデバッグを有効にするアクションで m365agents.yml がオーバーライドされます。 |
m365agents.playground.yml |
これにより、テスト ツールでローカル実行とデバッグを有効にするアクションで m365agents.yml がオーバーライドされます。 |
AI チャット ボット アプリを構築して実行する
AI チャット ボットのオープン AI キーとエンドポイントを作成する
Azure ポータルに移動します。
[リソースの作成] を選択し、open AI Azure検索します。
[Open AI] Azure選択し、[作成] を選択します。
必要な詳細を入力し、[ 次へ] を選択します。
[ インターネットを含むすべてのネットワークがこのリソースにアクセスできます ] を選択し、[ 次へ] を選択します。
必要な詳細を入力し、[ 次へ] を選択します。
[作成] を選択します。
AI チャット ボットのキーとエンドポイントが正常に作成されました。
注:
また、OpenAI API キーを取得して、AI チャット ボットをデバッグすることもできます。
Open AI キーとエンドポイントAzure取得する
[ リソースに移動] を選択します。
左側のウィンドウで [ キーとエンドポイント ] を選択し、[ キー ] と [ エンドポイント] をコピーします。 KEY 1 または KEY 2 をコピーできます。
キーとエンドポイントを保存して、さらに使用します。
左側のウィンドウで [ モデル デプロイ ] を選択し、[ デプロイの管理] を選択します。
[Azure AI Studio を開く] ウィンドウが表示されます。
左側のウィンドウで [ デプロイ ] を選択し、[ + 新しいデプロイの作成] を選択します。
次の詳細を選択します。
[モデルの選択] ドロップダウン リストから gpt-35-turboを選択 します。
注:
AI チャット ボットでは 、gpt-35-turbo モデルのみがサポートされています。
[モデル バージョン] ドロップダウン リストから [0301 (既定値)] を選択します。
「デプロイ名」と入力し、[作成] を選択します。
さらに使用するために、 展開名 をコピーして保存します。
Open AI キーとエンドポイントAzure更新する
Visual Studio Code でプロジェクトを開きます。
[エクスプローラー] で、env>.env.playground.user ファイルに移動します。
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>src>app.js ファイルに移動します。
OpenAIコードにコメントを付け、Azure OpenAIコードのコメントを解除します。azureDefaultDeploymentに Azure Open AI デプロイ名を入力します。// Use OpenAI // apiKey: config.openAIKey, // defaultModel: "gpt-3.5-turbo", azureApiKey: config.azureOpenAIKey, azureDefaultDeployment: "gpt-35-turbo", azureEndpoint: config.azureOpenAIEndpoint,
AI チャット ボット アプリをデバッグして実行する
左側のウィンドウで、[ RUN and DEBUG]\(実行とデバッグ \) (Ctrl + Shift + D) を選択し、ドロップダウン リストから [ エージェント プレイグラウンドでデバッグ ] を選択します。
![[エージェント のプレイグラウンド] で [デバッグ] を選択するオプションを示すスクリーンショット。](../assets/images/toolkit-v2/debug/select-debug-in-test-tool.png)
エージェントプレイグラウンドは、Web ページで AI チャット ボットを開きます。
![[エージェント のプレイグラウンド] で [デバッグ] を選択するオプションを示すスクリーンショット。](../assets/images/toolkit-v2/debug/select-debug-in-test-tool.png#lightbox)
アクティビティ トリガー
アクティビティ トリガーには、次の 2 種類があります。
定義済みのアクティビティ トリガー
Agents Playground には、ボットの機能をテストするための定義済みのアクティビティ トリガーが用意されています。
| カテゴリ | アクティビティ | ハンドラー |
|---|---|---|
| インストール更新アクティビティをトリガーする | ボットをインストールする ボットをアンインストールする |
onInstallationUpdate onInstallationUpdateAdded onInstallationUpdate onInstallationUpdateRemove |
| 会話更新アクティビティをトリガーする | Add user ボットを追加 チャネルの追加 |
onMembersAdded onTeamsMembersAddedEvent onMembersAdded onTeamsMembersAddedEvent onTeamsChannelCreatedEvent |
| ユーザーを削除する ボットを削除する チャネルを削除 チームを削除する |
onMembersRemoved onTeamsMembersRemovedEvent onMembersRemoved onTeamsMembersRemovedEvent onTeamsChannelDeletedEvent onTeamsTeamDeletedEvent |
|
| チャネルの名前を変更する チームの名前を変更する |
onTeamsChannelRenamedEvent onTeamsTeamRenamedEvent |
注:
すべての種類のアクティビティは、すべてのスコープで使用できるわけではありません。 たとえば、個人用チャットやグループ チャットでチャネルを追加または削除することはできません。
定義済みのアクティビティ トリガーは、Agents Playground の [ アクティビティのモック ] メニューで使用できます。
ユーザーの追加アクティビティをモックするには、次の手順に従います。
[エージェントのプレイグラウンド] で、[アクティビティのモック]> [ユーザーの追加] に移動します。
![[モック] アクティビティの下の [ユーザーの追加] オプションを示すスクリーンショット。](../assets/images/toolkit-v2/debug/add-user.png)
アクティビティ ハンドラーをプレビューするダイアログが表示されます。
[ アクティビティの送信] を選択します。
ボットは次の応答を送信します。
カスタム アクティビティ トリガー
カスタム アクティビティを使用して、ボット アプリの要件を満たすためにreactionsAddedなどのアクティビティ トリガーをカスタマイズできます。 Agents Playground は、アクティビティの必要なプロパティを自動的に設定します。 アクティビティの種類を変更し、さらにプロパティを追加することもできます。
[ Mock an Activity>Custom アクティビティ] を選択します。
typeプロパティでアクティビティをカスタマイズするには、messageReactionを追加します。{ "type": "messageReaction", "reactionsAdded": [ { "type": "like" } ], "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47" }[ アクティビティの送信] を選択します。
ボットは応答で
onReactionsAddedハンドラーを送信します。
課題の完了
あなたはこのような出力を思いついたのですか?
おめでとうございます! AI チャット ボット アプリが正常に作成されました。 これで、Agents Playground で AI チャット ボット アプリをデバッグする方法を学習しました。
API ベースのメッセージ拡張機能を構築する
API (API ベース) を使用して構築されたメッセージ拡張機能は、外部サービスと対話できるようにすることで、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 Description (OAD) ドキュメント | API の機能を説明するドキュメント。 詳細については、「 OpenAPI の説明」を参照してください。 |
Teams 開発テナントを設定する
テナント とは、チャット、ファイルの共有、会議の実行を行う Teams の組織のスペースまたはコンテナーのようなものです。 この領域は、カスタム アプリをアップロードしてテストする場所でもあります。 テナントを使って開発する準備ができているかどうかを確認しましょう。
カスタム アプリのアップロード オプションを確認する
アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。 このプロセスは、カスタム アプリのアップロードと呼ばれます。 このオプションを表示するには、Microsoft 365 アカウントにサインインします。
注:
Teams ローカル環境でアプリをプレビューおよびテストするために、カスタム アプリのアップロードが必要です。 有効になっていない場合は、Teams ローカル環境でアプリをプレビューしてテストすることはできません。
既にテナントがあり、管理者アクセス権がありますか? 実際にあるかどうかを確認しましょう。
Teams でカスタム アプリをアップロードできるかどうかを確認します。
Teams クライアントで、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
[カスタム アプリのアップロード] オプションを探します。 オプションが表示された場合は、カスタム アプリのアップロードが有効になります。
注:
カスタム アプリをアップロードするオプションが見つからない場合は、Teams 管理者に問い合わせてください。
無料の Teams 開発者テナントを作成する (省略可能)
Teams 開発者アカウントをお持ちでない場合は、無料で取得できます。 Microsoft 365 開発者プログラムに参加します。
Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[E5 サブスクリプションの設定] を選択します。
管理者アカウントを設定します。 完了すると、次の画面が表示されます。
設定した管理者アカウントを使用して 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、および (swagger.io) コンストラクトはサポートされていません。
要求の配列の構築はサポートされていませんが、JSON 要求本文内の入れ子になったオブジェクトはサポートされています。
要求本文が存在する場合は、さまざまな API との互換性を確保するために、application/Json にする必要があります。
servers.urlプロパティの HTTPS プロトコル サーバー URL を定義します。1 つのパラメーター検索のみがサポートされています。
既定値のない必須パラメーターは 1 つだけ許可されます。
POST メソッドと GET HTTP メソッドのみがサポートされています。
OpenAPI Description ドキュメントには、
operationIdが必要です。操作では、既定値のないヘッダー パラメーターまたは Cookie パラメーターを必要としないでください。
コマンドには、パラメーターを 1 つだけ指定する必要があります。
OpenAPI 説明ドキュメントにリモート参照がないことを確認します。
既定値の必須パラメーターは省略可能と見なされます。
このチュートリアルの例として、次の OpenAPI Description を使用しました。
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 説明ドキュメントが有効かどうかを検証できます。 確認するには、次の手順に従います。
Swagger または OpenAPI バリデーターに移動し、OpenAPI 説明ドキュメントを検証します。
OpenAPI 説明ドキュメントを保存します。
Swagger エディターに移動します。
左側のウィンドウで、エディターで OpenAPI の説明を貼り付けます。
右側のウィンドウで [GET] を選択 します。
[ 試してみる] を選択します。
検索パラメーターの値を Tool として入力して、音楽を作成します。
[ 実行] を選択します。 swagger エディターには、製品の一覧を含む応答が表示されます。
[サーバーの応答>Response Body] に移動します。
[
products] で、一覧から最初の製品をコピーし、後で参照するために保存します。
応答レンダリング テンプレートを作成する
OpenAPI Description ドキュメントでは、GET 要求または POST 要求に応答するために、アプリの応答レンダリング テンプレートが必要です。 応答レンダリング テンプレートは、アダプティブ カード テンプレート、プレビュー カード テンプレート、およびメタデータで構成されます。
アダプティブ カード テンプレート
アダプティブ カード テンプレートを作成するには、次の手順に従います。
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" ][ メッセージの送信] を選択します。
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" } ] }アダプティブ カードによって生成されたがサンプル データにバインドされているかどうかを確認するには、次の手順に従います。
アダプティブ カード Designerに移動します。
[ホスト アプリの選択] に移動し、ドロップダウンから [Microsoft Teams] を選択します。
カード ペイロード エディターに移動し、アダプティブ カード テンプレート コードを貼り付けます。
サンプル データ エディターに移動し、先ほど保存した GET API 応答を貼り付けます。
[ プレビュー モード] を選択します。 アダプティブ カード デザイナーは、応答をテンプレートにバインドするデータを含むアダプティブ カードを表示します。
プレビュー カード テンプレートを作成する
プレビュー カード テンプレートには、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でホストされているスキーマに準拠している必要があります。
応答レンダリング テンプレートを作成するには、次の手順に従います。
JSON ファイルを作成し、次のコードをファイルに追加します。
{ "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json", "version": "1.0", "jsonPath": "", "responseLayout": "", "responseCardTemplate": { }, "previewCardTemplate": { } }応答レンダリング テンプレートのプロパティを次のように更新します。
# プロパティ名 値 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は、メッセージ拡張機能のポップアップで結果のプレビューを表示するためにテンプレートが使用されるプレビューカードです。応答レンダリング テンプレートは、OpenAPI Description ドキュメントを保存したのと同じフォルダーに保存します。
次のコードは、応答レンダリング テンプレートの例です。
応答レンダリング テンプレート
{
"$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 アプリ マニフェストを作成する
マニフェストを作成するには、次の手順に従います。
新しい JSON ファイルを作成します。 アプリ マニフェストは、アプリ マニフェスト スキーマで定義されているスキーマの 1.20 バージョンに準拠している必要があります。
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": [] }アプリ マニフェストのプロパティを次のように更新します。
-
<<YOUR-MICROSOFT-APP-ID>>をボットの Microsoft アプリ ID に置き換えます。 -
composeExtensionTypeの値をapiBasedに更新します。 -
apiSpecificationFileの値を OpenAPI Description ファイルのパスに更新します。 -
commands.idの値をsearchToolsに更新します。 -
commands.titleの値をSearch for AI Toolsに更新します。 -
commands.descriptionの値をSearch for AI Toolsに更新します。 -
parameters.nameの値をsearchに更新します。 パラメーターがない場合、値はクエリ パラメーターであるか、要求本文スキーマでプロパティを参照している場合はproperties.nameする必要があります。 - 応答レンダリング テンプレート ファイルのパスに
apiResponseRenderingTemplateFileを更新します。 -
validDomainsの値を、OpenAPI Description ファイルで定義されているservice URLエンドポイントに更新します。
-
OpenAPI 説明ドキュメントと応答レンダリング テンプレートを保存したのと同じフォルダーに Teams アプリ マニフェストを保存します。
カラーイメージとアウトライン画像が必要です。 これらのイメージはフォルダーに含め、Teams アプリ マニフェストで参照する必要があります。
フォルダーの内容を圧縮します。 zip ファイルには、次のファイルが含まれている必要があります。
- OpenAPI 説明ドキュメント
- 応答レンダリング テンプレート
- アプリ マニフェスト
- カラー アイコン
- アウトライン アイコン
カスタム アプリを Teams にアップロードする
Teams テスト環境にサインインして、Teams でアプリをテストします。 Teams でカスタム アプリをアップロードするには、次の手順に従います。
[Microsoft Teams] に移動し、テスト テナントの資格情報を使用してサインインします。
[アプリ>アプリの管理>アプリのアップロード] に移動します。
[ カスタマイズされたアプリのアップロード] を選択します。
作成した zip ファイルを選択し、[ 開く] を選択します。
[追加] を選択します。
![[追加] オプションが強調表示されているメッセージ拡張機能アプリのスクリーンショット。](../assets/images/copilot/api-me-sbs-add-app-teams.png)
[開く]を選択します。
![[開く] オプションが強調表示されているメッセージ拡張機能アプリのスクリーンショット。](../assets/images/copilot/api-me-open.png)
チャットに移動し、メッセージ作成領域から [ + ] を選択し、アプリを検索します。
アプリを選択し、検索クエリを作成します。
アプリは、チャット ウィンドウでアダプティブ カードで応答します。
[送信] を選びます。
おめでとうございます! 達成しました! OpenAPI Description ドキュメントを使用して API ベースのメッセージ拡張機能を作成する方法について学習しました。
SSO 認証を使用してボットを構築する
Microsoft Teamsの会話型ボットは、顧客サービスなど、ユーザーによって開始された繰り返し自動化されたタスクを実行します。 ユーザーは、シングル サインオン (SSO) 認証なしで複数回サインインする必要があります。 SSO 認証方法では、ユーザーはボットに複数回サインインする必要はありません。
チュートリアル: SSO 認証を使用してボットを構築する
ボットは、関係する会話に応じて動作が異なります。
- チャネルおよびグループ チャット会話のボットでは、ユーザーがボットを @mention する必要があります。
- 1 対 1 の会話の場合、ボットを @mention する必要はありません。 ユーザーによって送信されたすべてのメッセージは、ボットにルーティングされます。
このステップ バイ ステップ ガイドは、SSO 認証を使用してボットを構築するのに役立ちます。 次の出力が表示されます。
ボットを構築するための前提条件
次のツールをインストールし、開発環境を設定していることを確認します。
| インストール | 使用するには... |
|---|---|
| Microsoft Teams | Microsoft Teams、チャット、会議、通話のアプリを通じて作業するすべてのユーザーと 1 か所で共同作業を行うことができます。 |
| Visual Studio 2022 | Visual Studio 2022 でエンタープライズ バージョンをインストールし、ASP.NET および Web 開発ワークロードをインストールできます。 最新バージョンを使用します。 |
| Microsoft 365 開発者アカウント | アプリをインストールするための適切なアクセス許可を持つ Teams アカウントにアクセスします。 |
| 開発トンネル | Teams アプリの機能 (会話型ボット、メッセージ拡張機能、受信 Webhook) には、受信接続が必要です。 トンネルは、開発システムを Teams に接続します。 開発トンネルは、localhost をインターネットに安全に開き、アクセス権を持つユーザーを制御するための強力なツールです。 開発トンネルは、Visual Studio 2022 バージョン 17.7.0 以降で使用できます。 または ngrok をトンネルとして使用して、開発システムを Teams に接続することもできます。 タブのみを含むアプリには必要ありません。 このパッケージはプロジェクト ディレクトリ内にインストールされます (npm devDependencies を使用)。 |
注:
ngrok をダウンロードした後、サインアップし、 authtoken をインストールします。
Teams 開発テナントを設定する
テナントは、Teams でorganizationのチャット、ファイルの共有、会議の実行を行うスペースやコンテナーのようなものです。 カスタム アプリをアップロードしてテストすることもできます。
カスタム アプリのアップロード オプションを確認する
アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。 このプロセスは、カスタム アプリのアップロードと呼ばれます。 このオプションを表示するには、Microsoft 365 アカウントにサインインします。
注:
Teams ローカル環境でアプリをプレビューおよびテストするために、カスタム アプリのアップロードが必要です。 アプリのアップロードを有効にして、Teams でアプリをローカルでプレビューしてテストします。
既にテナントがあり、管理者アクセス権がありますか? 実際にあるかどうかを確認しましょう。
Teams でカスタム アップロード アプリを確認するには:
Teams クライアントで、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します
[ カスタム アプリのアップロード] オプションを探します。 オプションが表示された場合は、カスタム アプリのアップロードが有効になります。
注:
カスタム アプリをアップロードするオプションがない場合は、Teams 管理者に問い合わせてください。
無料の Teams 開発者テナントを作成する
Teams 開発者アカウントをお持ちでない場合は、無料で入手できます。 Microsoft 365 開発者プログラムに参加します。
Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[ セットアップ E5 サブスクリプション] を選択します。
管理者アカウントを設定します。 完了すると、次の画面が表示されます。
設定した新しい管理者アカウントを使用して Teams にサインインします。 Teams に [カスタム アプリのアップロード] オプションがあることを確認します。
ローカル環境を設定する
リポジトリを複製するには、次の手順に従います。
[ コード] を選択します。
ドロップダウン メニューから、[ GitHub Desktop で開く] を選択します。
[ 複製] を選択します。
アプリMicrosoft Entra登録する
次の手順は、Azure portalでボットを作成して登録するのに役立ちます。
- Azure アプリを作成して登録します。
- クライアント シークレットを作成して、ボットの SSO 認証を有効にします。
- Teams チャネルを追加してボットをデプロイします。
- 開発トンネル (推奨) または ngrok を使用して、Web サーバーのエンドポイントへのトンネルを作成します。
- 作成した開発トンネルにメッセージング エンドポイントを追加します。
アプリの登録を追加する
Azure ポータルに移動します。
[アプリの登録] を選択します。
![[アプリの登録] を選択するAzure サービスを示すスクリーンショット。](../assets/images/include-files/azure-app-registration.png)
[ + 新規登録] を選択します。
![Microsoft Entra 管理センターの [新しい登録] ページを示すスクリーンショット。](../assets/images/include-files/new-registration.png)
アプリの名前を入力します。
必要に応じて、テナント オプションを選択します。
[登録] を選択します。
アプリはMicrosoft Entra IDに登録されています。 アプリの概要ページが表示されます。
注:
さらに使用するために 、アプリケーション (クライアント) ID と ディレクトリ (テナント) ID からアプリ ID を 保存します。
トンネルを作成する
トンネルを作成するには、次の 2 つの方法のいずれかに従います。
Visual Studio を開きます。
[ 新しいプロジェクトの作成] を選択します。
検索ボックスに「ASP.NET」 と入力します。 検索結果から [ASP.NET Core Web アプリ] を選択します。
[次へ] を選択します。
「プロジェクト名」と入力し、[次へ] を選択します。
[作成] を選択します。
概要ウィンドウが表示されます。
デバッグ ドロップダウン リストで、[Dev Tunnel (アクティブ トンネルなし)]>[トンネルの作成]を選択します。...
ポップアップ ウィンドウが表示されます。
ポップアップ ウィンドウで次の詳細を更新します。
- アカウント: Microsoft または GitHub アカウントを入力します。
- [名前]: トンネルの名前を入力します。
- トンネルの種類: ドロップダウン リストから [ 一時] を選択します。
- アクセス: ドロップダウン リストから [パブリック] を選択 します。
[OK] を選択します。
開発トンネルが正常に作成されたことを示すポップアップ ウィンドウが表示されます。
[OK] を選択します。
作成したトンネルは、次のようにデバッグ ドロップダウン リストにあります。
F5 キーを押して、デバッグ モードでアプリケーションを実行します。
[セキュリティ警告] ダイアログが表示されたら、[はい] を選択します。
ポップアップ ウィンドウが表示されます。
[続行] を選択します。
開発トンネルのホーム ページが新しいブラウザー ウィンドウで開き、開発トンネルがアクティブになりました。
Visual Studio に移動し、[ 表示] > [出力] を選択します。
[出力コンソール] ドロップダウン メニューで、[Dev Tunnels]\(開発トンネル\) を選択します。
出力コンソールには、開発トンネル URL が表示されます。
Web 認証を追加する
左側のウィンドウの [ 管理] で、[ 認証] を選択します。
[プラットフォームの追加>Web] を選択します。
完全修飾ドメイン名に
auth-endを追加して、アプリのリダイレクト URI を入力します。 たとえば、https://your-devtunnel-domain/auth-endおよびhttps://your-ngrok-domain/auth-endが禁止となります。[ 暗黙的な許可とハイブリッド フロー] で、[ アクセス トークン と ID トークン ] チェック ボックスをオンにします。
[構成] を選択します。
[ Web] で、[ URI の追加] を選択します。
https://token.botframework.com/.auth/web/redirectを入力します。[保存] を選択します。
クライアント シークレットを作成する
注:
エラーが発生した場合 、クライアント シークレットはテナント全体のポリシーによってブロックされます。詳細については、テナント管理者に問い合わせてください。代わりに証明書を作成できます。 詳しい手順については、アプリ登録用の証明書の作成に関するページを参照してください。
左側のウィンドウの [ 管理] で、[ 証明書 & シークレット] を選択します。
[ クライアント シークレット] で、[ + 新しいクライアント シークレット] を選択します。
[ クライアント シークレットの追加] ウィンドウが表示されます。
「説明」と入力します。
[追加] を選択します。
[ 値] で、[ クリップボードにコピー ] を選択して、クライアント シークレットの値を保存して、さらに使用します。
API アクセス許可を追加する
左側のウィンドウで、[ API アクセス許可] を選択します。
[ + アクセス許可の追加] を選択します。
![[アクセス許可の追加] を選択するオプションを示すスクリーンショット。](../assets/images/teams-file-upload-bot/add-api-permission.png)
[Microsoft Graph] を選択します。
[委任されたアクセス許可] を選択します。
[ User>User.Read] を選択します。
[アクセス許可の追加] を選択します。
注:
- アプリに IT 管理者の同意が付与されていない場合、ユーザーは初めてアプリを使用する際に同意を提供する必要があります。
- ユーザーは、Microsoft Entra アプリが別のテナントに登録されている場合にのみ、API のアクセス許可に同意する必要があります。
アプリケーション ID URI を追加する
左側のウィンドウの [ 管理] で、[ API の公開] を選択します。
[アプリケーション ID URI] の横にある [追加] を選択します。
アプリケーション ID URI を
api://botid-{AppID}形式で更新し、[保存] を選択します。
スコープを追加する
左側のウィンドウの [ 管理] で、[ API の公開] を選択します。
[ + スコープの追加] を選択します。
![[スコープの追加] の選択を示すスクリーンショット。](../assets/images/include-files/select-add-scope.png)
スコープ名として「access_as_user」と入力します。
[ 同意できるユーザー] で、[ 管理者とユーザー] を選択します。
残りのフィールドの値を次のように更新します。
「Teams は同意の表示名としてユーザーのプロファイル管理アクセスできます」と入力します。
「Teams が同意の説明として現在のユーザーとしてアプリの Web API を呼び出管理許可する」と入力します。
「Teams」と入力すると、ユーザー プロファイルにアクセスし、ユーザーの代わりにユーザーの同意表示名として要求を行うことができます。
ユーザーの同意の説明と同じ権限を持つこのアプリの API を呼び出すには、「Teams を有効にする」と入力します。
[状態] が [有効] に設定されていることを確認してください。
[スコープの追加] を選択します。
次の図は、フィールドと値を示しています。
![[スコープの追加] フィールドに入力された値を示すスクリーンショット。](../assets/images/include-files/set-add-scope.png)
注:
スコープ名は、最後に追加
/access_as_userアプリケーション ID URI と一致する必要があります。![[スコープ] の詳細を示すスクリーンショット。](../assets/images/include-files/add-scope.png)
クライアント アプリケーションを追加する
左側のウィンドウの [ 管理] で、[ API の公開] を選択します。
[ 承認されたクライアント アプリケーション] で、アプリの Web アプリケーションに対して承認するアプリケーションを特定します。
[ + クライアント アプリケーションの追加] を選択します。
![[クライアント アプリケーションの選択] オプションを示すスクリーンショット。](../assets/images/include-files/add-client-application.png)
Teams モバイルまたはデスクトップと Teams Web アプリケーションを追加します。
Teams モバイルまたはデスクトップの場合:
1fec8e78-bce4-4aaf-ab1b-5451cc387264としてクライアント ID を入力します。
Teams Web の場合:
5e3ce6c0-2b1f-4285-8d4b-75ee78787346としてクライアント ID を入力します。
[ 承認されたスコープ ] チェック ボックスをオンにします。
[アプリケーションの追加] を選択します。
次の図は、 クライアント ID を表示します。
マニフェストを更新する
左側のウィンドウで、[マニフェスト] を選択 します。
requestedAccessTokenVersionの値を2に設定し、[保存] を選択します。
ボットを作成する
Azure ボット リソースを作成する
注:
Teams でボットを既にテストしている場合は、このアプリと Teams からサインアウトします。 この変更を確認するには、もう一度サインインします。
[ホーム] に移動します。
[ + リソースの作成] を選択します。
検索ボックスに「Azure Bot」と入力します。
Enter キーを押します。
[Azure Bot] を選択します。
[作成] を選択します。
ボット ハンドルにボット名を入力します。
ドロップダウン リストから [サブスクリプション] を選択します。
ドロップダウン リストから [リソース グループ] を選択します。
既存のリソース グループがない場合は、新しいリソース グループを作成できます。 新しいリソース グループを作成するには、次の手順に従います。
- [ 新規作成] を選択します。
- リソース名を入力し、[ OK] を選択します。
- [ 新しいリソース グループの場所 ] ドロップダウン リストから場所を選択します。
[ 価格] で、[ プランの変更] を選択します。
[ FO Free>Select] を選択します。
[Microsoft アプリ ID] で、[マルチテナントとしてのアプリの種類] を選択します。
[ 作成の種類] で、[ 既存のアプリの登録を使用する] を選択します。
アプリ ID を入力します。
注:
同じ Microsoft アプリ ID を持つ複数のボットを作成することはできません。
[確認 + 作成] を選びます。
検証に合格したら、[ 作成] を選択します。
ボットのプロビジョニングには数分かかります。
[リソースに移動] を選びます。
![Azure portalの [リソースに移動] オプションを示すスクリーンショット。](../assets/images/include-files/resource-deployment.png)
Azure ボットが正常に作成されました。
Teams チャネルを追加する
左側のウィンドウで、[チャネル] を選択 します。
[ 使用可能なチャネル] で、[ Microsoft Teams] を選択します。
チェックボックスをオンにして 、利用規約に同意します。
[ 同意する] を選択します。
[適用] を選択します。
メッセージング エンドポイントを追加する
メッセージング エンドポイントを追加するには、次のいずれかの方法を使用します。
出力コンソールの開発トンネル URL をメッセージング エンドポイントとして使用します。
左側のウィンドウの [ 設定] で、[ 構成] を選択します。
メッセージング エンドポイントを
https://your-devtunnel-domain/api/messages形式で更新します。
[適用] を選択します。
ボット サービスでボットを正常に設定Azure。
注:
Application Insights Instrumentation キーにエラーが表示される場合は、アプリ ID で更新します。
OAuth 接続設定を追加する
左側のウィンドウで、[構成] を選択 します。
[OAuth 接続設定の追加] を選択します。
[ 新しい接続設定] で、次の詳細を更新します。
- [名前]: 新しい接続設定の名前を入力します。 名前は、ボット サービス コードの設定で使用できます。
- サービス プロバイダー: ドロップダウン リストから[Active Directory v2 Azure選択します。
- クライアント ID: Microsoft アプリ ID を更新します。
- クライアント シークレット: クライアント シークレットの値を更新 します。
- トークン交換 URL: アプリケーション ID URI を更新します。
- テナント ID: 「Common」と入力します。
- スコープ: User.Read と入力します。
[保存] を選択します。
アプリ設定とマニフェスト ファイルを設定する
複製されたリポジトリ内の appsettings.json ファイルに移動します。
appsettings.json ファイルを開き、次の情報を更新します。
-
"MicrosoftAppId"をボットの Microsoft アプリ ID に設定します。 -
"MicrosoftAppPassword"をボットのクライアント シークレット ID 値に設定します。 -
ConnectionNameを OAuth 接続名として設定します。 -
"MicrosoftAppType"を MultiTenant に設定します。 -
"MicrosoftAppTenantId"を common に設定します。
-
複製されたリポジトリ内の manifest.json ファイルに移動します。
manifest.json ファイルを開き、次の変更を更新します。
-
"{TODO: MicrosoftAppId}"のすべての出現箇所を Microsoft アプリ ID に置き換えます。 -
"<<domain-name>>"を ngrok ドメインまたは開発トンネル ドメインに設定します。
-
サービスをビルドして実行する
Visual Studio を開きます。
[ファイル>Open>Project/Solution...] に移動します。
![Visual Studio ファイル メニューのスクリーンショット。[ファイル] メニューの [開く] というタイトルのメニュー エントリと、[開く] の [プロジェクト/ソリューション] が赤で強調表示されています。](../assets/images/bots/project-solution_1.png)
bot-conversation-sso-quickstart>csharp_dotnetcore フォルダーから、ファイルBotConversationSsoQuickstart.sln選択します。
F5 キーを押してプロジェクトを実行します。
[セキュリティ警告] ダイアログが表示されたら、[はい] を選択します。
![[はい] オプションが赤で強調表示されている [セキュリティ警告] のスクリーンショット。](../assets/images/bots/certificate.png)
Web ページが開き、 ボットの準備ができました! というメッセージが表示されます。
注:
このページは、localhost URL に移動した場合にのみ表示されます。
トラブルシューティング
パッケージを見つけられないエラーが発生した場合は、次の手順に従います。
- [ツール>NuGet パッケージ マネージャー>Package Manager の設定] に移動します。
- 表示された [オプション] ウィンドウで、[NuGet パッケージ マネージャー]>[パッケージ ソース] を選択します。
- [追加] を選択します。
-
[名前] に「
nuget.org」と入力し、[ソース] に「https://api.nuget.org/v3/index.json」と入力します。 - [ 更新] を選択し 、[OK] を選択します。
- プロジェクトをリビルドします。
Teams でボットをアップロードする
複製したリポジトリで、Microsoft-Teams-Samples>samples>bot-conversation-sso-quickstart>csharp_dotnetcore>TeamsApp>appPackage に移動します。
appPackage フォルダーに存在する次のファイルを含む .zip ファイルを作成します。
- manifest.json
- outline.png
- color.png
[Microsoft Teams] に移動します。
- Teams クライアントで、[アプリ] を選択 します。
- [アプリの管理] を選択します。
- [ アプリのアップロード] を選択します。
- [カスタム アプリのアップロード] オプションを探します。
![Teams アプリのスクリーンショット。[アプリの管理] アイコンが表示され、[カスタム アプリのアップロード] オプションの選択が赤で強調表示されています。](../assets/images/bots/custom-app-upload.png)
[ 開く ] を選択して、 マニフェスト フォルダーに作成した .zip ファイルをアップロードします。
![赤で強調表示された Teams Bot zip ファイルをアップロードするための [開く] オプションを含むマニフェスト フォルダーのスクリーンショット。](../assets/images/bots/app-open.png)
[ 追加] を選択して、ボットをチャットに追加します。
![[追加] オプションが強調表示されている会話ボットのスクリーンショット。](../assets/images/bots/conversation-bot-add.png)
[開く]を選択します。
![[開く] オプションが強調表示されている [スコープの選択] ダイアログのスクリーンショット。](../assets/images/bots/conversation-bot-open.png)
ボットを操作する場合は、メッセージを送信します。 ボットは SSO トークンを交換し、代わりにGraph APIを呼び出します。 サインアウトするメッセージを送信しない限り、サインインしたままになります。
ボットにメッセージを送信します。 会話ボットは初めて同意を求めます。
デスクトップの場合: [ 続行] を選択して、ボットにアクセスするためのアクセス許可を Teams クライアントに付与します。
![[続行] オプションが赤で強調表示されている追加のアクセス許可のスクリーンショット。](../assets/images/bots/sbsdesktop-mobile-consent-request1.png)
注:
これで、ボット アプリで SSO を構成したので、同意する必要があるのは唯一の時間です。
モバイルの場合: [ 同意する] を選択します。
注:
これで、モバイルでボット アプリに対する SSO を構成したので、同意する必要があるのは唯一の時間です。
このようなものを思いついたのですか?
SSO 認証を使用したボットの構築を開始するためのチュートリアルを完了しました。
C シャープを使用して最初のタブ アプリをビルドする
タブ機能Microsoft Teams使用して最初の Teams アプリをビルドして、アプリ開発を開始します。
このチュートリアルでは以下を学習します。
- 新しいプロジェクトを設定する方法。
- C# と Microsoft Visual Studio 2022 を使用してタブ機能を使用してアプリを構築する方法。
チュートリアル: C を使用して最初のタブ アプリをビルドする#
このステップ バイ ステップ ガイドは、Microsoft 365 Agents Toolkit (以前は Teams Toolkit と呼ばれる) を使用してタブを作成するのに役立ちます。 このガイドを完了すると、次の出力が表示されます。
アプリをビルドするための前提条件
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 インストーラーを開いた後、ポップアップ ワークロード ウィンドウで。
[ ASP.NET と Web 開発] を選択します。
[ インストールの詳細>オプション] で、[ Microsoft Teams開発ツール] を選択します。
[インストール] を選択します。
[ 起動] を選択します。 Visual Studio 2022 アプリ ウィンドウが表示されます。
[拡張機能>管理拡張機能] に移動します。
![[拡張機能] の選択を示すスクリーンショット。](../assets/images/sbs-csharp/select-extension.png)
[拡張機能の管理] ウィンドウが表示されます。
![[拡張機能の管理] を示すスクリーンショット。](../assets/images/sbs-csharp/manage-ext.png)
左側のウィンドウで、[ インストール済み] を選択します。 Microsoft 365 Agents Toolkit 拡張機能は使用できません。
![[拡張機能の管理] を示すスクリーンショット。](../assets/images/sbs-csharp/manage-extension.png#lightbox)
Teams 開発テナントを設定する
テナントは、Teams のorganizationのスペースまたはコンテナーのようなもので、チャット、ファイルの共有、会議の実行を行います。 この領域は、カスタム アプリをアップロードしてテストする場所でもあります。 テナントを使って開発する準備ができているかどうかを確認しましょう。
カスタム アプリのアップロード オプションを確認する
アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。 このプロセスは、カスタム アプリのアップロードと呼ばれます。 このオプションを表示するには、Microsoft 365 アカウントにサインインします。
注:
Teams ローカル環境でアプリをプレビューおよびテストするために、カスタム アプリのアップロードが必要です。 有効になっていない場合、Teams ローカル環境でアプリをプレビューしてテストすることはできません。
テナントと管理者アクセス権は既にありますか? 行う場合は、チェックしましょう。
Teams でカスタム アプリをアップロードできるかどうかを確認します。
Microsoft Teams開き、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
[カスタム アプリのアップロード] オプションを探します。 オプションが表示された場合は、カスタム アプリのアップロードが有効になります。
注:
カスタム アプリをアップロードするオプションが見つからない場合は、Teams 管理者に問い合わせてください。
無料の Teams 開発者テナントを作成する (省略可能)
Teams アカウントをお持ちでない場合は、無料で入手できます。 Microsoft 365 開発者プログラムに参加します。
Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[ セットアップ E5 サブスクリプション] を選択します。
管理者アカウントを設定します。 完了すると、次の画面が表示されます。
セットアップした管理者アカウントを使用して Teams にサインインします。 Teams で [カスタム アプリのアップロード] オプションがあることを確認します。
無料の Azure アカウントを取得します。
アプリをホストするか、Azureでリソースにアクセスする場合は、Azure サブスクリプションが必要です。 開始する前に無料でアカウントを作成してください。
これで、アカウントを設定するためのツールがすべて揃いました。 次に、開発環境を設定し、ビルドを開始しましょう。 最初に作成するアプリを選択します。
C シャープを使用してタブ アプリのプロジェクト ワークスペースを作成する
最初のアプリを作成して、Microsoft Teams アプリ開発を開始します。 このアプリは、タブ機能を使用します。 前提条件を満たしている場合は開始します。
次の手順は、Visual Studio でタブ アプリのプロジェクト ワークスペースを作成するのに役立ちます。
Visual Studio を開きます。
[ 新しいプロジェクト] を選択します。
![Visual Studio の [新しいプロジェクト] の選択を示すスクリーンショット。](../assets/images/sbs-csharp/visual-studio-welcome.png)
検索ボックスに「Teams」と入力 します。
[Microsoft 365 Agents>Next] を選択します。
次の詳細を入力して、新しいプロジェクトを構成します。
[プロジェクト名] に必要な プロジェクト名を入力します。
プロジェクト ファイルとフォルダーを保存するために必要な場所を選択します。
[作成] を選択します。
[Tab>Create] を選択します。
Teams タブ アプリは数秒で作成されます。
C sharp を使用して最初のタブ アプリをビルドして実行する
Agents Toolkit を使用してプロジェクト ワークスペースを設定したら、タブ アプリをビルドします。
Microsoft 365 アカウントにサインインする
Microsoft 365 アカウントを使用して Teams にサインインします。 Microsoft 365 開発者プログラム テナントを使用している場合は、Microsoft 365 アカウントは、登録中に設定した管理者アカウントです。
ソリューション エクスプローラーの [ソリューション MyTeamsApp] で、MyTeamsApp を右クリックします。
[ Microsoft 365 Agents Toolkit>Microsoft 365 アカウントを選択します。
[Microsoft 365 アカウント>Continue] を選択します。
Visual Studio でアプリをローカルでビルドして実行する
アプリをローカルに構築して実行するには、以下のようにします。
[デバッグ>デバッグの開始] を選択するか、[F5] を選択します。
Visual Studio はデバッグ プロセスを開始し、ブラウザーで Teams Web クライアントを開きます。 メッセージが表示されたら、Microsoft 365 アカウントを使用してサインインします。
[追加] を選択します。
[ 開く ] を選択して、個人用スコープでアプリを開きます。
または、検索して必要なスコープを選択するか、一覧からチャネルまたはチャットを選択し、ダイアログ内を移動して [移動] を選択することもできます。
これで、最初のタブ アプリが Teams で実行されます。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを正常に実行するには、Teams アカウントでカスタム アプリのアップロードが有効になっていることを確認します。 カスタム アプリのアップロードの詳細については、「 前提条件 」セクションを参照してください。
C# を使用してタブ アプリが正常に作成されました。 Agents Toolkit によって、アプリのディレクトリ構造に必要なスキャフォールディングが追加されました。 これでチュートリアルは完了です。
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
Platform Docs