テンプレートとレイアウトの概要
この記事では、テンプレートとレイアウトの概要を示します Microsoft Dynamics 365 Commerce。
テンプレートは、Microsoft Dynamics 365 Commerce ページ モデルの基本要素です。 サイト作成ワークフローにおける効率と一貫性を最大化することを目標としている場合は、Web サイトのテンプレートを活用するための方法を理解しておくことが重要です。 初期にテンプレート構造を決めておくことは重要で、日々の、季節ごとの、およびサイト全体のブランドを更新する際の費用と機敏性に大きく影響します。 適切に構成されたテンプレートには、他にも利点があります。 たとえば、サイト全体の検索エンジン最適化 (SEO) スコアを改善し、バグの数を最小限に抑えるのに役立ちます。
テンプレートを使用して作業を開始する場合は、テンプレートとレイアウトの機能上の利点、テンプレートとレイアウトの違い、および階層を理解しておくことをお勧めします。
次の図は、表示された Web ページの背後にあるページ モデル階層を示しています。
| エンティティ | 基本機能 |
|---|---|
| テンプレート | テンプレートは、一連のレイアウトおよびページ インスタンスのモジュール オプションと基本的なスキャフォールディングを定義します。 |
| レイアウト | レイアウトは、ページまたはページ セットでモジュールの最終的な選択と配置を定義します。 |
| ページ インスタンス | ページ インスタンスは、特定のページのデータおよびコンテンツを定義します。 |
テンプレート
テンプレートは、Dynamics 365 Commerce ページ モデル階層の最上位に位置し、サイト コンフィギュレーションの重要な初期ステップを表します。 概念的には、テンプレートを使用すると、下位のレイアウト作成とページ作成のワークフローに対して基本構造と作成オプションを定義することによって、子レイアウトやページのファミリー全体の一貫性を制御することができます。 テンプレートを使用することで、定義済みの一元管理された要素 (ヘッダーやフッターなど) や、ブランド イメージに沿ったモジュールのコンフィギュレーションを確実にするガイド付きの作成フローを通じて、コンテンツ作成プロセスを簡略化することができます。
一貫性の制御
テンプレートをデザインする際、ビジネス上の最大の意思決定は、ページ作成プロセス全体でどれだけテンプレートを管理する必要があるかを決定することです。 下流の作成者のためにすべてをオープンにしているテンプレートは、作成するのに最も簡単なタイプのテンプレートですが、そのテンプレートから作成されたページの保守については、長期的な結果が生じることがあります。 適切に記述されたテンプレートには、ガイダンスと合理的な作成エクスペリエンスがありますが、タスクを完了できるようにするための柔軟性も十分に得られます。 これらのすべての側面は、テンプレートが適用する制御のレベルによって異なります。
テンプレートを使用すると、次のような方法で、コンテンツ作成者の作業効率を高め、ブランド イメージに沿ったコンテンツを作成できるようになります。
- ページで使用できるモジュールを制限する。
- 既定のモジュールとコンフィギュレーションの選択肢を提案する。
- モジュールとコンフィギュレーションを、テンプレート レベルで制御して明示的に選択する。 このプロセスは、設定のロックと呼ばれることもあります。
次の例では、基本テンプレート (テンプレート X) をコンフィギュレーションする方法を示します。
- テンプレート X のすべての子レイアウトには、ヘッダー コンテナー、本文コンテナー、およびフッター コンテナーが必要です。
- テンプレート X では、ヘッダー コンテナーのコンフィギュレーションはロックされており、テンプレート X 自体でのみ変更できます。 すべての子レイアウトおよびページには、常にこのヘッダーが付いています。
- 本文コンテナーには、最低 1 個、最大で 10 個のモジュールが必要です。 これらのモジュールは、下流のレイアウトとページによって定義されます。
- 本文コンテナーでは、ヒーロー、フィーチャー、カルーセル、およびバナー モジュールが使用できます。
- フッター コンテナーはテンプレート X でコンフィギュレーションされますが、下流のレイアウトとページによって上書きできます。
この例のテンプレートでは、下流のコンテンツ作成者のためにシンプルな構造と一連のオプションを定義しています。 ページの一部 (この例ではヘッダー) は、テンプレートで完全に定義およびロックされており、下流の作成者によって変更できないことに注意してください。 その他の部分 (この例では、本文) は、特定のガイドライン (この例では、特定のタイプのモジュールの最小数と最大数) では、下流の作成者によって定義されます。 その他の部分 (この例ではフッター) はテンプレートに定義されていますが、下流の作成者によって上書きすることができます。
サイトおよびブランド管理者にとって重要な最初のステップは、子レイアウトとページ作成者のために、適切なバランスで制約と柔軟性を決めることです。 テンプレートを使用する場合、このバランスは完全にコンフィギュレーションできます。 これは、ページ要素を一元的に更新する (テンプレートでロックされている) か、またはページの階層の下位にある個々の子レベルのままにするかに影響します。
テンプレートの既定値とページ コンテンツ間の関係
テンプレートの主な機能は、ページの作成時にモジュールの作成エクスペリエンスを合理化することです。 テンプレートでモジュールの既定値が設定されている場合やロックされている場合でも、ページの編集時以外、ページのモジュール構成からテンプレートの既定値へのデータ接続はこれ以上ありません。 テンプレートはページ構造の作成エクスペリエンスを制御し、ページの作成後、テンプレートの既定値はそのページのローカライズ可能なコンテンツにリンクされなくなりました。 つまり、テンプレートで設定されたモジュールの既定値によって、子ページの作成エクスペリエンスが制御されます。 ページの作成と編集後は、これらのページのコンテンツは制御されません。
前述の動作に対する唯一の例外は、テンプレートにフラグメントが追加された場合に発生します。 特定のテンプレートから多数のページを作成した後でも、テンプレートやレイアウトのすべての子ページにローカライズ可能なコンテンツを動的に追加または編集するために、随時フラグメントを使用できます。 ローカライズ可能なコンテンツをすべての子ページにわたって動的に追加、削除、または編集する必要がある場合は、テンプレートやレイアウトでフラグメントを使用することがベスト プラクティスです。 たとえば、ヘッダー、フッター、共通のメタデータ/スクリプト、その他すべての子ページで一元的に編集可能であるべきコンテンツに対して、同じコンテンツを使用する必要があります。 フラグメントを使用することで、テンプレートやレイアウトを使用してすべての子ページのコンテンツを制御できます。
テンプレートの使用を開始するには、テンプレートの使用を参照してください。
レイアウト
レイアウトは、ページ モデル階層の次のレベルで、テンプレートの下にあります。 テンプレートはページに対して許可されるすべてのモジュールを定義しますが、レイアウトはモジュールの明示的な選択と配置です。 ページは、ページ モデル階層の次のレベルで、レイアウトの下にあります。 レイアウトで選択したモジュールの、ローカライズされたコンテンツを定義します。
次の例では、前のセクションのテンプレート例を基に、基本レイアウトをコンフィギュレーションする方法について説明します。
レイアウトの親テンプレートでは、本文コンテナーに1 から 10個のモジュールが含まれている必要があります。 これらのモジュールは、ヒーロー、フィーチャー、カルーセル、およびバナー モジュールにのみ設定できます。 したがって、レイアウトでは、次のようなモジュールの選択および配置を定義できます。
- 本文コンテナーの最初のモジュールはバナー モジュールであり、その後に、ヒーロー モジュールと 2 つのフィーチャー モジュールが続きます。
- 最初のフィーチャー モジュールは左揃えで、2 番目のフィーチャー モジュールは右揃えで配置されます。
既定のフッターは親テンプレートから継承されていますが、テンプレートの作成者によってフッターのロックは解除したままの状態になります。 したがって、別のフッター フラグメントを定義することによってレイアウトを上書きすることができます。
この例のレイアウトでは、子ページのモジュールの最終的な配置を定義します。 テンプレートと同様に、レイアウトでは、子ページによって常に継承される既定またはロックされたモジュール プロパティを定義できます (フィーチャー モジュールの配置など)。 その後、各子ページのインスタンスで、レイアウト内のすべてのモジュールの実際のコンテンツまたはデータが階層の下方に定義されます。 ここで重要な違いは、レイアウトにはローカライズ可能なコンテンツが直接含まれないが、その子ページには含まれるということです。 レイアウトの主要な機能は、その子ページのモジュールの最終的な配置と既定のコンフィギュレーションを定義することです。
この階層が威力を発揮するのには、2 つの理由があります。 まず、同じ親テンプレートを共有するレイアウトは、レイアウト切り替えシナリオと互換性があるものとして処理されるためです。 したがって、ページレベルのコンテンツを再作成する必要なしに、すべてのページのレイアウトを同じテンプレート階層から別のレイアウトに変更することができます。 この機能を利用して、季節に応じてデザインを更新したり、実験したり、サイトの再設計を行うことができます。 次に、レイアウトによって、個々のページを更新する必要なしに、ページのグループの共有要素を一元的に変更できるためです。 たとえば、製品カテゴリに同じレイアウトを共有するページが 1,000 含まれている場合、レイアウト内でモジュールを並べ替えることができます。この変更は、1,000 の子ページすべてにすぐに反映されます。
この階層を理解することにより、コストを削減し、スケーラブルな、サイトの発展に伴って時間の経過と共により良い結果を生み出すような、機敏で効率的なサイト構造を実現できます。
プリセットまたはカスタムのレイアウト
サイトのレイアウトは、プリセットまたはカスタムのいずれかになります。
- プリセット レイアウトでは、ページ作成ワークフローを使用でき、すべてのモジュールが既に選択、配置されているため、データ入力のみが必要となります。 この方法を使用すると、同じレイアウト要件を持つ多数のページを作成する必要がある場合に、時間を節約できます。 プリセット レイアウトには、その子ページとの間で一対多の関係が設定されています。 したがって、1 つのプリセット レイアウトで、数百または数千の子ページに対するモジュールの配置を一元管理できます。
- カスタム レイアウトは、1 ページに埋め込まれた、基本的に単一使用のレイアウトです。 他の新しいページが作成されたときや、レイアウト切り替えシナリオでは、これらはオプションとして公開されません。 この方法の利点は、カスタム レイアウトを使用するページを作成することによって、作成者が実験できることです。 次に、作成者が他のページのレイアウトを再利用する場合は、簡単にプリセット レイアウトに変換することができます。 新しいプリセット レイアウトは、ページ作成ワークフローでオプションとして表示され、同じテンプレート階層のページにはレイアウト切り替えシナリオとして公開されます。 逆に、プリセット レイアウトはカスタム レイアウトに分岐できます。 これにより、作成者は、プリセット レイアウトからページを切り離して、新しい単一使用のカスタム レイアウトを作成することができます。 (この新しいカスタム レイアウトは、依然として親テンプレートのすべての制約によってバインドされます。)
プリセット レイアウトとカスタム レイアウトは、作成ツールセットのさまざまな部分で編集できます。 カスタム レイアウトは他のページに依存しないので、ページ エディターで直接編集されます。 この場合、レイアウトの存在はユーザーに対して透過的に表示され、ページレベルのプロパティでのみ、レイアウト オプションのアクションを通じて公開されます。 ただし、プリセット レイアウトを変更すると、多くの子ページに影響する可能性があるため、レイアウト エディターで編集する必要があります。ここでは、アクションの公開により、子ページに対するすべての下流の影響が考慮されます。
次の図は、プリセット レイアウトとカスタム レイアウトのシナリオを示しています。
プリセット レイアウトの使用を開始するには、プリセット レイアウトの使用 を参照してください。