[統合] タブの [デバイスのアクセス許可] - Teams

位置情報、カメラ、マイクアクセスなどのデバイスのアクセス許可を必要とするアプリMicrosoft Teams、ユーザーは Web ブラウザーで手動でアクセス許可を付与する必要があります。以前は、ブラウザーでアクセス許可を付与する方法が処理されましたが、これらのアクセス許可は Teams で処理されるようになりました。

このステップバイステップガイドは、Teams でタブデバイスのアクセス許可を付与するのに役立ちます。次の出力を確認できます。

タブデバイスのアクセス許可を付与する最終的な出力を示すスクリーンショット。

前提条件

残り 8 分

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

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

注:

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

ローカル環境を設定する

残り 7 分

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

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

残り 6 分

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

ngrok http --host-header=localhost 3000

ヒント

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

ngrok トンネリング

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

残り 5 分

複製されたリポジトリの manifest.json ファイルに移動します。
Visual Studio で manifest.json ファイルを開き、次の変更を行います。
- <<BASE_URI_DOMAIN>>を、websiteUrl、privacyUrl、termsOfUseUrl、contentUrlの ngrok URL に置き換えます。
- <<BASE_URI_DOMAIN>>を、validDomainsのhttps://を除く ngrok URL に置き換えます。

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

残り 4 分

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

Teams にタブデバイスのアクセス許可を追加する

残り 3 分

複製したリポジトリで、 サンプル>tab-device-permissions>nodejs>appPackage に移動します。
appPackage フォルダーに存在する次のファイルを含む .zip ファイルを作成します。
- manifest.json
- outline.png
- color.png
Teams クライアントで、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
[カスタムアプリのアップロード] オプションを探します。オプションが表示された場合は、カスタムアプリのアップロードが有効になります。

注:

カスタムアプリをアップロードするオプションが見つからない場合は、Teams 管理者に問い合わせてください。
[ 開く ] を選択して、 appPackage フォルダーに作成した .zip ファイルをアップロードします。
[追加] を選択します。
[ デバイスのアクセス許可] タブを選択 すると、次の出力が表示されます。