前提条件
Teams の個人用およびチャネルまたはグループのタブを作成するときは、次の前提条件を順守していることを確認します。
X-Frame-Options と Content-Security-Policy HTTP 応答ヘッダーを使用して、iFrame 内のタブ ページの検出を有効にします。
すべての Teams アプリ ページが HTTPS エンドポイントでホストされていることを確認します。
コンテンツ セキュリティ ポリシー ヘッダーを設定して、Teams とアプリの他の ホスト アプリケーションを 許可します。
警告
Web バージョンの Teams (teams.microsoft.com)、Outlook (outlook.com)、Microsoft 365 (microsoft365.com) ドメインを含む Microsoft のクラウド サービスは、cloud.microsoft ドメインに移行しています。 2024 年 6 月より前に次の手順を実行して、アプリが Teams Web クライアントで引き続きレンダリングされるようにします。
TeamsJS SDK を v.2.19.0 以降に更新します。 TeamsJS SDK の最新リリースの詳細については、「 Microsoft Teams JavaScript クライアント ライブラリ」を参照してください。
Teams アプリの コンテンツ セキュリティ ポリシー ヘッダーを更新して、アプリが teams.cloud.microsoft ドメインにアクセスできるようにします。 Teams アプリが Outlook と Microsoft 365 に拡張されている場合は、アプリが teams.cloud.microsoft、outlook.cloud.microsoft、m365.cloud.microsoft ドメインにアクセスできることを確認します。
Microsoft 365 アプリ ホスト frame-ancestor 権限 Teams teams.microsoft.com,*.teams.microsoft.com,teams.cloud.microsoftMicrosoft 365 アプリ *.microsoft365.com,*.office.com,m365.cloud.microsoftOutlook outlook.live.com,outlook.office.com,outlook.office365.com,outlook-sdf.office.com,outlook-sdf.office365.com,outlook.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 の開発者ポータル | Organizationや Microsoft Teams Store など、Teams アプリを構成、管理、配布するための Web ベースのポータル。 |
Teams タブをビルドする
次に、タブをビルドしましょう。ただし、最初にビルドするタブの選択を選択します。
関連項目
Platform Docs
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示