Zenn
📦

SharePoint Framework の展開について理解する

に公開
SharePoint
tech

はじめに

SharePoint Framework は npm、Gulp、Yo といった、これまでの SharePoint 開発では利用されてこなかったフロントエンドの技術が注目されがちです。しかし、SharePoint Framework で作成したアプリがどのように展開されるかについては、あまり語られていません。今回の記事では、どのような仕組みでアプリが展開され、利用できるようになるのかを解説します。

アプリ カタログ サイトへのデプロイ

SharePoint Framework が登場する以前の開発手法として SharePoint アドインというものがありました。SharePoint アドインでは、ファーム (SharePoint Online の場合はテナント) ごとのアプリ カタログ サイトにアプリケーション パッケージ (app ファイル) をアップロードします。これにより、他のサイトからアプリをインストールできるようになります。SharePoint Framework でもこれと同じ仕組みを使用します。ただし、SharePoint アドインとは異なり、アプリケーション パッケージの拡張子は sppkg です。[1] SharePoint Online では、アプリ カタログ サイトの他に、サイト コレクションのアプリ カタログがあります。これを使用することで、設定したサイト コレクションのみで展開可能なアプリ カタログを使用できるようになります。

SharePoint アドインでは、開発のための開発者サイトというものが存在していましたが、SharePoint Framework では開発者サイトは必要ありません。その代わり、SharePoint Framework では、ローカルまたは {{site-url}}/_layouts/15/workbench.aspx から Web パーツをデバッグできます。

サイトへのインストール

アプリをサイトにインストールすると、サイトの機能 にインストールしたアプリの機能が追加されます。[2] このことから、インストールしたアプリはサイトの機能として管理されていることが確認できます。

サイトの機能 に表示される名前や説明は SharePoint Framework の package-solution.json で指定できます。Web パーツの場合、既定では package-solution.json には含まれていませんが、以下のように features という要素を追加します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "SampleApplication",
    "id": "35ea8428-df04-4d44-88e8-68b5ca9084da",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "features": [
      {
        "title": "SampleApplication",
        "description": "SampleApplication web part",
        "id": "ac4d0af6-b664-46ee-9da8-13ed1443fb16",
        "version": "1.0.0.0"
      }
    ],
  },
  "paths": {
    "zippedPackage": "solution/SampleApplication.sppkg"
  }
}

gulp package-solution コマンドを実行したときに、ここの情報が読み取られ、最終的には XML 形式のファイルとしてアプリケーション パッケージに格納されます。パッケージを作成したときには debug フォルダーにアプリケーション パッケージの中身が展開された状態で存在します。それを確認することで、どのような仕組みでアプリケーション パッケージが SharePoint で展開されるかを理解できます。

おわりに

SharePoint では既存の仕組みをうまく利用しつつ SharePoint Framework を動かしています。新しい手法にどうしても目が行きがちですが、既存の知識も決して無駄にはなっていないことを理解しておきたいです。

脚注

  1. アプリケーション パッケージは gulp package-solution コマンドで作成します。 ↩︎

  2. 通常は有効になっていますが、何らかの理由で無効にすると Web パーツが一覧に出てこないことがあります。ご注意ください。 ↩︎

Discussion