コンポジット レンダリング

Current version: 10.1

コンポジット レンダリングは、複数のレンダリングで構成されます。各インスタンスは独自のレイアウトを持つことができ、エクスペリエンス エディターで個別に設計できます。コンポジット レンダリングがページにレンダリングされるときは、データ ソースから各アイテムをクエリしてデータとレイアウトをプルします。これにより、非常に複雑なレイアウトの構築が容易になりますが、より高度な設定が必要になります。

画像、テキスト、ビデオなどのシンプルなレンダリングは、レイアウトで構成され、単一のデータ ソース アイテムを使用してコンテンツを提供します。コンテナーやスプリッターなどの複雑なレンダリングには、複数のシンプルなレンダリングや複雑なレンダリングを含みます。これらのレンダリングには 1 つのレイアウト定義があり、追加されたすべてのレンダリングはレンダリング ページ プロパティで定義されます。アコーディオン、カルーセル、トグルなどのコンポジット レンダリングは、すべてのデータ ソースをそれぞれのレイアウトで使用します。レンダリング フィールドには、データ ソース アイテムへの参照のみが保存されます。そのため、関連するレイアウトはすぐにはレンダリングされません。

シンプルなレンダリング、複雑なレンダリング、コンポジット レンダリングの違い

既定では、SXA は次のコンポジット レンダリングを含んでいます。

  • [カルーセル]: カルーセル レンダリングにより、説明とリンクを伴う一連の回転スライド (通常は画像) を定義できます。カルーセルはホーム ページの上部でよく使用されますが、どのページにも配置できます。たとえば、カルーセルを使用して、多数の注目ページを表示したり、段階的なプロセスを説明したり、製品画像を表示したりできます。カルーセル内のアイテムは、定義された順序で一度に 1 つずつ表示されます。既定では、カルーセル レンダリングはスライド画像とスライド テキスト アイテムを含んでいます。

    SXA カルーセルの例
  • [アコーディオン]: アコーディオン レンダリングでは、折りたたみ可能なセクションのリストを縦または横に重ねることができます。アコーディオンを使って、FAQ やサムネイルのセットを表示したり、長い文書をセクションに分けて表示したりすることができます。各セクションを展開すると、そのアイテムに関連するコンテンツが表示されます。アコーディオンでページを折りたたむと、スクロールを最小限に抑えることができます。これは、コンテンツが豊富なページや、モバイルデバイスなどでコンテンツが非常に小さなスペースに制限されているページでは非常に有効です。これにより、訪問者は何を読むべきか、何を無視すべきかを判断することができ、Web ページの表示の圧迫感を抑えることができます。

    SXA アコーディオンの例
  • [反転]: 反転では、表 (表示) と裏 (非表示) の 2 つのアイテムを扱うことができます。この 2 つのアイテムは、アイテムをクリックするか、アイテムの上にカーソルを置くと、交互に表示されます。たとえば、反転レンダリングには、スタッフの写真やプロファイル情報を入れたり、クーポンや引き換えコードを入れたりすることができます。

    SXA 反転の例
  • [タブ]: タブ レンダリングでは、タブ付きレイアウト内にコンテンツを表示できます。ここでは、一度に 1 つのタブのコンテンツしか表示されません。タブは、関連情報を構造的に表示したい場合に非常に有効です。たとえば、タブ レンダリングを使って、ブログの記事を「最近の投稿」「人気のある投稿」「コメントの多い投稿」などのカテゴリに分けて整理することができます。

    SXA タブの例
  • [スニペット]: スニペット レンダリングでは、再利用可能なレンダリングのグループを作成することができます。これは、エクスペリエンス エディターで個別にデザインできる複数のレンダリングを組み合わせたコンポジット レンダリングです。パーシャル デザインと同じように、異なる種類のレンダリング画像をグループ化し、そのグループを別の場所で再利用することができます。スニペットは、エクスペリエンス エディターで個別に設計できるいくつかのレンダリングで構成されています。パーシャル デザインと同じように、さまざまな種類のレンダリングをグループ化し、このグループをさまざまな場所で再利用できます。スニペットとパーシャル デザインの違いは、スニペットは拡張性があり、スタイルを変更することができ、ページ内で何度でも使用できることです。

Do you have some feedback for us?

If you have suggestions for improving this article,