Microsoft Teams 用のタブの構築
タブとは、Microsoft Teams に組み込まれている Teams 対応 Web ページです。 これらは、アプリ マニフェストで宣言されたドメインを指す単純な HTML <iframe\> タグであり、個々のユーザーのチーム、グループ チャット、または個人用アプリ内のチャネルの一部として追加できます。 アプリにカスタム タブを含めて独自の Web コンテンツを Teams に埋め込んだり、Teams 固有の機能を Web コンテンツに追加したりできます。 詳細については、「Teams JavaScript クライアント SDK」を参照してください。
重要
現在、カスタム タブは Government Community Cloud (GCC)、GCC-High、国防総省 (DOD) で使用できます。
現在、Teams クライアント SDK は Government Cloud CDN では利用できないので、 npm パッケージ を使用して Teams クライアント SDK を使用し、アプリにバンドルすることをお勧めします。
注意
このトピックでは、Microsoft Teams JavaScript クライアント SDK のバージョン 2.0.0 を反映しています。 以前のバージョンを使用している場合は、v1 と v2 の違いに関するガイダンスについては、Teams JS SDK の概要を参照してください。
次の画像は、個人用タブを示しています:
次の画像は、Contoso チャネル タブを示しています:
タブを操作する前に実行する必要がある前提条件はほとんどありません。
Teams には、個人用タブとチャネル タブ、またはグループ タブの 2 種類があります。 個人用タブは、個人を対象としたボットと共に、個人用アプリの一部であり、1 人のユーザーを対象としています。 簡単にアクセスできるように、左側のナビゲーション バーにピン留めすることができます。 チャネル/グループ タブは、コンテンツをチャネルやグループのチャットに配信します。また、専用の Web ベースのコンテンツまわりに関する共同作業スペースを作成するのに優れた方法です。
コンテンツ ページの作成は、個人用タブ、チャネルまたはグループ タブ、またはタスク モジュールの一部として行えます。 構成ページを作成をすると、ユーザーは Microsoft Teams アプリを構成し、それを使用してチャネルまたはグループのチャット タブ、メッセージ拡張機能、または Office 365 コネクタを構成できます。 インストール後にユーザーがタブを再構成することを許可し、アプリケーションのタブ削除ページを作成できます。 タブを含む Teams アプリをビルドする場合は、Android と iOS の両方の Teams クライアントでタブが機能する方法をテストする必要があります。 タブは、基本情報、ロケールとテーマ情報、および app.Context.page.id または タブにあるものを特定する app.Context.page.subPageId を通してコンテンツを取得する必要があります。
アダプティブ カードを使用してタブを構築し、ボットとタブに別のバックエンドを必要としなくても、すべての Teams アプリ機能を一元化できます。 ステージ ビューは、Teams で全画面表示で開かれ、タブとしてピン留めされるコンテンツをレンダリングできる新しい UI コンポーネントです。既存のリンク展開サービスが更新され、アダプティブ カードとチャット サービスを使用して URL をタブに変換するために使用されます。 タブ全体について話し合うのではなく、特定のタスク、患者、営業案件など、タブ内のサブエンティティに関する会話を行うことができる会話型サブエンティティを使用して会話タブを作成できます。タブ マージン に変更を加えると、アプリのビルド時の開発者エクスペリエンスを向上させることができます。 タブをドラッグして目的の位置に配置すると、個人用アプリやチャネルまたはグループ チャット内のタブ位置を交換できます。
注意
投稿 と ファイル の位置は移動できません。
タブ機能
タブ機能は次のとおりです。
- タブがボットも含まれるアプリに追加されると、ボットもチームに追加されます。
- 現在のユーザーの Microsoft Azure Active Directory (Azure AD) ID の認識。
- 言語が
en-usであることを示すユーザーのロケール認識。 - サポートされている場合、シングル サインオン (SSO) 機能があります。
- ボットやアプリの通知を使用して、タブや、個々の作業項目などのサービス内のサブ エンティティにディープ リンクできます。
- タブ内のリンクからタスク モジュールを開くことができます。
- タブ内で SharePoint Web パーツを再利用できます。
タブのユーザー シナリオ
シナリオ: Teams 内に既存の Web ベース リソースを取得します。
例: 情報提供企業の Web サイトをユーザーに提供する Teams アプリに [個人] タブを作成します。
シナリオ: Teams ボットまたはメッセージ拡張機能にサポート ページを追加します。
例: 作成する個人タブは について と ヘルプの を、Web ページ コンテンツをユーザーに提供します。
シナリオ: 協力対話と共同作業のためにユーザーが定期的にやり取りするアイテムへのアクセスを提供します。
例: 個々のアイテムにディープ リンクを設定したチャネルまたはグループ タブを作成します。
タブのしくみを理解する
次のいずれかの方法を使用してタブを作成できます:
アプリ マニフェストでカスタム タブを宣言する
カスタム タブは、アプリ パッケージのアプリ マニフェストで宣言されます。 アプリのタブとして含める Web ページごとに、URL と範囲を定義します。 また、Teams JavaScript クライアント SDK をページに追加して、ページの読み込みが終了したら app.initialize() を呼び出す必要があります。 Teams はページを表示し、Teams 固有の情報 (Teams クライアントがダーク テーマを実行しているなど) へのアクセスを提供します。
チャネル/グループ または 個人 スコープ内でタブを表示するかどうかを選択した場合は、タブに <iframe 付き> HTML コンテンツ ページを表示する必要があります。個人用タブの場合、コンテンツ URL は staticTabs 配列内の contentUrl プロパティによって Teams アプリのマニフェストに直接設定されます。タブのコンテンツはすべてのユーザーに対して同じです。
注意
Teams アプリはサブ iframe を認識しません。 そのため、タブ アプリ内に iframe がある場合は読み込まれません。
チャネル タブまたはグループ タブの場合は、追加の構成ページを作成することもできます。 このページでは、コンテンツ ページの URL を構成できます。通常、URL クエリ文字列パラメーターを使用して、そのコンテキストに適したコンテンツを読み込みます。 これは、チャネル/グループ タブを複数のチームまたはグループ チャットに追加できるためです。 以降にインストールが行われるたびに、ユーザーはタブを構成して、必要に応じてエクスペリエンスを調整することが出来ます。 ユーザーがタブを追加またはタブを構成すると、Teams ユーザー インターフェイス (UI) に表示されているタブに URL が関連付けられます。 タブの構成は、その URL に追加のパラメーターを追加するだけです。 たとえば、Azure Boards タブを追加すると、構成ページで、タブにロードするボードを選択することができます。 構成ページの URL は、アプリ マニフェストの configurableTabs 配列の configurationUrl プロパティで指定します。
複数のチャネルまたはグループ タブと、アプリごとに最大 16 個の個人用タブを使用できます。