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

[アーティクル]
05/02/2022

注意

Teams 個人用タブを Microsoft 365 全体に拡張する 機能は、現在、パブリック開発者プレビューでのみ使用できます。プレビューに含まれている機能は完全でないため、一般公開前に変更される場合があります。これらは、テストと調査のみを目的としています。実稼働アプリケーションでは使用しないでください。

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

Outlook および Office Home で実行するように個人用アプリを更新するには、次の手順を実行します。

アプリマニフェストを更新する
TeamsJS SDK リファレンスを更新する
コンテンツセキュリティポリシーヘッダーを修正する
シングルサインオン (SSO) の Microsoft Azure Active Directory (Azure AD) アプリ登録を更新する

アプリをテストするには、次の手順が必要です。

Office 365ターゲットリリース に Microsoft 365 テナントを登録する
Outlook アプリと Office アプリのプレビューバージョンにアクセスするようにアカウントを構成する
更新されたアプリを Teams にサイドロードする

これらの手順の後、アプリは Outlook アプリと Office アプリのプレビューバージョンに表示されます。

前提条件

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

Microsoft 365 開発者プログラムサンドボックステナント
[Office 365 対象指定リリース] に登録されているサンドボックステナント
Microsoft 365 Apps ベータチャネル からインストールされた Office アプリを含むコンピューター
(省略可能) Microsoft Visual Studio コードの Teams ツールキット拡張機能を使用してコードを更新する

前提条件のインストール

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

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

このチュートリアルを完了するためにサンプルコードを使用する場合は、[Todo リストサンプル入門] のセットアップ手順に従って、Visual Studio Code 用 Teams ツールキット拡張機能を使用して個人用タブアプリを構築します。または、同じ [Teams JS SDK v2 プレビュー用に更新された Todo リストサンプル] から始めて、[他の Microsoft 365 エクスペリエンスで個人用タブをプレビューする] に進むこともできます。更新されたサンプルは、次の場所にある Teams ツールキット拡張機能内でも利用できます: [開発] > [サンプルを表示] > [Todo リスト] (Teams、Outlook、および Office で使用可能)。

Teams ツールキットの Todo List サンプル (Teams、Outlook、Office で動作)

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

[Teams 開発者プレビューマニフェスト] スキーマとMicrosoft 365 DevPreviewマニフェストバージョンを使用して、Office と Outlook で Teams 個人用タブを実行できるようにする必要があります。

Teams ツールキットを使用してアプリマニフェストを更新するか、変更を手動で適用できます。

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

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

Teams アプリマニフェストを開き、$schema と manifestVersion を次の値で更新します。

{
    "$schema" : "https://raw.githubusercontent.com/OfficeDev/microsoft-teams-app-schema/preview/DevPreview/MicrosoftTeams.schema.json",
    "manifestVersion" : "m365DevPreview"
}

Teams ツールキットを使用して個人用アプリを作成した場合は、それを使用してマニフェストファイルの変更を検証し、エラーを特定することもできます。コマンドパレットを開いてTeams をCtrl+Shift+P見つけます 。マニフェストファイル を検証するか、Teams ツールキットの [配置] メニューからオプションを選択します (Visual Studio Code の左側にある Teams アイコンを探します)。

Teams ツールキット [配置] メニューの [マニフェストファイルの検証] オプション

SDK 参照を更新する

Outlook および Office で実行するには、アプリが npm パッケージ @microsoft/teams-js@2.0.0-beta.1 (またはそれ以降の ベータ 版) に依存している必要があります。ダウンレベルバージョンの @microsoft/teams-js コードは Outlook と Office でサポートされていますが、非推奨の警告はログに記録され、Outlook および Office のダウンレベルバージョンの @microsoft/teams-js サポートは最終的に停止します。

Teams ツールキットを使用すると、コードの変更の一部を自動化して次のバージョン @microsoft/teams-js を採用することができますが、手動で手順を実行する場合は、[Microsoft Teams JavaScript クライアント SDK プレビュー] を参照してください

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

完了すると、ユーティリティは TeamsJS SDK プレビュー (@microsoft/teams-js@2.0.0-beta.1またはそれ以降) の依存関係を使用して package.json ファイルを更新し、ファイル *.js/.ts と *.jsx/.tsx は次のように更新されます。

package.json TeamsJS SDK プレビューへの参照
TeamsJS SDK プレビューの Import ステートメント
TeamsJS SDK プレビューへの関数、列挙型、インターフェイス呼び出し
TODO コメントリマインダーを使用して、コンテキストインターフェイスの変更の影響を受ける可能性がある領域を確認する
コールバックスタイル関数から promises 関数への変換が、ツールが検出したすべての呼び出しサイトでうまくいったことを確認するための TODO コメントリマインダー

重要

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

注意

コードを手動で更新する場合は、[Microsoft Teams JavaScript クライアント SDK プレビュー] を参照して、必要な変更について確認してください。

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

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

アプリで Content Security Policy (CSP) ヘッダーを使用する場合は、CSP ヘッダーで次のすべての frame-ancestor を許可していることを確認します。

Microsoft 365 ホスト	frame-ancestor 権限
Teams	`teams.microsoft.com`
Office	`*.office.com`
Outlook	`outlook.office.com`, `outlook.office365.com`, `outlook-sdf.office.com`, `outlook-sdf.office365.com`

SSO の Azure AD アプリ登録を更新します

個人用タブの Azure Active Directory シングルサインオン (SSO) は、Office および Outlook でも Teams と同じように機能しますが、テナントのアプリ登録ポータル内タブアプリの Azure AD アプリ登録 に複数のクライアントアプリケーション識別子を追加する必要があります。

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

Azure portal の *アプリの登録* ブレードからクライアント ID を承認する

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

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

Teams でアプリをサイドロード

最後の手順は、更新された個人用タブ (アプリパッケージ) をMicrosoft Teamsにサイドロードすることです。完了すると、アプリは Teams に加えて、Office と Outlook で実行できるようになります。

Teams アプリケーション (マニフェストアイコンとアプリアイコン) を zip ファイルにパッケージ化します。 Teams ツールキットを使用してアプリを作成した場合は、Teams ツールキットの [展開] メニューまたは [Visual Studio Code のコマンドパレットCtrl+Shift+P] の [Zip Teams メタデータパッケージ] オプションを使用して簡単に行うことができます。
サンドボックステナントアカウントを使用して Teams にログインし、パブリック開発者プレビューを使用していることを確認します。ユーザープロファイルの省略記号 (...) メニューをクリックし、About を開いて 開発者プレビュー オプションがオンになっていることを確認します。
[アプリ] ウィンドウを開き、[カスタムアプリのアップロード] をクリックし、自分または自分のチームにアップロード します。
アプリパッケージを選択し、[開く] をクリックします。

Teams を介してサイドロードされると、個人用タブは Outlook と Office で利用できるようになります。アプリを Teams にサイドロードするために使用したのと同じ資格情報でサインインしてください。

アプリをピン留めしてすばやくアクセスすることも、左側のサイドバーにある最近のアプリケーション間の省略記号 (...) ポップアップでアプリを見つけることもできます。

注意

Teams でアプリをピン留めしても、Office.com または Outlook のアプリとしてピン留めすることはできません。

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

Teams 個人用タブをアップグレードし、Teams にサイドロードすると、Windows、Web、Outlook Windows、および Web (office.com) の Office で実行されます。これらの Microsoft 365 エクスペリエンスからプレビューする方法を次に示します。

Windows での Outlook

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

Outlook を起動し、開発テナントアカウントを使用してサインインします。
サイドバーの省略記号 (...) をクリックします。サイドロードされたアプリタイトルは、インストールされているアプリの中に表示されます。
アプリアイコンをクリックして、Outlook でアプリを起動します。

Outlook デスクトップクライアントのサイドバーにある楕円（[その他のアプリ]）オプションをクリックして、インストールされている個人用タブを表示する

Outlook on the web

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

Outlook on the web に移動し、開発テナントアカウントを使用してサインインします。
サイドバーの省略記号 (...) をクリックします。サイドロードされたアプリタイトルは、インストールされているアプリの中に表示されます。
アプリアイコンをクリックして、Outlook on the web で実行されているアプリを起動してプレビューします。

outlook.com のサイドバーにある楕円 ([その他のアプリ]) オプションをクリックして、インストールされている個人用タブを表示する

Windows での Office

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

Office を起動し、開発テナントアカウントを使用してサインインします。
サイドバーの省略記号 (...) をクリックします。サイドロードされたアプリタイトルは、インストールされているアプリの中に表示されます。
アプリアイコンをクリックして、Office でアプリを起動します。

Office デスクトップクライアントのサイドバーにある楕円（[その他のアプリ]）オプションをクリックして、インストールされている個人用タブを表示する

Office on the web

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

テストテナント資格情報を使用して office.com にログインします。
サイドバーの省略記号 (...) をクリックします。サイドロードされたアプリタイトルは、インストールされているアプリの中に表示されます。
アプリアイコンをクリックして、Office on the web でアプリを起動します。

office.com のサイドバーにある楕円 ([その他のアプリ]) オプションをクリックして、インストールされている個人用タブを表示する

次の手順

Outlook および Office 対応の個人用タブはプレビュー段階にあり、運用環境での使用ではサポートされていません。テスト目的で個人用タブアプリをプレビュー対象ユーザーに配布する方法を次に示します。

シングルテナント配布

Outlook および Office 対応の個人用タブは、次の 3 つの方法のいずれかで、テスト (または運用環境) テナント全体でプレビュー対象ユーザーに配布できます。

Teams クライアント

[アプリ] メニューから、[アプリの管理] > [アプリを組織に送信] の順に選択します。これには、IT 管理者の承認が必要です。

‎Microsoft Teams 管理センター

Teams 管理者は、組織のテナント用のアプリパッケージを [Teams admin] からアップロードしてプレインストールできます。詳細については、「Microsoft Teams 管理センターでカスタムアプリをアップロードする」を参照してください。

Microsoft Admin Center

グローバル管理者は、[Microsoft 管理者]からアプリパッケージをアップロードして事前インストールできます。詳細については、「統合アプリポータルのパートナーによる Microsoft 365 Apps のテストとデプロイ」に関する説明を参照してください。

マルチテナント分布

Microsoft AppSource への配布は、Outlook および Office 対応の Teams 個人用タブの初期開発者向けプレビューではサポートされていません。