Microsoft Teams SharePoint Framework Web パーツを公開する
SharePoint Frameworkを使用して、Web パーツと拡張機能を構築できます。 Web パーツをビルドするときに、 Microsoft Teams タブ、 個人用アプリ 、または メッセージング拡張機能として公開できるようにすることができます。
ヒント
この記事で説明されているさまざまな概念を使用する方法については、GitHub のサンプル の Leads アプリケーション を参照してください。
Web パーツを Microsoft Teams タブとして公開する
SharePoint Frameworkクライアント側 Web パーツを Microsoft Teams タブとして公開するには、Web パーツのマニフェストで、 プロパティに をsupportedHosts追加TeamsTabします。
Web パーツを Microsoft Teams 個人用アプリとして公開する
Web パーツを Microsoft Teams 個人用アプリとして公開するには、Web パーツのマニフェストの プロパティに を supportedHosts 追加 TeamsPersonalAppします。
ヒント
同じSharePoint Framework Web パーツを SharePoint、Microsoft Teams タブ、個人用 Teams アプリの Web パーツとして公開できます。 プロパティで指定された値は、 supportedHosts ユーザーが Web パーツを操作する方法を決定します。
Web パーツを Microsoft Teams メッセージング拡張機能として公開する
重要
Microsoft Teams メッセージング拡張機能としての Web パーツの公開は、SharePoint Framework v1.11 以降でサポートされています。
SharePoint Framework Web パーツをメッセージング拡張機能として公開するには、 プロパティでsupportedHosts特定のホストを使用する必要はありません。 代わりに、次のように、 を使用してSharePoint Framework ソリューション内のチーム マニフェストをcomposeExtension拡張するだけです。
{
"$schema": "https://developer.microsoft.com/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
"manifestVersion": "1.5",
// trimmed for brevity
"composeExtensions": [
{
"botId": "a349bab7-f895-4d6e-977a-764779833699",
"canUpdateConfiguration": true,
"commands": [
{
"id": "shareLead",
"type": "action",
"title": "Share a lead",
"description": "Find and share a lead",
"initialRun": false,
"fetchTask": false,
"context": [
"commandBox",
"compose"
],
"taskInfo": {
"title": "Share a lead",
"width": "1100",
"height": "665",
"url": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamstaskhostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}"
}
}
]
}
]
// trimmed for brevity
}
重要な情報は、 プロパティ内taskInfoの URL です。この URL は、例で指定した URL と一致する必要があります。クエリ文字列パラメーターはcomponentId、メッセージング拡張機能で公開する必要があるSharePoint Framework Web パーツの ID に設定する必要があります。
ユーザー操作への応答
Microsoft Teams でメッセージング拡張機能として Web パーツが公開されている場合は、たとえば、アダプティブ カードを会話に投稿するなどして、ユーザーの操作に応答できます。 これには 、タスク モジュール と ボットを使用する必要があります。 タスク モジュールは、ユーザーがトリガーしたイベントをボットに通知し、ボットは会話にデータをポストバックします。 ただし、まず、Web パーツがメッセージング拡張機能として使用されているかどうかを確認する必要があります。
Web パーツがメッセージング拡張機能として使用されているかどうかを確認するには、 プロパティが にTeamsTaskModuleApplication設定されているかどうかをcontext._host._teamsManager._appContext.applicationName確認します。
private leadClicked = (ev?: React.SyntheticEvent<HTMLElement>): void => {
const host: string = this.props.host._teamsManager._appContext.applicationName;
if (host !== 'TeamsTaskModuleApplication') {
return;
}
// web part used as a messaging extension
}
Web パーツがメッセージング拡張機能として使用されていることを確認したら、タスク モジュールを使用して、Web パーツからボットにデータを渡します。
private leadClicked = (ev?: React.SyntheticEvent<HTMLElement>): void => {
const host: string = this.props.host._teamsManager._appContext.applicationName;
if (host !== 'TeamsTaskModuleApplication') {
return;
}
// web part used as a messaging extension
this.props.teamsContext.tasks.submitTask(selectedLead[0]);
}
通知を受け取った後、ボットは取得したデータを処理し、会話にいくつかの情報を投稿できます。
protected async handleTeamsMessagingExtensionSubmitAction(context: TurnContext, action: MessagingExtensionAction): Promise<MessagingExtensionActionResponse> {
const lead: Lead = action.data;
let leadChangeIcon: string = "";
if (lead.change > 0) {
leadChangeIcon = "🔼 ";
} else if (lead.change < 0) {
leadChangeIcon = "🔽 ";
}
const leadCard = CardFactory.adaptiveCard({
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
// trimmed for brevity
});
await context.sendActivity({ attachments: [leadCard] });
return Promise.resolve({});
}
ヒント
Microsoft Teams メッセージング拡張機能の構築の詳細については、 Microsoft Teams のドキュメントを参照してください。 SharePoint Framework Web パーツがメッセージング拡張機能として公開される方法の例については、GitHub のサンプルの Leads アプリケーションを参照してください。
Microsoft Teams でSharePoint Framework Web パーツを公開する場合は、Microsoft Teams に展開する方法についてさまざまなオプションがあります。
Microsoft Teams 用の SharePoint Framework ソリューションの展開オプション
開発者には、Microsoft Teams 内で使用する SharePoint Framework (SPFx) ソリューションを展開するときに複数のオプションがあります。
展開オプションについては、「Microsoft Teams のSharePoint Framework ソリューションの展開オプション」を参照してください。