Microsoft Teams 用の SharePoint Framework ソリューションの展開オプション

開発者には、Microsoft Teams 内で使用する SharePoint Framework (SPFx) ソリューションを展開するときに複数のオプションがあります。 この記事では、SharePoint Online でサポートされているオプションについて説明します。

注:

2021 年 1 月以前は、SharePoint Online は 1 つのオプションのみをサポートしていました。対象となる SPFx ソリューションが SharePoint テナント アプリ カタログにアップロードされたときに、テナント アプ リカタログのリボンにある [Teams に同期] ボタンです。

SharePoint Online は、SPFx ソリューションを Microsoft Teams アプリ ストアに展開するための 2 つのオプションをサポートしています。

1. Microsoft Teams のアプリ マニフェストとパッケージを自動で作成する
2. 開発者が提供する Microsoft Teams アプリ マニフェスト & パッケージを使用する

Microsoft Teams のアプリ マニフェストとパッケージを自動で作成する

この機能は、Microsoft Teams で自動的に公開する単純な実装がある場合に理想的です。

このシナリオでは、SPFx ソリューションが SharePoint Online テナント アプリ カタログにアップロードされたときに、ソリューションに Microsoft Teams のコンポーネントが含まれている場合、リボンの [Teams に同期] ボタンが有効になります。

このボタンは、SharePoint Online で次のプロセスを開始します。

1. SharePoint は、Microsoft Teams アプリのマニフェスト ファイルを動的に作成します
2. SharePoint は Microsoft Teams アプリ パッケージを動的に作成します
3. SharePoint は、生成された Microsoft Teams アプリ パッケージをテナントの Microsoft Teams アプリ ストアに展開します

SharePoint がアプリ マニフェストを作成するとき、いくつかの名前を生成する際に SPFx ソリューションの値を使用します。 次の表に、Microsoft Teams アプリのマニフェスト ファイルのプロパティとそれらが設定されている値を示します。

注:

アプリ マニフェストの詳細については、Microsoft Teams ドキュメントの次のリンクを参照してください。Microsoft Teams の マニフェスト スキーマ。

manifest.json property	SPFx コンポーネント マニフェストのプロパティ
packageName	alias
id	id
name.short	preconfiguredEntries[0].title
description.short	preconfiguredEntries[0].description
description.long	preconfiguredEntries[0].description

注:

コンポーネント マニフェストは、コンポーネントのマニフェスト (./src/webparts/.) からプルされます。/*.manifest.json)。

SPFx ソリューションに Microsoft Teams での使用が指定された複数の Web パーツが含まれている場合、SharePoint Online はそれらのそれぞれに対して上記のプロセスを繰り返します。

注:

生成されたパッケージ構造に興味がある場合は、次の REST API を使用して、特定のソリューションのパッケージをダウンロードできます。

_api/web/tenantappcatalog/downloadteamssolution(id)/$value

id は、アプリ カタログ ライブラリ内のソリューションの数値識別子です。

この API は、アプリ カタログのコンテキスト (たとえば、 https://[yourtenant]].sharepoint.com/sites/appcatalog/_api/web/tenantappcatalog/downloadteamssolution(12)/$value のURL など) でリクエストできます。 API 呼び出しは、生成されたマニフェスト パッケージのダウンロード プロセスを開始します。

開発者が提供する Microsoft Teams アプリ マニフェスト & パッケージ

Microsoft Teams アプリ マニフェストまたはアプリ パッケージをさらに制御する必要がある場合は、独自のパッケージを作成できます。 この場合、管理者が [ Teams に同期 ] ボタンを選択すると、SharePoint Online は *.sppkg ファイル内の ./teams/TeamsSPFxApp.zipのファイルを探します。

このファイルが存在する場合、SharePoint Online は、ファイルを動的に作成するのではなく、テナントの Microsoft Teams アプリ ストアに展開します。 このオプションを使用すると、開発者は Microsoft Teams アプリ マニフェスト & アプリ パッケージを完全に制御できます。

このオプションは、次のシナリオに最適です。

• 開発者が、Microsoft Teams アプリのマニフェスト コンテンツを完全に制御したいと考えてる場合
• ボットの指定、アプリの会議などの複雑な Microsoft Teamsシ ナリオ
• SPFx ソリューションに複数のコンポーネントが含まれている場合は、Microsoft Teams アプリの ID、名前 & の説明を指定します。 たとえば、SPFx ソリューションに Microsoft Teams のタブとして使用できる複数の Web パーツが含まれている場合、マニフェストの自動生成では、Microsoft Teams のアプリ ID である名前 & の説明として使用する 2 つのコンポーネントのいずれかを選択します。

SharePoint Online で動的に作成するのではなく、独自の Microsoft Teams アプリ マニフェスト & アプリ パッケージを使用するには、次の操作を行います。

1. Microsoft Teams のドキュメントに従って Microsoft Teams アプリ マニフェストを作成します。

   • Microsoft Teams: Microsoft Teams アプリのアプリ パッケージを作成する
   • Microsoft Teams: Microsoft Teamsのマニフェスト スキーマ

   重要

   Teams アプリ マニフェストで、次のエントリを追加していることを確認します。

   "webApplicationInfo": {
   "resource": "https://{teamSiteDomain}",
   "id": "00000003-0000-0ff1-ce00-000000000000"
   }
   

   これは、コンポーネント内のすべての API 呼び出しが Microsoft Teams リッチ クライアントから利用できるようにするために必要です。 teamSiteDomain は Teams クライアントが使用しているテナントと同じになります。これはテナント間またはドメイン間では機能しないため、別のドメインをハードコーディングすることはできません。

2. ./teams フォルダーの内容を圧縮して、TeamsSPFxApp.zip という名前のMicrosoft Teams アプリ パッケージを作成します。

   重要

   フォルダを圧縮せず、代わりにフォルダの内容を圧縮します。 フォルダを ZIP すると、結果の ZIP ファイルの最上位のサブフォルダになります。これは Microsoft Teams の有効なアプリ パッケージではありません。

3. TeamsSPFxApp.zip を SPFx ソリューションの ./teams フォルダーに保存します。

4. gulp package-solution を使用して、通常の SPFx ソリューションの場合と同じ方法で SPFx パッケージを作成します。 *.sppkg には、カスタム Microsoft Teams アプリ パッケージが含まれます。

基になる SharePoint サイトの URL を動的に参照する

Microsoft Teams アプリ マニフェストは、SPFx コンポーネントの展開されたホスティングの場所を指している必要があります。 ただし、これらの URL は、Microsoft Teams アプリ マニフェストまたはアプリ パッケージの作成時には不明です。

したがって、この展開オプションでアプリ パッケージを指定するときは、実行時に Microsoft Teams によって置き換えられる次の文字列を使用する必要があります。

• {teamSiteDomain}: SPFx ソリューションが展開およびインストールされている SharePointOnline テナントの URL
• {teamSitePath}: SPFx コンポーネントがインストールされた SharePoint サイトへのパス
• {locale}: Microsoft Teams クライアントの現在のロケール

カスタム Microsoft Teams ソリューションで Web パーツを使用する場合、これらの文字列を使用して、Web パーツをロードするページの URL を定義できます。 たとえば、次の表を、Microsoft Teams アプリで使用される Web パーツの URL を作成するためのガイドとして使用します。

重要

次の例では、SPFx コンポーネントの ID が {{SPFX_COMPONENT_ID}} であると想定しています。 この値は、必ず Web パーツのコンポーネント ID に置き換えてください。 この値は、SharePoint または Microsoft Teams によって動的に設定されません。この値を設定するのは開発者の責任です。

Microsoft Teams コンポーネント	Microsoft Teams アプリのマニフェスト プロパティを作成する	Microsoft Teams アプリのマニフェスト プロパティを作成する
個人タブ	staticTabs[..].contentUrl	https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}
チャンネル/グループ チャット タブ	configurableTabs[..].configurationUrl	https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}
メッセージング拡張機能	composeExtensions.commands[..].taskInfo.url	https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamstaskhostedapp.aspx%3Fteams%26personal%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}