会議トークンを生成する
会議トークン アプリは、会議参加者がトークンを要求し、トークンを生成できるようにすることで、Teamsでの会議エクスペリエンスを向上させることができます。 アプリは、各参加者が会議で対話する機会が均等になるように、トークンを順番に生成します。 たとえば、このアプリは Q&A セッションや、スクラム会議などの会議で役立ちます。
注意
会議トークン ジェネレーター アプリの [会議中] タブは、デスクトップ クライアントでのみTeams使用できます。
会議トークン ジェネレーターの主な機能
- 会議で使用されている現在のトークンを表示します。
- トークン番号に基づいて並べ替えられたユーザー リストを表示します
- 要求に応じてユーザーのトークンを生成します
- 現在のユーザーのトークン番号を表示します
- 開催者が現在の会議トークンをスキップできるようにします
ユーザー操作のさまざまな方法
トークン: ユーザーのトークンを要求します
完了: ユーザーのトークン生成を確認します
スキップ: 現在のユーザーをスキップし、トークンの次のユーザーに移動します
注意
スキップは、会議の開催者のみが使用できます。
このステップ バイ ステップ ガイドは、すべての参加者が会議で対話するための会議トークンを生成するのに役立ちます。 次の出力が表示されます。
前提条件
次のツールをインストールし、開発環境を設定します。
有効なアカウントを持つMicrosoft Teams
最新バージョンの ngrok または同等のトンネリング ソリューション
注意
ngrok をダウンロードしたら、サインアップして authtoken をインストールします。
次のテクノロジに関する実用的な知識が必要です。
ローカル環境を設定する
Microsoft Teamsサンプルを開きます。
[ コード] を選択します。
ドロップダウン メニューから、[デスクトップで開く] GitHub 選択します。
[ 複製] を選択します。
ボットを作成して登録する
次の手順は、ボットを作成してAzure portalに登録するのに役立ちます。
- ボットを Azure Bot Serviceに登録する Azure Bot リソースを作成する
- ボットの SSO 認証を有効にするクライアント シークレットを作成する
- ボットTeamsデプロイするチャネルを追加する
- ngrok を使用して Web サーバーのエンドポイントへのトンネルを作成する
- 作成した ngrok トンネルにメッセージング エンドポイントを追加する
Azure Bot リソースを作成するには
Azure portal にアクセスします。
[リソースの作成] を選択します。
検索ボックスに「 Azure Bot」と入力します。
Enter キーを 押します。
Azure Bot を選択します。
[作成] を選択します。
ボット ハンドルに必要な ボット ハンドル 名を入力します。
ドロップダウン リストから サブスクリプション を選択します。
ドロップダウン リストから リソース グループ を選択します。
新しいリソース グループを作成することもできます ([新しいリソースの 作成 ] を選択>、リソース名を入力> [OK] を選択します)。
新しいリソース グループを作成した場合は、[新しいリソース グループの場所] ドロップダウン リストから必要な 場所を 選択します。
[Microsoft アプリ ID] セクションでは、既定で [新しい Microsoft アプリ ID の作成] が選択されています。
[ 既存のアプリの登録を使用 する] を選択し、 既存のアプリ ID と 既存のアプリ パスワード を入力するか、[ 新しい Microsoft アプリ ID の作成] を選択します。
注意
同じ Microsoft アプリ ID を持つ複数のボットを作成することはできません。
[アプリを****マルチテナント として種類] を選択します。
[確認 + 作成] を選びます。
検証に合格した場合は、[ 作成] を選択します。
ボット サービスをプロビジョニングするには、しばらく時間がかかります。
[リソースに移動] を選びます。
Azure ボットが作成されます。
クライアント シークレットを作成するには
新しい Microsoft アプリ ID を作成した場合は、次の手順を実行します。
左側のパネルで、[構成] を選択 します。
ヒント
今後参照できるように 、Microsoft アプリ ID または クライアント ID を 保存します。
Microsoft アプリ ID の横にある [管理] を選択します。
[ クライアント シークレット ] セクションで、[ 新しいクライアント シークレット] を選択します。
[ クライアント シークレットの追加] ウィンドウが表示されます。
「説明」と入力します。
[追加] を選択します。
[ 値 ] 列で、[ クリップボードにコピー] を選択します。
ヒント
今後参照できるように 、クライアント シークレットの 値またはアプリ パスワードを保存します。
Microsoft Teams チャネルを追加するには
[ホーム] を選択します。
最近使用したリソース からボットを選択します。
左側のウィンドウで [チャネル ] を選択します。
Microsoft Teams を選択する
.
[ 利用規約] に同意するには、チェック ボックスをオンにします。
[同意する] を選択します。
[適用] を選択します。
ローカル Web サーバーのトンネルを作成するには
ngrok を使用して、ローカルで実行されている Web サーバーのパブリックに利用可能な HTTPS エンドポイントへのトンネルを作成します。 ngrok で次のコマンドを実行します。
ngrok http -host-header=localhost 3978
注意
ngrok トンネルの作成中に、コマンド ライン を選択してアプリを実行する代わりに3978
使用localhost 5000
します。
ヒント
ERR_NGROK_4018 が発生した場合は、コマンド プロンプト に記載されている手順に従って、サインアップして ngrok を認証します。 ngrok http -host-header=localhost 3978
コマンドを実行します。
メッセージング エンドポイントを追加するには
ngrok から HTTPS URL をコピーします。
注意
ngrok の HTTPS URL は、完全修飾ドメイン名です。 は
WebAppDomain
、それに含https://
まれていない完全修飾ドメイン名です。作成 した Azure ボットの設定で、[構成] を選択 します。
メッセージング エンドポイント で、ngrok から入手できる HTTPS URL を使用し、URL の最後に /api/messages を追加します。
[適用] を選択します。
Azure Bot Serviceでボットが正常に設定されました。
タブ SSO の Azure アプリ登録を更新する
Azure portal にアクセスします。
Azure Active Directory を選択します。
左側のナビゲーション パネルで、アプリの登録 を選択します。
ボットを選択します。
[管理] で [API の公開] を選択します。
[ 設定] を選択します。
アプリケーション ID URI を 次の
api://your ngrok/botid-{your AppID}
形式で設定します。次の図は、ドメイン名を示しています。
注意
ngrok などのトンネリング サービスを使用している場合は、ngrok サブドメインが変更されるたびに値を更新してください。
For example: api://f631****.ngrok.io/92c11075-c629-4a1e-ab58-02b4fd4204c2
は、新しい ngrok サブドメイン名ですf631****.ngrok.io
。[スコープの追加] を選択します。
表示されるパネルで、スコープ名 として入力
access_as_user
します。同意できるWho を設定しますか
Admins and users
?スコープの適切な値を使用して管理者とユーザーの同意プロンプトを
access_as_user
構成するには、フィールドに次の情報を入力します。管理者の同意表示名 として入力
Teams can access the user’s profile
する管理者の同意の説明 として入力
Allows Teams to call the app’s web APIs as the current user
するユーザー同意表示名 として入力
Teams can access the user profile and make requests on the user’s behalf
するユーザーの同意の説明 として入力
Enable Teams to call this app’s APIs with the same rights as the user
する
次の図は、フィールドと値を示しています。
[状態] が [有効] に設定されていることを確認してください。
[保存 するスコープの追加] を選択します。
注意
スコープ名 は、最後に追加された アプリケーション ID URI と
/access_as_user
一致する必要があります。api://ae57****.ngrok.io/00000000-0000-0000-0000-000000000000/access_as_user
[承認済みのクライアント アプリケーション] セクションで、アプリの Web アプリケーションに対して承認するアプリケーションを特定します。
[クライアント アプリケーションの追加] を選択します。
モバイルアプリケーションまたはデスクトップ アプリケーションTeams クライアント ID を
1fec8e78-bce4-4aaf-ab1b-5451cc387264
入力します。クライアント ID:
5e3ce6c0-2b1f-4285-8d4b-75ee78787346
Teams Web アプリケーションに対して入力できます。[ 承認されたスコープ] を選択します。
次の図は、クライアント ID を表示します。
左側のパネルで、[ API アクセス許可] を選択します。
注意
ユーザーは、Azure AD アプリが別のテナントに登録されている場合にのみ、これらのアクセス許可に同意する必要があります。
[アクセス許可を追加] を選択します。
Microsoft Graph を選択します。
[委任されたアクセス許可] を選択します。
以下のアクセス許可を追加します。
- offline_access
- Openid
- profile
- User.Read
[アクセス許可の追加] を選択します。
左側のパネルで [ 認証 ] を選択してリダイレクト URI を設定します。
注意
アプリに IT 管理者の同意が付与されていない場合、ユーザーはアプリを初めて使用する際に同意を提供する必要があります。
- [プラットフォームの追加] を選択します。
- [Web] を選びます。
完全修飾ドメイン名に追加して、アプリの
auth-end
リダイレクト URI を入力します。https://your ngrok/auth-end
.次のチェック ボックスをオンにして 、暗黙的な許可フローとハイブリッド フロー を有効にします。
- ID トークン
- アクセス トークン
[構成] を選択します。
アプリの設定を設定する
複製されたリポジトリで appsettings.json に移動します。
Visual Studio Code で appsettings.json を開き、次の情報を更新します。
- ボットの Microsoft アプリ ID に 設定
"MicrosoftAppId"
する - ボットのクライアント シークレット ID 値に設定
"MicrosoftAppPassword"
する - アプリが使用されているテナントのテナント ID に設定
"AzureAd"."TenantId"
する
注意
このサンプルは、現在のテナントでのみ機能します。
- ボットの Microsoft アプリ ID に 設定
"AzureAd"."ApplicationId"
する - コンテンツ バブルの iframe URL に設定
"ContentBubbleUrl"
する(https://[WebAppDomain]/contentBubble.html)
注意
WebAppDomain
は ngrok ドメインであるため、コンテンツ バブル URL は次のようになりますhttps://ae57****.ngrok.io/contentBubble.html
。- ボットの Microsoft アプリ ID に 設定
マニフェスト ファイルを設定する
複製されたリポジトリ内に
manifest.json
移動します。Visual Studio Code で開
manifest.json
き、次の変更を加えます。- 最新バージョンに設定
manifestVersion
する - に設定
$schema
するhttps://developer.microsoft.com/json-schemas/teams/v1.11/MicrosoftTeams.schema.json
- に設定
resource
するapi://[WebAppDomainName]/[MicrosoftAppId]
- 置換
[companyName]
元Contoso
- 次のセクションを完全修飾ドメイン名に置き換えます。
websiteUrl
privacyUrl
termsOfUseUrl
- すべての出現箇所を
WebAppDomainName
ngrok ドメイン名に置き換える - すべての出現箇所をボットの
MicrosoftAppId
Microsoft アプリ ID に 置き換える
- 最新バージョンに設定
npm インストールを使用してクライアント アプリをビルドする
複製されたリポジトリの App フォルダーに移動します。
アプリ フォルダーのパス を コピーします。
新しい コマンド プロンプト ウィンドウを開き、現在のディレクトリをコピーした アプリ パスに変更します。
コマンド プロンプト で次のコマンドを実行して、パッケージと依存関係をダウンロードします。
npm install
コマンド プロンプト で次のコマンドを実行して、アプリを起動します。
npm start
このプロセスでは、アセットがコピーされる App フォルダー内に、配布可能な フォルダーまたは /dist フォルダーが生成されます。 サーバーは、場所から静的ファイルを提供します。
サービスをビルドして実行する
最新のVisual Studioまたはコマンド ラインを使用してサービスをビルドして実行するには
最新バージョンのVisual Studioを起動します。
FileOpen > > Project/Solution に移動します。
csharp フォルダーから TokenApp.csproj ファイルを選択します。
F5 キーを押してプロジェクトを実行します。
以下のダイアログが表示されたら、[はい] を選択します:
Web ページが開き、アプリの準備が整いました。
開発者向けプレビューを有効にする
テナントの管理コンソールでアプリのアップロードを有効にします。
管理者の資格情報で Microsoft 365 管理センターにサインインします。
左側のパネルで、[ すべて表示] を選択します。
Teamsを選択 します。
左側のパネルで、Teams アプリ を選択します。
[ セットアップ ポリシー] を選択します。
[ グローバル] を選択します。
カスタム アプリアップロード****オン の位置に切り替えます。
[保存] を選択します。
テスト テナントでは、カスタム アプリのサイドローディングを許可できます。
注意
サイドローディングがアクティブになるまでに時間がかかります。
Microsoft Teamsに移動 します。
Teams インターフェイス
...
の右上隅にある [ .[バージョン情報] を選びます。
[開発者プレビュー] を選択します。
[ 開発者向けプレビューに切り替える] を選択します。
会議トークンをTeamsに追加する
複製されたリポジトリで、 csharp > リソース > マニフェスト に移動します。
マニフェスト フォルダーに存在する次のファイルを含む.zipを作成します。
- manifest.json
- icon-outline.png
- icon-color.png
発表者と出席者を含む会議を作成します。
会議が作成されたら、会議の詳細ページに移動し、[アプリの****追加] を選択します。
ポップアップ ウィンドウで、[ アプリの管理] を選択します。
[カスタム アプリをアップロードする] を選択します。
[開く] を選択して、マニフェスト フォルダーに作成した.zip ファイルをアップロードします。
[ 追加] をクリックします。
[ アプリの管理] セクションには、アプリケーションの一覧が表示されます。
Teams会議に移動します。
[アプリの追加] を選択します。
アプリの選択ページで、アプリが 会議トークン アプリ として表示されます。
会議トークン アプリ を選択します。
[保存] を選択します。
アプリは会議チャットに表示されます。
会議を開始します。
アイコンは、会議コントロール バーに表示されます。
注意
独自のプロジェクトで作業する場合は、永続ストレージ メカニズムを使用して、テナントのトークン情報とサービス URL を格納してください。
チャレンジを完了する
このようなことを思い付いたのですか?
おめでとうございます。
会議トークン ジェネレーター アプリの使用を開始するためのチュートリアルを完了しました。
リアルタイム シナリオでアプリケーションがどのように表示されるかを確認します。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。