SharePoint のクライアント側 Web パーツからの SharePoint アセットのプロビジョニング

[アーティクル]
04/08/2023

SharePoint アセットは、SharePoint Framework ソリューションの一部としてプロビジョニングでき、ソリューションが SharePoint サイトにインストールされている場合はそこに配置されます。

開始する前に、次の記事のに示す手順を完了し、カスタムのクライアント側 Web パーツを作成する基本的な流れを把握しておきます。

Microsoft 365 プラットフォームコミュニティ (PnP) YouTube チャンネルのこのビデオを見て、これらの手順に従うこともできます。

新しい Web パーツプロジェクトの作成

自分の好みの場所に新しいプロジェクトディレクトリを作成します。
```
md asset-deployment-webpart
```
プロジェクトディレクトリへ移動します。
```
cd asset-deployment-webpart
```
Yeoman の SharePoint ジェネレーターを実行して、新しいクライアント側の Web パーツソリューションを作成します。
```
yo @microsoft/sharepoint
```
プロンプトが表示されたら、以下の値を入力します (以下で省略されたすべてのプロンプトに対して既定のオプションを選択します)。

ソリューション名は何ですか?: asset-deployment-webpart
どの種類のクライアント側コンポーネントを作成しますか?: WebPart
Web パーツ名は何ですか?: AssetDeployment
どのテンプレートを使用しますか?: JavaScript なしのフレームワーク

この時点で、Yeoman は必須の依存関係をインストールし、ソリューションファイルをスキャフォールディングします。これには数分かかる場合があります。 Yeoman はプロジェクトをスキャンフォールディングし、AssetDeployment の Web パーツも含めます。

次に、以下を実行して、Visual Studio Code で Web パーツプロジェクトを開きます。
```
code .
```

SharePoint アセット用のフォルダー構造を作成する

assets フォルダーを最初に作成する必要があります。このフォルダーには、パッケージのインストール時に SharePoint 構成をプロビジョニングするためのフィーチャーフレームワークアセットをすべて配置します。

sharepoint と呼ばれるフォルダーをソリューションのルートに作成します。
作成した sharepoint フォルダーのサブフォルダーとして、assets と呼ばれるフォルダーを作成します。

ソリューション構造は次の図のようになります。

初期展開のためのフィーチャーフレームワークファイルを作成する

SharePoint アセットをフィーチャーフレームワーク要素のあるサイトにプロビジョニングするには、必要な XML ファイルをアセットのフォルダーに作成する必要があります。 SharePoint Framework ソリューションパッケージでサポートされている要素は次のとおりです。

フィールド/サイト列
コンテンツタイプ
インスタンスの一覧表示
カスタムスキーマを使用するリストインスタンス

SharePoint の定義用に element.xml ファイルを追加する

次の手順では、プロビジョニングする必要のある構造を定義します。

sharepoint\assets フォルダー内に、新しいファイル elements.xml を作成します。

次の XML 構造を elements.xml にコピーします。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

    <Field ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}"
            Name="SPFxAmount"
            DisplayName="Amount"
            Type="Currency"
            Decimals="2"
            Min="0"
            Required="FALSE"
            Group="SPFx Columns" />

    <Field ID="{943E7530-5E2B-4C02-8259-CCD93A9ECB18}"
            Name="SPFxCostCenter"
            DisplayName="Cost Center"
            Type="Choice"
            Required="FALSE"
            Group="SPFx Columns">
        <CHOICES>
        <CHOICE>Administration</CHOICE>
        <CHOICE>Information</CHOICE>
        <CHOICE>Facilities</CHOICE>
        <CHOICE>Operations</CHOICE>
        <CHOICE>Sales</CHOICE>
        <CHOICE>Marketing</CHOICE>
        </CHOICES>
    </Field>

    <ContentType ID="0x010042D0C1C200A14B6887742B6344675C8B"
            Name="Cost Center"
            Group="SPFx Content Types"
            Description="Sample content types from web part solution">
        <FieldRefs>
            <FieldRef ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}" />
            <FieldRef ID="{943E7530-5E2B-4C02-8259-CCD93A9ECB18}" />
        </FieldRefs>
    </ContentType>

    <ListInstance
            CustomSchema="schema.xml"
            FeatureId="00bfea71-de22-43b2-a848-c05709900100"
            Title="SPFx List"
            Description="SPFx List"
            TemplateType="100"
            Url="Lists/SPFxList">
    </ListInstance>

</Elements>

この XML では、注意すべき点がいくつかあります。

コンテンツタイプと、カスタムスキーマのあるリストインスタンスの 2 つのフィールドをサイトにプロビジョニングしています。
定義では、SharePoint 開発者によく知られている、標準フィーチャーフレームワークスキーマを使用しています。
カスタムフィールドは導入したコンテンツタイプで参照されています。
ListInstance 要素の CustomSchema 属性を使用して、リストに対してプロビジョニング時間 schema.xml ファイルを定義します。この方法では、リストはそのまま使用できるリストテンプレート (この場合は通常のカスタムリスト '100') に基づいていますが、初期プロビジョニング中は、代替プロビジョニングを定義することができます。
フィーチャーを使ってリストインスタンスをプロビジョニングするとき、特定のリスト定義に関連付けられているフィーチャーの ID を指定する必要があります。 FeatureId 属性を使用する場合、リスト定義を含むフィーチャーの ID を指定することになります。例: カスタムリストのインスタンスをプロビジョニングする場合は、FeatureId 属性を {00bfea71-de22-43b2-a848-c05709900100} に設定します。

フィーチャー要素マニフェストスキーマの詳細については、「SharePoint Foundation でのフィーチャーの使用」を参照してください。

リスト構造を定義する schema.xml ファイルを追加する

前の手順では、ListInstance 要素の CustomSchema 属性で schema.xml ファイルを参照していたため、このファイルをパッケージに含める必要があります。

sharepoint\assets フォルダー内に、新しいファイル schema.xml を作成します。

次の XML 構造を schema.xml にコピーします。

<List xmlns:ows="Microsoft SharePoint" Title="Basic List" EnableContentTypes="TRUE" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/Basic List" BaseType="0" xmlns="http://schemas.microsoft.com/sharepoint/">
  <MetaData>
    <ContentTypes>
      <ContentTypeRef ID="0x010042D0C1C200A14B6887742B6344675C8B" />
    </ContentTypes>
    <Fields></Fields>
    <Views>
      <View BaseViewID="1" Type="HTML" WebPartZoneID="Main" DisplayName="$Resources:core,objectiv_schema_mwsidcamlidC24;" DefaultView="TRUE" MobileView="TRUE" MobileDefaultView="TRUE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/images/generic.png" Url="AllItems.aspx">
        <XslLink Default="TRUE">main.xsl</XslLink>
        <JSLink>clienttemplates.js</JSLink>
        <RowLimit Paged="TRUE">30</RowLimit>
        <Toolbar Type="Standard" />
        <ViewFields>
          <FieldRef Name="LinkTitle"></FieldRef>
          <FieldRef Name="SPFxAmount"></FieldRef>
          <FieldRef Name="SPFxCostCenter"></FieldRef>
        </ViewFields>
        <Query>
          <OrderBy>
            <FieldRef Name="ID" />
          </OrderBy>
        </Query>
      </View>
    </Views>
    <Forms>
      <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
      <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
      <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
    </Forms>
  </MetaData>
</List>

この XML では、注意すべき点がいくつかあります。

elements.xml ファイルを使用して展開されたカスタムコンテンツタイプは ContentTypeRef 要素で参照されます。
SPFxAmount と SPFxCostCenter と呼ばれるカスタムフィールドが FieldRef 要素で参照されます。

Schema.xml スキーマの詳細については、「Schema.xml ファイルについて」を参照してください。

定義がビルドパイプラインで使用されることを確認する

ここまでで、展開したときにフィーチャースキーマを使用してソリューションから Share Point アセットをプロビジョニングするためのファイルを作成しました。次の手順では、それらを SharePoint パッケージ *.sppkg ファイルに含めます。

config フォルダーから package-solution.json を開きます。

package-solution.json ファイルは、次のコードに示されているようにパッケージメタデータを定義します。

新しいフィーチャーフレームワークファイルが SharePoint パッケージに含まれていることを確認します。

ソリューションパッケージに対して、フィーチャーフレームワークの機能定義を含めます。次のコードに示すように、ソリューション構造で必要なフィーチャーに対して JSON 定義を含めます。

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    //...
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    // >>> START
    //     add the following to the package-solution.json file
    "features": [{
      "title": "asset-deployment-webpart-client-side-solution",
      "description": "asset-deployment-webpart-client-side-solution",
      "id": "00000000-0000-0000-0000-000000000000",     // <-- Update new GUID
      "version": "1.0.0.0",
      "assets": {
        "elementManifests": [
          "elements.xml"
        ],
        "elementFiles":[
          "schema.xml"
        ]
      }
    }]
    // <<< END
  },
  "paths": {
    "zippedPackage": "solution/asset-deployment-webpart.sppkg"
  }
}

この XML では、注意すべき点がいくつかあります。

feature プロパティ内で id プロパティに一意の GUID を必ず定義してください。
features プロパティは配列なので、厳密にはパッケージに複数の機能を持つことができます。しかし、これはお勧めしません。
要素のマニフェストファイルとしての機能定義にふさわしくパッケージ化されるように、elements.xml は elementManifests で参照されます。
複数の element.xml ファイルを定義に含めることができ、それらのファイルは JSON 定義に記載されている順序で実行されます。通常、element.xml が複数あると、不要な複雑さが増すため、複数使用を避ける必要があります。必要なアセットはすべて、1 つの element.xml ファイルに定義できます。

アセットプロビジョニングの展開およびテスト

ここまでで、ソリューションを SharePoint に展開する準備が整いました。ソリューションのインストール時にアセットを SharePoint サイトに直接プロビジョニングしているので、ローカルまたはオンラインのワークベンチで機能をテストすることはできません。

コンソールで、次のコマンドを実行して、Web パーツを含むクライアント側のソリューションをパッケージ化すると、パッケージできる基本構造を取得できます。
```
gulp bundle
```
次のコマンドを実行して、ソリューションパッケージを作成します。
```
gulp package-solution
```
このコマンドは、sharepoint/solution フォルダーに asset-deployment-webpart.sppkg パッケージを作成します。
SharePoint でパッケージをテストする前に、定義したフィーチャーフレームワーク要素に関して作成したパッケージの既定の構造を確認してみましょう。

Visual Studio Code 側に戻り、実際の *.sppkg パッケージに含まれる生の XML 構造を含む sharepoint/solution/debug フォルダーを展開します。
生成されたパッケージをアプリカタログに展開します。

ブラウザーでテナントのアプリカタログに移動します。
sharepoint/solution フォルダーにある asset-deployment-webpart.sppkg をアプリカタログにアップロードするか、ドラッグアンドドロップします。 SharePoint はダイアログを表示し、展開するクライアント側ソリューションを信頼するよう求めます。

注:

SharePoint は、発行済みパッケージを展開後に検証します。パッケージが展開に対して有効である場合にのみ、信頼ダイアログが表示されます。この検証の状態は、アプリカタログの 有効なアプリパッケージ 列からも表示できます。
SharePoint アセットのプロビジョニングをテストするサイトに移動します。このソリューションパッケージを展開したテナント内の任意のサイトコレクションに移動できます。
上部のナビゲーションバーの右側にある歯車アイコンを選択し、[アプリの追加] を選択して、アプリページに移動します。
[検索] ボックスで、「deployment」と入力し、Enter キーを押してアプリをフィルター処理します。
asset-deployment-webpart-client-side-solution アプリを選択して、アプリをサイトにインストールします。インストールが完了したら、F5 キーを選択してページを更新します。ソリューションパッケージ展開の一環として、カスタムの [SPFx List] (SPFx リスト) がサイトにどのようにプロビジョニングされているかを確認してください。
[SPFx リスト] を選択してリストに移動します。カスタムフィールド Amount と Cost Center がリストの既定のビューにどのように自動的に表示されるかに注目してください。

新しいバージョン用のアップグレードアクションを定義する

SharePoint Framework ソリューションの新しいバージョンを構築するときには、プロビジョニングされた SharePoint アセットに必要な変更を加えることが必要な場合があります。パッケージの新しいバージョンを展開するときは、フィーチャーフレームワークのアップグレードアクションのサポートを利用できます。

SharePoint Framework ソリューションでは、次のフィーチャーフレームワークのアップグレードアクションの定義をサポートしています:

ApplyElementManifest
AddContentTypeField

フィーチャーフレームワークのアップグレードアクション定義の詳細については、「SharePoint アドインの更新プロセス」を参照してください。

新しいバージョン用の element.xml ファイルを追加する

Visual Studio Code 内のソリューションに戻ります。
sharepoint\assets フォルダー内に、新しいファイル elements-v2.xml を作成します。

プロビジョニング対象の新しい SharePoint リストを New List のタイトルで定義するため、次の XML 構造を elements-v2.xml にコピーします。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <ListInstance
    FeatureId="00bfea71-de22-43b2-a848-c05709900100"
    Title="New List"
    Description="New list provisioned from v2"
    TemplateType="100"
    Url="Lists/NewList">
  </ListInstance>
</Elements>

重要

このXML では GUID を変更しないでください。これは、リストタイプが定義されている GUID を指定します。

また、実際のフィーチャーフレームワークのアップグレードアクションを定義する必要もあるため、sharepoint\assets フォルダー内に新しいファイル upgrade-actions-v2.xml を作成します。
次の XML データ構造を upgrade-actions-v2.xml にコピーします。パス内のフィーチャー GUID 参照は、sharepoint/solution/debug フォルダーの下に自動的に作成されたフォルダーを参照しており、ソリューションに基づいて更新する必要があります。この GUID は、package-solution.json ファイルで定義したフィーチャーの GUID とも一致しています。
```
<ApplyElementManifests>
  <ElementManifest Location="{feature-guid}\elements-v2.xml" />
</ApplyElementManifests>
```

重要

{feature-guid} は、package-solution.json ファイルに追加したフィーチャーの GUID と一致している必要があります。

SharePoint へ新しいバージョンを展開する

次に、ソリューションのバージョンと、アセットのプロビジョニングを行うフィーチャーのバージョンの両方を更新する必要があります。

重要

ソリューションのバージョンは、入手可能な Framework ソリューションの新しいバージョンがあることを SharePoint に示します。フィーチャーのバージョンは、既存のサイトでソリューションパッケージがアップグレードされると、それに応じてアップグレードアクションが実行されることを示しています。

config フォルダーで package-solution.json を開き、ソリューションとフィーチャーのバージョンの値を 2.0.0.0 に更新します。
また、elementManifest セクションの下に elements-v2.xml を含め、作成した upgrade-actions-v2.xml ファイルへのポインターとともに upgradeActions 要素を含める必要があります。

これで、必要な変更を加えた package-solution.json ファイルが完成します。ソリューションに対して識別子が若干異なる場合があるため、不足しているものだけを追加するようにしてください。
```
{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    //...
    "version": "2.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "features": [{
      "title": "asset-deployment-webpart-client-side-solution",
      "description": "asset-deployment-webpart-client-side-solution",
      "id": "{feature-guid}",
      "version": "2.0.0.0",
      "assets": {
        "elementManifests": [
          "elements.xml",
          "elements-v2.xml"
        ],
        "elementFiles":[
          "schema.xml"
        ],
        "upgradeActions":[
          "upgrade-actions-v2.xml"
        ]
      }
    }]
    //...
  }
}
```
重要

なお、elementManifest セクションの下には、elements-v2.xml も含めています。これにより、このパッケージをバージョン 2.0 としてクリーンなサイトにインストールすると、アップグレードされたパッケージと最終的に一致することになります。
コンソールウィンドウで、次のコマンドを実行して、Web パーツを含むクライアント側のソリューションを再パッケージ化すると、パッケージできる基本構造を取得できます。
```
gulp bundle
```
次のコマンドを実行して、ソリューションパッケージを作成します。
```
gulp package-solution
```
このコマンドによってソリューションパッケージの新しいバージョンが sharepoint/solution フォルダーに作成されます。なお、更新した XML ファイルがソリューションパッケージに含まれているかどうかは、sharepoint/solution/debug フォルダーから確認できます。
次に、生成された新しいバージョンをアプリカタログに展開する必要があります。テナントのアプリカタログに移動します。
sharepoint/solution フォルダーにある asset-deployment-webpart.sppkg をアプリカタログにアップロードするか、ドラッグアンドドロップします。 SharePoint は、既存のバージョンをオーバーライドすることの確認を求めます。
[置換する] をクリックして、アプリカタログを最新のバージョンに更新します。
[展開] をクリックして最新バージョンを信頼します。

これで、asset-deployment-webpart-client-side-solution の [アプリのバージョン] 列が "2.0.0.0" に更新されます。

サイト内の既存のインスタンスを更新する

パッケージがアプリカタログ内で更新されたため、SharePoint コンテンツサイトに移動し、既存のインスタンスのアップグレードを行えるようになりました。

SharePoint Framework ソリューションの最初のバージョンを展開したサイトに移動します。
[サイトコンテンツ] ページに移動します。
asset-deployment-webpart-client-side-solution ソリューションのコンテキストメニューから [詳細] を選択します。

これにより、インストールされている SharePoint Framework ソリューションに関する現在の詳細が表示されます。このページは、[このアプリの新しいバージョンがあります。今すぐ入手してください。] というテキストを表示し、新しいバージョンが入手可能であることも示します。
[GET IT] (入手する) ボタンを選択してパッケージの更新プロセスを開始します。

クラシック環境に移動すると、SharePoint Framework ソリューションに適用されている実際のアップグレード操作の詳細が表示されます。

注:

SharePoint Framework は SharePoint アドインと同じアプリのインフラストラクチャを使用しているので、アップグレードの状態は、アドインまたはアプリに更新が発生する可能性を示します。

更新にはしばらく時間がかかりますが、ソリューションの状態が正常に戻ると、サイトコンテンツページを更新し、更新プロセスの一環として、[新しいリスト] と呼ばれるリストが正常にプロビジョニングされたことを確認できます。

これで、このインスタンスを最新バージョンにアップグレードできました。 SharePoint アセットプロビジョニングのこのフィーチャーフレームワークオプションは、SharePoint アドインモデルのオプションとよく似ています。主な違いはアセットが通常の SharePoint サイトに直接プロビジョニングされる点です。これは、SharePoint Framework ソリューションでは、アプリまたはアドインの Web といった概念がないためです。

SharePoint のクライアント側 Web パーツからの SharePoint アセットのプロビジョニング

新しい Web パーツプロジェクトの作成

SharePoint アセット用のフォルダー構造を作成する

初期展開のためのフィーチャーフレームワークファイルを作成する

SharePoint の定義用に element.xml ファイルを追加する

リスト構造を定義する schema.xml ファイルを追加する

定義がビルドパイプラインで使用されることを確認する

アセットプロビジョニングの展開およびテスト

新しいバージョン用のアップグレードアクションを定義する

新しいバージョン用の element.xml ファイルを追加する

SharePoint へ新しいバージョンを展開する

サイト内の既存のインスタンスを更新する

関連項目

その他のリソース

SharePoint のクライアント側 Web パーツからの SharePoint アセットのプロビジョニング

新しい Web パーツ プロジェクトの作成

SharePoint アセット用のフォルダー構造を作成する

初期展開のためのフィーチャー フレームワーク ファイルを作成する

SharePoint の定義用に element.xml ファイルを追加する

リスト構造を定義する schema.xml ファイルを追加する

定義がビルド パイプラインで使用されることを確認する

アセット プロビジョニングの展開およびテスト

新しいバージョン用のアップグレード アクションを定義する

新しいバージョン用の element.xml ファイルを追加する

SharePoint へ新しいバージョンを展開する

サイト内の既存のインスタンスを更新する

関連項目

その他のリソース

新しい Web パーツプロジェクトの作成

初期展開のためのフィーチャーフレームワークファイルを作成する

定義がビルドパイプラインで使用されることを確認する

アセットプロビジョニングの展開およびテスト

新しいバージョン用のアップグレードアクションを定義する