前提条件

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

  • X-Frame-Options と Content-Security-Policy HTTP 応答ヘッダーを使用して、iFrame でタブ ページを検出できるようにします。

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

    注意

    デフォルトのブラウザの動作に依存するのではなく、Cookieの使用目的を設定することをお勧めします。 詳細については、「SameSite cookie 属性」を参照してください。

  • ブラウザの同一生成元ポリシーの制限により、Web ページが提供された Web ページとは異なるドメインにリクエストを送信することはできません。 そのため、構成ページまたはコンテンツ ページを別のドメインまたはサブドメインにリダイレクトできます。 クロスドメイン ナビゲーション ロジックでは、Teams クライアントが、タブを読み込んだり通信したりするときに、アプリ マニフェストの静的な validDomains リストに対してオリジンを検証できるようにする必要があります。

  • Teams クライアントのテーマ、デザイン、および意図に基づいてタブのスタイルを設定します。 タブは、特定のニーズに対応し、タブのチャネル位置に関連するタスクの小さなセットまたはデータのサブセットに焦点を当てるように構築されている場合に最適に機能します。

  • コンテンツ ページ内で、スクリプト タグを使用して、Microsoft Teams JavaScript クライアント SDK への参照を追加します。 ページが読み込まれたら、microsoftTeams.initialize() への呼び出しを行います。それ以外の場合、ページは表示されません。

  • モバイル クライアントで認証を機能させるには、Teams JavaScript SDK 1.4.1 以降にアップグレードする必要があります。

  • Teams モバイル クライアントに 、チャネル/グループ タブを表示するように選択した場合、setSettings() の構成には websiteUrl プロパティの値を設定する必要があります。

  • [Microsoft Teams] タブでは、自己署名証明書を使用するイントラネット Web サイトを読み込む機能はサポートされません。

タブを作成するツール

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

Teams タブをビルドする

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

関連項目