ページに JSON のレンダリングとバリアントを追加する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSON データ モデルには、ページ デザインを容易にする 3 つの事前定義されたレンダリングが付属しています。レンダリングをツールボックスからページにドラッグすることで、ページを構築できます。すべての JSON レンダリングで、JSON バリアントが有効になっています。
デフォルトでは、次の 3 つの JSON レンダリングを使用できます。
-
[JSON コンテンツ] – JSON レンダリングと JSON バリアントを使用してページのフィールドを公開するために使用されます。デフォルトでは、このレンダリングはページに 2 つのフィールドを読み込みます。これらのフィールドは編集できます。
-
[JSON リスト] – 事前定義または構成されたクエリごとにページのリストを表示します。
-
[JSON の結果] – 検索クエリの結果を表示します。
JSON に切り替える
JSON レンダリングの操作を開始する前に、JSON デバイスに切り替える必要があります。
JSON デバイスに切り替えるには:
-
エクスペリエンス エディターのリボンにある [エクスペリエンス] タブで、[デフォルト]、[JSON] の順にクリックします。
JSON レンダリングが、右側のパネルの [ツールボックス] で使用できるようになりました。
タブレットやタッチ対応ラップトップなどのタッチ デバイスで作業している場合、既定ではツール ボックスはタッチ モードで開きます。タッチ対応のラップトップで作業していて、デスクトップ モードで作業したい場合は、ツールバーの右上にある矢印 をクリックして切り替えることができます。
JSON レンダリングの追加
エクスペリエンス エディターでは、[ツールボックス] からページをドラッグして、レンダリングをページに追加できます。たとえば、サイトのページを一覧表示する場合は、JSON リスト レンダリングを使用します。
JSON レンダリングをページに追加するには:
-
右側のパネルの [ツールボックス] で、該当するレンダリングを見つけます。クリックしてレンダリングのドラッグを開始すると、レンダリングをドロップできる場所のプレースホルダーが青色に点灯します。クリックしてレンダリングをページにドロップします。たとえば、JSON リスト レンダリングをページにドラッグします。
注記デフォルトでは、JSON リストのレンダリングには現在のアイテムの子が表示されます。たとえば、ホームページから開始して JSON リスト レンダリングをページにドラッグすると、サイトのすべてのページがリストされます。これは、[ソース タイプ] フィールドがデフォルトで [子] に設定されているためです。
-
リストを表示するには、ページを保存します。
JSON バリアントを追加する
より複雑なリストを作成するには、JSON バリアントを追加します。たとえば、タイトルとコンテンツに加えて、画像と日付のフィールドを追加したい場合などです。
JSON バリアントを追加するには:
-
sitecore/コンテンツ/テナント/サイト/プレゼンテーション/Rendering Variants/JSON List に移動して [JSON リスト] を右クリックし、[挿入]、[JSON バリアント定義] の順にクリックします。
-
名前を入力して [OK] をクリックします。たとえば、タイトルとコンテンツの JSON フィールドを追加するには、[JSON 画像]、および [JSON 日付] フィールドを追加します。
-
[バリアント詳細] セクションで、日付形式を選択してアイテムを保存します。
-
[画像] フィールドの [バリアント詳細] セクションで、画像を [Guid]、[パス] 、[Raw]、[レンダリング] のいずれのモードで表示するかを決定します。
JSON バリアントを選択する
JSON バリアントを選択するには:
-
エクスペリエンス エディターで、ページ上の JSON レンダリング (たとえば、JSON リストのレンダリング) に移動し、[バリアント] フィールドで、ドロップダウン リストからバリアントをクリックします。
-
新しいリストを表示するには、ページを保存します。
-
JSON バリアントを表示するには、リボンの [エクスペリエンス] タブで、[その他]、[プレビュー] の順にクリックします。