ページに JSON のレンダリングとバリアントを追加する

Version: 10.1
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

JSON データ モデルには、ページ デザインを容易にする 3 つの事前定義されたレンダリングが付属しています。レンダリングをツールボックスからページにドラッグすることで、ページを構築できます。すべての JSON レンダリングで、JSON バリアントが有効になっています。

デフォルトでは、次の 3 つの JSON レンダリングを使用できます。

  • [JSON コンテンツ] – JSON レンダリングと JSON バリアントを使用してページのフィールドを公開するために使用されます。デフォルトでは、このレンダリングはページに 2 つのフィールドを読み込みます。これらのフィールドは編集できます。

  • [JSON リスト] – 事前定義または構成されたクエリごとにページのリストを表示します。

  • [JSON の結果] – 検索クエリの結果を表示します。

JSON に切り替える

JSON レンダリングの操作を開始する前に、JSON デバイスに切り替える必要があります。

JSON デバイスに切り替えるには:

  • エクスペリエンス エディターのリボンにある [エクスペリエンス] タブで、[デフォルト]、[JSON] の順にクリックします。

JSON レンダリングが、右側のパネルの [ツールボックス] で使用できるようになりました。

注記

タブレットやタッチ対応ラップトップなどのタッチ デバイスで作業している場合、既定ではツール ボックスはタッチ モードで開きます。タッチ対応のラップトップで作業していて、デスクトップ モードで作業したい場合は、ツールバーの右上にある矢印 をクリックして切り替えることができます。

JSON レンダリングの追加

エクスペリエンス エディターでは、[ツールボックス] からページをドラッグして、レンダリングをページに追加できます。たとえば、サイトのページを一覧表示する場合は、JSON リスト レンダリングを使用します。

JSON レンダリングをページに追加するには:

  1. 右側のパネルの [ツールボックス] で、該当するレンダリングを見つけます。クリックしてレンダリングのドラッグを開始すると、レンダリングをドロップできる場所のプレースホルダーが青色に点灯します。クリックしてレンダリングをページにドロップします。たとえば、JSON リスト レンダリングをページにドラッグします。

    注記

    デフォルトでは、JSON リストのレンダリングには現在のアイテムの子が表示されます。たとえば、ホームページから開始して JSON リスト レンダリングをページにドラッグすると、サイトのすべてのページがリストされます。これは、[ソース タイプ] フィールドがデフォルトで [] に設定されているためです。

  2. リストを表示するには、ページを保存します。

JSON バリアントを追加する

より複雑なリストを作成するには、JSON バリアントを追加します。たとえば、タイトルとコンテンツに加えて、画像と日付のフィールドを追加したい場合などです。

JSON バリアントを追加するには:

  1. sitecore/コンテンツ/テナント/サイト/プレゼンテーション/Rendering Variants/JSON List に移動して [JSON リスト] を右クリックし、[挿入]、[JSON バリアント定義] の順にクリックします。

  2. 名前を入力して [OK] をクリックします。たとえば、タイトルとコンテンツの JSON フィールドを追加するには、[JSON 画像]、および [JSON 日付] フィールドを追加します。

  3. [バリアント詳細] セクションで、日付形式を選択してアイテムを保存します。

  4. [画像] フィールドの [バリアント詳細] セクションで、画像を [Guid]、[パス] 、[Raw]、[レンダリング] のいずれのモードで表示するかを決定します。

JSON バリアントを選択する

JSON バリアントを選択するには:

  1. エクスペリエンス エディターで、ページ上の JSON レンダリング (たとえば、JSON リストのレンダリング) に移動し、[バリアント] フィールドで、ドロップダウン リストからバリアントをクリックします。

  2. 新しいリストを表示するには、ページを保存します。

  3. JSON バリアントを表示するには、リボンの [エクスペリエンス] タブで、[その他]、[プレビュー] の順にクリックします。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、