モジュールの概要
この記事には、Microsoft Dynamics 365 Commerce のモジュール開発の概要について説明します。 これには、モジュールのスタイルや機能をいつ、どのように拡張するかに関するベスト プラクティスが含まれます。
Dynamics 365 Commerce のモジュール
Dynamics 365 Commerce で、モジュールは、Online Commerce ページを構成するコア となる構成要素を表します。
Commerce サイト ページで使用されるモジュールの例を次に示します。
- ページに掲載され、製品の画像と説明、および製品の購入や詳細情報の取得に使用できる「アクションの呼び出し」ボタンを表示するコンテンツ ブロック モジュール
- プロモーションをページ上のバナーとして強調表示するプロモーション バナー モジュール
- 検索モジュール、サインイン モジュール、ナビゲーション モジュールなどの小さなモジュール コンポーネントで構成されるヘッダー モジュール
- ページの HTML に JavaScript を挿入するスクリプト モジュール
モジュールの構造
モジュールは React コンポーネントを使用して構築され、さまざまなファイルで構成されます。 各ファイル タイプの概要については、次の記事を参照してください。
- モジュール定義ファイル
- モジュール反応コンポーネント ファイル
- モジュール ビュー ファイル
- モジュール データ ファイル
- モジュール モック ファイル
- モジュール テスト ファイル
- モジュール props.autogenerated.ts ファイル
Dynamics 365 Commerce でモジュールを使用する方法とタイミングの詳細については、モジュールの使用を参照してください。
モジュール開発の使用を開始する
Commerce モジュール ライブラリは、Online Commerce サイトで使用できる広範なモジュール セットを提供します。 ただし、業務要件を満たすには、モジュールまたはテーマのカスタマイズが必要になる場合があります。 モジュールとテーマをカスタマイズするには、開発環境で Dynamics 365 Commerce オンライン ソフトウェア開発キット (SDK) を使用します。
開始するには、一連のツールとオンライン SDK をインストールする必要があります。 開発環境を設定して最初のカスタム モジュールを作成する方法を示すステップ バイ ステップの手順については、開発環境の設定を参照してください。
モジュール ライブラリ モジュール
Dynamics 365 Commerce は、Online Commerce ページを構築するときに使用できるモジュールのライブラリを提供します。 これらのモジュールはさまざまな方法でカスタマイズできます。 たとえば、コード フリー スタイルを変更したり、オンライン SDK のコードを使用してコンフィギュレーションを変更したりできます。 モジュール ライブラリの詳細については、モジュール ライブラリの概要を参照してください。
コード フリー スタイルの変更
Commerce サイト ビルダーを使用すると、次のコード フリー スタイルを変更できます。
- スタイル プリセットにより、各モジュールのスタイル変更のセットを制限できます。
- CSS 上書きは、モジュールのカスケード スタイル シート (CSS) を上書きするために使用されます。
オンライン SDK を介したコンフィギュレーションの変更
オンライン SDK を使用すると、カスタム テーマを変更して次の結果を得ることができます。
- モジュールを変更 CSSして、モジュールのスタイルを変更します。
- モジュールの表示を拡張して、表示される HTML レイアウトを変更します。
- モジュールの定義ファイルを拡張して 、コンフィギュレーション フィールド、スロット、データ アクション、またはリソースを追加または削除します。
- モジュール ライブラリ コンポーネントを上書きして、コンポーネントの動作を変更します。
その他のカスタマイズ オプション を次に示します。
- データ アクションの上書きを使用すると、組み込みのデータ アクションをカスタマイズできます。
- モジュール ライブラリ キット モジュールを変更 して、モジュール ライブラリ内にモジュールの新しいコピーを作成し、モジュールの任意の部分を変更します。 このオプションは、他の方法では実行できない変更に使用されます。
- モジュール ライブラリのモジュールが提供しないカスタム ソリューションが必要な場合は、カスタム モジュールを作成します。
次のセクションでは、さまざまなニーズに最適なオプションの詳細を示します。
モジュール ライブラリ モジュールの正しいカスタマイズ オプションの選択
前に見たように、モジュール ライブラリ モジュールのカスタマイズには多くのオプションが使用できます。 ニーズに合った正しいオプションを選択することが重要です。
たとえば、モジュール ライブラリ モジュールの複製を選択した場合、モジュールの新しいコピーを作成します。 ただし、複製されたモジュールの基になっているモジュール ライブラリ モジュールが将来のモジュール ライブラリ リリースで更新された場合、コードの更新は受信されず、複製されたモジュールを手動で更新する必要があります。 したがって、複製は必要な場合にのみ使用してください。
次の情報は、ニーズに合った正しいソリューションを選択するのに役立ちます。
スタイルの変更
モジュール ライブラリ モジュールが必要なすべてのことを行うシナリオがあるが、モジュールのルック アンド フィールを変更したい場合、通常は CSS の変更によってこの目標を達成できます。 たとえば、CSS の変更により、モジュール内の不要な要素を非表示にできます。 サイトの テーマには、サッシー カスケード スタイル シート (SCSS) ファイルのすべてのモジュールの CSS が含まれています。 場合によっては、CSS の変更にモジュールやテーマのカスタマイズが必要ない場合は、Commerce サイト ビルダーで直接作成できます。 次のいずれのオプションも、オンライン SDK を使用する必要はありません。 これらは、モジュールに CSS の変更を加える最も簡単で最速の方法です。
スタイル プリセット
スタイル プリセットは、サイトのテーマ全体のすべてのカスタム スタイル値の保存されたセットです。 Commerce サイト ビルダーで使用して、サイトの外観をすぐに変更できます。 サイト ビルダーでは、デザイン タブのスタイル プリセットにアクセスできます。 グローバル スタイルとモジュール固有のスタイルの両方を変更できます。
モジュールに CSS の変更を加えるときは、サイト ビルダーでカスタム スタイル プリセットを使用して変更を実装できるかどうかを最初に判断する必要があります。 各モジュールには、サイト ビルダーのデザイン タブのスタイル プリセット セクションで変更できるスタイル オプションがあります。 この機能により、モジュール内の背景色、テキスト色、およびテキスト サイズの CSS など、一部の CSS を簡単に変更できます。
[メモ] サイト ビルダーのスタイル プリセット オプションは、モジュール ライブラリの 10.0.12 リリース以降で使用できます。 各モジュール ライブラリ モジュールの特定のオプション セットに限定されます。
スタイル プリセットの 1 つの制限は、モジュール タイプへのスタイルの変更がグローバルであることです。 つまり、モジュールの変更は、編集したモジュール タイプを使用するすべてのページに表示されます。 たとえば、モジュールの背景色を変更すると、そのモジュールを使用するすべてのサイト ページに新しい色が表示されます。 1 つのサイト ページでのみ使用されるモジュールのスタイルを変更する必要がある場合は、CSS 上書きの使用を検討するか、モジュール定義拡張機能を使用して新しいカスタム構成を既存のモジュールに追加します。
カスタム モジュールを構築している場合は、スタイル プリセットを公開して、サイト作成者が使用できるようにすることができます。 詳細については、テーマ スタイル プリセットを構成するを参照してください。
次の図は、プロモーション バナー モジュールで使用できるスタイル プリセットを示しています。 背景色が変更された場合、変更が公開された後、サイト上のモジュールのすべてのインスタンスに新しい色が使用されます。
CSS上書きファイル
CSS 上書きファイルは、コマース サイト ビルダーを使用してアップロードできます。 このファイルには、必要に応じてページのスタイルを変更する追加の CSS コードが含まれています。 Commerce ページがレンダリングされると、テーマ モジュールの CSS が最初に適用され、次に CSS 上書きファイルが適用されて、そのモジュールの特定のテーマの CSS が上書きされます。 スタイルが必須ではない場合は簡単に削除できるため、このオプションは、実際のサイトに対する迅速な実験に最適です。
一般に、最新のブラウザーの HTML/CSS デバッグ ツールなどのツールを使用して、必要に応じて CSS を変更できる場合は、それらの変更を 1 つの CSS 上書きファイルにコピーできます。 たとえば、ヘッダー モジュールでウィッシュリスト アイコンを非表示にする場合は、CSS 上書きを使用して要素を非表示にする必要があります。モジュールには、ウィッシュリスト アイコンを表示または非表示にする構成設定がないためです。 F12 Web ブラウザー ツールを使用して、使用する CSS クラス名を検索し、目的の外観が得られるまで書式設定を試すことができます。 次の例は、ヘッダー モジュールでウィッシュリスト アイコンを非表示にする CSS コードを示しています。
a.msc-wishlist-icon.ms-header__wishlist-desktop.msc-btn {
visibility: hidden;
}
この CSS コードをテキスト ファイルに保存し、サイト ビルダーを使用してアップロードできます。 詳細については、CSS 上書きファイルの操作を参照してください。
すべてではなく、モジュールの 1 つまたはいくつかのインスタンスを変更する必要がある場合は、サイト ビルダーでカスタム CSS クラス名をモジュールのインスタンスに追加できます。 変更を公開した後、ページ インスタンスに生成された HTML を調べると、ページの HTML に新しいクラス名が追加されていることがわかります。
次の図は、公開後のサイト ビルダーのヘッダー モジュールを示しています。 カスタム CSS クラス名設定が強調表示されています。
テーマの変更
CSS の変更がより複雑な場合、または変更を永続的にしたい場合、次のレベルのカスタマイズでは、オンライン SDK を使用してサイト テーマを変更します。 サイト テーマは SCSS ファイルを使用して、モジュールが必要とするすべての CSS コードを保持します。 fabrikam スターター テーマは、オンライン サイトで使用できる既定のテーマとして提供されています。 ただし、一般に、サイトの新しいカスタム テーマを作成することをお勧めします。 カスタム テーマを作成するプロセスは簡単で、既定の fabrikam テーマを複製して、そのコピーを独自のテーマのベースとして使用することもできます。
Dynamics 365 Commerce の 1 つのインスタンスで複数のサイトをホストしている場合は、必要な数のテーマを作成できます。 他のテーマが継承する基準テーマを作成することもできます。 このようにして、テーマ全体で共通の変更を最小限に抑えることができます。 詳細については、基準テーマからテーマを拡張するを参照してください。
テーマを使用すると、モジュール CSS をカスタマイズできるだけでなく、モジュール ビューと定義の拡張、およびモジュール ライブラリ コンポーネントの上書きもサポートされます。
新しいテーマの作成
サイトの新しいテーマを最初から作成すると、モジュール ライブラリ モジュールの SCSS ファイルを持たない空の定型テーマを取得します。 新しいテーマを作成する方法については、新しいテーマを作成するを参照してください。 モジュール ライブラリ スタイルをスターターとして使用する新しいテーマを作成する場合は、次のセクションを参照してください。
fabrikam のテーマのデザインを複製する
fabrikam テーマを独自のテーマのスターターとして複製するには、次の手順に従います。
複製コマンドライン インターフェイス (CLI) コマンドを使用して、fabrikam テーマのコピーを作成します。 たとえば、yarn msdyn365 clone fabrikam MY_NEW_THEME を使用します。MY_NEW_THEME は新しいテーマの名前です。
複製コマンドは、モジュールのコピーを作成し、それを /src/modules ディレクトリに配置します。 テーマは、/src/themes ディレクトリに保存される特別なモジュールです。
新しいテーマを src/modules から src/themes ディレクトリに手動でコピーします。 /themes ディレクトリが存在しない場合は、最初に手動で作成できます。
テーマ ディレクトリで、MY_NEW_THEME.definition.json という名前のファイルを検索します。MY_NEW_THEME は手順 1 の複製コマンドで提供された名前です。 このファイルには、わかりやすい名前やテーマの説明など、サイト ビルダーで使用されるメタデータが一覧表示されます。
テーマでモジュール CSS を変更する
カスタム テーマを作成したら、必要に応じて SCSS を変更できます。 各モジュール ライブラリ モジュールの SCSS ファイルは、テーマの /styles/04-modules ディレクトリに保存されます。 必要に応じて変更できる SCSS ファイルは他にも多数あります。 たとえば、//styles/00-settings ディレクトリには、一般的な色の定義を含む colors.scss ファイルがあります。
オンライン SDK を使用してテーマを作成または変更した後、コンフィギュレーション パッケージを構築し、Microsoft Dynamics Lifecycle Services (LCS) を介してアップロードできます。 詳細については、パッケージ コンフィギュレーションとオンライン環境への配置を参照してください。 テーマが配置された後、サイト ビルダーのサイトに対して設定できます。 詳細については、サイト テーマの選択を参照してください。
テーマでモジュールのビューを拡張する
CSS の変更以上の要件が必要になる場合があります。 モジュール ライブラリ モジュールの HTML を変更する必要がある場合があります。 モジュール ライブラリ モジュールは、React ビュー ファイルとメイン コンポーネントが分離されるように構築されています。 したがって、表示ファイルはテーマで上書きできます。
たとえば、製品の詳細ページ (PDP) の購入ボックス モジュールの HTML を並べ替えて、製品詳細が価格の上に表示されるようにします。 CSS の変更だけで、この結果を達成できる場合があります。 ただし、モジュール ビューを拡張すると、ページの HTML への変更によって、レイアウト デザインのパフォーマンスと応答が向上する場合もあります。
モジュール ビューを拡張するために、テーマのモジュールのビューを上書きできます。 これらの変更は、サイトのテーマに適用されます。 したがって、サイトのテーマを変更することで、モジュール全体のルック アンド フィールを変更できます。 モジュールを複製する代わりにモジュール ビューを変更する利点の 1 つは、モジュール ライブラリ モジュールへの更新が引き続き適用されることです。 たとえば、モジュール ライブラリ モジュールのビジネス ロジックが改善および更新された場合、上書きの表示は、更新されたモジュール ライブラリ モジュールのコードで引き続き機能します。
モジュール テーマ拡張の例は、スターターの fabrikam テーマにあります。 モジュールを拡張する方法の詳細については、テーマを拡張してモジュール拡張機能を追加するを参照してください。
モジュール定義拡張機能の拡張
モジュールのビューを拡張するだけでなく、モジュール ライブラリ モジュール定義を拡張して、モジュール構成、スロット、データ アクション、またはリソースを追加または削除できます。 その後、モジュールのビュー拡張から新しい構成にアクセスできます。 したがって、一般に、テーマ定義拡張機能を追加すると、モジュールのビューも拡張されます。 詳細については、テーマの定義拡張を参照してください。
たとえば、モジュール ライブラリ モジュールにタイトル文字列の構成がある場合、サブタイトル文字列構成の構成をモジュール定義拡張に追加できます。 この追加の構成は、サイト ビルダーで設定し、モジュールの拡張ビューで表示できます。
モジュール ライブラリ コンポーネントを上書きする
モジュール ライブラリには、ヘルパー コンポーネント ファイルのセットが含まれます。 これらのファイルには、一部のモジュールが HTML をレンダリングするため、またはサーバー API を呼び出すイベントを処理するために使用する API が含まれています。 コンポーネントは、必要に応じて上書きまたは変更できます。 このタイプのコンポーネントの一例は、適切な価格を表示する価格コンポーネントです。 このコンポーネントには、取り消し線が適用可能な場合、価格の取り消し線のマークアップが含まれます。 価格の表示を変更する必要がある場合は、価格コンポーネントを上書きできます。 詳細については、モジュール ライブラリの上書きを参照してください。
データ アクションの上書き
データ アクションの上書きを使用すると、コア データ アクションをカスタマイズできます。 通常、データ アクションはサーバー側 API を呼び出します。 また、モジュールがそのデータを使用する前に、戻り値に必要な追加のビジネス ロジックを適用することもできます。 データ アクションを上書きすると、コピーが /src/action ディレクトリに追加されます。 そこで、必要に応じてコードを変更できます。 データ アクションが上書きされると、元のデータ アクションを呼び出したすべてのモジュールが新しいデータ アクションを呼び出すようになります。 データ アクションの上書きはグローバルであることに注意してください。 テーマに限定されません。
モジュール ライブラリ モジュールの複製
モジュール ライブラリ モジュールに目的の変更を加えることができませんが、そのモジュールをスターターとして使用したい場合は、複製できます。 モジュールのビューで公開されていないモジュール ビジネス ロジックを変更する必要があり、ビューの上書きでは必要な処理が行われないシナリオでは、このアプローチを使用する必要がある場合があります。 モジュール ライブラリ モジュールを複製する場合は、元のモジュールのコードのコピーを含む新しいモジュールを作成します。 その後、必要に応じて新しいモジュールを変更できます。
モジュール ライブラリ モジュールへの今後の更新は、複製されたモジュールによって自動的に取得されないため、モジュールの複製は最後の手段としてのみ行う必要があります。 この場合、複製されたモジュールでモジュール ライブラリの更新が必要かどうかを決定する必要があります。 必要な場合は、手動で追加する必要があります。 モジュール ライブラリ モジュールが更新された後に手動で更新を追加するには、新しい複製を作成し、コードを複製されたモジュールと比較します。
モジュール ライブラリのバージョン更新の取得方法については、SDK およびモジュール ライブラリの更新を参照してください 。
カスタム モジュールの作成
モジュール ライブラリの一連のモジュールで使用できない機能が必要な場合は、カスタム モジュールを作成できます。 カスタム モジュールの作成プロセスは簡単で、add-module CLI コマンドを使用して実行できます。 モジュール ライブラリ モジュールに関しては、SCSS ファイルをサイト テーマに追加でき、さまざまなテーマでモジュール ビュー拡張機能を介してオプションでモジュールのビューを変更できます。 または、モジュール定義を必要に応じて拡張できます。