--- title: "ページにJSONレンダリングとバリアントを追加してください" slug: "add-a-json-rendering-and-variant-to-your-page" abstract: "ツールボックスからJSONレンダリングをページにドラッグしてページを構築します。" --- # ページにJSONレンダリングとバリアントを追加してください JSONデータモデルには、ページデザインを簡単にするための3つのあらかじめ定義されたレンダリングが付属しています。ツールボックスからページにレンダリングをドラッグすることでページを作成できます。すべてのJSONレンダリングはJSONバリアントが有効です。 デフォルトでは、利用可能なJSONレンダリングは3つあります: - **JSON Content** – JSONレンダリングやJSONバリアントを使ってページのフィールドを公開するために使われます。デフォルトでは、このレンダリングはページ上に2つのフィールドを読み込みます。これらのフィールドを編集できます。 - **JSONリスト** – 事前定義または合成されたクエリによるページリストを表示します。 - **JSON Results** – 検索クエリの結果を表示します。 ## JSONに切り替える JSONレンダリングの作業を始める前に、まずJSONデバイスに切り替える必要があります。 JSONデバイスに切り替えるには: - エクスペリエンスエディターのリボンの**Experience**タブで **「Default** 」をクリックし、その後**JSON**をクリックします。 ![218E3E462E324D4FBB1F8FFEB8AD519A.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/218E3E462E324D4FBB1F8FFEB8AD519A.png) JSONレンダリングは右パネルのツールボックスで利用可能です。 ![2ACE3821660C49B88FDE1E895DA89D83.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/2ACE3821660C49B88FDE1E895DA89D83.png) > !注タブレットやタッチ対応ノートパソコンなどのタッチデバイスで作業している場合、デフォルトでツールボックスはタッチモードで開きます。タッチ対応ノートパソコンで作業する場合は、ツールバー右上の矢印をクリックしてデスクトップモードに切り替え ![DCCD0E70EC5E41EF80C7CC3ABCE9C684.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/DCCD0E70EC5E41EF80C7CC3ABCE9C684.png)。 ## JSONレンダリングを追加してください エクスペリエンスエディターでは、ツールボックスからレンダリングをドラッグすることでページに追加できます。例えば、サイトのページをリストアップしたい場合はJSONリストレンダリングを使います。 ページにJSONレンダリングを追加するには: 1. 右パネルのツールボックスで、該当するレンダリングを探してください。レンダリングをクリックしてドラッグを始めると、レンダリングをドロップできるプレースホルダーが青色で点灯します。ページにレンダリングをドロップするためにクリックしてください。例えば、JSONリストのレンダリングをページにドラッグします。 > !注デフォルトでは、JSONリストのレンダリングは現在のアイテムの子を表示します。例えば、ホームページからJSONリストのレンダリングをドラッグすると、サイトのすべてのページが表示されます。これは**SourceType**フィールドがデフォルトで**Children**に設定されているためです。 ![718AE6B36DCD47D5A45428AFC9094250.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/718AE6B36DCD47D5A45428AFC9094250.png) 2. リストを見るには、ページを保存してください: ![BCE8A982E6E440179481177AA5A1181F.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/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](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/D8D1C9AC056844F69F0CF3E39E0C194C.png) 3. **バリアント詳細**セクションで日付フォーマットを選択し、商品を保存します。 ![208E92783BD34F26A49EB50AEFD4EBBB.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/208E92783BD34F26A49EB50AEFD4EBBB.png) 4. **画像**フィールドのバ**リアント詳細**セクションで、**画像をGuid**、**Path**、**RAW**、**またはRendered**のいずれかで表示するかを決めてください。 ![4675C2B919CA47BE88E7BBE2A6C34128.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/4675C2B919CA47BE88E7BBE2A6C34128.png) ## Choose a JSON variant JSONバリアントを選択するには: 1. エクスペリエンスエディターで、ページのJSONレンダリング(例えばJSONリストのレンダリング)に移動し、**Variant**フィールドのドロップダウンリストからバリアントをクリックしてください。 ![07BCECBCC7344493BF2336FC4CA20259.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/07BCECBCC7344493BF2336FC4CA20259.png) 2. 新しいリストを見るには、ページを保存してください。 ![236DBC40E5DA42A79123BADA5CC7FB3F.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/236DBC40E5DA42A79123BADA5CC7FB3F.png) 3. JSONバリアントを見るには、リボンの **「経験」** タブで「 **その他**」をクリックし、「 **プレビュー**」をクリックしてください。 ![D2DDEC0237334A83AEA624BA64E61905.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/D2DDEC0237334A83AEA624BA64E61905.png)