タブでは、関連するコンテンツを表示するためのコンテキスト情報が必要です。
- ユーザー、チーム、または会社に関する基本的な情報。
- ロケールとテーマの情報。
- このタブの内容を識別する
page.idとpage.subPageId(TeamsJS v2.0.0 より前はentityIdとsubEntityIdと呼ばれていました)。
ユーザー コンテキスト
ユーザー、チーム、または会社に関するコンテキストは、次の場合に特に役立ちます。
- アプリ内のリソースを作成するか、指定したユーザーまたはチームに関連付けます。
- Microsoft Entra ID またはその他の ID プロバイダーから認証フローを開始し、ユーザーがユーザー名を再入力する必要はありません。
詳細については、「 Microsoft Teams でユーザーを認証する」を参照してください。
重要
このユーザー情報は円滑なユーザー エクスペリエンスを提供するのに役立ちますが、ID の証明として使用することはできません。 たとえば、攻撃者はブラウザーにページを読み込み、有害な情報や要求を提供する可能性があります。
Access コンテキスト情報
コンテキスト情報には 2 つの方法でアクセスできます。
- URL プレースホルダー値の使用。
- Microsoft Teams クライアント JavaScript ライブラリ コンテキスト オブジェクトから。
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テーマをサポートしています。
コード サンプル
| サンプルの名前 | 説明 | JavaScript |
|---|---|---|
| タブ チャネル コンテキスト | このサンプルでは、Microsoft Teams のプライベート チャネルと共有チャネル専用のタブ コンテキスト オブジェクトを表示するタブ アプリケーションの機能を示します。 ユーザーはコンテキスト オブジェクトから JSON スライスを展開してコピーし、チャネルの種類に基づいて貴重な分析情報を得ることができます。 | 表示 |
関連項目
Platform Docs