SharePoint のクライアント側 Web パーツからの SharePoint アセットのプロビジョニングProvision SharePoint assets from your SharePoint client-side web part

SharePoint アセットは、SharePoint Framework ソリューションの一部としてプロビジョニングでき、ソリューションが SharePoint サイトにインストールされている場合はそこに配置されます。SharePoint assets can be provisioned as part of the SharePoint Framework solution, and are deployed to SharePoint sites when the solution is installed on it.

開始する前に、次の記事のに示す手順を完了し、カスタムのクライアント側 Web パーツを作成する基本的な流れを把握しておきます。Before you start, complete the procedures in the following articles to ensure that you understand the basic flow of creating a custom client-side web part:

SharePoint PnP YouTube チャンネルのビデオで手順を確認することもできます。You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel.



新しい Web パーツ プロジェクトの作成Create a new web part project

  1. 自分の好みの場所に新しいプロジェクト ディレクトリを作成します。Create a new project directory in your favorite location:

    md asset-deployment-webpart
    
  2. プロジェクト ディレクトリへ移動します。Go to the project directory:

    cd asset-deployment-webpart
    
  3. Yeoman の SharePoint ジェネレーターを実行して、新しいクライアント側の Web パーツ ソリューションを作成します。Create a new client-side web part solution by running the Yeoman SharePoint Generator:

    yo @microsoft/sharepoint
    
  4. ダイアログ ボックスが表示されたら、次の手順に従います。When prompted:

    • 既定の asset-deployment-webpart をソリューション名として受け入れ、Enter キーを押します。Accept the default asset-deployment-webpart as your solution name, and then select Enter.
    • [SharePoint Online のみ (最新)] を選択し、Enter キーを押します。Select SharePoint Online only (latest), and then select Enter.
    • ファイルの配置場所として [現在のフォルダーを使用する] を選択します。Select Use the current folder as the location for the files.
    • [N] を選択して、拡張機能が使用されている場合は各サイトに明示的にインストールするよう要求します。Select N to require the extension to be installed on each site explicitly when it's being used.
    • 作成するクライアント側コンポーネントの種類として、[Web パーツ] を選択します。Select WebPart as the client-side component type to be created.
  5. 次の一連のダイアログ ボックスでは、Web パーツの詳細情報について入力が求められます。The next set of prompts ask for specific information about your web part:

    • Web パーツ名に「AssetDeployment」と入力し、Enter キーを押します。Enter AssetDeployment for the web part name, and then select Enter.
    • Web パーツの説明に「AssetDeployment Web パーツ」と入力し、Enter キーを押します。Enter AssetDeployment Web Part as the description of the web part, and then select Enter.
    • フレームワークには、既定の [JavaScript Web フレームワークなし] オプションを受け入れ、Enter キーを押して続行します。Accept the default No JavaScipt web framework option for the framework, and then select Enter to continue.

    Yeoman のメッセージ表示

    この時点で、Yeoman は必須の依存関係をインストールし、ソリューション ファイルをスキャフォールディングします。At this point, Yeoman installs the required dependencies and scaffolds the solution files. これには数分かかる場合があります。This might take a few minutes. Yeoman はプロジェクトをスキャンフォールディングし、AssetDeployment の Web パーツも含めます。Yeoman scaffolds the project to include your AssetDeployment web part as well.

  6. スキャフォールディングが完了したら、次のコマンドを実行して、プロジェクトの依存関係のバージョンをロック ダウンします。After the scaffolding completes, lock down the version of the project dependencies by running the following command:

    npm shrinkwrap
    
  7. 次に、以下のように入力して、Visual Studio Code で Web パーツ プロジェクトを開きます。Next, enter the following to open the web part project in Visual Studio Code:

    code .
    

SharePoint アセット用のフォルダー構造を作成するCreate folder structure for your SharePoint assets

assets フォルダーを最初に作成する必要があります。このフォルダーには、パッケージのインストール時に SharePoint 構成をプロビジョニングするためのフィーチャー フレームワーク アセットをすべて配置します。We first need to create an assets folder where we place all feature framework assets used to provision SharePoint structures when a package is installed.

  1. sharepoint と呼ばれるフォルダーをソリューションのルートに作成します。Create a folder called sharepoint to the root of the solution.

  2. 作成した sharepoint フォルダーのサブ フォルダーとして、assets と呼ばれるフォルダーを作成します。Create a folder called assets as a sub-folder for the just created sharepoint folder.

    ソリューション構造は次の図のようになります。Your solution structure should look like the following picture:

    ソリューション構造で sharepoint フォルダー下にある asset フォルダーを示すスクリーンショット

初期展開のためのフィーチャー フレームワーク ファイルを作成するCreate feature framework files for initial deployment

SharePoint アセットをフィーチャー フレームワーク要素のあるサイトにプロビジョニングするには、必要な XML ファイルをアセットのフォルダーに作成する必要があります。To be able to provision SharePoint assets to sites with feature framework elements, we need to create needed XML files to the asset folder. SharePoint Framework ソリューション パッケージでサポートされている要素は次のとおりです。Supported elements for the SharePoint Framework solution packages are following:

  • フィールド/サイト列Fields / site columns
  • コンテンツ タイプContent types
  • インスタンスの一覧表示List instances
  • カスタム スキーマを使用するリスト インスタンスList instances with custom schema

次の手順では、プロビジョニングする必要のある構造を定義します。In the following steps, we define the needed structure to be provisioned.

SharePoint の定義用に element.xml ファイルを追加する手順To add an element.xml file for SharePoint definitions

  1. sharepoint\assets フォルダー内に、elements.xml という名前の新しいファイルを作成します。Create a new file inside the sharepoint\assets folder named elements.xml.

  2. 次の XML 構造を elements.xml にコピーします。Copy the following XML structure into 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 構造に関して次の点に注意します。Note the following about the pasted XML structure:

    • コンテンツ タイプと、カスタム スキーマのあるリスト インスタンスの 2 つのフィールドをサイトにプロビジョニングしています。We are provisioning two fields to the site, a content type and a list instance with custom schema.
    • 定義では、SharePoint 開発者によく知られている、標準フィーチャー フレームワーク スキーマを使用しています。Definitions use standard Feature Framework schema, which is well known to SharePoint developers.
    • カスタム フィールドは導入したコンテンツ タイプで参照されています。Custom fields are being referenced in the introduced content type.
    • ListInstance 要素の CustomSchema 属性を使用して、リストに対してプロビジョニング時間 schema.xml ファイルを定義します。We use the CustomSchema attribute in the ListInstance element to define a provisioning time schema.xml file for the list. この方法では、リストはそのまま使用できるリスト テンプレート (この場合は通常のカスタム リスト '100') に基づいていますが、初期プロビジョニング中は、代替プロビジョニングを定義することができます。This way the list is still based on the out-of-the-box list template (normal custom list '100' in this case), but we can define an alternative provisioning definition during initial provisioning.
    • リスト インスタンスのプロビジョニングにフィーチャーを使用している場合は、特定のリスト定義に関連付けられたフィーチャーの ID を指定する必要があります。When provisioning list instances using Features you must provide the ID of the Feature associated with the particular list definition. FeatureId 属性を使用すると、リスト定義を含むフィーチャーの ID を指定することになります。Using the FeatureId attribute you are supposed to provide the ID of the Feature which contains the List Definition. たとえば、カスタムリストのインスタンスをプロビジョニングする場合は、FeatureId 属性を {00bfea71-de22-43b2-a848-c05709900100} に設定する必要があります。As an example: if you’re provisioning an instance of a custom list the FeatureId attribute should be set to {00bfea71-de22-43b2-a848-c05709900100}.

    使用されるスキーマ構造の詳細は、MSDN の「SharePoint Foundation でのフィーチャーの使用」の記事を参照してください。More details about the used schema structures can be found at FUsing Features in SharePoint Foundation on MSDN.

リスト構造を定義する schema.xml ファイルを追加する手順To add a schema.xml file for defining list structure

前の手順では、ListInstance 要素の CustomSchema 属性で schema.xml ファイルを参照していたため、これをパッケージに含める必要があります。In the previous step, we referenced the schema.xml file in the CustomSchema attribute of the ListInstance element, so we need to include that in our package.

  1. sharepoint\assets フォルダー内に、schema.xml という新しいファイルを作成します。Create a new file inside the sharepoint\assets folder named schema.xml.

  2. 次の XML 構造を schema.xml にコピーします。Copy the following XML structure into 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 構造に関して次の点に注意します。Note the following about the included XML structure:

  • elements.xml ファイルを使用して展開されたカスタム コンテンツ タイプは ContentTypeRef 要素で参照されます。The custom content type deployed by using the elements.xml file is referenced in the ContentTypeRef element.
  • SPFxAmount および SPFxCostCenter と呼ばれるカスタム フィールドは FieldRef 要素で参照されます。Custom fields called SPFxAmount and SPFxCostCenter are referenced in the FieldRef element.

使用されているスキーマ構造の詳細については、MSDN の「Schema.xml ファイルについて」の記事を参照してください。More details about the used schema structures can be found at Understanding Schema.xml Files article at MSDN.

定義がビルド パイプラインで使用されることを確認するEnsure that definitions are taken into use in build pipeline

ここまでで、ソリューションを展開するときに、そのソリューションから自動的に SharePoint アセットをプロビジョニングするための構造が作成されました。Now we have created the needed structures for provisioning SharePoint assets automatically from the solution when it's deployed. 次の手順では、これらの XML ファイルがソリューションの一部としてパッケージ化されるようにします。The next step is to ensure that we package these XML files as part of the solution file.

  1. config フォルダーから package-solution.json を開きます。Open package-solution.json from the config folder.

    package-solution.json ファイルは、次のコードに示されているようにパッケージ メタデータを定義します。The package-solution.json file defines the package metadata as shown in the following code:

    {
     "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
     "solution": {
       "name": "asset-deployment-webpart-client-side-solution",
       "id": "6690f11b-012f-4268-bc33-3086eb2dd287",
       "version": "1.0.0.0",
       "includeClientSideAssets": true
     },
     "paths": {
       "zippedPackage": "solution/asset-deployment-webpart.sppkg"
     }
    }
    
  2. ソリューションをパッケージ化するときに、新たに追加したフィーチャー フレームワークが使用されるようにするには、フィーチャー フレームワークをソリューション パッケージのフィーチャー定義に含める必要があります。To ensure that our newly added Feature Framework files are taken into account while the solution is being packaged, we need to include a Feature Framework feature definition for the solution package. 次のコードに示すように、ソリューション構造の内部で必要なフィーチャーに対して、JSON 定義を含めます。Let's include a JSON definition for the needed feature inside of the solution structure as demonstrated in the following code.

    {
     "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
     "solution": {
       "name": "asset-deployment-webpart-client-side-solution",
       "id": "6690f11b-012f-4268-bc33-3086eb2dd287",
       "version": "1.0.0.0",
       "includeClientSideAssets": true,
       "features": [{
         "title": "asset-deployment-webpart-client-side-solution",
         "description": "asset-deployment-webpart-client-side-solution",
         "id": "523fe887-ced5-4036-b564-8dad5c6c6e24",     // <-- Update 'id' with a new GUID
         "version": "1.0.0.0",
         "assets": {
           "elementManifests": [
             "elements.xml"
           ],
           "elementFiles":[
             "schema.xml"
           ]
         }
       }]
     },
     "paths": {
       "zippedPackage": "solution/asset-deployment-webpart.sppkg"
     }
    }
    

追加する json 定義は、次の点に注意してください。Note the following about the added json definitions:

  • フィーチャー セクション内の id プロパティは一意の GUID であることMake sure you define a unique GUID for the id property inside the feature section

  • features はコレクションであるため、パッケージに複数のフィーチャーを含めることは技術的に可能ですが、これは推奨しません。You can technically have multiple features in the package because features is a collection; however, this is not recommended.

  • elements.xml は elementManifests で参照されるため、要素のマニフェスト ファイルとして、実際のフィーチャー XML 構造用に正しくパッケージ化されます。elements.xml is referenced under elementManifests so that it's packaged properly for the actual feature XML structure as an element manifest file.

  • 複数の element.xml ファイルを定義に含めることができ、それらのファイルは JSON 定義に記載されている順序で実行されます。You can have multiple element.xml files in the definition, and they would be executed in the order they are mentioned in the JSON definition. 通常、element.xml が複数あると、不要な複雑さが増すため、複数使用を避ける必要があります。Typically, you should avoid using multiple element.xml files because this adds unnecessary complexity. 必要なアセットはすべて、1 つの element.xml ファイルに定義できます。You can define all needed assets in a single element.xml file.

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

ここまでで、ソリューションを SharePoint に展開する準備が整いました。Now you are ready to deploy the solution to SharePoint. ソリューションのインストール時にアセットを SharePoint サイトに直接プロビジョニングしているので、ローカルまたはオンラインのワークベンチで機能をテストすることはできません。Because we are provisioning assets directly to the SharePoint sites when the solution is installed, you cannot test the capability in a local or online Workbench.

  1. コンソール ウィンドウで、次のコマンドを入力して、Web パーツを含むクライアント側のソリューションをパッケージ化すると、パッケージできる基本構造を取得できます。In the console window, enter the following command to package your client-side solution that contains the web part so that we get the basic structure ready for packaging:

    gulp bundle
    
  2. 次のコマンドを実行して、ソリューション パッケージを作成します。Execute the following command to create the solution package:

    gulp package-solution
    

    このコマンドは、sharepoint/solution フォルダーにパッケージを作成します。The command creates the package in the sharepoint/solution folder:

    asset-deployment-webpart.sppkg
    
  3. SharePoint でパッケージをテストする前に、定義したフィーチャー フレームワーク要素に関して作成したパッケージの既定の構造を確認してみましょう。Before testing the package in SharePoint, let's quickly have a look on the default structures created for the package around the defined feature framework elements. Visual Studio コード側に戻り、sharepoint/solution/debug フォルダーを展開すると、実際の sppkg パッケージに未加工の XML 構造が含まれています。Move back to the Visual Studio Code side and expand the sharepoint/solution/debug folder, which contains the raw XML structures to be included in the actual sppkg package.

    ソリューション構造で sharepoint フォルダー下にある debug フォルダーを示すスクリーンショット

  4. 生成されたパッケージをアプリ カタログに展開します。Deploy the package that was generated to the app catalog. テナントのアプリ カタログに移動します。Go to your tenant's app catalog.

  5. フォルダーにある asset-deployment-webpart.sppkg をアプリ カタログにアップロードするか、ドラッグ アンド ドロップします。sharepoint/solutionUpload or drag and drop the asset-deployment-webpart.sppkg located in the sharepoint/solution folder to the app catalog. SharePoint はダイアログを表示し、展開するクライアント側ソリューションを信頼するよう求めます。SharePoint displays a dialog and asks you to trust the client-side solution to deploy.

    ソリューション パッケージ展開のための [信頼] ダイアログ

    注意

    SharePoint は公開されたパッケージが展開されると、これを検証し、パッケージ展開が有効である場合にのみ、[信頼] ダイアログが表示されます。SharePoint validates the published package when it's deployed and you only see the trust dialog if the package is valid for deployment. この検証の状態は、アプリ カタログの [有効なアプリ パッケージ] 列からも表示できます。You can also see the status around this validation from the 'Valid App Package' column in the app catalog.

  6. SharePoint アセットのプロビジョニングをテストするサイトに移動します。Go to the site where you want to test the SharePoint asset provisioning. このソリューション パッケージを展開したテナント内の任意のサイト コレクションに移動できます。This could be any site collection in the tenant where you deployed this solution package.

  7. 上部のナビゲーション バーの右側にある歯車アイコンを選択し、[アプリの追加] を選択して、アプリ ページに移動します。Select the gears icon on the top nav bar on the right, and then select Add an app to go to your Apps page.

  8. [検索] ボックスで、「deployment」と入力し、Enter キーを押してアプリをフィルター処理します。In the Search box, enter deployment, and then select Enter to filter your apps.

    サイト内のアプリの検索

  9. asset-deployment-webpart-client-side-solution アプリを選択して、アプリをサイトにインストールします。Select the asset-deployment-webpart-client-side-solution app to install the app on the site. インストールが完了したら、F5 キーを選択してページを更新します。When installation is completed, refresh the page by selecting F5. ソリューション パッケージ展開の一環として、カスタムの [SPFx List] (SPFx リスト) がサイトにどのようにプロビジョニングされているかを確認してください。Notice how the custom SPFx List has been provisioned to site as part of the solution package deployment.

    ソリューションのプロビジョニング後、新しい SPFx リストとアプリがサイトのコンテンツ ページに表示されます。

  10. [SPFx リスト] を選択してリストに移動します。Select SPFx List to move to the list. カスタム フィールド AmountCost Center がリストの既定のビューにどのように自動的に表示されるかに注目してください。Notice how the custom fields Amount and Cost Center are visible automatically in the default view of the list.

    既定で追加フィールドを示すカスタム リストの既定のリスト ビュー

新しいバージョン用のアップグレード アクションを定義するDefine upgrade actions for new version

SharePoint Framework ソリューションの新しいバージョンを構築するときには、プロビジョニングされた SharePoint アセットに必要な変更を加えることが必要な場合があります。パッケージの新しいバージョンを展開するときは、フィーチャー フレームワークのアップグレード アクションのサポートを利用できます。Whenever you build a new version of your SharePoint Framework solution, you might have some required changes on the provisioned SharePoint assets. You can take advantage of the Feature Framework upgrade action support when a new version of the package is being deployed.

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

  • ApplyElementManifestApplyElementManifest
  • AddContentTypeFieldAddContentTypeField

ヒント

フィーチャー フレームワークのアップグレード アクション定義の詳細については、「SharePoint アドインの更新プロセス」を参照してください。You can read more details around the Feature Framework upgrade action definitions at SharePoint Add-ins update process.

新しいバージョン用の element.xml ファイルを追加する手順To add a new element.xml file for the new version

  1. Visual Studio Code 内のソリューションに戻ります。Go back to your solution in Visual Studio Code.

  2. sharepoint\assets フォルダー内に、elements-v2.xml という名前の新しいファイルを作成します。Create a new file inside the sharepoint\assets folder named elements-v2.xml.

  3. プロビジョニング対象の新しい SharePoint リストを New List のタイトルで定義するため、次の XML 構造を elements-v2.xml にコピーします。Copy the following XML structure into elements-v2.xml, which defines a new SharePoint list to be provisioned with a title of New List.

    <?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>
    
  4. また、実際のフィーチャー フレームワークのアップグレード アクションを定義する必要もあるため、sharepoint\assets フォルダー内に upgrade-actions-v2.xml というファイルを新たに作成します。We also need a definition for actual Feature Framework upgrade actions, so create a new file inside the sharepoint\assets folder named upgrade-actions-v2.xml.

  5. 次の XML データ構造を upgrade-actions-v2.xml にコピーします。Copy the following XML structure into upgrade-actions-v2.xml. パス内のフィーチャー GUID 参照は、sharepoint/solution/debug フォルダーの下に自動的に作成されたフォルダーを参照しており、ソリューションに基づいて更新する必要があります。Notice that the feature GUID reference in the path refers to the automatically created folder under the sharepoint/solution/debug folder and has to be updated based on your solution. この GUID は、package-solution.json ファイルで定義したフィーチャーの GUID とも一致しています。This GUID also matches the GUID of the feature, which we defined in the package-solution.json file.

    <ApplyElementManifests>
         <ElementManifest Location="523fe887-ced5-4036-b564-8dad5c6c6e24\elements-v2.xml" />
    </ApplyElementManifests>
    

SharePoint へ新しいバージョンを展開する手順To deploy the new version to SharePoint

次に、ソリューションのバージョンと、アセットのプロビジョニングを行うフィーチャーのバージョンの両方を更新する必要があります。Next we need to update both the solution version and the feature version responsible for the asset provisioning.

重要

ソリューションのバージョンは、入手可能な Framework ソリューションの新しいバージョンがあることを SharePoint に示します。The solution version indicates for SharePoint that there's a new version of the SharePoint Framework solution available. フィーチャーのバージョンは、既存のサイトでソリューション パッケージがアップグレードされると、それに応じてアップグレード アクションが実行されることを示しています。The feature version ensures that the upgrade actions are executed accordingly when the solution package is upgraded in the existing site(s).

  1. config フォルダーで package-solution.json を開き、ソリューションとフィーチャーのバージョンの値を "2.0.0.0" に更新します。Open package-solution.json from the config folder and update the version values for both the solution and the feature to "2.0.0.0".

  2. また、elementManifest セクションの下に elements-v2.xml を含め、作成した upgrade-actions-v2.xml ファイルへのポインターとともに upgradeActions 要素を含める必要があります。We also need to include elements-v2.xml under the elementManifest section, and need to include the upgradeActions element with a pointer to the just created upgrade-actions-v2.xml file.

    これで、必要な変更を加えた package-solution.json ファイルが完成します。ソリューションに対して識別子が若干異なる場合があるため、不足しているものだけを追加するようにしてください。Here's a complete package-solution.json file with needed changes. Notice that identifiers for your solution could be slightly different, so concentrate on adding only the missing pieces.

    {
     "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
     "solution": {
       "name": "asset-deployment-webpart-client-side-solution",
       "id": "6690f11b-012f-4268-bc33-3086eb2dd287",
       "version": "2.0.0.0",
       "includeClientSideAssets": true,
       "features": [{
         "title": "asset-deployment-webpart-client-side-solution",
         "description": "asset-deployment-webpart-client-side-solution",
         "id": "523fe887-ced5-4036-b564-8dad5c6c6e24",
         "version": "2.0.0.0",
         "assets": {
           "elementManifests": [
             "elements.xml",
             "elements-v2.xml"
           ],
           "elementFiles":[
             "schema.xml"
           ],
           "upgradeActions":[
             "upgrade-actions-v2.xml"
           ]
         }
       }]
     },
     "paths": {
       "zippedPackage": "solution/asset-deployment-webpart.sppkg"
     }
    }
    

    重要

    なお、elementManifest セクションの下には、elements-v2.xml も含めています。Notice that we also included the elements-v2.xml under the elementManifest section. これにより、このパッケージをバージョン 2.0 としてクリーンなサイトにインストールすると、アップグレードされたパッケージと最終的に一致することになります。This ensures that when you install this package to a clean site as a version 2.0, the end result will match the upgraded packages.

  3. コンソール ウィンドウで、次のコマンドを入力して、Web パーツを含むクライアント側のソリューションを再パッケージ化すると、パッケージできる基本構造を取得できます。In the console window, enter the following command to re-package your client-side solution that contains the web part so that we get the basic structure ready for packaging:

    gulp bundle
    
  4. 次のコマンドを実行して、ソリューション パッケージを作成します。Execute the following command to create the solution package:

    gulp package-solution
    

    コマンドによってソリューション パッケージの新しいバージョンが sharepoint/solution フォルダーに作成されます。The command creates a new version of the solution package in the sharepoint/solution folder. なお、更新した XML ファイルがソリューション パッケージに含まれているかどうかは、sharepoint/solution/debug フォルダーから確認できますNotice that you can easily confirm from the sharepoint/solution/debug folder that the updated XML files are included in the solution package.

  5. 次に、生成された新しいバージョンをアプリ カタログに展開する必要があります。Next you need to deploy the new version that was generated to the app catalog. テナントのアプリ カタログに移動します。Go to your tenant's app catalog.

  6. フォルダーにある asset-deployment-webpart.sppkg をアプリ カタログにアップロードするか、ドラッグ アンド ドロップします。sharepoint/solutionUpload or drag and drop the asset-deployment-webpart.sppkg located in the sharepoint/solution folder to the app catalog. SharePoint は、既存のバージョンをオーバーライドすることの確認を求めます。SharePoint requests that you confirm overriding the existing version.

    アプリ カタログからの置換の質問

  7. [置換する] をクリックして、アプリ カタログを最新のバージョンに更新します。Select Replace It to update the latest version to the app catalog.

  8. [展開] をクリックして最新バージョンを信頼します。Select Deploy to trust the latest version.

    これで、asset-deployment-webpart-client-side-solution の [アプリのバージョン] 列が "2.0.0.0" に更新されます。Notice that the App Version column for the asset-deployment-webpart-client-side-solution is now updated to be "2.0.0.0".

    更新されたバージョン番号を示すアプリ カタログのソリューション行の拡大

サイト内の既存のインスタンスを更新する手順To update an existing instance in the site

パッケージがアプリ カタログ内で更新されたため、実際の SharePoint コンテンツ サイトに移動し、既存のインスタンスのアップグレードを実行できるようになりました。Now that the package has been updated in the app catalog, we can move to the actual SharePoint content site and perform the upgrade for the existing instance.

  1. SharePoint Framework ソリューションの最初のバージョンを展開したサイトに移動します。Go to the site where you deployed the first version of the SharePoint Framework solution.

  2. [サイト コンテンツ] ページに移動します。Go to the Site Contents page.

  3. asset-deployment-webpart-client-side-solution ソリューションのコンテキスト メニューから [詳細] を選択します。Select Details from the context menu of the asset-deployment-webpart-client-side-solution solution.

    サイト内の既存のパッケージのコンテキスト メニュー

    これにより、インストールされている SharePoint Framework ソリューションに関する現在の詳細が表示されます。This presents the current details around the installed SharePoint Framework solution. このページは、[このアプリの新しいバージョンがあります。今すぐ入手してください。] というテキストを表示し、新しいバージョンが入手可能であることも示します。This page also now shows the text as 'There is a new version of this app. Get it now' to indicate that there's a new version available.

    サイト内の既存のパッケージのコンテキスト メニュー

  4. [GET IT] (入手する) ボタンを選択してパッケージの更新プロセスを開始します。Select the GET IT button to start the update process for the package.

    サイトのコンテンツ ページで更新中になったアプリの状態

    クラシック環境に移動すると、SharePoint Framework ソリューションに適用されている実際のアップグレード操作の詳細が表示されます。If you move to the classic experience, you can see more details on the actual upgrade action being applied for the SharePoint Framework solution.

    サイトのコンテンツ ページで更新中になったアプリの状態

    注意

    SharePoint Framework は SharePoint アドインと同じアプリのインフラストラクチャを使用しているので、アップグレードの状態は、アドインまたはアプリに更新が発生する可能性を示します。Because the SharePoint Framework uses the same app infrastructure as SharePoint Add-ins, the status for the upgrade indicates that the update can happen for an add-in or an app.

    更新にはしばらく時間がかかりますが、ソリューションの状態が正常に戻ると、F5 キーを押してサイト コンテンツ ページを更新し、更新プロセスの一環として、[新しいリスト] と呼ばれるリストが正常にプロビジョニングされたことを確認できます。The update can take a while, but when the solution status changes to normal again, you can select F5 to refresh the site contents page to confirm that a new list called New List has been successfully provisioned as part of the update process.

    新しいリストが追加作成されたサイト コンテンツ ページ

    これで、このインスタンスを最新バージョンにアップグレードできました。Now we have successfully upgraded this instance to the latest version. SharePoint アセット プロビジョニングのこのフィーチャー フレームワーク オプションは、SharePoint アドイン モデルのオプションと非常によく似ています。This Feature Framework option for SharePoint asset provisioning is pretty much the same as it is for the SharePoint Add-in model. 主な違いはアセットが通常の SharePoint サイトに直接プロビジョニングされる点です。これは、SharePoint Framework ソリューションでは、アプリまたはアドインの Web といった概念がないためです。The key difference is that the assets are being provisioned directly to a normal SharePoint site, because there's no concept called app or add-in web with SharePoint Framework solutions.

注意

ドキュメントまたは SharePoint Framework に問題が見つかった場合は、sp-dev-docs リポジトリの懸案事項リストを使用して SharePoint エンジニアリングに報告してください。If you find an issue in the documentation or in the SharePoint Framework, report that to SharePoint engineering by using the issue list at the sp-dev-docs repository. よろしくお願いします。Thanks for your input in advance.

関連項目See also