アダプティブ カードを使用した [ビルド] タブ
アダプティブ カード タブは、Teams でタブを作成する新しい方法です。 IFrame に Web コンテンツを埋め込む代わりに、アダプティブ カードをタブにレンダリングできます。フロント エンドはアダプティブ カードでレンダリングされますが、バックエンドはボットによって供給されます。 ボットは、要求を受け入れ、レンダリングされるアダプティブ カードで適切に応答する役割を担います。
デスクトップ、Web、モバイルでネイティブな関連ユーザー インターフェイス (UI) の構成要素を使用してタブを作成できます。
この記事は、次のことを理解するのに役立ちます。
- アプリ マニフェストに対して行う必要がある変更。
- 呼び出しアクティビティがアダプティブ カードを使用してタブで情報を要求して送信する方法を識別します。
- タスク モジュールワークフローに影響します。
このステップ バイ ステップ ガイドは、デスクトップとモバイルでアダプティブ カードを使用してタブを作成するのに役立ちます。 次の出力が表示されます。

前提条件
次のツールをインストールし、開発環境を設定してください。
- アカウントを持つ Microsoft Teams (ゲスト アカウントではありません)
- Visual Studio Code
- .NET Core SDK バージョン 3.1
- ngrok または Tunnel Relay
- Microsoft 365 開発者アカウント 、またはアプリをインストールするための適切なアクセス許可を持つ Teams アカウントへのアクセス。
Microsoft Azure portalでボット登録を作成する
アダプティブ カード タブでは、チームでタブを作成するために Azure Bot Serviceが必要になります。 Azure でボットを開発してホストするときに、ボットを Azure Bot Serviceに登録します。 次の操作を実行します。
- ngrok を使用して、Web サーバーのエンドポイントへのトンネルを作成します。
- Azure bot リソースを作成して、Azure Bot Serviceにボットを登録します。
- ボットの SSO 認証を有効にするクライアント シークレットを作成します。
- Microsoft Teams チャネルを追加して、ボットを Teams チャネルにデプロイします。
- 作成した ngrok トンネルにメッセージング エンドポイントを追加します。
ngrok を使用して、ローカルで実行されている Web サーバーのパブリックに利用可能な HTTPS エンドポイントへのトンネルを作成します。 ngrok で次のコマンドを実行します。
ngrok http -host-header=rewrite 3978
Azure Bot リソースを作成するには
Azure portalを開きます。
[リソースの作成] を選択します。
検索ボックスで Azure ボット を検索します。
Azure Bot を選択します。
[作成] を選択します。
[ボット ハンドル] フィールドでボット ハンドル名を入力します。
ドロップダウン リストから [サブスクリプション] を選択します。
ドロップダウン リストから [リソース グループ] を選択します。
新しいリソース グループを作成するには、[ 新規作成] を選択し、リソース名を入力 し、[OK] を 選択し、[ 新しいリソース グループの場所 ] ドロップダウン リストから必要な場所を選択します。
Microsoft アプリ ID の マルチテナント として アプリ種類 を選択します。

注意
[ 作成の種類 ] の [Microsoft アプリ ID] セクションでは、新しいボットを作成するために [ 新しい Microsoft アプリ ID の作成] が既に選択されています。 ボットを既に登録している場合は、[ 既存のアプリの登録を使用 する] を選択することもできます。 [既存のアプリ ID] フィールドに Microsoft アプリ ID を 入力し、[ 既存のアプリ パスワード ] フィールドに値を入力します。
[確認 + 作成] を選びます。

検証に合格した場合は、[作成] を選択します。
ボット サービスがプロビジョニングされるまで少し時間がかかります。

[リソースに移動] を選択します。ボットと関連リソースがリソース グループに一覧表示されます。

これで、Azure ボットが作成されます。

クライアント シークレットを作成するには
[設定] で、[構成] を選択します。後で参照できるように、Microsoft アプリ ID (クライアント ID) を保存します。

注意
[ボットの種類] で [MultiTenant] が選択されていることを確認します。
Microsoft アプリ ID の横にある [管理] を選択します。
[クライアント シークレット] セクションで、[新しいクライアント シークレット] を選択します。[クライアント シークレットの追加] ウィンドウが表示されます。

[説明] を入力し、[追加] を選択します。

[値] の列で、[クリップボードにコピー] を選択し、将来参照できるようにクライアント シークレット ID を保存します。

Microsoft Teams チャネルを追加するには
[ホーム] に移動します。

[最近使ったリソース] セクションに一覧表示されているボット開きます。
左側のウィンドウで [チャネル] を選択し、[Teams] を選択 します。
.
サービス利用規約に同意するチェック ボックスをオンにし、[承諾する] を選択します。

[保存] を選択します。
![[Teams] を選択します](assets/images/adaptive-cards/select-teams.png)
メッセージング エンドポイントを追加するには
ホーム ページに移動し、左側のウィンドウの [設定] で [構成] を選択します。
ngrok に移動します。
次の図に示すように、HTTPS URL (https から io) をコピーします。
メッセージング エンドポイント で、ngrok から生成された HTTPS URL を追加し、URL の最後に /api/messages を追加します。

[適用] を選択します。
Azure Bot Serviceでボットを正常に設定したので、ボット サービス接続を設定する必要があります。
ボット サービス接続を設定する
Bot Serviceでユーザーがサインインしてボットにアクセスできるようにするには、ボットの SSO を構成する必要があります。 これを行うには、次の操作を実行します。
- Azure ボット リソースにリダイレクト URI を追加します。
- API エンドポイントを公開します。
- クライアント アプリケーションを承認します。
- ダウンストリーム呼び出しに必要な API アクセス許可を追加します。
- 暗黙的な許可を有効にします。
- マニフェストを更新します。
- Bot Service接続を設定します。
Azure ボット リソースにリダイレクト URI を追加するには
Microsoft アプリ ID の横にある [管理] を選択します。
ボット リソースの左側のウィンドウで [ 認証 ] を選択します。
[プラットフォームの構成] で、[プラットフォームの追加] を選択します。
[Web] を選びます。
「リダイレクト URI」と
https://token.botframework.com/.auth/web/redirect入力し、[構成] を選択 します。
リダイレクト URI が Azure ボット リソースに追加されます。

API エンドポイントを公開するには
左側のウィンドウで [ API の公開 ] を選択します。
アプリケーション ID URI の [設定 ] を選択します。
ngrok URL の代わりに
https://表示および追加api://する アプリケーション ID URL を使用し、アプリ ID URL の先頭に追加します。
[保存] を選択します。
[スコープの追加] を選択します。
[スコープ名] に**「access_as_user**」と入力します。
[ 同意できるユーザー] で、 管理者とユーザー に切り替えます。
ボックスに次の値を入力します。
フィールド 値 管理同意表示名 Teams はユーザーのプロファイルにアクセスできます 管理同意の説明 Teams がアプリの Web API を現在のユーザーとして呼び出すことができます。 ユーザー同意表示名 Teams はユーザー プロファイルにアクセスし、ユーザーに代わって要求を行うことができます ユーザーの同意の説明 Teams が持っているのと同じ権限でこのアプリの API を呼び出すようにします。 [状態] が [有効] に設定されていることを確認してください。

[スコープの追加] を選択します。 スコープ名はアプリケーション ID URI と自動的に一致し、 末尾に /access_as_user が追加されます。
クライアント アプリケーションを承認するには
次の ID を 承認済みクライアント アプリケーション として追加し、 承認されたスコープ のチェック ボックスをオンにし、[ アプリケーションの追加] を選択します。
1fec8e78-bce4-4aaf-ab1b-5451cc387264 (Teams モバイルまたはデスクトップ アプリケーション)
5e3ce6c0-2b1f-4285-8d4b-75ee78787346 (Teams Web アプリケーション)

ダウンストリーム呼び出しに必要な API アクセス許可を追加するには
左側のウィンドウ [API アクセス許可] を選択します。
[アクセス許可を追加] を選択します。 [要求 API のアクセス許可 ] ウィンドウが表示されます。
Microsoft API を選択します。 次に 、Microsoft Graph を選択し、[ 委任されたアクセス許可] を選択します。
アプリに必要なユーザー 委任アクセス許可 をダウンストリーム API (User.Read など) に追加します。

暗黙的な付与を有効にするには
左側のウィンドウで [認証] を選択します。
[アクセス トークン と ID トークン] チェック ボックスをオンにします。

[保存] を選択し、変更内容を保存します。
マニフェストを更新するには
左側のウィンドウで [マニフェスト] を選択します。
構成項目が次に設定されていることを確認します "accessTokenAcceptedVersion": 2。 そうでない場合は、その値を 2 に変更し、[ 保存] を選択します。
注意
Teams でボットを既にテストしている場合は、このアプリをサインアウトして Teams をサインアウトする必要があります。 その後、もう一度サインインして、この変更を確認します。

Bot Service接続を設定するには
ホーム ページに移動し、左側のウィンドウの [設定] で [構成] を選択します。
[OAuth 接続設定の追加] を選択します。
[新しい接続設定] で、次の詳細を入力します。
フィールド 値または説明 名前 新しい接続設定の名前を入力します。 この名前は、ボット サービス コードの設定で使用できます。 Service Provider Azure Active Directory V2 を選択します。 クライアント ID 以前に Microsoft アプリ ID として保存しました。 クライアント シークレット 以前にクライアント シークレット ID の 値 として保存しました。 トークン交換 URL API エンドポイントを公開するときに、以前に取得した アプリケーション ID URL を 使用します。 テナント ID common と入力 します。 Scopes User.Read と入力し、ダウンストリーム API へのアクセス許可を指定するときに必要なすべての スコープ を追加します。
[保存] を選択します。
ボットを構成する
Microsoft Teams で会話型ボットを認証する方法を理解するようにボット サンプルを構成します。
ボット サンプルを構成して実行するには
リポジトリ https://github.com/OfficeDev/Microsoft-Teams-Samples.gitに移動します。
[ コード ] を選択し、ドロップダウンを選択します。
[ ZIP のダウンロード] を選択します。

ダウンロードされたリポジトリのパスを確認してください。
エクスプローラーで、プロジェクトを選択 します。
TabWithAdpativeCardFlow フォルダー>タブ アダプティブ カード> csharp >サンプル> Microsoft-Teams サンプルに 移動します。
Visual Studio Code で appsettings.json ファイルを開きます。
を使用するようにボットの appsettings.json 構成を
MicrosoftAppId``MicrosoftAppPassword更新し、ngrok URI をApplicationBaseUrl.OAuth 接続名を 接続名 として使用します。
注意
ボットの
MicrosoftAppId[構成] ページから取得できます。 以前MicrosoftAppPasswordに保存したクライアント シークレット ID の値です。
[保存] を選択します。
Teams でアプリを構成してアップロードする
ボットをテストする最も包括的な方法は、アプリ パッケージを作成して Teams にアップロードすることです。 このメソッドは、すべてのスコープでボットで使用できる完全な機能をテストする唯一の方法です。 Teams アプリを構成して実行するには、ファイルを manifest.zip アップロードします。
manifest.zip ファイルをアップロードして Teams アプリを実行するには
エクスプローラーで、Microsoft-Teams-Samples > サンプル >タブ アダプティブ カード > csharp > TabWithAdpativeCardFlow > AppPackage に移動してフォルダーを開きます。
Visual Studio Code でファイルを
manifest.json開きます。ファイルで
manifest.json{contentBotId} を 探し、Microsoft アプリ ID を追加して保存します。
エクスプローラーで、AppPackage フォルダーに移動します。
作成
manifest.zipする AppPackage フォルダーの内容を zip にします。注意
その
manifest.zip中に追加のフォルダーを含めてはなりません。 zip フォルダー内には、 マニフェスト JSON ソース ファイル、 色 アイコン、 アウトライン アイコンが含まれている必要があります。Teams に移動します。
アップロード
manifest.zipするには、[ ストア > アプリの管理] >カスタム アプリをアップロード して開きますmanifest.zip。[ 追加] を選択して、チャットにタブを追加します。

このタブを操作するには、サインインします。
タブにメッセージを送信します。

Teams でタブを操作する
タブを使用すると、チャネル内またはチャット内の専用スペース内のサービスやコンテンツにアクセスできます。
タブを使用するには、次の手順に従います。
Teams の左側のウィンドウで省略記号 ●●● を選択し、一覧からアプリを選択します。
アクション コントロールを含むアダプティブ カードを示すタブ。

[ サインイン ] を選択し、アカウントを選択してタブにアクセスします。

ホーム ページで [ タスク モジュールの表示 ] を選択します。

Tab/fetch は、ユーザーがアダプティブ カード タブを開いたときにボットが受け取る最初の呼び出し要求です。ボットが要求を受信すると、タブの続行応答またはタブ認証応答が送信されます。

アダプティブ カード の送信関数 task/submit 要求は、アクションを介して対応するデータを使用してボットにトリガーされます。

[ サインアウト] を選択しない限り、Tab キーを押してサインインし続けます。

もう一度 サインイン するように更新します。

チャレンジを完了する
このようなことを思い付いたのですか?

おめでとうございます。
Bot Framework を使用して Microsoft Teams 用のアダプティブ カードの使用を開始するためのチュートリアルを完了しました。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。