Teams 個人用タブを Microsoft 365 全体に拡張する

[アーティクル]
11/17/2023

個人用タブは、Microsoft Teams エクスペリエンスを向上させる優れた方法です。個人用タブを使用すると、ユーザーがエクスペリエンスを離れるか、もう一度サインインしなくても、Teams 内でアプリケーションへのアクセス権をユーザーに提供できます。このプレビューでは、個人用タブが他の Microsoft 365 アプリケーション内でも点灯する可能性があります。このチュートリアルでは、既存の Teams 個人用タブを取得し、Outlook と Microsoft 365 アプリ (デスクトップと Web エクスペリエンス) と Microsoft 365 for Android アプリの両方で実行するように更新するプロセスについて説明します。

他の Microsoft 365 アプリケーションで実行するように Teams 個人用アプリを更新するには、次の手順を実行します。

アプリマニフェスト (以前は Teams アプリマニフェスト) を更新します。
Microsoft Teams JavaScript クライアントライブラリ (TeamsJS) 参照を更新します。
コンテンツセキュリティポリシーヘッダーを修正します。
シングル Sign-On のMicrosoft Entra アプリ登録 (SSO) を更新します。
Teams で更新したカスタムアプリをアップロードします。

このガイドの残りの部分では、これらの手順について説明し、他の Microsoft 365 アプリケーションで個人用タブをプレビューする方法について説明します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Microsoft 365 開発者プログラムサンドボックステナント。
Microsoft 365 Apps Current Channel からインストールされた Microsoft 365 アプリを持つマシン。
(省略可能)Microsoft 365 ターゲットリリースに登録されているサンドボックステナント。
(省略可能)Microsoft 365 for Android アプリがインストールされている Android デバイスまたはエミュレーター。
(省略可能)コードの更新に役立つ Microsoft Visual Studio Code 用 Teams Toolkit 拡張機能。

前提条件のインストール

アップグレードの個人用タブを準備する

既存の個人用タブアプリがある場合は、テスト用に運用プロジェクトのコピーまたはブランチを作成し、アプリマニフェストのアプリ ID を更新して、新しい識別子 (テスト用の運用アプリ ID とは異なる) を使用するようにします。

独自の運用コードではなくサンプルコードを使用する場合は、Todo List サンプルを使用できます。 Todo List Sample GitHub リポジトリのセットアップ手順に従うか、Teams Toolkit 拡張機能を使用して新しい Teams アプリを作成できます ([Azure のバックエンドでサンプル>の Todo List から開始] を選択します)。個人用タブを作成したら、この記事に戻って Microsoft 365 全体に拡張します。

または、次のクイックスタートセクションに示すように、Microsoft 365 アプリが既に有効になっている基本的なシングルサインオン (SSO) hello world アプリを使用し、スキップして Teams でカスタムアプリをアップロードすることもできます。

クイックスタート

Visual Studio Code の Teams Toolkit 拡張機能を使用して、Teams、Outlook、および Microsoft 365 で実行できる個人用タブから開始します。

Visual Studio Code を開きます。
アクティビティバーの [Teams Toolkit ] アイコンを選択します。
[ 新しいアプリの作成] を選択します。
[タブ] を選択します。
[ 基本] タブを選択します。
推奨されるプログラミング言語を選択します。
ワークスペースフォルダーのローカルコンピューター上の場所を選択し、アプリケーション名を入力します。
アプリが作成されたら、Teams Toolkit 拡張機能内で、適切な Microsoft 365 Developer Program サンドボックステナントと Azure アカウントにサインインしていることを確認します。これらのオプションは、拡張機能の ACCOUNTS セクションで使用できます。
[表示] オプションまたは Ctrl + Shift + P の下にある [コマンドパレット...] を選択します。
「Teams: プロビジョニング」と入力して、Azure App Service、App Service プラン、Azure Bot、マネージド ID などの Teams アプリリソースを Azure アカウントに作成します。または、拡張機能の [ライフサイクル] セクションで [プロビジョニング] を選択することもできます。
サブスクリプションとリソースグループを選択します。新しいリソースグループを作成する場合は、場所を指定する必要があります。
[プロビジョニング] を選択します。
[表示] オプションまたは Ctrl + Shift + P の下にある [コマンドパレット...] を選択します。
「Teams: デプロイ」と入力して、Azure でプロビジョニングされたリソースにサンプルコードをデプロイし、アプリを起動します。または、拡張機能の [ライフサイクル] セクションで [デプロイ] を選択することもできます。

ここから、先に進んで Teams でカスタムアプリをアップロードし、Outlook と Microsoft 365 アプリでアプリをプレビューできます。アプリマニフェストと TeamsJS API 呼び出しは、Microsoft 365 アプリ用に既に更新されています。

SharePoint Framework (SPFx) アプリ

バージョン 1.16 の SharePoint Framework (SPFx) 以降、SPFx で構築およびホストされている Teams 個人用タブは、Outlook と Microsoft 365 アプリでもサポートされています。 SPFx Teams 個人用タブアプリを更新するには、次の手順に従います。

SPFx の最新バージョンがあることを確認します。
```
npm install @microsoft/generator-sharepoint@latest --global
```
アプリマニフェストを更新します。
TeamsJS 参照を更新します。

TeamsJS 参照を更新した後、 Teams でアプリをアップロードして、Outlook と Microsoft 365 アプリで実行されている SPFx 個人用タブアプリをプレビューします。詳細については、「SharePoint Frameworkを使用して Outlook と Microsoft 365 アプリを拡張する」を参照してください。

アプリマニフェストを更新します。

アプリマニフェストスキーマのバージョン 1.13 (以降) を使用して、Teams の個人用タブを Outlook と Microsoft 365 アプリで実行できるようにする必要があります。スキーマのバージョンの詳細については、「アプリマニフェスト」を参照してください。

アプリマニフェストを更新するには、次の 2 つのオプションがあります。

Teams ツールキット
手動の手順

コマンドパレットを開きます: Ctrl+Shift+P。
Teams: Upgrade Teams manifest コマンドを実行し、アプリマニフェストファイルを選択します。変更が行われます。

アプリマニフェストを開き、とを$schemamanifestVersion適切なバージョンで手動で更新します。バージョン情報については、 Teams 開発者マニフェストを参照してください。

{
    "$schema" : "https://developer.microsoft.com/json-schemas/teams/v1.14/MicrosoftTeams.schema.json",
    "manifestVersion" : "1.16"
}

Teams Toolkit を使用して個人用アプリを作成した場合は、それを使用してアプリマニフェストファイルの変更を検証し、エラーを特定することもできます。コマンドパレット (Ctrl+Shift+P) を開き、[ Teams: マニフェストファイルの検証] を見つけます。

TeamsJS 参照を更新する

Outlook と Microsoft 365 で実行するには、アプリで npm パッケージ @microsoft/teams-js@2.19.0 (以降) を参照する必要があります。以前のバージョンの TeamsJS は Outlook アプリと Microsoft 365 アプリで引き続き機能しますが、非推奨の警告はログに記録されます。以前のバージョンのサポートは、最終的に Outlook と Microsoft 365 の両方で廃止されます。 TeamsJS の最新バージョンを確認するには、「 TeamsJS GitHub リポジトリ」を参照してください。

Teams Toolkit を使用すると、1.x TeamsJS バージョンから TeamsJS 2.x.x バージョンにアップグレードするために必要なコード変更を特定して自動化できます。または、同じ手順を手動で実行することもできます。詳細については、「 TeamsJS ライブラリ」を参照してください。

コマンドパレットを開きます。 Ctrl+Shift+P
コマンドTeams: Upgrade Teams JS SDK and code referencesを実行します。

完了すると、package.json ファイル参照 @microsoft/teams-js@2.0.0 (またはそれ以降) とファイル*.js/.ts*.jsx/.tsxは次のように更新されます。

の Import ステートメント teams-js@2.x.x
関数、列挙型、インターフェイスの呼び出しteams-js@2.x.x
TODOコンテキストインターフェイスの変更によって影響を受ける可能性がある領域にフラグを付けるコメントリマインダー
コールバック関数を Promise に変換するための TODO コメントリマインダー

重要

.htmlファイル内のコードはアップグレードツールではサポートされていないため、手動で変更する必要があります。

コンテンツセキュリティポリシーヘッダーを構成する

Microsoft Teams と同様に、タブアプリケーションは Microsoft 365 アプリと Outlook Web クライアントの iframe 要素内でホストされます。

アプリでコンテンツセキュリティポリシー (CSP) ヘッダーを使用する場合は、CSP ヘッダーで次のすべてのフレーム先祖を許可してください。

警告

Web バージョンの Teams (teams.microsoft.com)、Outlook (outlook.com)、Microsoft 365 (microsoft365.com) ドメインを含む Microsoft のクラウドサービスは、cloud.microsoft ドメインに移行しています。 2024 年 6 月より前に次の手順を実行して、アプリが Teams Web クライアントで引き続きレンダリングされるようにします。

TeamsJS SDK を v.2.19.0 以降に更新します。 TeamsJS SDK の最新リリースの詳細については、「 Microsoft Teams JavaScript クライアントライブラリ」を参照してください。
Teams アプリのコンテンツセキュリティポリシーヘッダーを更新して、アプリが teams.cloud.microsoft ドメインにアクセスできるようにします。 Teams アプリが Outlook と Microsoft 365 に拡張されている場合は、アプリが teams.cloud.microsoft、outlook.cloud.microsoft、m365.cloud.microsoft ドメインにアクセスできることを確認します。

Microsoft 365 アプリホスト	frame-ancestor 権限
Teams	`teams.microsoft.com`, `*.teams.microsoft.com`, `teams.cloud.microsoft`
Microsoft 365 アプリ	`.microsoft365.com`, `.office.com`, `m365.cloud.microsoft`
Outlook	`outlook.live.com`, `outlook.office.com`, `outlook.office365.com`, `outlook-sdf.office.com`, `outlook-sdf.office365.com`, `outlook.cloud.microsoft`

SSO Microsoft Entraアプリの登録を更新する

個人用タブのシングルサインオン (SSO) Microsoft Entraは、Microsoft 365 アプリと Outlook の場合と同じように動作します。ただし、テナントのアプリの登録ポータルで、タブアプリのMicrosoft Entra アプリ登録に複数のクライアントアプリケーション識別子を追加する必要があります。

サンドボックステナントアカウントで [Microsoft Azure ポータル] にサインインします。
[アプリ登録] を開きます。
個人用タブアプリケーションの名前を選択して、アプリの登録を開きます。
[ API の公開] ( [管理] の下) を選択します。

[承認されたクライアントアプリケーション] セクションで、次のすべての Client Id 値が追加されていることを確認します。

Microsoft 365 クライアントアプリケーション	クライアント ID
Teams デスクトップ、モバイル	1fec8e78-bce4-4aaf-ab1b-5451cc387264
Teams Web	5e3ce6c0-2b1f-4285-8d4b-75ee78787346
Microsoft 365 Web	4765445b-32c6-49b0-83e6-1d93765276ca
Microsoft 365 デスクトップ	0ec893e0-5785-4de6-99da-4ed124e5296c
Microsoft 365 mobile	d3590ed6-52b3-4102-aeff-aad2292ab01c
Outlook デスクトップ	d3590ed6-52b3-4102-aeff-aad2292ab01c
Outlook Web	bc59ab01-8403-45c6-8796-ac3ef710b3e3
Outlook モバイル	27922004-5251-4030-b22d-91ecd9a37ea4

注:

一部の Microsoft 365 クライアントアプリケーションでは、クライアント ID が共有されます。

Teams でカスタムアプリをアップロードする

Microsoft 365 と Outlook でアプリを実行するための最後の手順は、更新した個人用タブアプリパッケージを Microsoft Teams にアップロードすることです。

(アプリマニフェストとアプリアイコン) を zip ファイルにパッケージ化します。 Teams Toolkit を使用してアプリを作成した場合は、Teams Toolkit のユーティリティ セクションにある Zip Teams アプリパッケージ オプションを使用して簡単にこれを行うことができます。アプリの manifest.json ファイルと適切な環境を選択します。
Microsoft Teams に移動し、サンドボックステナントアカウントを使用してサインインします。
[アプリ] を選択して、[アプリを管理] ウィンドウを開きます。次に、[ アプリのアップロード] を選択します。
[ カスタムアプリのアップロード] オプションを 選択し、アプリパッケージを選択します。

Teams にアップロードした後、個人用タブは Outlook と Microsoft 365 アプリで使用できます。アプリを Teams にアップロードするために使用したのと同じ資格情報でサインインする必要があります。 Microsoft 365 for Android アプリを実行する場合、Microsoft 365 アプリから個人用タブアプリを使用するには、アプリを再起動する必要があります。

アプリをピン留めしてすばやくアクセスすることも、左側のサイドバーにある最近のアプリケーション間の省略記号 (...) ポップアップでアプリを見つけることもできます。 Teams でアプリをピン留めしても、Microsoft 365 アプリまたは Outlook ではアプリとしてピン留めされない点に注意してください。

他の Microsoft 365 エクスペリエンスで個人用タブをプレビューする

Microsoft 365 および Outlook、Web、Windows デスクトップクライアントで実行されているアプリをプレビューする方法を次に示します。

注:

Teams Toolkit サンプルアプリを使用して Teams からアンインストールすると、Outlook および Microsoft 365 アプリのその他のアプリ カタログから削除されます。

Windows での Outlook

Windows デスクトップの Outlook で実行されているアプリを表示するには:

Outlook を起動し、開発テナントアカウントを使用してサインインします。
サイドバーで、[ その他のアプリ] を選択します。アップロードしたカスタムアプリタイトルが、インストールされているアプリの中に表示されます。
アプリアイコンを選択して、Outlook でアプリを起動します。

Outlook on the web

Outlook on the web でアプリを表示するには:

Outlook on the webに移動し、開発テナントアカウントを使用してサインインします。
サイドバーで、[アプリ] を選択 します。アップロードしたカスタムアプリタイトルが、インストールされているアプリの中に表示されます。
アプリアイコンを選択して、Outlook on the webで実行されているアプリを起動してプレビューします。

Outlook for Android アプリ

Outlook for Android アプリで実行されているアプリを表示するには:

Android デバイスで Outlook アプリを開き、開発者テナントアカウントを使用してサインインします。カスタムアプリをアップロードする前に、Android 用 Outlook アプリが既に実行されていた場合は、Outlook アプリを再起動して、インストールされているアプリセクションに表示します。
[ アプリ ] アイコンを選択します。アップロードしたカスタムアプリは、インストールされているアプリの間に表示されます。
アプリアイコンを選択して、Outlook for Android でアプリを開きます。

iOS 用 Outlook アプリ

iOS 用 Outlook アプリで実行されているアプリを表示するには:

デバイスで Outlook アプリを開き、開発者テナントアカウントを使用してサインインします。 Teams でカスタムアプリをアップロードする前に Outlook アプリが既に実行されていた場合は、Outlook を再起動して、インストールされているアプリセクションに表示します。
[ その他 ] アイコンを選択します。アップロードしたカスタムアプリは、インストールされているアプリの間に表示されます。
アプリアイコンを選択して、Outlook アプリでアプリを開きます。

Windows 上の Microsoft 365

Windows デスクトップで Microsoft 365 で実行されているアプリを表示するには:

Microsoft 365 を起動し、開発テナントアカウントを使用してサインインします。
サイドバーの [ アプリ ] アイコンを選択します。アップロードしたカスタムアプリタイトルが、インストールされているアプリの中に表示されます。
アプリアイコンを選択して、Microsoft 365 でアプリを起動します。

Web 上の Microsoft 365

Microsoft 365 on the web で実行されているアプリをプレビューするには:

テストテナント資格情報 を使用して microsoft365.com にログインします。
サイドバーの [ アプリ ] アイコンを選択します。アップロードしたカスタムアプリタイトルが、インストールされているアプリの中に表示されます。
アプリアイコンを選択して、Web 上の Microsoft 365 でアプリを起動します。

Microsoft 365 for Android アプリ

Microsoft 365 for Android アプリで実行されているアプリを表示するには:

デバイスで Microsoft 365 アプリを起動し、開発者テナントアカウントを使用してサインインします。 Teams でカスタムアプリをアップロードする前に Microsoft 365 アプリが既に実行されていた場合は、Teams を再起動して、インストールされているアプリに表示する必要があります。
[ アプリ ] アイコンを選択します。アップロードしたカスタムアプリは、インストールされているアプリの間に表示されます。
アプリアイコンを選択して、Microsoft 365 アプリでアプリを起動します。

Microsoft 365 for iOS

Microsoft 365 for iOS で実行されているアプリを表示するには:

デバイスで Microsoft 365 アプリを起動し、開発者テナントアカウントを使用してサインインします。 Teams でカスタムアプリをアップロードする前に Microsoft 365 アプリが既に実行されていた場合は、Teams を再起動して、インストールされているアプリに表示する必要があります。
[ アプリ ] アイコンを選択します。アップロードしたカスタムアプリは、インストールされているアプリの間に表示されます。
アプリアイコンを選択して、Microsoft 365 アプリでアプリを起動します。

トラブルシューティング

Outlook および Microsoft 365 クライアントでは、Teams アプリケーションの種類と機能のサブセットのみがサポートされています。さまざまな TeamsJS 機能のホストサポートをチェックする方法の詳細については、「Microsoft 365 アプリのサポート」を参照してください。

Teams アプリに対する Microsoft 365 ホストとプラットフォームのサポートの概要については、「 Microsoft 365 全体で Teams アプリを拡張する」を参照してください。

実行時に特定の機能のホストサポートをチェックするには、その機能 (名前空間) で関数をisSupported()呼び出し、必要に応じてアプリの動作を調整します。このアクションを使用すると、アプリをサポートするホストの UI と機能を明るくし、サポートされていないホストで適切なフォールバックエクスペリエンスを提供できます。詳細については、「アプリエクスペリエンスを区別する」を参照してください。

Microsoft Teams 開発者コミュニティチャネルを使用して、問題を報告し、フィードバックを提供します。

デバッグ

Visual Studio Code の Teams Toolkit を使用して、Teams、Microsoft 365 アプリ、Outlook で実行されているタブアプリケーションをデバッグできます。

Teams Toolkit のデバッグドロップダウンメニューを示すスクリーンショット。

目的のデバッグ方法を選択し、 F5 キーを選択します。ローカルデバッグを初めて実行すると、Teams Toolkit から Microsoft 365 テナントアカウントにサインインするように求められます。

フィードバックを提供し、 Microsoft Teams Framework (TeamsFx) での Teams Toolkit デバッグエクスペリエンスに関する問題を報告します。

モバイルデバッグ

Android 用 Outlook のデバッグ

Outlook for Android でアプリをデバッグするには:

Teams モバイルクライアントで [ その他 ] アイコンを選択し、アップロードしたカスタムアプリを開いて Outlook アプリ内で実行します。
Android デバイスが開発マシンに接続されていることを確認します。開発マシンから、ブラウザーを開いて DevTools 検査ページに移動します。たとえば、Microsoft Edge でに edge://inspect/#devices 移動して、デバッグが有効な Android WebView の一覧を表示します。
タブ URL でを Microsoft Teams Tab 見つけ、[ 検査 ] を選択して DevTools を使用してアプリのデバッグを開始します。
Android デバイスで通常の Web サイトをリモートでデバッグするのと同じ方法で、Android WebView 内でタブアプリをデバッグします。

Android 用 Microsoft 365 のデバッグ

Teams Toolkit (F5) では、Microsoft 365 での Android アプリのデバッグはサポートされていません。 Microsoft 365 for Android アプリで実行されているアプリをリモートでデバッグする方法を次に示します。

物理 Android デバイスを使用してデバッグする場合は、それを開発マシンに接続し、 USB デバッグのオプションを有効にします。このオプションは、Android エミュレーターで既定で有効になっています。
Android デバイスから Microsoft 365 アプリを起動します。
プロファイル [ Me > Settings Allow debugging] > $デバッグを許可する$ を開き、[ リモートデバッグを有効にする] オプションをオンに切り替えます。
[設定] のままにします。
プロフィール画面を表示したままにします。
[ アプリ] を選択し、アップロードしたカスタムアプリを起動して、Microsoft 365 アプリ内で実行します。
Android デバイスが開発マシンに接続されていることを確認します。開発マシンから、ブラウザーを開いて DevTools 検査ページに移動します。たとえば、Microsoft Edge でに edge://inspect/#devices 移動して、デバッグが有効な Android WebView の一覧を表示します。
タブ URL でを Microsoft Teams Tab 見つけ、[ 検査 ] を選択して DevTools を使用してアプリのデバッグを開始します。
Android デバイスで通常の Web サイトをリモートでデバッグするのと同じ方法で、Android WebView 内でタブアプリをデバッグします。

コードサンプル

サンプルの名前	説明	Node.js
Todo List	ReactとAzure Functionsを使用して構築された SSO を使用した編集可能な todo リスト。 Teams でのみ動作します (このサンプルアプリを使用して、このチュートリアルで説明されているアップグレードプロセスを試してください)。	表示
Todo List (Microsoft 365)	ReactとAzure Functionsを使用して構築された SSO を使用した編集可能な todo リスト。 Teams、Outlook、Microsoft 365 アプリで動作します。	表示
イメージエディター (Microsoft 365 アプリ)	Microsoft Graph APIを使用してイメージを作成、編集、開き、保存します。 Teams、Outlook、Microsoft 365 アプリで動作します。	表示
サンプル静的タブ (Microsoft 365 アプリ)	さまざまなホストで使用できる SSO 認証と TeamsJS ライブラリ機能を示します。 Teams、Outlook、Microsoft 365 アプリで動作します。	表示
Northwind Orders アプリ	TeamsJS ライブラリ v.2 を使用して、Teams アプリケーションを他の Microsoft 365 ホストアプリに拡張する方法を示します。 Teams、Outlook、Microsoft 365 アプリで動作します。モバイル向けに最適化されています。	表示

次の手順

Teams、Outlook、Microsoft 365 アプリで検出できるようにアプリを発行します。

Outlook と Office 用の Teams アプリを発行する

Teams 個人用タブを Microsoft 365 全体に拡張する

前提条件