テーマの概要

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

この記事では、Microsoft Dynamics 365 Commerce のオンラインサイトの概観について説明します。

Dynamics 365 Commerce テーマ (テーマパック とも呼ばれる) は、販売者とその顧客向け eコマースページを構成するサイトのデザインとモジュールの外観と外観を定義します。各 eコマースサイトに設定できるテーマパックは 1 つのみです。

スタイルプリセット

テーマパックは、各プリセットごとに異なるスタイルのセットを定義する、1つまたは複数のスタイルプリセットを含むことができます。スタイルプリセットにはには、個々のモジュールのスタイルと、ブランドのアクセントカラーなどのグローバルスタイルの両方が含まれます。たとえば、テーマパックには、「軽い」テーマと「暗い」テーマ、または「クラシックな」ルックアンドフィールと「ヴィンテージ」のルックアンドフィールのスタイルプリセットが含まれている場合があります。スタイルプリセットの定義と名前付けは、テーマの開発者によって決定されます。

スタイルプリセットは、ブランドの色やフォントなどのグローバルカスケードスタイルシート (CSS) の値をサポートしています。また、個々のモジュールのテキストの色とサイズを含むモジュール固有の CSS 値もサポートしています。サイトごとに構成できるスタイルプリセットは 1 つだけです。ただし、変更が必要な場合は、CSS 値を Commerce サイトビルダーで上書きして、カスタムスタイルのプリセットとして保存できます。スタイルプリセットの変更の例には、さまざまなモジュールが使用するデフォルトのグローバルブランドアクセントカラーの変更、または特定のモジュールのフォントサイズの変更が含まれます。影響を受けるモジュールがサイトページにレンダリングされるときはいつでも、常に新しいカスタム値を使用します。

テーマには、モジュールのスタイル設定に使用できる SCSS (サッシーカスケードスタイルシート ) ファイルが含まれます。 SCSS ファイルには、オプションでモジュールビュー拡張子およびモジュール定義拡張子を含めることもできます。このようにして、モジュールは、選択されたテーマに基づいて、異なるビューをレンダリングできます。

テーマを作成した後、サンドボックスまたは制作サイトにアップロードできます。次の図の例に示すように、新しいサイトを作成するときにテーマパックを選択します。

Commerce のサイトビルダーの新しいサイトダイアログボックスのテーマパックフィールド。

テーマパックが選択していないサイトを既に配置している場合は、特別な&set=showThemePack クエリ文字列パラメーターを使用して、Commerce のサイトビルダーの一般サイト設定ページでテーマを設定できます。テーマを設定した後に保存して公開を選択してください。選択したテーマパックは、Microsoft Dynamics 365 のサポートに連絡して変更する必要があります。

Commerce のサイトビルダーの一般サイト設定ページで選択したテーマパック。

テーマを設定する場合は、Commerce のサイトビルダーの追加構成が必要です。 拡張機能のサイト設定ページで、下図の例のように、テーマがサイトで選択されたテーマパックと一致することを確認します。

Commerce のサイトビルダーの拡張機能サイト設定ページのテーマフィールド。

Commerce のサイトビルダーでは、追加のCSS上書きファイルをアップロードすることもできます。このようにして、テーマにコードを変更して再公開することなく、サイトビルダーで選択したテーマの上に直接変更を加えることができます。このオプションは、小さくて簡単な変更を行う必要がある場合に役立ちます。ただし、これらの変更を最終的にテーマコードに移行することをお勧めします。すべてのサイトページに追加の CSS オーバーライドファイルが読み込まれると、パフォーマンスへの影響が小さくなる可能性があります。

カスタムテーマを作成するための一般的なガイドライン

yarn msdyn365 add-theme NEW_THEME_NAMECLI (コマンドラインインターフェイス) を使用して、新しいテーマを作成できます。このコマンドは、/src/themes/ フォルダーにテーマを作成します。
スタイルディレクトリの下に、テーマの SCSS エントリポイントファイルがあります。このファイルは、命名パターン THEME_NAME.theme.scss を使用します。
テーマは特別なモジュールとして作成されます。これらには、テーマのフレンドリ名と説明、およびテンプレートの React コンポーネントを含む定義ファイルが含まれています。
テーマに含めることができる SCSS ファイルの数に制限はありません。
テーマエントリポイントは、相対パスを使用して他の SCSS ファイルをインポートできます。

ベストプラクティス

モジュールライブラリモジュールは、Bootstrap 4 クラスを使用して構築されます。したがって、すべてのテーマに Bootstrap 4 または Bootstrap 4 RTL を SCSS フレームワークとして含めることをお勧めします。
Font Awesome グリフアイコンを使用して構築されたモジュールライブラリモジュールを利用する場合は、SCSS ファイルに font-awesome を含める必要があります。次の例では、Bootstrap および font-awesome を SCSS ファイルに含める方法を示しています。
```
$fa-font-path: 'https://use.fontawesome.com/releases/v5.2.0/webfonts' !default;
@import "bootstrap/scss/bootstrap";
```

参照テーマからテーマを作成する

提供されている参照の 1 つ (Fabrikam、Starter、Adventure Works、または Adventure Works) のコピーから新しいテーマを開始し、適切な変更を行することをお勧めします。これらの参照テーマには、モジュールライブラリのすべての SCSS スタイルが既に含まれています。まったく新しいテーマから始める場合、すべてのモジュールのスタイルを再定義する必要があります。

Fabrikam および Starter テーマは、モジュールライブラリの一部として含まれており、クローン CLI コマンドを使用してコピーできます。次に例を示します。

yarn msdyn365 clone fabrikam my-new-theme

メモ

システムはテーマを特別なモジュールとして扱うため、クローン コマンドは自動的に新しいクローンテーマを \src\modules ディレクトリに配置します。次に、新しいテーマを手動で \src\themes ディレクトリに移動する必要があります。 \src\themes ディレクトリが存在しない場合は、手動で作成できます。

Adventure Works テーマはモジュールライブラリに含まれていません。代わりに、拡張機能としてリリースされています Adventure Works テーマのインストール方法については、Adventure Works テーマのインストールを参照してください。 クローン CLI コマンドは、Adventure Works テーマでは機能しません。ただし、ソースコードをテーマディレクトリにコピーして、必要に応じて変更することができます。

カスタムテーマの推奨構造

このセクションでは、カスタムテーマに対して推奨される構造を示します。

次の項目をインポートまたは定義します。

フォントとグリフアイコン
ミックスインと機能:
- ブートストラップ: コンポーネントとユーティリティを除く依存関係
- 共有コンポーネント: コンポーネントとユーティリティを除く依存関係
- カスタムテーマのミックスインと機能
テーマ変数:
- カスタムテーマ変数
- ブートストラップ: デフォルトのテーマ変数 (フォールバック)
コンポーネントとモジュールの SCSS:
- 共有コンポーネント: コンポーネント
- カスタムコンポーネントとモジュール
ユーティリティ:
- ブートストラップ、共有コンポーネント、およびカスタムユーティリティ

モジュールテーマのフック

モジュールごとに、モジュール名と一致するクラス名が定義されています。このようにして、どのテーマでもモジュールをターゲットにできます。このクラス名は、React コンポーネントによってレンダリングされる最も外側の要素に適用される最初のクラス名である必要があります。より詳細なテーマオプションを可能にするために、開発者はモジュールの要素または機能に追加のクラス名を指定できます。このようにして、カスタムテーマはそれらの要素または機能をターゲットにすることができます。

カスタムテーマ

カスタムテーマは、Dynamics 365 Commerce オンライン SDK を使用して作成できます。その後、それらは /src/themes/ フォルダーに保存できます。詳細については、テーマの作成を参照してください。

テーマ内での RTL および LTR のサポート

eコマースサイトで、右から左 (RTL) と左から右 (LTR) の両方の言語をサポートする必要がある場合があります。テーマは、異なる RTL および LTR SCSS ファイルを指定する機能をサポートしています。

メモ

テーマ内の RTL および LTR のサポートは、Dynamics 365 Commerce リリース 10.0.15 で利用できます。

各テーマには yarn msdyn365 add-theme コマンドラインインターフェイス (CLI) コマンドを使用して作成された styles\THEME_NAME.theme.scss ファイルがあります。たとえば、yarn msdyn365 add-theme spring を使用して「spring」という新しいテーマを作成すると、テーマの SCSS コードを含むファイル「\src\themes\spring\styles\spring.theme.scss」が作成されます。 SCSSファイルは、yarn start または yarn pack コマンドの使用時に CSS ファイルにコンパイルされ、サイトページのレンダリングに使用されます。

SCSS ファイルの特定の RTL または LTR バージョンをサポートするには、RTL サポートの場合は THEME_NAME.rtl.theme.scss、LTR サポートの場合はTHEME_NAME.ltr.theme.scss というファイル命名規則を使用して、追加のファイルを指定できます。ページがレンダリングされると、ブラウザの言語設定に従って適切な CSS ファイルが参照されます。単単一言語のサポートのみが必要な場合は、デフォルトの THEME_NAME.theme.scss ファイルを使用してください。

RTL および LTR のベストプラクティス

RTL および LTR レイアウトで使用される CSS コードは、いくつかのプロパティを除いて一般的に同じであるため、それらの異なるプロパティをそれぞれの「テーマ」ファイルで指定し、RTL および LTR SCSS ファイルの両方によって「基本スタイル」ファイルを作成して共有 (およびインポート) することができます・