次の方法で共有

コンテンツ ページを作成する

  • [アーティクル]

コンテンツ ページは、開発者がタブのコンテンツを追加できるクライアント内Microsoft Teams表示される基本レベルの Web ページです。これにより、Teams クライアント内で Web コンテンツをシームレスに統合し、ユーザーにとってよりイマーシブで魅力的な環境を作成できます。 たとえば、コンテンツ ページを使用して、カスタム データの表示、サード パーティサービスの統合、よりパーソナライズされたユーザー エクスペリエンスの作成を行うことができます。 コンテンツ ページは、次のいずれかのタブを作成するために必要です。

  • 個人用スコープのカスタム タブ: この場合、コンテンツ ページはユーザーが最初に見つけるページです。
  • チャネルまたはグループのカスタム タブ: コンテンツページは、ユーザーが適切なコンテキストでタブをピン留めし、構成した後に表示されます。
  • ダイアログ: コンテンツ ページを作成し、ダイアログ内に Web ビューとして埋め込むことができます (TeamsJS v1.x ではタスク モジュールと呼ばれます)。 ページはモーダル ポップアップ内にレンダリングされます。

チャネルまたはグループ、または個人用スコープ内にタブを追加する必要がある場合は、タブに HTML コンテンツ ページを表示します。静的タブの場合、コンテンツ URL は アプリ マニフェストで直接設定されます。

この記事は、コンテンツ ページをタブとして使用する方法に固有です。ただし、ここでのほとんどのガイダンスは、コンテンツ ページがユーザーに表示される方法に関係なく適用されます。

注:

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

タブのコンテンツとデザインのガイドライン

タブの全体的な目的は、実用的な価値と明確な目的を持つ有意義で魅力的なコンテンツへのアクセスを提供することです。

タブデザインのクリーン、直感的なナビゲーション、コンテンツのイマーシブ化に焦点を当てる必要があります。 詳細については、「 タブデザインガイドライン 」と 「ストアの検証ガイドラインMicrosoft Teams」を参照してください。

コードを Teams と統合する

Teams でページを表示するには、 コードに Microsoft Teams JavaScript クライアント ライブラリ (TeamsJS) を含め、ページの読み込み後に app.initialize() を呼び出す必要があります。

注:

コンテンツまたは UI の変更がキャッシュのためにタブ アプリに反映されるまでに、24 時間から 48 時間ほどかかります。

次のコードは、ページと Teams クライアントの通信方法の例です。

<!DOCTYPE html>
<html>
<head>
...
    <script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
      integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
      crossorigin="anonymous" >
    </script>
    <script>
    // Initialize the library
    await microsoftTeams.app.initialize();
    </script>
</head>
<body>
...<h1>Personal Tab</h1>
  <p><img src="/assets/icon.png"></p>
  <p>This is your personal tab!</p>
</body>
</html>

個人用タブにコンテンツ ページを作成して追加する方法の詳細については、「コンテンツ ページをタブに追加する」を参照してください。

次の画像は、HTML コンテンツ ページの構成と、タブ内のコンテンツ ページの出力を示しています。

コンテンツ ページの構成

Visual Studio の html コンテンツ ページを示すスクリーンショット。

Web での出力

スクリーンショットは、Web のコンテンツ ページの出力を示しています。

タブの出力

[チーム] タブのコンテンツ ページの出力を示すスクリーンショット。

追加のコンテンツにアクセスする

TeamsJS を使用して Teams と対話し、ディープ リンクを作成し、ダイアログを使用して、URL ドメインが validDomains 配列に含まれているかどうかを確認することで、追加のコンテンツにアクセスできます。

  • TeamsJS を使用して Teams と対話する: Microsoft Teams JavaScript クライアント ライブラリ には、コンテンツ ページの開発中に役立つ多くの機能が用意されています。

  • ディープ リンク: Teams でエンティティへのディープ リンクを作成できます。 これらは、タブ内のコンテンツと情報に移動するリンクを作成するために使用されます。詳細については、「 Teams でコンテンツと機能へのディープ リンクを作成する」を参照してください。

  • ダイアログ: ダイアログは、タブからトリガーできるモーダル ポップアップ エクスペリエンスです。コンテンツ ページのダイアログを使用して、追加情報の収集、リスト内のアイテムの詳細の表示、またはユーザーに追加情報の表示を行うフォームを表示します。 ダイアログ自体は、追加のコンテンツ ページにすることも、アダプティブ カードを使用して完全に作成することもできます。 詳細については、 タブでのダイアログの使用に関するページを参照してください。

  • 有効なドメイン: タブで使用されるすべての URL ドメインが、アプリ マニフェストのvalidDomains配列に含まれていることを確認します。 詳細については、「 validDomains」を参照してください。

注:

タブの主要な機能は Teams 内に存在し、Teams の外部には存在しません。

ネイティブ読み込みインジケーターの表示

タブにネイティブ読み込みインジケーターを構成して表示できます。マニフェスト スキーマ v1.7 以降のネイティブ読み込みインジケーターを指定できます。 たとえば、 タブ コンテンツ ページ、 構成ページ、 削除ページ、 タブ内のダイアログなどです。

注:

モバイル クライアントでの動作は、ネイティブ読み込みインジケーター プロパティでは構成できません。 モバイル クライアントは、コンテンツ ページと iframe ベースのダイアログ全体で既定でこのインジケーターを表示します。 モバイル上のこのインジケーターは、コンテンツをフェッチする要求が行われたときに表示され、要求が完了するとすぐに無視されます。

アプリ マニフェストで showLoadingIndicator : true を指定する場合は、すべてのタブ構成、コンテンツ、削除ページ、およびすべての iframe ベースのダイアログで次の手順を実行する必要があります。

ネイティブ読み込みインジケーターを表示するには、次の手順に従います。

  1. アプリ マニフェストに "showLoadingIndicator": true を追加します。

  2. app.initialize(); を呼び出します。

  3. すべての iframe ベースのコンテンツで app.notifySuccess() を呼び出して、アプリが正常に読み込まれたことを Teams に通知します。 該当する場合、Teams は読み込みインジケーターを非表示にします。 notifySuccessが 30 秒以内に呼び出されない場合、Teams はアプリがタイムアウトしたと見なし、再試行オプションを含むエラー画面を表示します。 アプリの更新の場合、この手順は既に構成されているタブに適用されます。 この手順を実行しない場合は、既存のユーザーのエラー画面が表示されます。 [必須]

  4. 画面に印刷する準備ができていて、アプリケーションのコンテンツの残りの部分を遅延読み込みたい場合は、 app.notifyAppLoaded();を呼び出すことで読み込みインジケーターを手動で非表示にすることができます。 [省略可能]

  5. アプリケーションが読み込まれない場合は、 app.notifyFailure({reason: app.FailedReason.Timeout, message: "failure message"}); を呼び出して、Teams にエラーについて知らせることができます。 message プロパティは使用されないため、エラー メッセージは UI に表示されないため、一般的なエラー画面がユーザーに表示されます。 次のコードは、アプリケーションの読み込みに失敗した場合に示すことができる考えられる理由を定義する列挙体を示しています。

    /* List of failure reasons */
export const enum FailedReason {
    AuthFailed = "AuthFailed",
    Timeout = "Timeout",
    Other = "Other"
}

次の手順

構成ページを作成する

関連項目