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

• 2021/03/05
• • l

タブとは、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 SDK。See Teams JavaScript client SDK.

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

タブのユーザー シナリオ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: