Team で会議ステージを共有する - Teams

Teams で会議ステージを共有すると、Teams 会議用のアプリを有効にして構成できます。これにより、ユーザーが会議ステージを共有し、参加者が過去、現在、および将来のタスクの状態の詳細を追加できるようになり、Teams 会議エクスペリエンスが向上します。

Teams での共有会議ステージの主な機能

サイドパネルに状態の詳細を追加します。
コラボレーションの詳細を追加します。

このステップバイステップガイドは、Teams で会議ステージを共有して、コラボレーションの状態の詳細を追加するのに役立ちます。次の出力を確認できます。

会議ステージビューの最終的な出力を示すスクリーンショット。

前提条件

残り 8 分

次のツールをインストールし、開発環境を設定していることを確認します。

	インストール	使用するには...
	Microsoft Teams	Microsoft Teams は、チャット、会議、通話をすべて 1 か所で行うアプリを通じて、作業するすべてのユーザーと共同作業を行います。
	Visual Studio 2022	Visual Studio 2022 でエンタープライズバージョンをインストールし、ASP.NET および Web 開発ワークロードをインストールできます。最新バージョンを使用します。
	Node.js と NPM	バックエンド JavaScript ランタイム環境。詳細については、「プロジェクトの種類Node.js バージョン互換性テーブル」を参照してください。
	開発トンネル	Teams アプリの機能 (会話型ボット、メッセージ拡張機能、受信 Webhook) には、受信接続が必要です。トンネルは、開発システムを Teams に接続します。開発トンネルは、localhost をインターネットに安全に開き、アクセス権を持つユーザーを制御するための強力なツールです。開発トンネルは、Visual Studio 2022 バージョン 17.7.0 以降で使用できます。または、 ngrok をトンネルとして使用して、開発システムを Teams に接続することもできます。タブのみを含むアプリには必要ありません。このパッケージは、(npm devDependencies を使用して) プロジェクトディレクトリ内にインストールされます。

注:

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

ローカル環境を設定する

残り 7 分

Microsoft-Teams-Samples を開きます。
[ コード] を選択します。
ドロップダウンメニューから、[ GitHub Desktop で開く] を選択します。
[ 複製] を選択します。

注:

ファイル 名が長すぎるというエラーが発生した場合は、任意の管理者ターミナルで git コマンド git config --system core.longpaths true を適用します。

ローカル Web サーバーのトンネルを設定する

残り 6 分

トンネルを作成する

dev tunnel
ngrok

Visual Studio を開きます。
[ 新しいプロジェクトの作成] を選択します。
検索ボックスに「ASP.NET」と入力します。検索結果から [ASP.NET Core Web アプリ] を選択します。
[次へ] を選択します。
「プロジェクト名」と入力し、[次へ] を選択します。
[作成] を選択します。

概要ウィンドウが表示されます。
デバッグドロップダウンリストで、[Dev Tunnel (アクティブトンネルなし)]>[トンネルの作成]を選択します。...

ポップアップウィンドウが表示されます。
ポップアップウィンドウで次の詳細を更新します。
1. アカウント: Microsoft または GitHub アカウントを入力します。
2. [名前]: トンネルの名前を入力します。
3. トンネルの種類: ドロップダウンリストから [ 一時] を選択します。
4. アクセス: ドロップダウンリストから [パブリック] を選択 します。
[OK] を選択します。

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

作成したトンネルは、次のようにデバッグドロップダウンリストにあります。
F5 キーを押して、デバッグモードでアプリケーションを実行します。
[セキュリティ警告] ダイアログが表示されたら、[はい] を選択します。

ポップアップウィンドウが表示されます。
[続行] を選択します。

開発トンネルのホームページが新しいブラウザーウィンドウで開き、開発トンネルがアクティブになりました。
Visual Studio に移動し、[出力の表示] を選択します>。
[出力コンソール] ドロップダウンメニューで、[Dev Tunnels]\(開発トンネル\) を選択します。

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

ngrok またはコマンドプロンプトを使用して、ローカルで実行されている Web サーバーのパブリックに利用可能な HTTPS エンドポイントへのトンネルを作成します。 ngrok で次のコマンドを実行します。

ngrok http --host-header=localhost 3978

ヒント

ERR_NGROK_4018が発生した場合は、コマンドプロンプトに記載されている手順に従ってサインアップし、ngrok を認証します。 ngrok http --host-header=localhost 3978 コマンドを実行します。

ウィンドウに HTTPS URL が表示されます。

ngrok HTTPS URL を示すスクリーンショット。

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

残り 5 分

複製されたリポジトリ内 の node.js フォルダー内のmanifest.jsonに移動します。
Visual Studio でmanifest.json を開き、次の変更を行います。
- をボットの Microsoft アプリ ID に置き換えます<<TEAMS_APP_ID>>。
- を ngrok ドメイン名または開発トンネルドメイン名に置き換えます <<TAB_DOMAIN>> 。
- を ngrok ドメイン名または開発トンネルドメイン名に置き換えます <<VALID DOMAIN>> 。

npm を使用してビルドして実行する

残り 4 分

nodejs
ClientApp

複製したリポジトリで、 サンプル>の meetings-stage-view>nodejs に移動します。
nodejs フォルダーパスをコピーします。
新しい コマンドプロンプト ウィンドウを開き、現在のディレクトリをコピーした nodejs パスに変更します。
コマンドプロンプトで次のコマンドを実行して、パッケージと依存関係をダウンロードします。
```
 npm install
```
コマンドプロンプトで次のコマンドを実行して、アプリを起動します。
```
npm start
```

複製したリポジトリで、 サンプル>会議-stage-view>nodejs>ClientApp に移動します。
ClientApp フォルダーパスをコピーします。
新しい コマンドプロンプト ウィンドウを開き、現在のディレクトリをコピーした ClientApp パスに変更します。
コマンドプロンプトで次のコマンドを実行して、パッケージと依存関係をダウンロードします。
```
 npm install
```
コマンドプロンプトで次のコマンドを実行して、アプリを起動します。
```
npm start
```

Teams に会議ステージを追加する

残り 3 分

複製したリポジトリで、 サンプル> の会議-stage-view> nodejs> appManifest に移動します。
appManifest フォルダーに存在する次のファイルを含む .zip を作成します。
- manifest.json
- outline.png
- color.png
少数の発表者と出席者との会議を作成します。
会議が作成されたら、会議に参加します。
会議の詳細ページに移動し、[ アプリ ] アイコンを選択してアプリを追加します。
ポップアップダイアログで、[ アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
サンプル>会議-ステージビュー> nodejs> appManifest に移動します。
[ 開く ] を選択して、 appManifest フォルダーに作成した .zip ファイルをアップロードします。
[追加] を選択します。
[ タブの設定] を選択します。

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