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

開発者には、Microsoft Teams 内で使用する SharePoint Framework (SPFx) ソリューションを展開するときに複数のオプションがあります。Developers have multiple options when deploying SharePoint Framework (SPFx) solutions for use within Microsoft Teams. この記事では、SharePoint Online でサポートされているオプションについて説明します。This article explains the options supported in SharePoint Online.

注意

2021 年 1 月以前は、SharePoint Online は 1 つのオプションのみをサポートしていました。対象となる SPFx ソリューションが SharePoint テナント アプリ カタログにアップロードされたときに、テナント アプ リカタログのリボンにある [Teams に同期] ボタンです。Prior to January 2021, SharePoint Online only supported one option: when a qualifying SPFx solution was uploaded to the SharePoint tenant app catalog, the Sync To Teams button in the tenant app catalog's ribbon.

SharePoint Online は、SPFx ソリューションを Microsoft Teams アプリ ストアに展開するための 2 つのオプションをサポートしています。SharePoint Online supports two options for deploying SPFx solutions to the Microsoft Teams app store:

  1. Microsoft Teams のアプリ マニフェストとパッケージを自動で作成するAutomatically create the Microsoft Teams app manifest and package
  2. 開発者が提供する Microsoft Teams アプリのマニフェストとパッケージを使用するUse the developer-provided Microsoft Teams app manifest & package

Microsoft Teams のアプリ マニフェストとパッケージを自動で作成するAutomatically create the Microsoft Teams app manifest and package

この機能は、Microsoft Teams で自動的に公開する単純な実装がある場合に理想的です。This capability is ideal when you have a simple implementation to expose automatically in Microsoft Teams.

このシナリオでは、SPFx ソリューションが SharePoint Online テナント アプリ カタログにアップロードされたときに、ソリューションに Microsoft Teams のコンポーネントが含まれている場合、リボンの [Teams に同期] ボタンが有効になります。In this scenario, when an SPFx solution is uploaded to the SharePoint Online tenant app catalog, if the solution contains components for Microsoft Teams, the Sync to Teams button in the ribbon is enabled.

Teams に同期

このボタンは、SharePoint Online で次のプロセスを開始します。This button will start the following process in SharePoint Online:

  1. SharePoint は、Microsoft Teams アプリのマニフェスト ファイルを動的に作成しますSharePoint will dynamically create the Microsoft Teams app manifest file
  2. SharePoint は Microsoft Teams アプリ パッケージを動的に作成しますSharePoint will dynamically create the Microsoft Teams app package
  3. SharePoint は、生成された Microsoft Teams アプリ パッケージをテナントの Microsoft Teams アプリ ストアに展開しますSharePoint will deploy the generated Microsoft Teams app package to the tenant's Microsoft Teams app store

SharePoint がアプリ マニフェストを作成するとき、いくつかの名前を生成する際に SPFx ソリューションの値を使用します。When SharePoint creates the app manifest, it will use values from the SPFx solution in generating some names. 次の表に、Microsoft Teams アプリのマニフェスト ファイルのプロパティとそれらが設定されている値を示します。The following table lists the properties in the Microsoft Teams app manifest file and what values they are set to.

注意

アプリ マニフェストの詳細については、Microsoft Teams ドキュメントの次のリンクを参照してください。Microsoft Teams の マニフェスト スキーマRefer to the following link in the Microsoft Teams documentation for more detail on the app manifest: Manifest schema for Microsoft Teams.

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

注意

コンポーネントマニフェストは、コンポーネントのマニフェスト (./src/webparts/../*.manifest.json) から取得されます。The component manifest is pulled from the component's manifest (./src/webparts/../*.manifest.json).

SPFx ソリューションに Microsoft Teams での使用が指定された複数の Web パーツが含まれている場合、SharePoint Online はそれらのそれぞれに対して上記のプロセスを繰り返します。If a SPFx solution contains multiple web parts designated for use in Microsoft Teams, SharePoint Online will repeat the above process for each of them.

開発者が提供する Microsoft Teams アプリのマニフェストとパッケージDeveloper-provided Microsoft Teams app manifest & package

Microsoft Teams アプリ マニフェストまたはアプリ パッケージをさらに制御する必要がある場合は、独自のパッケージを作成できます。When you need more control over the Microsoft Teams app manifest or app package, you can create your own package. この場合、管理者が [Teams に同期] ボタンを選択すると、SharePoint Online は *.sppkg ファイルで次のファイルを検索します: ./src/teams/TeamsSPFxApp.zipIn this case, when an administrator selects the Sync to Teams button, SharePoint Online will look for the following file in the *.sppkg file: ./src/teams/TeamsSPFxApp.zip.

このファイルが存在する場合、SharePoint Online は、ファイルを動的に作成するのではなく、テナントの Microsoft Teams アプリ ストアに展開します。If this file is present, SharePoint Online will deploy it to the tenant's Microsoft Teams app store instead of dynamically creating it. このオプションにより、開発者は Microsoft Teams のアプリ マニフェストとアプリ パッケージを完全に制御できます。This option gives developers full control over the Microsoft Teams app manifest & app package.

このオプションは、次のシナリオに最適です。This option is ideal for the following scenarios:

  • 開発者が、Microsoft Teams アプリのマニフェスト コンテンツを完全に制御したいと考えてる場合Developers want to have full control over the Microsoft Teams app manifest contents
  • ボットの指定、アプリの会議などの複雑な Microsoft Teamsシ ナリオComplex Microsoft Teams scenarios, like specifying bots, meeting apps, etc
  • SPFx ソリューションに複数のコンポーネントが含まれている場合は、Microsoft Teams アプリの ID、名前、および説明を指定します。Specify the ID, name & description of the Microsoft Teams app when the SPFx solution contains more than one component. たとえば、SPFx ソリューションに Microsoft Teams のタブとして使用できる複数の Web パーツが含まれている場合、マニフェストの自動生成により、Microsoft Teams のアプリ ID、名前、および説明として使用する 2 つのコンポーネントのいずれかが選択されます。For example, if a SPFx solution contains multiple web parts that can be used as tabs in Microsoft Teams, the automatic generation of the manifest will select one of the two components to use as the Microsoft Teams' app ID, name & description.

SharePoint Online で動的に作成するのではなく、独自の Microsoft Teams アプリ マニフェストとアプリ パッケージを使用するには、次の手順を実行します。To use your own Microsoft Teams app manifest & app package instead of letting SharePoint Online dynamically create it, do the following:

  1. Microsoft Teams のドキュメントに従って Microsoft Teams アプリ マニフェストを作成します。Create a Microsoft Teams app manifest per the Microsoft Teams documentation:

  2. ./teams フォルダーの内容を圧縮して、TeamsSPFxApp.zip という名前のMicrosoft Teams アプリ パッケージを作成します。Create the Microsoft Teams app package named TeamsSPFxApp.zip by compressing the contents of the ./teams folder.

    重要

    フォルダを圧縮せず、代わりにフォルダの内容を圧縮します。Don't compress the folder, instead compress the contents of the folder. フォルダを ZIP すると、結果の ZIP ファイルの最上位のサブフォルダになります。これは Microsoft Teams の有効なアプリ パッケージではありません。If you ZIP the folder, it will a top-level subfolder to the resulting ZIP file which isn't a valid app package in Microsoft Teams.

  3. TeamsSPFxApp.zip を SPFx ソリューションの ./src/teams フォルダーに保存します。Save the TeamsSPFxApp.zip in the SPFx solution's ./src/teams folder.

  4. gulp package-solution を使用して、通常の SPFx ソリューションの場合と同じ方法で SPFx パッケージを作成します。Create the SPFx package the same way you would with a regular SPFx solution, using gulp package-solution. *.sppkg にカスタム Microsoft Teams アプリ パッケージが含まれます。It will include the custom Microsoft Teams app package in the *.sppkg.

基になる SharePoint サイトの URL を動的に参照するDynamically reference the underlying SharePoint site URLs

Microsoft Teams アプリ マニフェストは、SPFx コンポーネントの展開されたホスティングの場所を指している必要があります。The Microsoft Teams app manifest must point to the deployed hosting location of the SPFx components. ただし、これらの URL は、Microsoft Teams アプリ マニフェストまたはアプリ パッケージの作成時には不明です。However, these URLs are not known at the time the Microsoft Teams app manifest or app package is created.

したがって、この展開オプションでアプリ パッケージを指定するときは、実行時に Microsoft Teams によって置き換えられる次の文字列を使用する必要があります。Therefore, when you specify the app package in this deployment option, you should use the following strings that will be replaced at runtime by Microsoft Teams:

  • {teamSiteDomain}: SPFx ソリューションが展開およびインストールされている SharePointOnline テナントの URL{teamSiteDomain}: the SharePoint Online tenant URL where the SPFx solution is deployed and installed
  • {teamSitePath}: SPFx コンポーネントがインストールされた SharePoint サイトへのパス{teamSitePath}: the path to the SharePoint site where the SPFx components were installed
  • {locale}: Microsoft Teams クライアントの現在のロケール{locale}: the current locale of the Microsoft Teams client

カスタム Microsoft Teams ソリューションで Web パーツを使用する場合、これらの文字列を使用して、Web パーツをロードするページの URL を定義できます。When using a web part in a custom Microsoft Teams solution, you can use these strings to define the URL of the page that will load the web part. たとえば、次の表を、Microsoft Teams アプリで使用される Web パーツの URL を作成するためのガイドとして使用します。For example, use the following table as a guide for creating the URL of web parts used in Microsoft Teams apps:

重要

次の例では、SPFx コンポーネントの ID が {{SPFX_COMPONENT_ID}} であると想定しています。In the following examples, it's assumed the SPFx component's ID is {{SPFX_COMPONENT_ID}}. この値は、必ず Web パーツのコンポーネント ID に置き換えてください。Make sure to replace this value with the component ID for your web part. この値は、SharePoint または Microsoft Teams によって動的に設定されません。この値を設定するのは開発者の責任ですThis value is not dynamically set by SharePoint or Microsoft Teams: it is the developer's responsibility to set this value.

Microsoft Teams コンポーネントMicrosoft Teams component Microsoft Teams アプリのマニフェスト プロパティを作成するMicrosoft Teams app manifest property Microsoft Teams アプリのマニフェスト プロパティを作成するMicrosoft Teams app manifest property
個人タブPersonal tab staticTabs[..].contentUrl https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}
チャンネル/グループ チャット タブChannel/group chat tab 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}
メッセージング拡張機能Messaging extension 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}