タブ デバイスのアクセス許可を付与する
場所、カメラ、マイクへのアクセスなど、デバイスのアクセス許可を必要とする Teams アプリでは、ユーザーが Web ブラウザーで手動でアクセス許可を付与する必要があります。 以前は、ブラウザーがアクセス許可を付与する方法を処理していましたが、これらのアクセス許可は Microsoft Teams で処理されるようになりました。
このステップ バイ ステップ ガイドは、Teams でタブ デバイスのアクセス許可を付与するのに役立ちます。 次の出力が表示されます。
前提条件
次のツールをインストールし、開発環境を設定してください。
有効なアカウントを持つ Microsoft Teams
Microsoft 365 開発者アカウント またはアプリをインストールするための適切なアクセス許可を持つ Teams アカウントへのアクセス
最新バージョンの ngrok (開発ボックス テスト用のみ) または同等のトンネリング ソリューション
注意
ngrok をダウンロードしたら、サインアップして authtoken をインストールします。
ローカル環境を設定する
[ コード] を選択します。
ドロップダウン メニューから[ **Open with GitHub Desktop](GitHub Desktop で開く**) を選択します。
[ 複製] を選択します。
ローカル Web サーバーのトンネルを設定する
ngrok またはコマンド プロンプトを使用して、ローカルで実行されている Web サーバーのパブリックに利用可能な HTTPS エンドポイントへのトンネルを作成します。 ngrok で次のコマンドを実行します。
ngrok http -host-header=localhost 3000
ヒント
ERR_NGROK_4018 が発生した場合は、コマンド プロンプトに表示されている手順に従って、ngrok にサインアップして認証します。 ngrok http -host-header=localhost 3000 コマンドを実行します。
マニフェスト ファイルを設定する
複製されたリポジトリで manifest.json に移動します。
Visual Studio で manifest.json を 開き、次の変更を加えます。
すべての場所で https:// パーツを除く ngrok の http エンドポイントに置き換えます
<<BASE_URI_DOMAIN>>。
npm を使用してクライアント アプリをビルドして実行する
複製されたリポジトリで、 tab-device-permissions > nodejs >サンプル に移動します。
nodejs フォルダーパスをコピーします。
新しい コマンド プロンプト ウィンドウを開き、現在のディレクトリをコピーした nodejs パスに変更します。
コマンド プロンプト で次のコマンドを実行して、パッケージと依存関係をダウンロードします。
npm installコマンド プロンプト で次のコマンドを実行して、アプリを起動します。
npm start
ブラウザーに次の出力が表示されます。
Teams にタブ デバイスのアクセス許可を追加する
複製されたリポジトリで、 サンプル > の tab-device-permissions > nodejs > appPackage に移動します。
appPackage フォルダーに存在する次のファイルを含む.zipを作成します。
- manifest.json
- icon-outline.png
- icon-color.png
Microsoft Teams に移動します。
[アプリ] を選択します。
左下隅にある [ アプリの管理] を選択します。
[カスタム アプリをアップロードする] を選択します。
[ 開く] を選択して、 appPackage フォルダーに作成した.zip ファイルをアップロードします。
[追加] を選択します。
[ デバイスのアクセス許可] タブ を選択すると、次の出力が表示されます。
アプリのテスト
タブ デバイスのアクセス許可アプリでユーザーがアクセス許可を付与できるようにするには、アプリを Teams に正常にアップロードした後でアプリをテストする必要があります。
チャレンジを完了する
このようなことを思い付いたのですか?
おめでとうございます。
チュートリアルを完了し、Teams でタブ デバイスのアクセス許可を付与できるようになりました。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。