コンポジットレンダリング
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
コンポジットレンダリングは 、複数のレンダリングで構成されます。各インスタンスは独自のレイアウトを持つことができ、エクスペリエンス エディターで個別に設計できます。複合レンダリングがページに表示されると、データ ソースから各アイテムがクエリされ、データとレイアウトがプルされます。これにより、非常に複雑なレイアウトの構築が容易になりますが、より高度なセットアップも必要になります。
画像、テキスト、ビデオなどの単純なレンダリングは、レイアウトで構成され、単一のデータ ソース アイテムを使用してコンテンツを提供します。コンテナやスプリッタなどの複雑なレンダリングには、複数の単純なレンダリングまたは複雑なレンダリングが含まれます。これらのレンダリングには1つのレイアウト定義があり、追加されたすべてのレンダリングはレンダリング ページ プロパティで定義されます。アコーディオン、カルーセル、トグルなどのコンポジットレンダリングでは、独自のレイアウトを持つすべてのデータソースが使用されます。レンダリング フィールドには、データ ソース アイテムへの参照のみが格納されます。したがって、関連するレイアウトはそのままではレンダリングされません。
デフォルトでは、SXAには次のコンポジット レンダリングが含まれています。
-
Carousel: カルーセル レンダリングでは、回転するスライドのセット(通常は画像)を、説明とリンクとともに定義できます。カルーセルはホームページの上部でよく使用されますが、どのページにも配置できます。たとえば、カルーセルを使用して、多数の注目ページを表示したり、ステップバイステップのプロセスを説明したり、商品画像を表示したりできます。カルーセル内のアイテムは、定義された順序で一度に1つずつ表示されます。デフォルトでは、カルーセルレンダリングにはスライド画像とスライドテキストアイテムが含まれます。
-
Accordion: アコーディオン レンダリングでは、折りたたみ可能なセクションのリストを垂直または水平にスタックできます。アコーディオンを使用して、FAQやサムネイルのセットを表示したり、長いドキュメントをセクションに分割したりできます。各セクションを展開すると、そのアイテムに関連付けられているコンテンツが表示されます。アコーディオンでページを折りたたむとスクロールが最小限に抑えられるため、コンテンツが豊富なページや、コンテンツが非常に小さなスペースに制限されているページ(モバイルデバイスなど)で非常に便利です。これにより、人々は何を読むか、何を無視するかを決定でき、Webページの表示をそれほど圧倒しないようにすることができます。
-
Flip: フリップ では、前面 (表示) と背面 (非表示) の2つのアイテムを操作できます。これら2つのアイテムは、アイテムをクリックするか、アイテムにカーソルを合わせると、交互に表示されます。たとえば、スタッフ メンバーの写真やプロフィール情報、クーポンや引き換えコードにフリップ レンダリングを使用できます。
-
Tabs: タブ レンダリングでは、一度に1つのタブのコンテンツのみが表示されるタブ付きレイアウト内にコンテンツを表示できます。タブは、関連情報を構造化された方法で表示したい場合に非常に効果的です。たとえば、タブ レンダリングを使用して、ブログ投稿を最近の投稿、人気のある投稿、最もコメントの多い投稿などのカテゴリに整理できます。
-
Snippet: スニペット レンダリングを使用すると、再利用可能なレンダリング グループを作成できます。これは、エクスペリエンス エディタで個別に設計できる複数のレンダリングで構成される複合レンダリングです。パーシャル デザインと同様に、さまざまな種類のレンダリングをグループ化し、このグループをさまざまな場所で再利用できます。スニペットとパーシャル デザインの違いは、スニペットは拡張可能であり、スタイルを変更でき、ページ上で必要な頻度で使用できる点です。