SharePoint Framework を使用した Microsoft Teams タブの作成Building Microsoft Teams Tabs using SharePoint Framework

Sharepoint Framework v2.0 から、sharepoint Framework ツールを使用して Microsoft Teams のタブを作成し、SharePoint をソリューションのホストとして使用することができます。Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams using SharePoint Framework tooling and use SharePoint as a host for your solutions

SharePoint Framework を Microsoft Teams タブのプラットフォームとして使用する利点は次のとおりです。There are following benefits on using SharePoint Framework as the platform for your Microsoft Teams tabs:

  • 開発モデルは SharePoint Framework の web パーツに似ています。The development model is similar to SharePoint Framework web parts
  • 技術的には、Microsoft Teams のタブとして公開されているすべての web パーツTechnically any web part can be exposed as a tab in Microsoft Teams
  • カスタムタブを web パーツおよびテナント内のタブとして公開する場合の異なるスコープオプションがあります。You have difference scoping options on exposing your custom tab as a web part and tab in your tenant
  • タブは特定のチームの背後にある SharePoint サイトのコンテキストで実行されます。Your tab will be executed in the context of the underlying SharePoint site behind of the specific team. つまり、Web パーツで SharePoint 固有の API や機能を利用することができます。This means that you can take advantage of any SharePoint specific APIs or functionalities in your web part.

開発プロセスDevelopment process

重要

アプリのカタログ リボンに、[チームに同期] というメニュー項目があることにお気付きでしょう。You may notice a menu item Sync to Teams in the App Catalog ribbon:

チームに同期

現時点では、この機能は完全に実装されていないため、SharePoint Framework の Web パーツを Microsoft Teams にカスタム タブとしてデプロイする方法としてはお勧めしません。このドキュメントは、この機能が SharePoint Online 全体にデプロイされた時点で更新される予定です。At this time this functionality is not fully implemented and is not the recommended way to deploy your SharePoint Framework web part to Microsoft Teams as a custom tab. This document will be updated when this functionality has been deployed across SharePoint Online. それまでの期間、お勧めするアプローチは、サイドローディング アプローチを使用して、SharePoint Framework の Web パーツをカスタム Microsoft Teams タブとしてインストールする方法です。Until that time, the recommended approach is to install SharePoint Framework web parts as custom Microsoft Teams tabs using the side loading approach. この記事の「代替展開オプション」に記載されている手順を実行するには、「 web パーツ用に手動でチームマニフェストを作成する」を参照してください。Please refer to Creating a team manifest manually for a web part to proceed for now and follow the steps in the 'Alternative deployment options' section of this article.

SharePoint Framework 1.8 以降のパッケージを使用するだけで、Microsoft Teams タブの開発を開始できます。You can start developing Microsoft Teams tabs simply by using the SharePoint Framework 1.8 or later packages. 作業を開始するための大まかな手順は次のとおりです。High level steps to get started are as follows:

注意

手順については、 「SharePoint Framework を使用して Microsoft Teams タブを作成する」タブを参照してください。これには、次に示す追加の重要な詳細が含まれています。Refer to the detailed steps to get started from the Building Microsoft Teams tab using SharePoint Framework tutorial which contains additional important details you must follow.

  1. クライアント側の web パーツを使用して SharePoint Framework ソリューションを作成するCreate a SharePoint Framework solution with a client-side web part

  2. Web "TeamsTab"パーツのsupportedHostsマニフェストのプロパティにを追加します。Add "TeamsTab" to the supportedHosts property of the web part manifest:

    "supportedHosts": ["SharePointWebPart", "TeamsTab"],
    
  3. テナントスコープの展開オプションを使用して web パーツを SharePoint アプリカタログに展開するDeploy the web part using tenant-scoped deployment option to your SharePoint app catalog

  4. Microsoft Teams アプリマニフェストファイルmanifest.xmlを作成し、ソリューションの ./teamsフォルダーに保存します。Create the Microsoft Teams app manifest file, manifest.json, and save it in the ./teams folder of the solution

  5. ./Teamsフォルダーの内容を圧縮します。これは Microsoft Teams アプリパッケージですZIP the contents of the ./teams folder; this is the Microsoft Teams app package

  6. Microsoft Teams アプリパッケージを使用して Microsoft Teams のアプリケーションをサイドロードするUse the Microsoft Teams app package to side load the application in Microsoft Teams

展開オプションDeployment options

Microsoft Teams タブを展開するには、複数のオプションがあります。SharePoint と Microsoft Teams の両方に独自のアプリカタログがあるため、展開には両方のサービスで操作が必要になります。There are multiple options to deploy Microsoft Teams tab. As both SharePoint and Microsoft Teams have their own app catalog, deployment requires operations on both services. 新しい機能の可視性は、実行する展開手順によって制御できます。Visibility of the new functionality can be controlled by the deployment steps taken.

テナントの展開Tenant deployment

Microsoft は、microsoft Teams のアプリマニフェストとアプリパッケージを自動的に作成して Microsoft Teams ストアにインストールする、アプリカタログリボンに [ teams と同期] ボタンを実装します。In the future, Microsoft will implement a Sync with Teams button in the App Catalog ribbon that will automatically create the Microsoft Teams app manifest, app package and install it in the Microsoft Teams store. これにより、テナントおよび Microsoft Teams teams のすべてのユーザーがソリューションを使用できるようになります。This will make your solution available for all users in your tenant and Microsoft Teams teams.

視現時点では、この機能は完全には実装されていないため、SharePoint Framework web パーツをカスタムタブとして Microsoft Teams に展開することは推奨されていません。このドキュメントは、この機能が SharePoint Online の間で展開されている場合に更新されます。[IMPORTANT] At this time this functionality is not fully implemented and is not the recommended way to deploy your SharePoint Framework web part to Microsoft Teams as a custom tab. This document will be updated when this functionality has been deployed across SharePoint Online. それまでの期間、お勧めするアプローチは、サイドローディング アプローチを使用して、SharePoint Framework の Web パーツをカスタム Microsoft Teams タブとしてインストールする方法です。Until that time, the recommended approach is to install SharePoint Framework web parts as custom Microsoft Teams tabs using the side loading approach.

代替展開オプションAlternative deployment options

たとえば、ソリューションを展開して、テナント内の特定の1つのチームのみがソリューションを使用できるようにする方法もあります。There is an alternative way to deploy your solution which will for instance allow you to make a solution available only to one specific team in your tenant. 「Web パーツに対して Microsoft teams のマニフェストを手動で作成する」を参照し、それを Microsoft teams に展開して、マニフェストを作成する方法を参照してください。Please refer to Create Microsoft Teams manifest manually for a web part and deploy it to Microsoft Teams how to create the manifest.

  1. 通常の方法で SharePoint Framework ソリューションを構築します。Build your SharePoint Framework solution the normal way:

    gulp build
    gulp bundle --ship
    gulp package-solution --ship
    
  2. プロジェクトフォルダーで、次のように /teamsフォルダーを見つけます。Locate the ./teams folder in your project folder:

    ソリューション構造

  3. そこに2つのイメージファイルがあることに注意してください。Notice that there are 2 image files in there. Web パーツに対して Microsoft teams マニフェストを手動で作成する」の説明に従って作成したマニフェストファイルを追加し、それを**** Microsoft teams に展開してこのフォルダーに展開します。Add the manifest file you created as described in Create Microsoft Teams manifest manually for a web part and deploy it to Microsoft Teams to this folder and call it *manifest.json.

  4. マニフェストを ./teamsフォルダーに追加した後、フォルダーの内容を zip ファイルにします。After you added the manifest to the ./teams folder, zip the contents of the folder into a zip file. つまり、zip ファイルには、manifest.xml と2つの画像のみが含まれている必要があります。This means that the zip file should only contain the manifest.json and the 2 images.

  5. ソリューションをアプリカタログに追加し、[展開] を選択する前に、[組織内のすべてのサイトでこのソリューションを使用できるようにする] オプションを選択してください。Add your solution to the app catalog and make sure to select the option Make this solution available to all sites in the organization before selecting Deploy

Teams で外部アプリのサイドローディングを有効にするTurn on side loading of external apps in Teams

特定のチームのアプリをアップロードするためには、サイドローディングを有効にする必要があります。In order to upload an app for a specific team, you will have to enable side loading. テナントでは、次の構成手順を1 回だけ実行する必要があります。The following configuration steps must be performed only once in a tenant.

  1. アプリ起動ツールで [管理者] を選択して、Microsoft 365 管理センターに移動します。Navigate to the Microsoft 365 Admin center by selecting Admin from the app launcher.

    管理 UI への移動

  2. 左側のメニューから [設定][サービス & アドイン] を選択しますChoose Settings and Services & add-ins from the left menu

  3. 管理するサービスのリストから、Microsoft Teams を選択します。Select Microsoft Teams from the list of services you want to manage

    管理 UI への移動

  4. テナント全体の設定で [アプリ] セクションを拡張します。Extend the Apps section under Tenant-wide settings

    管理 UI への移動

  5. [外部アプリのサイドロードを許可する] 設定が有効になっていることを確認しますEnsure that Allow sideloading of external apps setting is enabled

    管理 UI への移動

  6. [保存] をクリックします。Click Save.

    注意

    サイドローディング構成は、使用しているテナントで1回だけ実行されます。The side loading configuration to be done only once in a tenant which you are using. Microsoft Teams 開発のための Office 365 テナントの準備に関するその他のコンテンツについては、Microsoft Teams 開発者向けドキュメントを参照してください。More content on preparing your Office 365 tenant for Microsoft Teams development from the Microsoft Teams developer documentation.

  7. アプリ起動ツールで [Teams] を選択し、Microsoft Teams インスタンスに移動します。Move to your Microsoft Teams instance by selecting Teams in the app launcher.

    エクスプローラーでの ZIP ファイル

  8. 機能のテストに使用する Team を選択し、... メニューから [チームの管理] を選択します。Choose a Team which you want to use for testing the capability and select Manage team from the ... menu.

    チームの管理

  9. [アプリ] タブに移動しますMove to Apps tab

  10. 右下から [Upload a custom app] (カスタム アプリのアップロード) を選択しますChoose Upload a custom app from the bottom right corner

    注意

    この設定を利用できない場合は、使用しているテナントでサイド ローディングが有効になっていません。If this setting is not available, side loading is not enabled in the tenant which you are using. テナント管理者の UI で設定をもう一度確認します。Double check the settings from the tenant admin UIs.

  11. 前の手順で作成した Microsoft Teams アプリのマニフェストファイルを、新しく作成したソリューションの下にある¥ teamsフォルダーからアップロードして、アプリの一覧に適切に表示されるようにします。Upload the Microsoft Teams app manifest file your created earlier from the ./teams folder under your newly created solution and ensure that it's properly visible in the list of Apps. カスタム画像がソリューションの説明とともにどのように表示されるかを確認します。Notice how the custom image is visible with the description of the solution.

    チームの管理

  12. ソリューションをアップロードした Team 内のチャネルに移動します。Move to a channel in the Team where you just uploaded the solution. 次の図では、teams で一般的なチャネルをアクティブ化しています。 ****In below picture we have activated the General channel in Team

    チャネルのアクティブ化

  13. チャネル+に新しいタブを追加するには、ここをクリックします。Click + to add a new tab on the channel

  14. リスト内の MyFirstTeamTab と呼ばれるカスタム タブをクリックしますClick your custom Tab called MyFirstTeamTab in the list

    タブを追加します

  15. 公開されたプロパティに基づいて、tab インスタンスをパラメーター化する方法に注目してください。Notice how you can parameterize the tab instance based on the exposed properties. [保存] を選択します。Select Save

    タブを追加します

両方のシステムでのさまざまなオプションに関する追加の詳細情報については、次に示すリソースを参照してください。See following resources for additional details around the different options in both systems:

Web パーツが Teams コンテキストであるかどうかを検出しますDetecting if web part is in Teams context

Web パーツのページ コンテキストには、既定で Teams JavaScript SDK への参照があるので、Web パーツがタブとして表示されるときに Teams コンテキストに簡単にアクセスできます。Page context in a web part has by default a reference to the Teams JavaScript SDK, so that you can easily get access on the Teams context when your web part is rendered as a tab.

this.context.microsoftTeams

注意

Microsoft teams の開発に関するドキュメントの「microsoft teams」タブコンテキストに関する詳細情報を参照してください。See more information around the Microsoft Teams tab context from the Microsoft Teams development documentation.

関連項目See also