次の方法で共有


前提条件

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 クライアント ホストでアプリが引き続きレンダリングされるようにします。

    1. TeamsJS ライブラリを v.2.19.0 以降に更新します。 TeamsJS の最新リリースの詳細については、「 Microsoft Teams JavaScript クライアント ライブラリ」を参照してください。

    2. アプリの コンテンツ セキュリティ ポリシー (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 2022ASP.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 タブをビルドする

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

関連項目