タブのコンテキストを取得する

タブでは、関連するコンテンツを表示するためのコンテキスト情報が必要です。

  • ユーザー、チーム、または会社に関する基本的な情報。
  • ロケールとテーマの情報。
  • このタブの内容を識別する page.id と page.subPageId (TeamsJS v2.0.0 より前は entityId と subEntityId と呼ばれていました)。

ユーザー コンテキスト

ユーザー、チーム、または会社に関するコンテキストは、次の場合に特に役立ちます。

  • アプリ内のリソースを作成するか、指定したユーザーまたはチームに関連付けます。
  • Microsoft Entra ID またはその他の ID プロバイダーから認証フローを開始し、ユーザーがユーザー名を再入力する必要はありません。

詳細については、「 Microsoft Teams でユーザーを認証する」を参照してください。

重要

このユーザー情報は円滑なユーザー エクスペリエンスを提供するのに役立ちますが、ID の証明として使用することはできません。 たとえば、攻撃者はブラウザーにページを読み込み、有害な情報や要求を提供する可能性があります。

Access コンテキスト情報

コンテキスト情報には 2 つの方法でアクセスできます。

URL プレースホルダー値を挿入してコンテキストを取得する

構成やコンテンツ URL では、プレースホルダーを使用します。 Microsoft Teams では、実際の構成やコンテンツ URL を決定する際に、プレースホルダーを該当する値で置き換えます。 使用可能なプレースホルダーには、 コンテキスト オブジェクトのすべてのフィールドが含まれます。 一般的なプレースホルダーには、次のプロパティが含まれます。

  • {page.id}: ページを最初に 構成するときに定義されたページの開発者定義の一意の ID。 (TeamsJS v2.0.0 より前は {entityId} と呼ばれていました)。
  • {page.subPageId}: このコンテンツが指すサブページの開発者が定義した一意の ID。ページ内の特定のアイテムへの ディープ リンク を生成するときに定義されます。 (TeamsJS v2.0.0 より前は {subEntityId} と呼ばれていました)。
  • {user.loginHint}: Microsoft Entra ID のサインインのヒントとして適した値。 これは通常、ホーム テナント内の現在のユーザーのサインイン名です。 (TeamsJS v2.0.0 より前は {loginHint} と呼ばれていました)。
  • {user.userPrincipalName}: 現在のテナント内の現在のユーザーのユーザー プリンシパル名。 (TeamsJS v2.0.0 より前は {userPrincipalName} と呼ばれていました)。
  • {user.id}: 現在のテナント内の現在のユーザーのMicrosoft Entraオブジェクト ID。 (TeamsJS v2.0.0 より前は {userObjectId} と呼ばれていました)。
  • {app.theme}: 現在のユーザー インターフェイス (UI) のテーマ ( default、 dark、 glass、 contrast など)。 (TeamsJS v2.0.0 より前は {theme} と呼ばれていました)。
  • {team.groupId}: タブが存在する Microsoft 365 グループの ID。 (TeamsJS v2.0.0 より前は {groupId} と呼ばれていました)
  • {user.tenant.id}: 現在のユーザーのMicrosoft Entraテナント ID。 (TeamsJS v2.0.0 より前は {tid} と呼ばれていました)。
  • {app.locale}: languageId-countryId 形式のユーザーの現在のロケール (例: en-us)。 (TeamsJS v2.0.0 より前は {locale} と呼ばれていました)。

注:

  • 以前の {upn} プレースホルダーは、現在では非推奨となっています。 下位互換性を確保するために、これは {user.loginHint} と同義語です。
  • モバイル (Android および iOS) バージョンの Microsoft Teams では、TeamsJS v1.x.x プレースホルダーのみがサポートされています。

たとえば、アプリ マニフェストでタブの configurationUrl 属性を "https://www.contoso.com/config?name={user.loginHint}&tenant={user.tenant.id}&group={team.groupId}&theme={app.theme}" に設定し、サインインしたユーザーに次の属性があるとします。

  • ユーザー名は user@example.com です。
  • 会社のテナント ID は e2653c-etc です。
  • ID 00209384 などの Microsoft 365 グループのメンバーです。
  • ユーザーが Teams のテーマを ダークに設定しました。

タブを構成するときに、Teams は次の URL を呼び出します。

https://www.contoso.com/config?name=user@example.com&tenant=e2653c-etc&group=00209384-etc&theme=dark

Microsoft Teams JavaScript ライブラリを使用してコンテキストを取得する

Microsoft Teams JavaScript クライアント ライブラリを使用してコンテキスト情報を取得することもできます。

情報を取得するには、 microsoftTeams.app.getContext().then((context) => {/*...*/}); を呼び出します。

次のコードでは、コンテキスト変数の例を示します。

{
 "app": {
   "host": {
     "clientType": "The type of host client. Possible values are android, ios, web, desktop, surfaceHub, teamsRoomsAndroid, teamsPhones, teamsDisplays rigel (deprecated, use teamsRoomsWindows instead)",
     "name": "",
     "ringId": "The current ring ID",
     "sessionId": "The unique ID for the current Teams session for use in correlating telemetry data"    },
   "iconPositionVertical": "",
   "locale": "The current locale of the user formatted as languageId-countryId (for example, en-us)",
   "osLocaleInfo": "",
   "parentMessageId": "The parent message ID from which this dialog is launched",
   "sessionId": "The unique ID for the current session used for correlating telemetry data",
   "theme": "The current UI theme: default | dark | glass | contrast",
   "userClickTime": "",
   "userFileOpenPreference": ""  },
 "channel": {
   "defaultOneNoteSectionId": "The OneNote section ID that is linked to the channel",
   "displayName": "The name of the current channel",
   "id": "The channel ID in the format 19:[id]@thread.skype",
   "membershipType": "",
   "ownerGroupId": "",
   "ownerTenantId": "",
   "relativeUrl": "The relative path to the SharePoint folder associated with the channel"  },
 "chat": { "id": "The chat ID in the format 19:[id]@thread.skype" },
 "meeting": {
   "id": "The meeting ID used by tab when running in meeting context"  },
 "page": {
   "frameContext": "The context where tab URL is loaded (for example, content, task, setting, remove, sidePanel)",
   "id": "The developer-defined unique ID for the entity this content points to",
   "isFullScreen": "Indicates if the tab is in full-screen",
   "isMultiWindow": "The indication whether the tab is in a pop out window",
   "sourceOrigin": "",
   "subPageId": "The developer-defined unique ID for the sub-entity this content points to"  },
 "sharepoint": "The SharePoint context is available only when hosted in SharePoint",
 "sharepointSite": {
   "teamSiteDomain": "The domain of the root SharePoint site associated with the team",
   "teamSitePath": "The relative path to the SharePoint site associated with the team",
   "teamSiteUrl": "The root SharePoint site associated with the team"  },
 "team": {
   "displayName": "The name of the current team",
   "groupId": "Guid identifying the current Office 365 Group ID",
   "internalId": "The Microsoft Teams ID in the format 19:[id]@thread.skype",
   "isArchived": "Indicates if team is archived",
   "templateId": "",
   "type": "The type of team",
   "userRole": "The user's role in the team"  },
 "user": {
   "displayName": "",
   "id": "The Azure AD object id of the current user, in the current tenant",
   "isCallingAllowed": "Indicates if calling is allowed for the current logged in user",
   "isPSTNCallingAllowed": "Indicates if PSTN calling is allowed for the current logged in user",
   "licenseType": "The license type for the current user. Possible values are E1, E3, and E5 enterprise plans",
   "loginHint": "A value suitable as a login hint for Azure AD. This is usually the login name of the current user, in their home tenant",
   "tenant": {
     "id": "The Azure AD tenant ID of the current user",
     "teamsSku": "The license type for the current user tenant. Possible values are enterprise, free, edu, unknown"    },
   "userPrincipalName": "The principal name of the current user, in the current tenant"  }
}

TypeScript

import { app, Context } from "@microsoft/teams-js";

app.getContext().then((context: Context) => {
    /*...*/
});

同等の async/await パターン:

import { app, Context } from "@microsoft/teams-js";

async function example() {
  const context: Context = await app.getContext();
  /*...*/
}

JavaScript

import { app, Context } from "@microsoft/teams-js";

app.getContext().then((context) => {
    /*...*/
});

同等の async/await パターン:

import { app, Context } from "@microsoft/teams-js";

async function example() {
  const context = await app.getContext();
  /*...*/
}

次の表は、 コンテキスト オブジェクトのよく使用されるコンテキスト プロパティの一覧です。

TeamsJS v2 の名前 TeamsJS v1 名
team.internalId teamId
team.displayName teamName
channel.id channelId
channel.displayName channelName
chat.id chatId
app.locale ロケール
page.id entityId
page.subPageId subEntityId
user.loginHint loginHint
user.userPrincipalName UPN
user.id userObjectId
user.tenant.id tid
team.groupId groupId
app.theme theme
page.isFullScreen IsFullScreen
team.type teamType
sharepointSite.teamSiteUrl teamSiteUrl
sharepointSite.teamSiteDomain teamSiteDomain
sharepointSite.teamSitePath teamSitePath
channel.relativeUrl channelRelativeUrl
app.host.sessionId sessionId
team.userRole userTeamRole
team.isArchived isTeamArchived
app.host.clientType hostClientType
page.frameContext frameContext
sharepoint sharepoint
user.tenant.teamsSku tenantSKU
user.licenseType userLicenseType
app.parentMessageId parentMessageId
app.host.ringId ringId
app.sessionId appSessionId
user.isCallingAllowed isCallingAllowed
user.isPSTNCallingAllowed isPSTNCallingAllowed
meeting.id meetingId
channel.defaultOneNoteSectionId defaultOneNoteSectionId
page.isMultiWindow isMultiWindow

詳しくは、 Updates to the Context interface および Context interface API リファレンスを参照してください。

プライベート チャネルでコンテキストを取得する

注:

プライベート チャネルは、プライベート開発者プレビューのみです。

コンテンツ ページがプライベート チャネルに読み込まれると、チャネルのプライバシーを保護するために、 getContext 呼び出しから受信したデータが難読化されます。

コンテンツ ページがプライベート チャネルにある場合、次のフィールドが変更されます。

  • team.groupId: プライベート チャネルでは未定義
  • team.internalId: プライベート チャネルの threadId に設定します
  • team.displayName: プライベート チャネルの名前に設定する
  • sharepointSite.teamSiteUrl: プライベート チャネル用の個別の一意の SharePoint サイトの URL に設定します
  • sharepointSite.teamSitePath: プライベート チャネル用の個別の一意の SharePoint サイトのパスに設定します
  • sharepointSite.teamSiteDomain: プライベート チャネルの個別の一意の SharePoint サイト ドメインのドメインに設定します
  • channel.ownerGroupId: プライベート チャネルのホスト チームの groupId に設定します

ページがこれらの値のいずれかを使用する場合、ページがプライベート チャネルに読み込まれ、適切に応答できるかどうかを判断するには、 channel.membershipType フィールドの値を Private する必要があります。

注:

teamSiteUrl 標準チャンネルでもうまく機能します。 ページでこれらの値のいずれかを使用する場合、ページが共有チャネルに読み込まれ、適切に応答できるかどうかを判断するために、 channelType フィールドの値を Shared する必要があります。

共有チャネルのコンテキストを取得する

コンテンツ UX が共有チャネルに読み込まれたら、共有チャネルの変更の呼び出しから受信したデータ getContext 使用します。 Tab が次のいずれかの値を使用する場合は、 channelType フィールドに入力して、タブが共有チャネルに読み込まれているかどうかを確認し、適切に応答する必要があります。 共有チャネルの場合、ホスト チームの groupId は共有チャネルの実際のメンバーシップを正確に反映していないため、 groupId 値は null です。 これに対処するために、hostTeamGroupID プロパティと hostTenantID プロパティが新たに追加され、メンバーシップを取得するために Microsoft Graph API 呼び出しを行うのに役立ちます。 hostTeam 共有チャネルを作成したチームを参照します。 currentTeam 現在のユーザーが共有チャネルにアクセスしているチームを参照します。

これらの概念と共有チャネルの詳細については、「 共有チャネル」を参照してください。

共有チャネルでは、次の getContext プロパティを使用します。

プロパティ 説明
channelId このプロパティは、共有チャネルのスレッド ID に設定されます。
channelType プロパティは、共有チャネルに対して sharedChannel に設定されています。
groupId このプロパティは、共有チャネル用に null されます。
hostTenantId プロパティが新しく追加され、ホストのテナント ID が記述されます。現在のユーザーの tid テナント ID プロパティと比較するのに役立ちます。
hostTeamGroupId このプロパティは新しく追加され、ホスト チームの Microsoft Entra グループ ID を記述します。Microsoft Graph API 呼び出しを行って共有チャネル メンバーシップを取得するのに役立ちます。
teamId プロパティが新しく追加され、現在の共有チームのスレッド ID に設定されます。
teamName プロパティは、現在の共有チームの teamNameに設定されます。
teamType プロパティは、現在の共有チームの teamTypeに設定されます。
teamSiteUrl このプロパティは、共有チャネルの channelSiteUrlを記述します。
teamSitePath このプロパティは、共有チャネルの channelSitePathを記述します。
teamSiteDomain このプロパティは、共有チャネルの channelSiteDomainを記述します。
tenantSKU このプロパティは、ホスト チームの tenantSKUを記述します。
tid このプロパティは、現在のユーザーのテナント ID を記述します。
userObjectId このプロパティは、現在のユーザーの ID を記述します。
userPrincipalName このプロパティは、現在のユーザーの UPN を記述します。

共有チャネルの詳細については、「 共有チャネル」を参照してください。

テーマの変更を処理する

重要

  • 既定では、 新しい Teams クライアント は Teams 会議のアプリの淡色テーマをサポートしています。 getContext API の app.theme プロパティが default 値を返す場合、Teams クライアントは淡色テーマです。
  • 以前のバージョンの Teams クライアントは、Teams 会議のアプリのダーク テーマとコントラスト テーマのみをサポートしています。

テーマが変更された場合に通知を受け取るようにアプリを登録するには、 microsoftTeams.app.registerOnThemeChangeHandler(function(theme) { /* ... */ }) を呼び出します。

関数の theme 引数は、値が default、 dark、 glass、または contrast の文字列です。 getContext API の AppInfo プロパティは、Apple Vision Pro デバイスで実行されている Teams のglassテーマをサポートしています。

次の図は、Teams の既定のテーマ オプションを示しています。

スクリーンショットは、Teams デスクトップ クライアントの既定のテーマを示しています。

コード サンプル

サンプルの名前 説明 JavaScript
タブ チャネル コンテキスト このサンプルでは、Microsoft Teams のプライベート チャネルと共有チャネル専用のタブ コンテキスト オブジェクトを表示するタブ アプリケーションの機能を示します。 ユーザーはコンテキスト オブジェクトから JSON スライスを展開してコピーし、チャネルの種類に基づいて貴重な分析情報を得ることができます。 表示

関連項目