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

SharePoint Framework v1.7 以降、SharePoint Framework ツールを使用して Microsoft Teams のタブを作成し、ソリューションのホストとして SharePoint を使用できるようになりました。Starting with SharePoint Framework v1.7, you can build your Microsoft Team tabs 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 パーツと似ています。Development model is similar as for SharePoint Framework web parts.
  • 技術的には、どの SharePoint Framework Web パーツも Microsoft Teams のタブとして公開できます。Technically any web part can be exposed as a tab in Microsoft Teams.
  • カスタム タブを Web パーツおよびテナント内のタブとして公開するスコープ オプションが複数あります。You have different 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 underlaying 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.

重要

この機能は現在プレビュー段階であり、変更される可能性があります。This feature is currently in preview and is subject to change. 運用環境での使用は、現在サポートされていません。It is not currently supported for use in production environments. SharePoint 開発ドキュメントの問題リスト」を使用して、この機能に関するフィードバックやご意見をお寄せください。Your feedback and input around this capability is welcome using the SharePoint Dev Docs issue list.

重要

プロパティの構成に関する既知のバグがあり、それを修正する予定です。There is a known bug related on the property configuration, which will be addressed. 既定のプロパティ値は変更できません。変更すると、Web パーツがタブに正常に追加されません。この問題の修正プログラムが、間もなくロールアウトされる予定です。You cannot change default property values or the web part is not successfully added on the tab. Fix for this issue will be rolling out in upcoming days.

開発プロセスDevelopment process

作成するソリューションでプレビュー機能を使用可能にする SharePoint Framework 1.7 パッケージの plusbeta バージョンを使用するだけで、Microsoft Teams のタブを開発できます。You can start developing Microsoft Teams tabs simply by using the plusbeta version of the SharePoint Framework 1.7 packages that enables usage of preview functionality in the solution that you will create. 開始する手順の概要は次のとおりです。High level steps to get started are as follows.

  1. plusbeta スイッチを使って SharePoint Framework Yeoman ジェネレーターを開始すると、作成されたソリューションでプレビュー パッケージが使用されます。Start SharePoint Framework Yeoman generator with the plusbeta switch, so that the created solution will use the preview packages.

        yo @microsoft/sharepoint --plusbeta
    
  2. クライアント側の Web パーツでソリューションを作成します。Create a solution with a client-side web part.

  3. テナント スコープの展開オプションを使用して、SharePoint アプリ カタログに Web パーツを展開します。Deploy web part using tenant-scoped deployment option to your SharePoint app catalog.
  4. ソリューションの /teams フォルダーにある manifest.json を ZIP ファイルとしてパッケージ化します。Package manifest.json located in the /teams folder in your solution as a zip file . ソリューションの作成時に、既定値を使ってこのファイルが自動的に設定済みです。This file was automatically configured with default settings when your solution was created.
  5. Microsoft Teams にこの ZIP ファイル (アプリケーション) を展開して開始し、新しいタブを適切なチャネルに追加します。Deploy your zip file (application) to the Microsoft Teams and start add a new tab in the preferred channel.

注意

また、「SharePoint Framework を使用した Microsoft Teams タブの作成」チュートリアルから、詳細な手順に従って開始することもできます。You can also follow the detailed steps to get started from the Building Microsoft Teams tab using SharePoint Framework tutorial.

展開オプションDeployment options

開発された Microsoft Teams タブの展開については、異なるオプションはほとんどありません。There are few different options on getting the developed Microsoft Teams tab deployed. SharePoint と Microsoft Teams の両方に独自のアプリ カタログがあるため、展開では両方のサービスの操作が必要となります。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 on the exact deployment mechanism.

次の表は、表スタイルのマトリックスでの展開オプションを示しています。Following table shows the deployment options in table style matrix. 最初の行は Microsoft Teams 展開オプションを示し、最初の列はそれに対応する SharePoint 展開オプションを示します。Top row shows the Microsoft Teams deployment options and first column mapped SharePoint deployment options.

SharePoint/Teams 展開の種類SharePoint/Teams deployment type ストアに展開されるマニフェストManifest deployed to Store Teams チャネル カタログに展開されるマニフェストManifest deployed to Teams channel catalog
SharePoint テナント スコープの展開SharePoint tenant-scoped deployment すべてのチームとすべての SharePoint サイトで利用可能なソリューションSolution available in all teams and all SharePoint sites 特定のチームとすべての SharePoint サイトで利用可能なソリューションSolution available in specific team and all SharePoint Sites
チームの背後にある SharePoint サイトでテナント スコープ オプションを備えたサイト コレクション アプリ カタログSite collection app catalog with tenant-scoped option in SharePoint site behind of the Team オプションではありませんNot an option 特定のサイト コレクションと特定のチームでソリューションを使用できますSolution is available in the specific site collection and specific team
SharePoint サイト レベルの展開SharePoint site level deployment オプションではありませんNot an option 特定の SharePoint サイトと特定のチームでソリューションを使用できますSolution is available in specific SharePoint site and in specific team

両方のシステムでのさまざまなオプションに関する追加の詳細情報については、次に示すリソースを参照してください。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 th Microsoft Teams tab context from the Microsoft Teams development documentation.

関連項目See also