モジュールライブラリモジュールの複製

[アーティクル]
05/28/2024

この記事では、Microsoft Dynamics 365 Commerce のモジュールライブラリのモジュールをクローンする方法について説明します。

Dynamics 365 Commerce オンラインソフトウェア開発キット (SDK) には、e コマースサイトで使用できるモジュールライブラリモジュールのセットが含まれています。これらのモジュールは直接変更できませんが、新しいモジュールに複製されてから更新できます。

クローンはモジュールライブラリのコピーでありモジュールライブラリのモジュールが得る自動サービスの更新を受取れないので、可能であれば、モジュールの複製を回避することをお勧めします。モジュールを複製する前に、考慮する必要があるいくつかの機能拡張の代替方法があります。これらの代替方法には、代替レイアウトビューを提供できるモジュールビューおよび定義拡張機能や、ビジネスロジックを変更できるデータアクションの上書きがあります。詳細については、テーマの概要を参照してください。

モジュールの変更と複製

モジュールを複製して更新するには、クローン コマンドラインインターフェイス (CLI) コマンドを使用します。次のコマンドを実行すると、SDK_MODULE_NAME を変更したいモジュール名に、SDK_MODULE_NAME を新しいモジュール名に置き換えます。

yarn msdyn365 clone SDK_MODULE_NAME NEW_MODULE_NAME

このコマンドは、モジュールのソースコードを /src/モジュール/ディレクトリに追加し、モジュールに必要な依存関係を取り込みます

次のコマンドを使用して、複製可能なモジュールの一覧を表示します。

yarn msdyn365 clone --listmodules

例

次の例では、メディアギャラリーモジュールライブラリのモジュールの複製し変更を加える方法を示します。

yarn msdyn365 clone media-gallery super-media-gallery

コマンドの実行が終了した後は、\src\modules\ ディレクトリに新しいモジュールが表示されます。

メモ

モジュールを複製する際、モジュールの依存関係は自動的に引き下げされません。モジュールを構築する前に、Yarn を実行し不足している依存関係を修正する必要があります。 yarn 開始コマンドを実行する際にエラーが発生した場合は、モジュールのソースコード内の一部の参照を修正する必要がある場合があります。

複製されたモジュールを構築すると、複製されたモジュールコードに修正エラーが一覧表示される場合があります。自動的にリンティングエラーを修正するには、yarn lint:fix コマンドを実行します。

モジュールのプレビュー

開発環境の複製されたモジュールをプレビューするには、モジュールモックまたはページモックを使用する方法がいくつかあります。多くの複製されたモジュールには、モジュールモックがありません。したがって、手動で作成する必要があるかもしれません。

モジュールモックを使用してモジュールをプレビュー

前例で複製された super-media-gallery モジュールのモックファイルを作成するには、モジュールディレクトリでモックディレクトリを作成します。次に、そのディレクトリで JavaScript Object Notation (JSON) ファイルを作成および保存し、モジュール名に一致する名前を付けます (前例では \bings\super-media-gallery.json)。

モック形式は、typeName 値がモジュール名に一致する以下の例に似る必要があります。

{
    "id": "R1Module1",
    "config": {

    },
    "typeName": "super-media-gallery"
}

その後、必要に応じて特定の config 値を追加できます。どちらのモックの config 値を追加する必要があるかを判断するのに役立つ参照が必要な場合、次のセクションで表示されているようにページモックを作成および config 値をライブモジュールからモジュールモックにコピーできます。

ローカル Web ブラウザーで新しいモジュールをプレビューするには、以下の手順を実行します。

コマンドプロンプトで、ルート SDK フォルダーに移動し、次例で表示されているように yarn 開始コマンドを実行します。
```
c:\repos\Msdyn365.Commerce.Online\yarn start
```
Web ブラウザーで、次の URL を開き、モジュールを表示します: https://localhost:4000/modules?type=super-media-gallery。モジュール名が "type=MODULE_NAME" クエリ文字列パラメーターで使用されていることに注意してください。

ページモックを使用してモジュールをプレビュー

代わりに、モジュールでプレビューするためにページモックを使用できます。たとえば、ページモックを使用してモジュールのテストを参照してください。この記事では、動的ページモックを実稼働ページから作成するために、?item=nodeserviceproxy:true クエリ文字列パラメータの使用方法について説明します。この記事の前の例では、製品の詳細ページをページモックに保存し、そのページモックを変更して「購入ボックス」モジュールを「超購入ボックス」モジュールに置き換える方法を示しています。そして、/src/pageMocks/ ディレクトリで新しいページモックを保存します (例えば、/src/pageMocks/pdp-page-test.json)。

ページモックを作成した後、新しい複製モジュールをモック JSON ファイルに複製したモジュールを更新する必要があります。たとえば、製品詳細ページに基づいたページモックを作成した場合、「メディアギャラリー」モジュールを検索します。次の例のようなセクションが表示されます。その後、typename および ID 値を、メディアギャラリーから 超メディアギャラリーへ変更できます。

"modules": {
    "mediaGallery": [
        {
            "typeName": "media-gallery",
            "id": "media-gallery",
            "friendlyName": "Media gallery",
            "config": {
                "imageZoom": "inline",
                "allowFullScreen": true,
                "dataScale": "2",
            }
        }
    ]
}

ローカル Web ブラウザーでページモックを使用して新しいモジュールをプレビューするには、以下の手順を実行します。

コマンドプロンプトで、ルート SDK フォルダーに移動し、次例で表示されているように yarn 開始コマンドを実行します。
```
c:\repos\Msdyn365.Commerce.Online\yarn start
```
Web ブラウザーで、次の URL 形式を使用し、モジュールを表示します。 PAGE_MOCK パラメーターをページモックのファイル名に置き換えますが、.json 拡張機能は省略します。

https://localhost:4000/page?mock=PAGE_MOCK

たとえば、pdp-page-test.json ページモックファイルの URL があります。

https://localhost:4000/page?mock=pdp-page-test

これで、複製モジュールのコードを変更して、ページモックで変更を確認できます。

新しいモジュールの構築および配置

変更を加えた後、SDK 拡張機能パッケージを構築し、そのパッケージを多用なソフトウェアや実稼働環境に配置できます。手順については、パッケージコンフィギュレーションおよびオンライン環境への配置を参照してください。

サイトビルダーでの新しいモジュールの読み込み

モジュールを配置した後、元のモジュールを複製モジュールに置き換できます。たとえば、メディアギャラリーモジュールを新しく複製されたスーパーメディアギャラリーモジュールに置き換える場合は、サイトビルダーで製品の詳細ページを編集し、メディアギャラリーモジュールを削除して、新しくインストールされたスーパーメディアギャラリーモジュールをその場所に追加します。

モジュールカテゴリ

一部のモジュールは、特定のコンテナモジュールでのみ動作するように設計されています。たとえば、メディアギャラリーモジュールのモジュール定義ファイルおよび前例から複製された超メディアギャラリーモジュールは、super-media-gallery.definition.json ファイルの次例で確認できるように、buybox_mediaGallery カテゴリを含むカテゴリセクションがあります。

{
	"$type": "contentModule",
	"friendlyName": "Super media gallery",
	"name": "super-media-gallery",
	"description": "Media gallery is used for showcasing images of a product in a product details page",
	"categories": [
		"media-gallery",
		"buybox_mediaGallery"
	],
}

親コンテナーモジュール (この例では、前例で参照した購入ボックスモジュール) には、buybox.definition.json ファイルからの次の例に示すように、メディアギャラリーモジュールを保持するように設計されたスロットがあります。 (このファイルは \node_modules\@msdyn365-commerce-modules\buybox\src\modules\buybox ディレクトリにあります。)

"slots": {
    "mediaGallery": {
        "friendlyName": "Media Gallery",
        "description": "This the slot for the media gallery",
        "max": 1,
        "min": 0,
        "allowedTypes": ["media-gallery"],
        "allowedCategories": ["buybox_mediaGallery"]
    },
}

allowedTypes セクションでは、スロットがメディアギャラリータイプのモジュールまたは buybox_mediaGallery カテゴリに属するモジュールを許可することを指定します。サイトビルダーは、このメタデータを使用して、特定のスロットに表示されるモジュールを制限します。そのスロットで許可されているモジュールだけが表示されます。複製モジュールがカテゴリを削除しない限り、スロットの元のモジュールを置き換えることができます。