1. データモデリング

ページにJSONレンダリングとバリアントを追加してください

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

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

JSONデータモデルには、ページデザインを簡単にするための3つのあらかじめ定義されたレンダリングが付属しています。ツールボックスからページにレンダリングをドラッグすることでページを作成できます。すべてのJSONレンダリングはJSONバリアントが有効です。

デフォルトでは、利用可能なJSONレンダリングは3つあります:

  • JSON Content – JSONレンダリングやJSONバリアントを使ってページのフィールドを公開するために使われます。デフォルトでは、このレンダリングはページ上に2つのフィールドを読み込みます。これらのフィールドを編集できます。
  • JSONリスト – 事前定義または合成されたクエリによるページリストを表示します。
  • JSON Results – 検索クエリの結果を表示します。

JSONに切り替える

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

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

  • エクスペリエンスエディターのリボンのExperienceタブで 「Default 」をクリックし、その後JSONをクリックします。

    218E3E462E324D4FBB1F8FFEB8AD519A.png

JSONレンダリングは右パネルのツールボックスで利用可能です。

2ACE3821660C49B88FDE1E895DA89D83.png

!注タブレットやタッチ対応ノートパソコンなどのタッチデバイスで作業している場合、デフォルトでツールボックスはタッチモードで開きます。タッチ対応ノートパソコンで作業する場合は、ツールバー右上の矢印をクリックしてデスクトップモードに切り替え DCCD0E70EC5E41EF80C7CC3ABCE9C684.png

JSONレンダリングを追加してください

エクスペリエンスエディターでは、ツールボックスからレンダリングをドラッグすることでページに追加できます。例えば、サイトのページをリストアップしたい場合はJSONリストレンダリングを使います。

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

  1. 右パネルのツールボックスで、該当するレンダリングを探してください。レンダリングをクリックしてドラッグを始めると、レンダリングをドロップできるプレースホルダーが青色で点灯します。ページにレンダリングをドロップするためにクリックしてください。例えば、JSONリストのレンダリングをページにドラッグします。

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

    718AE6B36DCD47D5A45428AFC9094250.png
  2. リストを見るには、ページを保存してください:

    BCE8A982E6E440179481177AA5A1181F.png

JSONバリアントを追加

より複雑なリストを作るには、JSONバリアントを追加できます。例えば、タイトルと内容のほかに画像用のフィールドと日付を追加したい場合。

JSONのバリアントを追加すると:

  1. sitecore/Content/Tenant/Site/Presentation/Rendering Variants/JSON Listに移動し、右クリックJSON List挿入、****JSON Variant definitionをクリックします。

  2. 名前を入力してOKをクリックします。例えば、タイトルとコンテンツのJSONフィールドを追加するには、JSON画像JSON日付 フィールドを追加してください。

    D8D1C9AC056844F69F0CF3E39E0C194C.png
  3. バリアント詳細セクションで日付フォーマットを選択し、商品を保存します。

    208E92783BD34F26A49EB50AEFD4EBBB.png
  4. 画像フィールドのバリアント詳細セクションで、画像をGuidPathRAWまたはRenderedのいずれかで表示するかを決めてください。

    4675C2B919CA47BE88E7BBE2A6C34128.png

Choose a JSON variant

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

  1. エクスペリエンスエディターで、ページのJSONレンダリング(例えばJSONリストのレンダリング)に移動し、Variantフィールドのドロップダウンリストからバリアントをクリックしてください。

    07BCECBCC7344493BF2336FC4CA20259.png
  2. 新しいリストを見るには、ページを保存してください。

    236DBC40E5DA42A79123BADA5CC7FB3F.png
  3. JSONバリアントを見るには、リボンの 「経験」 タブで「 その他」をクリックし、「 プレビュー」をクリックしてください。

    D2DDEC0237334A83AEA624BA64E61905.png
この記事を改善するための提案がある場合は、 お知らせください!