最初の ListView Command Set の拡張機能をビルドするBuild your first ListView Command Set extension

拡張機能は、SharePoint ページのコンテキスト内で実行されるクライアント側コンポーネントです。Extensions are client-side components that run inside the context of a SharePoint page. 拡張機能を SharePoint Online に展開することができ、最新の JavaScript ツールとライブラリを使用してそれらを構築できます。Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.

SharePoint PnP YouTube チャンネルのビデオを見ながらこれらの手順に従うことができます。You can follow these steps by watching the video on the SharePoint PnP YouTube Channel:



拡張機能のプロジェクトを作成するCreate an extension project

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

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

    cd command-extension
    
  3. Yeoman の SharePoint ジェネレーターを実行して、新しい HelloWorld の拡張機能を作成します。Create a new HelloWorld extension by running the Yeoman SharePoint Generator.

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

    • ソリューション名として、既定値の command-extension を受け入れ、Enter キーを押します。Accept the default value of command-extension as your solution name, and then select Enter.
    • [SharePoint Online のみ (最新)] を選択し、Enter キーを押します。Select SharePoint Online only (latest), and select Enter.
    • [現在のフォルダーを使用する] を選択して、Enter キーを押します。Select Use the current folder, and select Enter.
    • [N] を選択すると、ソリューションをすぐにすべてのサイトに展開できるようになります。Select N to allow solution to be deployed to all sites immediately.
    • ソリューションに固有の権限が含まれている場合は、質問に対して [N] を選択してください。Select N on the question if solution contains unique permissions.
    • 作成するクライアント側コンポーネントの種類として [拡張機能] を選択します。Select Extension as the client-side component type to be created.
    • 作成する拡張機能の種類として [ListView Command Set] を選択します。Select ListView Command Set as the extension type to be created.
  5. 次の一連のダイアログ ボックスでは、拡張機能の詳細情報について入力が求められます。The next set of prompts ask for specific information about your extension:

    • 拡張機能名として、既定値の HelloWorld を受け入れ、Enter キーを押します。Accept the default value of HelloWorld as your extension name, and then select Enter.
    • 拡張機能の説明として、既定値の HelloWorld の説明を受け入れ、Enter キーを押します。Accept the default value of HelloWorld description as your extension description, and select Enter.

      Yeoman の SharePoint ジェネレーターにより、拡張機能のソリューションを作成するダイアログ ボックスが表示されます

      この時点で、Yeoman は必要な依存関係をインストールし、ソリューション ファイルを HelloWorld の拡張機能とともにスキャフォールディングします。At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the HelloWorld extension. これには数分かかる場合があります。This might take a few minutes.

      スキャフォールディングが完了すると、スキャフォールディングが正常に行われたことを示す次のメッセージが表示されます。When the scaffold is complete, you should see the following message indicating a successful scaffold:

      SharePoint のクライアント側ソリューションが正常にスキャフォールディングされました

      エラーのトラブルシューティング方法の詳細については、既知の問題を参照してください。For information about troubleshooting any errors, see Known issues.

  6. 次に、コンソールに次のように入力して Visual Studio Code を起動します。Next, type the following into the console to start Visual Studio Code.

    code .
    

    注意

    SharePoint のクライアント側ソリューションは HTML や TypeScript に基づいているため、クライアント側の開発をサポートしている任意のコード エディターを使用して拡張機能を構築できます。Because the SharePoint client-side solution is HTML/TypeScript based, you can use any code editor that supports client-side development to build your extension.

    既定のソリューション構造が、クライアント側 Web パーツのソリューション構造と類似していることに注意してください。Note how the default solution structure looks like the solution structure of client-side web parts. これが基本の SharePoint Framework ソリューション構造であり、ソリューションの種類を問わず類似の構成オプションを持ちます。This is the basic SharePoint Framework solution structure, with similar configuration options across all solution types.

    最初のスキャフォールディングの後に開かれた SharePoint Framework ソリューション

  7. src\extensions\helloWorld フォルダーの HelloWorldCommandSet.manifest.json を開きます。Open HelloWorldCommandSet.manifest.json in the src\extensions\helloWorld folder.

    このファイルは、拡張機能の種類と拡張機能の一意識別子 id を定義します。This file defines your extension type and a unique identifier id for your extension. 後で拡張機能をデバッグして SharePoint に展開するときに、この一意識別子が必要になります。You need this unique identifier later when debugging and deploying your extension to SharePoint.

    マニフェスト ファイル内の実際のコマンド定義に注意してください。Note the actual command definitions in the manifest file. これらは、登録対象に基づいて公開される実際のボタンです。These are the actual buttons that are exposed based on the registration target. 既定のテンプレートには、Command OneCommand Two の 2 つの異なるボタンがあります。In the default template, you find two different buttons: Command One and Command Two.

    ListView Command Set マニフェストの JSON コンテンツ

    現時点では、マニフェストの CDN の絶対的な場所からでないと、適切に画像を参照することができません。これは今後のリリースで改善される予定です。Currently, images are not properly referenced unless you are referring to them from absolute locations in a CDN within your manifest. This will be improved in future releases.

ListView Command Set のコーディングCode your ListView Command Set

src\extensions\helloWorld フォルダーの HelloWorldCommandSet.ts ファイルを開きます。Open the HelloWorldCommandSet.ts file in the src\extensions\helloWorld folder.

ListView Command Set の基底クラスは、ListView Command Set で必要な SharePoint Framework コードを含む sp-listview-extensibility パッケージからインポートされます。Notice that the base class for the ListView Command Set is imported from the sp-listview-extensibility package, which contains SharePoint Framework code required by the ListView Command Set.

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseListViewCommandSet,
  Command,
  IListViewCommandSetListViewUpdatedParameters,
  IListViewCommandSetExecuteEventParameters
} from '@microsoft/sp-listview-extensibility';
import { Dialog } from '@microsoft/sp-dialog';

ユーザー設定ボタンの動作は、onListViewUpdated() および OnExecute() メソッドに含まれています。The behavior for your custom buttons is contained in the onListViewUpdated() and OnExecute() methods.

onListViewUpdated() イベントは、ListView で変更が発生したときに各コマンド (メニュー項目など) ごとに個別に発生し、UI を再表示する必要があります。The onListViewUpdated() event occurs separately for each command (for example, a menu item) whenever a change happens in the ListView, and the UI needs to be re-rendered. event 関数パラメーターは、表示されるコマンドに関する情報を表します。The event function parameter represents information about the command being rendered. ハンドラーは、リスト ビューで一定数の項目が選択されたときにのみコマンドを表示する場合など、この情報を使用してタイトルをカスタマイズしたり表示を調整したりすることができます。The handler can use this information to customize the title or adjust the visibility, for example, if a command should only be shown when a certain number of items are selected in the list view. これは既定の実装です。This is the default implementation.

メソッド tryGetCommand を使用するときは、UI に表示されるコマンドの表記である Command オブジェクトを取得します。When using the method tryGetCommand, you get a Command object, which is a representation of the command that shows in the UI. titlevisible などの値を変更して UI 要素を変更することができます。You can modify its values, such as title, or visible, to modify the UI element. SPFx はコマンドを再表示するときにこの情報を使用します。SPFx uses this information when re-rendering the commands. これらのオブジェクトは最後の表示から状態を保持するので、コマンドが visible = false に設定されている場合、コマンドは visible = true に戻されるまで非表示のままです。These objects keep the state from the last render, so if a command is set to visible = false, it remains invisible until it is set back to visible = true.

  @override
  public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    if (compareOneCommand) {
      // This command should be hidden unless exactly one row is selected.
      compareOneCommand.visible = event.selectedRows.length === 1;
    }
  }

OnExecute() メソッドは、コマンドが実行されたときに起こる内容を定義します (たとえば、メニュー項目が選択される)。The OnExecute() method defines what happens when a command is executed (for example, the menu item is selected). 既定の実装では、選択されるボタンに応じて異なるメッセージが表示されます。In the default implementation, different messages are shown based on which button was selected.

  @override
  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    switch (event.itemId) {
      case 'COMMAND_1':
        Dialog.alert(`${this.properties.sampleTextOne}`);
        break;
      case 'COMMAND_2':
        Dialog.alert(`${this.properties.sampleTextTwo}`);
        break;
      default:
        throw new Error('Unknown command');
    }
  }

ListView Command Set のデバッグDebug your ListView Command Set

現時点では、ローカル ワークベンチを使用して SharePoint Framework の拡張機能をテストすることはできません。You cannot currently use the local Workbench to test SharePoint Framework Extensions. テストと開発は、ライブの SharePoint Online サイトに対して直接実行する必要があります。You'll need to test and develop them directly against a live SharePoint Online site. そのために、カスタマイズをアプリ カタログに展開する必要はありません (これにより、デバッグ操作が簡単で効率的になります)。You don't have to deploy your customization to the app catalog to do this, which makes the debugging experience simple and efficient.

  1. モダン エクスペリエンスを使用して SharePoint Online サイト内の SharePoint リストに移動するか、新しいリストを作成します。Go to any SharePoint list in your SharePoint Online site by using the modern experience or create a new list. リストの URL をクリップボードにコピーします。後の手順でこれが必要になります。Copy the URL of the list to clipboard as we will be needing that in following step.

    ListView Command Set は localhost でホストされ、実行されているので、固有のデバッグ クエリ パラメーターを使ってリスト ビューでコードを実行することができます。Because our ListView Command Set is hosted from localhost and is running, we can use specific debug query parameters to execute the code in the list view.

  2. config フォルダーから serve.json ファイルを開きます。Open serve.json file from config folder. ソリューションをテストするリストの URL と一致するように、pageUrl 属性を更新します。Update pageUrl attribute to match an URL of the list where you want to test the solution. 編集後、serve.json は次のようになります。After edits your serve.json should look somewhat following.

    {
      "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
      "port": 4321,
      "https": true,
      "serveConfigurations": {
        "default": {
          "pageUrl": "https://sppnp.sharepoint.com/sites/Group/Lists/Orders/AllItems.aspx",
          "customActions": {
            "bf232d1d-279c-465e-a6e4-359cb4957377": {
              "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
              "properties": {
                "sampleTextOne": "One item is selected in the list",
                "sampleTextTwo": "This command is always visible."
              }
            }
          }
        },
        "helloWorld": {
          "pageUrl": "https://sppnp.sharepoint.com/sites/Group/Lists/Orders/AllItems.aspx",
          "customActions": {
            "bf232d1d-279c-465e-a6e4-359cb4957377": {
              "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
              "properties": {
                "sampleTextOne": "One item is selected in the list",
                "sampleTextTwo": "This command is always visible."
              }
            }
          }
        }
      }
    }
    
  3. このコマンドを実行して、コードをコンパイルし、コンパイルしたファイルをローカル コンピューターからホストします。Compile your code and host the compiled files from the local machine by running this command:

    gulp serve
    

    コードがエラーなしでコンパイルされると、https://localhost:4321 から結果のマニフェストが提供されます。When the code compiles without errors, it serves the resulting manifest from https://localhost:4321.

    また、serve.json ファイルで定義されている URL 内で既定のブラウザーも起動します。This will also start your default browser within the URL defined in serve.json file. なお、少なくとも Windows では、このコマンドの実行前に優先ブラウザーをアクティブ化することにより、どのブラウザー ウィンドウを使用するかを制御できます。Notice that at least in Windows, you can control which browser window is used by activating the preferred one before executing this command.

  4. ダイアログが表示されたら、[デバッグ スクリプトを読み込む] を選択して、デバッグ マニフェストの読み込みを承諾します。Accept the loading of debug manifests by selecting Load debug scripts when prompted.

    デバッグ スクリプトの読み込みを承諾する

  5. 新しい [Command Two] ボタンがツールバーに表示されていることに注目してください。Notice the new Command Two button available in the toolbar. そのボタンを選択して、sampleTextTwo プロパティのプロパティとして提供されたテキストを表示します。Select that button to see the text provided as property for the sampleTextTwo property.

    ドキュメント ライブラリのツールバーに表示される [Command Two] ボタン

  6. ドキュメント ライブラリで 1 行選択されるまで、[Command One] ボタンはコードに基づいて表示されません。The Command One button is not visible based on the code, until one row is selected in the document library. ライブラリにドキュメントをアップロードまたは作成し、2 番目のボタンが表示されていることを確認します。Upload or create a document to the library and confirm that the second button is visible.

    ドキュメントを 1 つ選択して [Command One] ボタンを表示する

  7. ListView Command Set が拡張機能の種類として選択されている場合の、ソリューション スキャフォールディングの既定の出力で使用されるダイアログ コントロールの動作を確認するには、[Command Two] を選択します。Select Command Two to see how the dialog control works, which is used in the default output from the solution scaffolding when the ListView Command Set is selected as the extension type.

    ドキュメントを 1 つ選択して [Command One] ボタンを表示する

serve.config オプションの詳細についてMore details about serve.config options

  • customActions は、カスタム アクションをシミュレートします。customActions simulates a custom action. この CustomAction オブジェクトには、ボタンの外観、使い勝手、位置に影響する多くのプロパティを設定できます。以下にそれらをすべて説明します。You can set many properties on this CustomAction object that affect the look, feel, and location of your button; we’ll cover them all later.
    • GUID: 拡張機能の GUID。GUID: GUID of the extension.
    • 場所: コマンドが表示される場所。Location: Where the commands are displayed. 値は次のいずれかです。The possible values are:
      • ClientSideExtension.ListViewCommandSet.ContextMenu: 項目のコンテキスト メニュー。ClientSideExtension.ListViewCommandSet.ContextMenu: The context menu of the item(s).
      • ClientSideExtension.ListViewCommandSet.CommandBar: リストまたはライブラリの上部のコマンド セット メニュー。ClientSideExtension.ListViewCommandSet.CommandBar: The top command set menu in a list or library.
      • ClientSideExtension.ListViewCommandSet コンテキスト メニューとコマンド バーの両方 (SPUserCustomAction.Location="CommandUI.Ribbon" に対応)。ClientSideExtension.ListViewCommandSet: Both the context menu and the command bar (corresponds to SPUserCustomAction.Location="CommandUI.Ribbon").
    • プロパティ: this.properties メンバーを介して利用できるプロパティを含む、オプションの JSON オブジェクト。Properties: An optional JSON object containing properties that are available via the this.properties member.


ListView Command Set の表示の強化Enhance the ListView Command Set rendering

既定のソリューションは、新しいダイアログ API を利用して、コードから簡単にモーダル ダイアログを表示することができます。The default solution takes advantage of a new Dialog API, which can be used to show modal dialogs easily from your code. 次の手順では、ダイアログ API の使用例を示すために、既定のエクスペリエンスを少し変更します。In the following steps, we'll slightly modify the default experience to demonstrate Dialog API use cases.

  1. Visual Studio Code (またはお好みのエディター) で、[src\extensions\helloWorld] フォルダーから [HelloWorldCommandSet.ts] を開きます。Open HelloWorldCommandSet.ts from the src\extensions\helloWorld folder in Visual Studio Code (or your preferred editor).

  2. 以下の手順で、onExecute メソッドを更新します。Update the onExecute method as follows:

      @override
      public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
        switch (event.itemId) {
          case 'COMMAND_1':
            Dialog.alert(`Clicked ${strings.Command1}`);
            break;
          case 'COMMAND_2':
            Dialog.prompt(`Clicked ${strings.Command2}. Enter something to alert:`).then((value: string) => {
              Dialog.alert(value);
            });
            break;
          default:
            throw new Error('Unknown command');
        }
      }
    
  3. コンソール ウィンドウで、例外がないことを確認します。In your console window, ensure that you do not have any exceptions. ソリューションを localhost で実行していない場合は、次のコマンドを実行します。If you do not already have the solution running in localhost, execute the following command:

    gulp serve
    
  4. ダイアログが表示されたら、[デバッグ スクリプトを読み込む] を選択して、デバッグ マニフェストの読み込みを承諾します。Accept the loading of debug manifests by selecting Load debug scripts when prompted.

    デバッグ スクリプトの読み込みを承諾する

    ツール バーには同じボタンがありますが、1 つずつ選択すると、それらのボタンの動作が異なることがわかります。We still have the same buttons in the toolbar, but you'll notice they behave differently if you select them one-by-one. 複雑なシナリオの場合でも、ソリューションで簡単に使用できる新しいダイアログ API を使用しています。Now we are using the new Dialog API, which can be easily used with your solutions, even for complex scenarios.

    デバッグ スクリプトの読み込みを承諾する [OK] ボタン

展開するソリューション パッケージに ListView Command Set を追加するAdd a ListView Command Set to a solution package for deployment

  1. Visual Studio Code (またはお使いのエディター) で、ソリューションに戻ります。Return to your solution in Visual Studio Code (or to your preferred editor).

  2. ソリューションのルートにある sharepoint フォルダーと assets サブフォルダーを展開し、既存の elements.xml ファイルを表示します。Extend the sharepoint folder and assets sub folder in the root of the solution to see the existing elements.xml file.

    ソリューション構造内の assets フォルダー

elements.xml ファイルを確認するReview the elements.xml file

sharepoint\assets フォルダー内の elements.xml ファイルを開きます。Open the elements.xml file inside the sharepoint\assets folder.

elements.xml 内の次の XML 構造に注意してください。Note the following XML structure in elements.xml. ClientSideComponentId プロパティは、src\extensions\helloWorld フォルダー内の HelloWorldCommandSet.manifest.json ファイルで利用可能な ListView Command Set の一意の ID に自動更新されています。The ClientSideComponentId property has been automatically updated to the unique ID of your ListView Command Set available in the HelloWorldCommandSet.manifest.json file in the src\extensions\helloWorld folder.

これが ListView Command Set であることを定義するために ClientSideExtension.ListViewCommandSet.CommandBar の特定の位置の値を使用することに注意してください。コマンド バーに表示する必要があります。Notice that we use a specific location value of ClientSideExtension.ListViewCommandSet.CommandBar to define that this is a ListView Command Set and it should be displayed in the command bar. また、RegistrationId100RegistrationTypeリストと定義して、このカスタム アクションをジェネリック リストに自動で関連付けます。We also define the RegistrationId as 100 and the RegistrationType as List to associate this custom action automatically with generic lists. ClientSideComponentProperties は、インスタンス固有の構成を提供するために使用できます。ClientSideComponentProperties can be used to provide instance specific configurations. この例では、sampleTextOnesampleTextTwo という既定のプロパティを使用しています。In this case, we are using default properties called sampleTextOne and sampleTextTwo.

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

    <CustomAction 
        Title="SPFxListViewCommandSet"
        RegistrationId="100"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>

</Elements>

注意

localhost から実行している間、カスタム アクションはリストとドキュメント ライブラリの両方で動作しますが、展開後は、elements.xml を更新しない限り動作しません。While running from localhost the custom action will work on both lists and document libraries, but will not once deployed unless the elements.xml is updated. RegistrationId=100 により、ドキュメント ライブラリではなく、リストにカスタム アクションが関連付けられるだけです。RegistrationId=100 will only associate the custom action with lists and NOT document libraries. カスタム アクションをドキュメント ライブラリに関連付けるには、RegistrationId101 に設定する必要があります。In order to associate the custom action with document libraries, the RegistrationId must be set to 101. リストとドキュメント ライブラリの両方でアクションを機能させるには、elements.xml ファイルに別の CustomAction を追加する必要があります。If you would like the action to work on both lists and document libraries, another CustomAction must be added to the elements.xml file

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

    <CustomAction 
        Title="SPFxListViewCommandSet"
        RegistrationId="100"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>

    <CustomAction 
        Title="SPFxListViewCommandSet"
        RegistrationId="101"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>

</Elements>

ListView Command Set で使用できる可能性のある場所の値:Possible location values that can be used with a ListView Command Set:

  • ClientSideExtension.ListViewCommandSet.CommandBar - リストまたはライブラリのツール バーClientSideExtension.ListViewCommandSet.CommandBar - Toolbar of the list or library
  • ClientSideExtension.ListViewCommandSet.ContextMenu - リスト項目またはライブラリ項目のコンテキスト メニューClientSideExtension.ListViewCommandSet.ContextMenu - Context menu for list or library items
  • ClientSideExtension.ListViewCommandSet - コマンドをツール バーとコンテキスト メニューに登録するClientSideExtension.ListViewCommandSet - Register commands to both the toolbar and to the context menu

定義がビルド パイプライン内で使用されていることを確認するEnsure that definitions are taken into account within the build pipeline

package-solution.jsonconfig フォルダーから開きます。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. ソリューションのパッケージ化の際に element.xml ファイルが必ず考慮されるように、既定のスキャフォールディングは、ソリューション パッケージの機能フレームワークのフィーチャー定義を設定するために必要な構成を追加しました。To ensure that the element.xml file is taken into account while the solution is being packaged, default scaffolding added needed configuration to define a feature framework feature definition for the solution package.

注意

ClientSideInstance.xml を使用して、テナント内のすべてのサイトでの拡張を自動的に展開できます。You can use ClientSideInstance.xml to automatically deploy your extensions cross all sites in your tenant. このオプションの詳細については、「SharePoint Framework 拡張機能のテナント全体の展開」の記事を参照してください。More details around this option from Tenant Wide Deployment of SharePoint Framework Extensions article. このソリューションでは、テナント スコープ オプションを使用しない構成を意図しているので、ソリューションがアプリ カタログでアクティブ化されるときにこの xml ファイルは無視されます。As this solution is intended configured not to use tenant-scope option, this xml file is ignored when solution is activated in the app catalog.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "command-extension-client-side-solution",
    "id": "0abe5c73-1655-49d3-922b-7a47dd70e151",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "features": [
      {
        "title": "Application Extension - Deployment of custom action.",
        "description": "Deploys a custom action with ClientSideComponentId association",
        "id": "25f8df47-61f2-4d75-bfe2-8d614f775219",
        "version": "1.0.0.0",
        "assets": {
          "elementManifests": [
            "elements.xml",
            "clientsideinstance.xml"
          ]
        }
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/command-extension.sppkg"
  }
}

SharePoint Online に拡張機能を展開し、ローカル ホストから JavaScript をホストするDeploy the extension to SharePoint Online and host JavaScript from local host

ここまでで、ソリューションを SharePoint サイトに展開し、CustomAction をサイト レベルで自動的に関連付ける準備ができました。Now you are ready to deploy the solution to a SharePoint site and have the CustomAction automatically associated on the site level.

ソリューションは既定でアセット パッケージ化機能を使用するので、JavaScript ファイルとその他のアセットは自動的に sppkg ファイルの内部にパッケージ化され、Office 365 CDN またはアプリ カタログのサイト コレクションから自動的にホストされます。Since solutions will by default use the asset packaging capability, your JavaScript files and other assets will be automatically packaged inside of the sppkg file and then hosted automatically from Office 365 CDN or from the app catalog site collection.

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

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

    gulp package-solution --ship
    

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

    command-extension.sppkg
    
  3. 生成されたパッケージをアプリ カタログに展開します。Deploy the package that was generated to the app catalog. そのためには、テナントのアプリ カタログに移動し、SharePoint 用アプリ ライブラリを開きます。To do this, go to your tenant's app catalog and open the Apps for SharePoint library.

  4. sharepoint/solution フォルダーにある command-extension.sppkg をアプリ カタログにアップロードまたはドラッグアンドドロップします。Upload or drag-and-drop the command-extension.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.

  5. [展開] ボタンを選択します。Select the Deploy button.

    アプリ カタログのアップロードでの信頼操作

  6. SharePoint アセットのプロビジョニングをテストするサイトに移動します。このソリューション パッケージを展開したテナント内の任意のサイト コレクションに移動できます。Go to the site where you want to test 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 navigation bar on the right, and then select Add an app to go to your Apps page.

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

    ListView Command Set のサイトへのインストール

  9. command-extension-client-side-solution アプリを選択して、サイトにソリューションをインストールします。Select the command-extension-client-side-solution app to install the solution on the site. インストールが完了したら、F5 キーを押して、ページを更新します。When the installation is complete, refresh the page by selecting F5.

  10. アプリケーションが正常にインストールされたら、[サイト コンテンツ] ページのツール バーで [新規] を選択し、[リスト] を選択します。When the application has been successfully installed, select New from the toolbar on the Site Contents page, and then select List.

    新しいリストを作成する

  11. 名前を Sample とし、[作成] を選択します。Provide the name as Sample, and then select Create.

    ListView Command Set のカスタマイズに基づいて、[Command One] および [Command Two] がツール バーに表示されていることを確認してください。Notice how Command One and Command Two are rendering in the toolbar based on your ListView Command Set customizations. 新規のリストだけでなく、既存のリストでも拡張機能が自動的にレンダリングされることに注意してください。Notice that the extension is also rendered automatically for any existing lists, not only for new ones.

    ツール バーに表示される追加ボタン

注意

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

関連項目See also