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. [ My First Meeting App>Create ] を選択し、ワークスペースを作成するフォルダーを指定します。

   

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

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

   

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

   

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

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

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

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

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

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

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

{
    "$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.xの Import ステートメント。
• teams-js@2.x.xの関数、列挙型、およびインターフェイスの呼び出し。
• 新しい "TODO" コメント リマインダーは、 コンテキスト インターフェイスの変更によって影響を受ける可能性がある領域にフラグを付けます。
• コールバック関数を promise に変換するための新しい"TODO"コメント アラーム。

注:

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

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

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

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

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

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 で動作します。	表示

関連項目

サポートとフィードバック