新しいテーマの作成

[アーティクル]
07/30/2024

この記事では、Microsoft Dynamics 365 Commerce オンラインサイトの新しいテーマを作成する方法について説明します。

Dynamics 365 Commerce オンラインソフトウェア開発キット (SDK) を使用して、オンラインサイトに適用できるカスタムテーマを作成することができます。必要に応じて、単一のテナントにあるサイト間で共有することができます。

テーマを作成して、サンドボックスまたは運用環境にアップロードした後、Commerce サイトビルダーを使用して、サイトにテーマを設定できます。その後、オンラインページが表示されるとき、適切なテーマが適用されます。このように、モジュールがサイトページ間で一貫した概観を持つようになります。

テーマには、オンラインサイトおよび個々のモジュールのスタイルを設定するために使用できる、Sassy Cascading Style Sheet (SCSS) ファイルが含まれます。必要に応じて、オプションで次の拡張機能を含めることもできます。

モジュールに新しいレイアウトビューを提供するモジュールビュー拡張機能
モジュールの構成を変更する定義拡張

新しいテーマの作成

オンラインソフトウェア開発キット (SDK) は、add-theme コマンドラインインターフェイス (CLI) コマンドを提供しています。 Commerce で新しいテーマを作成するには、次の例に示されるコマンドを実行し、THEME_NAME を新しいモジュールにつけたい名前に置き換えます。

yarn msdyn365 add-theme THEME_NAME

次の例では、spring という名前のテーマを作成する方法について示します。

yarn msdyn365 add-theme spring

新しいテーマは、...\src\themes ディレクトリの下の新しいディレクトリに作成されます。たとえば、春のテーマは、...\src\themes\spring ディレクトリの下に作成されます。

テーマの名前付け規則

テーマの名前は、大文字と小文字を区別しません。テーマのフレンドリ名と説明を、新しいテーマのディレクトリにあるテーマ定義ファイルに追加することができます。

テーマの定義ファイル

テーマは特別なモジュールとして作成されます。各テーマには、テーマのフレンドリ名と説明を含む JavaScript Object Notation (JSON) 形式のテーマ定義ファイルがあります。 $type プロパティは、"themeModule" に設定されます。

次の例は、テーマの定義ファイルを示しています。

{
    "$type": "themeModule",
    "friendlyName": "Spring theme",
    "name": "spring",
    "description": "This is default theme."
}

テーマのスタイル

SCSS ファイルは、...\src\themes\THEME_NAME\styles ディレクトリの下に保存されます。既定では、このディレクトリに THEME_NAME.theme.scss ファイルが含まれます。このファイルは、エントリポイントの SCSS ファイルです。必要に応じて、他の SCSS ファイルおよびディレクトリをディレクトリに追加することができます。

たとえば、春のテーマのファイル名とパスは、...\src\themes\spring\styles\spring.theme.scss のようになります。

テーマをテストする

?theme=THEME_NAME クエリ文字列パラメーターを使用することにより、簡単に開発環境でテーマをテストすることができます。

テーマをテストするには、以下の手順を実行します。

コマンドプロンプトで、ローカルコードリポジトリのディレクトリの下で、yarn start を実行します。
Web ブラウザーで、モジュールのテストページを読み込み、次の例に示すように ?theme=THEME_NAME クエリ文字列パラメーターを追加します。

https://localhost:4000/modules?type=product-feature&theme=spring

.env ファイルの MSDyn365_HOST エントリポイントが運用サイトを示している場合、次の URL を使用して、カスタムテーマが適用された場合のサイトの外観をプレビューすることもできます。

https://localhost:4000?theme=spring

テーマの新しい設定値をモックする

テーマ内のモジュールに新しい構成フィールドを追加する場合、そのモジュールのモックファイルにモックデータを追加することができます。たとえば、モジュールライブラリモジュールのビューファイルおよび定義ファイルを変更する場合、モジュールライブラリモジュールの \node_modules\@msdyn365-commerce-modules ディレクトリにあるモジュールライブラリモックファイルに新しい構成モックを追加することができます。

同様の方法で、カスタムモジュールのデータをモックする場合、モジュールのモック JSON ファイルに新しいモックデータを追加することができます。または、同じモジュールモックのディレクトリの下に新しいモックファイルを作成することもできます。