Teams 会議アプリを Outlook に拡張する

Microsoft 365 エコシステム全体で、ほとんどの月次ユーザーが Outlook から Microsoft Teams 会議をスケジュールします。 ユーザーが作業フローを維持できるように、Teams 会議アプリが Outlook でサポートされるようになりました。 Outlook からスケジュールされた Teams 会議に会議アプリを構成して追加したり、Outlook 予定表内で会議アプリを実行したりできます。

会議アプリは、基本的に Teams タブ アプリであり、会議の前後のコラボレーションを促進するように設計されています。 会議アプリがサポートするコンテキストは、アプリ マニフェスト (以前は Teams アプリ マニフェストと呼ばれます) から 、configurableTabs.context プロパティを使用して指定できます。

注:

configurableTabsさらに、会議アプリは、Outlook で使用できるようにするために、個人用スコープ (たとえば) staticTabsに少なくとも 1 つのアプリ機能を含める必要があります。

次の表は、Outlook でサポートされている Teams 会議アプリのコンテキストを示しています。

Teams 会議コンテキスト	アプリ マニフェストの値	TeamsJS の値	Outlook のサポート
会議の詳細ビュー	meetingDetailsTab	frameContext.content	✔️
会議チャット ビュー	meetingChatTab	frameContext.content	✔️
会議のサイド パネル ビュー	meetingSidePanel	frameContext.sidePanel	✔️
会議ステージビュー	meetingStage	frameContext.meetingStage	❌

会議アプリが Stageview、その他の会議内効果をサポートしている場合、またはメッセージ拡張機能やボットなどの機能が含まれている場合、これらは引き続き Teams で機能します。会議は Outlook からスケジュールされているが、Outlook では表示または実行されません。

前提条件

Outlook で Teams 会議アプリをプレビューするには、次のことを確認します。

• アップロードが有効になっている Microsoft 365 開発者サンドボックス テナント。
• Microsoft 365 Apps 現在のチャネルからインストールされた Outlook for Windows デスクトップを使用したテスト環境。
• NodeJS (npm を使用) がインストールされています。
• npm からインストールされた TeamsFx CLI v2 ライブラリ。
• 開発環境にインストールされている Visual Studio Code。
• Visual Studio Code 用 Teams Toolkit 拡張機能。

Outlook で Teams 会議アプリをプレビューするには、Teams Toolkit を使用して新しい会議アプリを構築するか、Outlook で既存の Teams 会議アプリを拡張します。

Outlook 用 Teams 会議アプリを構築する

Visual Studio Code 用 Teams Toolkit 拡張機能を使用して、Outlook 用の Teams 会議アプリを構築できます。 Outlook でプレビューする Teams 会議アプリを構築するには:

1. Teams に移動し、サンドボックス テナント アカウントを使用してサインインします。

2. [ 予定表>] [新しい会議] を選択し、会議をスケジュールします。

   

3. Visual Studio Code で Teams Toolkit 拡張機能を開き、[ サンプルの表示] を選択します。

4. [ マイ ファースト ミーティング アプリ>の作成] を選択し、ワークスペースを作成するフォルダーを指定します。

   

5. F5 キーを押して、Teams でサンプルをデバッグしてローカルで実行します。 アプリのインストールを求めるメッセージが表示されます。

6. ドロップダウンから [ 会議に追加] を選択し、前にスケジュールした会議を選択します。

   

7. サンプル タブ構成を選択し、[ 保存] を選択します。 アプリは会議チャット ビューで使用できます。

   

既存の Teams 会議アプリを Outlook に拡張する

Outlook で既存の Teams 会議アプリを拡張するには、次のことを確認します。

• アプリ マニフェストを更新します。
• Microsoft Teams JavaScript クライアント ライブラリ (TeamsJS) v2.5.0 以降を使用します。
• コンテンツ セキュリティ ポリシー ヘッダーを構成します。
• シングル サインオン (SSO) Microsoft Entraアプリの登録を更新します。
• Teams 管理 センターで更新したアプリをアップロードします。

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

アプリ マニフェストを更新する

アプリ マニフェスト (以前は Teams アプリ マニフェストと呼ばれる) スキーマ バージョンを 1.13 以降に更新します。

Teams アプリ マニフェストを開き、 プロパティと manifestVersion プロパティを$schema次のように更新します。

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

TeamsJS バージョン 2.5.0 以降を使用する

TeamsJS クライアント ライブラリ バージョン 2.5.0 以降を使用して、Teams 会議アプリを Outlook で実行するように拡張します。 アプリで TeamsJS v2.5.0 以降を使用している場合、Outlook でアプリケーション コードを変更する必要はありません。

TeamsJS npm パッケージを v1.x.x から最新の v2.x.x TeamsJS にアップグレードする必要がある場合は、Teams Toolkit を使用して、必要なコードの変更を特定して自動化できます。 詳細については、「 TeamsJS ライブラリ」を参照してください。

Teams Toolkit を使用して TeamsJS を最新バージョンに更新するには、次の手順に従います。

1. Visual Studio Code でアプリを開き、[ Teams Toolkit 拡張機能] を選択します。
2. [ 表示] で、[ コマンド パレット...] または Ctrl + Shift + P を選択します。
3. コマンドTeams: Upgrade Teams JS SDK and code referencesを実行します。

package.json ファイル参照@microsoft/teams-js@2.x.xとファイル*.js/.ts*.jsx/.tsxは、次の方法で更新されます。

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

注:

Teams Toolkit を使用して最新の TeamsJS バージョンにアップグレードしても、html ファイル内のコードは更新されません。 html ファイルは手動で更新する必要があります。

Outlook の CSP ヘッダーを構成する

Teams タブ アプリケーションは、Teams の場合と同様に、Outlook の iframe 要素 内でホストされます。 アプリでコンテンツ セキュリティ ポリシー (CSP) ヘッダーを使用する場合は、フレーム先祖としてを追加outlook.office.comします。

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

会議アプリMicrosoft Entraシングル サインオン (SSO) は、Teams と同じように Outlook で動作します。 ただし、Microsoft Entra アプリの登録に Outlook アプリケーション ID を手動で追加する必要があります。

1. テスト テナント アカウントでAzure portalにサインインします。

2. [アプリ登録] を開きます。

3. アプリを選択します。

4. [管理] [API の公開] の順に選択します>。

5. [ 承認されたクライアント アプリケーション ] セクションで、次 Client Id の値を追加します。

   Microsoft 365 クライアント アプリケーション	クライアント ID
   Outlook デスクトップ	d3590ed6-52b3-4102-aeff-aad2292ab01c

   Microsoft 365 全体で Teams アプリを拡張するために使用されるクライアント アプリケーション ID の詳細については、「 Microsoft 365 と Outlook の Teams タブ」を参照してください。

Teams 管理センターでカスタム アプリをアップロードし、Outlook で会議アプリをプレビューできます。

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

Microsoft 365 と Outlook でアプリをテストするには、 アプリ パッケージ を Teams 管理センターにアップロードします。

1. Teams アプリ マニフェスト と アプリ アイコン を zip ファイルにパッケージ化します。 Teams Toolkit を使用してアプリ パッケージを作成するには、「アプリ パッケージのビルド」を参照してください。

2. Teams 管理センターに移動し、[Teams アプリ] [アプリ>の管理] の順に選択します。

3. [ 新しいアプリのアップロード] を選択し、アプリ パッケージを選択します。

会議アプリが Teams 管理センターにアップロードされると、Teams と Outlook の両方で使用できるようになります。 アプリが [ アプリ ] メニューに表示されるまで数分待ち、Outlook for Windows を再起動します。

Outlook で会議アプリをプレビューする

Outlook for Windows で会議アプリをプレビューするには、アプリがローカルで実行されていることを確認し、次の手順に従います。

1. テスト テナント アカウントでサインインしている Outlook for Windows を開きます。 Outlook が既に実行されている場合は、閉じてもう一度再起動します。

2. 予定表>の [新しい会議] を開きます。 Outlook で会議アプリを実行するには、Outlook からスケジュールされた他の会議がサポートされていないため、会議が Teams 会議 であることを確認します。

3. 会議のスケジュールウィンドウで、[ すべてのアプリ] を選択します。 アップロードした会議アプリは、インストールされている会議アプリの中に表示されます。

   

4. 会議アプリを選択します。 構成ダイアログが表示され、ユーザーは特定の会議に関連するアプリ設定を構成します。

   

5. [追加] を選択します。 会議アプリが [ アプリ ] セクションとスケジュール ウィンドウのサイド パネルに表示されます。

スケジュール ウィンドウでアプリを削除または構成するには、アプリのドロップダウン メニューを選択し、次を選択します。

• 概要: Microsoft Teams ストアにアプリを表示する方法。
• 設定: 特定の会議のアプリ構成を更新します。
• 削除: 会議からアプリを削除します。

コード サンプル

サンプルの名前	説明	Node.js
HelloWorld 会議内アプリ	会議の詳細ビュー、チャット ビュー、サイド パネルを示すシンプルな会議アプリ。 Teams と Outlook で動作します。	表示

関連項目

• Teams アプリを Microsoft 365 全体に拡張する
• サポートとフィードバック