Microsoft Teams タブとはWhat are Microsoft Teams tabs?

タブとは、Microsoft Teams に組み込まれている Teams 対応 Web ページです。Tabs are Teams-aware webpages embedded in Microsoft Teams. これらは簡単な HTML <iFrame > タブで、アプリ マニフェストで宣言されたドメインを指していて、チーム内のチャネル、グループ チャット、または個々のユーザー用の個人用アプリとして追加できます。They are simple HTML <iframe> tags that point to domains declared in the app manifest and can be added as part of a channel inside a team, group chat, or personal app for an individual user. アプリにカスタム タブを含めて独自の Web コンテンツを Teams に埋め込んだり、Teams 固有の機能を Web コンテンツに追加したりできます。You can include custom tabs with your app to embed your own web content in Teams or add Teams-specific functionality to your web content. こちらを参照くださいTeams JavaScript client SDKSee Teams JavaScript client SDK.

注意

Chrome 80 (2020 年初頭にリリース予定) では、新しい Cookie 値を紹介し、既定で Cookie ポリシーを設定します。Chrome 80, scheduled for release in early 2020, introduces new cookie values and imposes cookie policies by default. 既定のブラウザーの動作を利用するのではなく、Cookie に対して使用する目的を設定することをお勧めします。It's recommended that you set the intended use for your cookies rather than rely on default browser behavior. SameSite Cookie 属性 (2020 更新プログラム)」を 参照してくださいSee SameSite cookie attribute (2020 update).

Teams では、チャネル/グループ および 個人 の 2 種類のタブが利用可能です。There are two types of tabs available in Teams — channel/group and personal. チャネル/グループ タブは、コンテンツをチャネルやグループのチャットに配信します。また、専用の Web ベースのコンテンツまわりに関する共同作業スペースを作成するのに優れた方法です。Channel/group tabs deliver content to channels and group chats, and are a great way to create collaborative spaces around dedicated web-based content. [個人] タブは、個人を対象としたボットと共に、個人用アプリの一部であり、1 人のユーザーを対象としています。Personal tabs, along with personally-scoped bots, are part of personal apps and are scoped to a single user. 簡単にアクセスできるように、左側のナビゲーション バーにピン留めすることができます。They can be pinned to the left navigation bar for easy access.

あまり知られていないタブの機能Lesser known tab features

  • タブがボットも含まれるアプリに追加されると、ボットもチームに追加されます。If a tab is added to an app that also has a bot, the bot is added to the team as well.
  • 現在のユーザーの Azure Active Directory (Azure AD) ID の認識。Awareness of Azure Active Directory (Azure AD) ID of the current user.
  • en-us などの言語を示すユーザーのロケールを認識します。Locale awareness for the user to indicate language, i.e., en-us.
  • サポートされている場合、シングル サインオン (SSO) 機能があります。Single sign-on (SSO) capability, if supported.
  • ボットやアプリの通知を使用して、タブや、個人の作業項目などのサービス内のサブ エンティティにディープ リンクできます。Ability to use bots or app notifications to deep link to the tab or to a sub-entity within the service, e.g., an individual work item.
  • タブ内のリンクからタスク モジュールを開くことができます。The ability to open a task module from links within a tab.
  • タブ内で SharePoint Web パーツを再利用できます。Reuse of SharePoint web parts within the tab.

タブのユーザー シナリオTabs user scenarios

シナリオ: Teams 内に既存の Web ベース リソースを取得します。Scenario: Bring an existing web-based resource inside Teams.
例: 情報提供企業の Web サイトをユーザーに提供する Teams アプリに [個人] タブを作成します。Example: You create a personal tab in your Teams app that presents an informational corporate website to users.

シナリオ: Teams ボットまたはメッセージング拡張機能にサポート ページを追加します。Scenario: Add support pages to a Teams bot or messaging extension.
例: 作成する個人タブは についてヘルプの を、Web ページ コンテンツをユーザーに提供します。Example: You create personal tabs that provide about and help webpage content to users.

シナリオ: 協力対話と共同作業のためにユーザーが定期的にやり取りするアイテムへのアクセスを提供します。Scenario: Provide access to items that your users interact with regularly for cooperative dialogue and collaboration.
例: 個々のアイテムに詳細なリンクを設定した [チャネル/グループ] タブを作成します。Example: You create a channel/group tab with deep linking to individual items.

タブのしくみHow do tabs work?

カスタム タブは、アプリ パッケージのアプリ マニフェストで宣言されます。A custom tab is declared in the app manifest of your app package. アプリのタブとして含める Web ページごとに、URL と範囲を定義します。For each webpage you want included as a tab in your app, you define a URL and a scope. また、Teams JavaScript クライアント SDK をページに追加して、ページの読み込みが終了したら microsoftTeams.initialize() を呼び出す必要があります。Additionally, you need to add the Teams JavaScript client SDK to your page, and call microsoftTeams.initialize() after your page loads. この操作を行うと、Teams にページが表示されるようになり、Teams 固有の情報 (たとえば、Teams クライアントが 濃色テーマ を実行している場合) へのアクセスが出来、結果に基づいてアクションを実行できるようになります。Doing so will tell Teams to display your page, give you access to Teams-specific information (for example if the Teams client is running the dark theme), and allow you to take action based on the results.

チャネル/グループ または 個人 スコープ内でタブを表示するかどうかを選択した場合は、タブに <iframe 付き>HTMLコンテンツ ページを表示する必要があります。個人 タブの場合、コンテンツ URL はstaticTabs配列内のcontentUrlプロパティによってTeams アプリのマニフェストに直接設定されます。Whether you choose to expose your tab within the channel/group or personal scope, you'll need to present an <iframe> HTML content page in your tab. For personal tabs, the content URL is set directly in your Teams app manifest by the contentUrl property in the staticTabs array. タブの内容は、すべてのユーザーに対して同じになります。Your tab's content will be the same for all users.

チャネル/グループ タブの場合は、ユーザーがコンテンツ ページの URL を構成するための追加の構成ページも作成する必要があ、,通常は、URL クエリ文字列パラメーターを使用し、そのコンテキストに適したコンテンツを読み込みます。For channel/group tabs, you also need to create an additional configuration page that allows users to configure your content page URL, typically by using URL query string parameters to load the appropriate content for that context. これは、チャネル/グループ タブを複数のチームまたはグループ チャットに追加できるためです。This is because your channel/group tab can be added to multiple different teams or group chats. 以降にインストールが行われるたびに、ユーザーはタブを構成して、必要に応じて操作を調整することが出来ます。On each subsequent install, your users will be able to configure the tab, allowing you to tailor the experience as needed. ユーザーがタブを追加、またはタブを構成すると、Teams UI に表示されているタブに URL が関連付けられます。When users add or configure a tab, a URL is being associated with the tab that is presented in the Teams UI. タブの構成は、その URL にさらにパラメーターを追加するだけです。Configuring a tab is simply adding additional parameters to that URL. たとえば、Azure Boards タブを追加すると、構成ページで、タブにロードするボードを選択することができます。For example, when you add the Azure Boards tab, the configuration page allows you to choose which board the tab will load. 構成ページの URL は、アプリ マニフェストの configurableTabs 配列の configurationUrl プロパティで指定します。The configuration page URL is specified by the configurationUrl property in the configurableTabs array in your app manifest.

1 つのアプリに対して、最大 1 つの [チャネル/グループ] タブと、最大 16 個の [個人] タブを設定できます。You can have a maximum of one (1) channel/group tab and up to sixteen (16) personal tabs per app.

モバイル クライアントMobile clients

チャネルまたはグループ タブを Teams モバイル クライアントに表示する場合、構成にはプロパティの setSettings() 値が必要 websiteUrl です。If you choose to have your channel or group tab appear on Teams mobile clients, the setSettings() configuration must have a value for the websiteUrl property. 最適なユーザー エクスペリエンスを実現するには、タブ を作成するときに モバイル上のタブのガイダンスに従う必要があります。To ensure optimal user experience, you must follow the guidance for tabs on mobile when creating your tabs. Appsource を介して配布されるアプリには、モバイル クライアントに対する個別の承認プロセスがあります。Apps that are distributed through Appsource have a separate approval process for mobile clients. このようなアプリの既定の動作は次のとおりです。The default behavior of such apps is as follows:

アプリの機能App Capability アプリが承認された場合の動作Behavior if app is approved アプリが承認されていない場合の動作Behavior if app is not approved
静的タブStatic Tabs モバイル クライアントの下部バーにアプリが表示されます。App appears in the bottom bar of the mobile clients. Teams クライアントでタブが開きます。Tabs open in the Teams client. モバイル クライアントの下部バーにアプリが表示されません。App does not appear in the bottom bar of the mobile clients.
構成可能なタブConfigurable Tabs タブが Teams クライアントで開きます contentUrlThe tab opens in the Teams client using contentUrl. タブは、 を使用して Teams クライアントの外部のブラウザーで開きます websiteUrlThe tab opens in a browser outside the Teams client using websiteUrl.

注意

  • アプリの既定の動作は、Teams ストア (AppSource) を通じて配布される場合にのみ適用されます。The default behavior of the apps is only applicable if they are distributed through the Teams store (AppSource). 他の配布方法を通じて配布されるアプリの承認 プロセスはありませんThere is no approval process for apps distributed through other distribution methods. 既定では、Teams クライアントですべてのタブが開きます。By default, all tabs open in the Teams client.
  • モバイルに優しいアプリの評価を開始するには、アプリの詳細teamsubm@microsoft.com確認してください。To initiate an evaluation of your app for mobile-friendliness, reach out to teamsubm@microsoft.com with your app details.