会議トークンを生成する

会議トークン アプリは、会議参加者がトークンを要求してトークンを生成できるようにすることで、Teams での会議エクスペリエンスを向上させることができます。 アプリは、各参加者が会議で対話する機会が等しくなるように、トークンを順番に生成します。 たとえば、アプリは Q&A セッションや会議 (スクラム会議など) で役立ちます。

会議トークン ジェネレーターの主な機能

• 会議で使用されている現在のトークンを表示します。
• トークン番号に基づいて並べ替えられたユーザー リストを表示します。
• 要求に応じてユーザーのトークンを生成します。
• 現在のユーザーのトークン番号を表示します。
• 開催者が現在の会議トークンをスキップできるようにします。

ユーザー操作のさまざまな方法

• トークン: ユーザーのトークンを要求します。

• 完了: ユーザーのトークン生成を確認します。

• スキップ: 現在のユーザーをスキップし、トークンの次のユーザーに移動します。

  注:

  [スキップ] は、会議の開催者のみが使用できます。

このステップ バイ ステップ ガイドは、すべての参加者が会議で対話するための会議トークンを生成するのに役立ちます。 次の出力が表示されます。

前提条件

• 残り 19 分

次のツールをインストールし、開発環境を設定します。

次のテクノロジに関する実用的な知識が必要です。

ローカル環境を設定する

• 残り 18 分

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

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

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

   

4. [ 複製] を選択します。

アプリMicrosoft Entra登録する

• 残り 17 分

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

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

アプリの登録を追加する

1. Azure ポータルに移動します。

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

   

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

   

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

5. 任意の組織ディレクトリ (Any Microsoft Entra ID tenant - Multitenant) の [アカウント] を選択します。

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

   

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

   

   注:

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

トンネルをCreateする

ngrok http --host-header=localhost 3978

Web 認証を追加する

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

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

   

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

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

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

   

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

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

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

   

クライアント シークレットを作成する

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

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

   

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

3. 「説明」と入力します。

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

   

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

   

API アクセス許可の追加

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

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

   

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

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

5. 次のアクセス許可を選択します。

   • OpenId アクセス許可>電子メール、 offline_access、 openid、 プロファイル。
   • ユーザー>User.Read。

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

   

   注:

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

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

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

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

   

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

   

   次の図は、ドメイン名を示しています。

   

スコープを追加する

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

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

   

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

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

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

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

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

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

   • ユーザーの同意の説明と同じ権限を持つこのアプリの API を呼び出すには、「Teams を有効にする」と入力します。

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

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

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

   

   注:

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

   

クライアント アプリケーションを追加する

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

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

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

   

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

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

      

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

      

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

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

   

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

   

マニフェストを更新する

1. 左側のウィンドウで、[マニフェスト] を選択 します。

2. の値 accessTokenAcceptedVersion を に 2 設定し、[保存] を選択 します。

   

ボットをCreateする

• 残り 12 分

Azure ボット リソースをCreateする

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

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

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

4. Enter キーを押します。

5. [ Azure Bot] を選択します。

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

   

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

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

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

   

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

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

   

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

    

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

    

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

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

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

    注:

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

15. [確認 + 作成] を選びます。

    

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

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

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

    

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

    

Teams チャネルを追加する

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

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

   

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

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

   

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

   

メッセージング エンドポイントを追加するには

アプリ設定を設定する

• 残り 7 分

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

   

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

   • ボットの Microsoft アプリ ID に設定"MicrosoftAppId"します。
   • ボットのクライアント シークレット値に設定"MicrosoftAppPassword"します。
   • アプリが使用されているテナントのテナント ID に設定 "AzureAd"."TenantId" します。

   注:

   このサンプルは、現在のテナントでのみ機能します。

   • ボットの Microsoft アプリ ID に設定"AzureAd"."ApplicationId"します。
   • コンテンツ バブルの iframe URL に設定 "ContentBubbleUrl" します (https://[WebAppDomain]/contentBubble.html)。

   注:

   WebAppDomain は ngrok ドメインであるため、コンテンツ バブル URL は に https://ae57****.ngrok.io/contentBubble.html似ています。

   

マニフェスト ファイルを設定する

• 残り 6 分

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

   

2. Visual Studio Code でファイルを開manifest.jsonき、次の変更を行います。

   • 最新バージョンに設定 manifestVersion します。
   • を に設定 $schema します https://developer.microsoft.com/json-schemas/teams/v1.11/MicrosoftTeams.schema.json。
   • を に設定 resource します api://[WebAppDomainName]/[MicrosoftAppId]。
   • を にContoso置き換えます[companyName]。
   • 次のセクションを完全修飾ドメイン名に置き換えます。
     • websiteUrl
     • privacyUrl
     • termsOfUseUrl
   • のすべての出現箇所を WebAppDomainName ngrok ドメイン名に置き換えます。
   • のすべての出現箇所を MicrosoftAppId ボットの Microsoft アプリ ID に置き換えます。

   

npm インストールを使用してクライアント アプリをビルドする

• 残り 5 分

1. 複製されたリポジトリの ClientApp フォルダーに移動します。

2. ClientApp フォルダーパスをコピーします。

3. 新しい コマンド プロンプト ウィンドウを開き、現在のディレクトリをコピーした ClientApp パスに変更します。

   

4. コマンド プロンプトで次のコマンドを実行して、パッケージと依存関係をダウンロードします。

   npm install
   

5. コマンド プロンプトで次のコマンドを実行して、アプリを起動します。

   npm start
   

   

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

• 残り 4 分

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

 dotnet run

開発者向けプレビューを有効にする

• 残り 3 分

1. テナントの管理コンソールでアプリのアップロードを有効にします。

   1. 管理者の資格情報で Microsoft 365 管理センターにサインインします。

   2. 左側のウィンドウで、[ すべて表示] を選択します。

   3. [ Teams] を選択します。

      

   4. 左側のウィンドウで、[ Teams アプリ] を選択します。

   5. [ セットアップ ポリシー] を選択します。

      

   6. [ グローバル] を選択します。

      

   7. [カスタム アプリのアップロード]で [オン] の位置を有効にします。

      

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

      テスト テナントでは、カスタム アプリのアップロードを許可できます。

      注:

      カスタム アプリのアップロードがアクティブになるまでに少し時間がかかります。

2. Microsoft Teams に移動します。

3. Teams インターフェイスの右上隅にある [ 設定] を選択します(...)。

4. [情報]>[開発者向けプレビュー] を選択します。

   

5. [ 開発者プレビューに切り替える] を選択します。

   

Teams に会議トークンを追加する

• 残り 2 分

1. 複製したリポジトリで、 csharp > AppManifest に移動します。

2. AppManifest フォルダーに存在する次のファイルを含む .zip ファイルをCreateします。

   • manifest.json
   • outline.png
   • color.png

   

3. 数人の発表者と出席者と共に Teams で会議をCreateします。

4. 会議に参加します。

5. 会議が開始されたら、[アプリ] を選択 します。

6. ポップアップ ウィンドウで、[ アプリの管理] を選択します。

   

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

8. AppManifest フォルダーに作成した .zip ファイルを選択し、[開く] を選択します。

   

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

   

   [ アプリの管理 ] セクションには、アプリケーションの一覧が表示されます。

   

10. Teams 会議に移動します。

11. [ アプリ] アイコンを 選択します。 アプリの選択ページで、アプリが 会議トークン アプリとして表示されます。

    

12. [ 会議トークン アプリ] を選択します。

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

    

    アプリは会議チャットに表示されます。

14. 会議を開始します。

    アイコンが会議コントロール バーに表示されます。

    

    注:

    独自のプロジェクトで作業する場合は、永続的なストレージ メカニズムを使用して、テナントのトークン情報とサービス URL を格納してください。

課題の完了

• 残り 1 分

このようなものを思いついたのですか?

おめでとうございます。

• 100% 完了しました

チュートリアルを完了して、会議トークン ジェネレーター アプリの使用を開始しました。