Live Share SDK を使用してアジャイルポーカーを構築する - Teams

Live Share SDK を使用すると、コラボレーションアプリを構築し、Teams を通じてコラボレーションおよび接続するためのより多くの方法を見つけることができます。 Teams で 1 対 1 の通話、グループ通話、会議のスケジュール設定、今すぐ会議など、映画の視聴やライブゲームのプレイなどのコンテンツを共有するアプリを作成できます。

このステップバイステップガイドは、Live Share SDK を使用して Agile Poker サンプルアプリを作成するのに役立ちます。次の出力が表示されます。

前提条件

残り 5 分

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

	インストール	使用するには...
	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 をインストールします。

Agile Poker サンプルアプリをビルドして実行する

残り 4 分

Agile Poker サンプルアプリに移動します。
Live Share SDK リポジトリを複製して、サンプルアプリをテストします。
```
  git clone https://github.com/microsoft/live-share-sdk.git
```
ターミナルウィンドウを開きます。
次のコマンドを実行して、Agile Poker サンプルアプリフォルダーに移動します。
```
cd live-share-sdk\samples\javascript\22.react-agile-poker
```
次のコマンドを実行して、依存関係パッケージをインストールします。
```
npm install
```
次のコマンドを実行してローカルの Web サーバーを起動します。
```
npm run start
```
新しいブラウザータブで http://localhost:3000 ウィンドウが開き、Agile Poker ゲームが表示されます。
新しい ngrok ターミナルウィンドウを開いてトンネルを作成し、アプリをローカルに展開します。
次のコマンドを実行して、新しいセッションを作成します。サンプルアプリではポート 3000 を使用します。
```
ngrok http 3000--host-header=localhost
```
ngrok トンネルが作成されます。

マニフェストファイルを設定し、アプリをアップロードする

残り 3 分

マニフェストファイルをセットアップし、manifest.zip パッケージを Teams にアップロードする必要があります。

manifest.json ファイルを開き、次の情報を更新します。
- "ID" を Microsoft アプリ ID に設定します。
- <<BASE_URI_DOMAIN>>のすべての出現箇所を、完全修飾 ngrok または devtunnel ドメイン名に置き換えます。
Manifest フォルダーに存在する次のファイルを含む .zip ファイルを作成します。
- manifest.json
- outline.png
- color.png
数人の発表者と出席者を含む Teams で会議を作成します。
会議に参加します。
会議が開始されたら、[アプリ] を選択 します。
ポップアップウィンドウで、[ アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
マニフェスト フォルダーに作成した .zip ファイルを選択し、[開く] を選択します。
[追加] を選択します。
会議の詳細ページに戻り、[ アプリ>Agile Poker アプリ] を選択します。
[保存] を選択します。

Agile Poker アプリは、Teams 会議のサイドパネルに追加されます。