前提条件

[アーティクル]
06/14/2024

Teams の個人用およびチャネルまたはグループのタブを作成するときは、次の前提条件を順守していることを確認します。

X-Frame-Options と Content-Security-Policy HTTP 応答ヘッダーを使用して、iFrame 内のタブページの検出を有効にします。
すべての Teams アプリページが HTTPS エンドポイントでホストされていることを確認します。

コンテンツセキュリティポリシーヘッダーを設定して、Teams とアプリの他のホストアプリケーションを許可します。

Microsoft 365 アプリホスト	frame-ancestor 権限
すべてのホスト (新規)	`*.cloud.microsoft`
Teams	`teams.microsoft.com`, `*.teams.microsoft.com`
Microsoft 365 アプリ	`.microsoft365.com`, `.office.com`,
Outlook	`outlook.office.com`, `outlook.office365.com`, `outlook-sdf.office.com`, `outlook-sdf.office365.com`

警告

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

TeamsJS ライブラリを v.2.19.0 以降に更新します。 TeamsJS の最新リリースの詳細については、「 Microsoft Teams JavaScript クライアントライブラリ」を参照してください。
アプリのコンテンツセキュリティポリシー (CSP) ヘッダーを定義している場合は、 frame-ancestors ディレクティブを更新して、 *.cloud.microsoft ドメインを含めます。移行中に下位互換性を確保するには、CSP ヘッダーに既存の frame-ancestors 値を保持します。この方法により、既存および将来の Microsoft 365 ホストアプリケーションの両方でアプリが引き続き動作し、以降の変更の必要性が最小限に抑えられます。

アプリの CSP ヘッダーの frame-ancestors ディレクティブで次のドメインを更新します。

https://*.cloud.microsoft

注:

アプリ内で他の Teams または Microsoft 365 アプリをホストするには、アプリを Microsoft 365 環境にアップグレードします。入れ子になったフレームで実行されているアプリを管理する場合は、ドメインを指定して SDK を初期化するようにコードを更新できます。これにより、入れ子になったフレームを Teams のプロキシとして機能できます。

Internet Explorer 11 との互換性を保つには、X-Content-Security-Policy を設定します。または、ヘッダー X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/ を設定します。このヘッダーは非推奨ですが、ほとんどのブラウザーでは引き続き受け入れられます。
サインインページは、クリックジャッキングを防ぐ手段として iFrames ではレンダリングされません。認証ロジックは、リダイレクト以外の方法を使用する必要があります。たとえば、トークンベースまたは Cookie ベースの認証を使用します。

注:

デフォルトのブラウザの動作に依存するのではなく、Cookieの使用目的を設定することをお勧めします。詳細については、「SameSite cookie 属性」を参照してください。
ブラウザの同一生成元ポリシーの制限により、Web ページが提供された Web ページとは異なるドメインにリクエストを送信することはできません。そのため、構成ページまたはコンテンツページを別のドメインまたはサブドメインにリダイレクトできます。クロスドメインナビゲーションロジックでは、Teams クライアントがタブの読み込みまたは通信時に、アプリマニフェストの静的なvalidDomainsリストに対して配信元を検証できるようにする必要があります。
Teams クライアントのテーマ、デザイン、および意図に基づいてタブのスタイルを設定します。タブは、特定のニーズに対処し、タブのチャネルの場所に関連する少数のタスクセットまたはデータのサブセットに焦点を当てるときに最適に機能します。
コンテンツページ内で、スクリプトタグを使用 Microsoft Teams JavaScript クライアントライブラリへの参照を追加します。ページが読み込まれたら、 app.initialize()を呼び出すか、ページが表示されません。
モバイルクライアントで認証を機能させるには、TeamsJS バージョン 1.4.1 以降にアップグレードする必要があります。
Teams モバイルクライアントに、チャネル/グループタブを表示するように選択した場合、setConfig() の構成には websiteUrl プロパティの値を設定する必要があります。
[Microsoft Teams] タブでは、自己署名証明書を使用するイントラネット Web サイトを読み込む機能はサポートされていません。

注:

このトピックでは、Microsoft Teams JavaScript クライアントライブラリ (TeamsJS) のバージョン 2.0.x を反映しています。以前のバージョンを使用している場合は、最新の TeamsJS と以前のバージョンの違いに関するガイダンスについては、TeamsJS ライブラリの概要を参照してください。

タブを作成するツール

	インストール	使用するには...
必須
	Node.js	バックエンド JavaScript ランタイム環境。最新の v16 LTS リリースを使用します。
	Microsoft Edge (推奨) または Google Chrome	開発者ツールを備えたブラウザー。
	Visual Studio Code	JavaScript、TypeScript、または SharePoint Framework (SPFx) ビルド環境。
	Visual Studio 2022、 ASP.NET、Web 開発ワークロード	.NET. Visual Studio 2022 の無料コミュニティエディションをインストールできます。
	Git	GitHub のサンプルアプリリポジトリを使用するには、Git を使用します。
	Microsoft Teams	Microsoft Teams を使用して、チャット、会議、通話用のアプリを通じて共同作業を行うすべてのユーザーと 1 か所で共同作業を行うことができます。
	ngrok	Ngrok はリバースプロキシソフトウェアツールです。 Ngrok は、ローカルで実行されている Web サーバーのパブリックに利用可能な HTTPS エンドポイントへのトンネルを作成します。サーバーの Web エンドポイントは、コンピューター上の現在のセッション中に使用できます。デバイスをシャットダウンまたはスリープ状態にすると、サービスは使用できなくなります。
	Teams の開発者ポータル	組織やMicrosoft Teams ストアなど、Teams アプリを構成、管理、配布するための Web ベースのポータル。

Teams タブをビルドする

次に、タブをビルドしましょう。ただし、最初にビルドするタブの選択を選択します。

個人用のタブを作成する

[チャネルとグループ] タブを作成する

次の方法で共有

前提条件

タブを作成するツール

Teams タブをビルドする

関連項目

その他のリソース