---
title: "SXAデータモデリングの導入"
slug: "introducing-sxa-data-modeling"
abstract: "JSONレイアウト、JSONレンダリング、JSONバリアントの説明。"
---
# SXAデータモデリングの導入

SXAはデータをJSON(JavaScriptオブジェクト表記)でモデリングすることを可能にします。例えば、モバイルアプリを作成しSXAのコンテンツを入力したい場合、ページのJSONコンテンツを編集し、出力内容をHTMLではなくJSONで設定できます。

![SXA and JSON overview](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/A61E20FFE9E5471394466C6790ADD77E.png)

JSON機能はSXAコンテンツにアクセスするJSON APIを提供します。サイトのコンテンツはJSON形式のウェブサービスAPIを通じてアクセス可能です。

## SXAデータモデリングを有効にする

デフォルトでは、JSON機能はテナントやサイトに追加されます。「 **テナント作成** 」と **「新しいエクスペリエンスアクセラレーター作成」のサイト** ウィザードの両方でJSON機能が選択されています。

![Select JSON in the SXA wizards.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/8DBA0EDDF1904BA59BC864A5CF2AD2A9.png)

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

## JSONレイアウト

SXA JSONデバイスは別のレイアウトを使用し、JSONレイアウトフォルダ(sitecore/Layout/Feature/Experience Accelerator/JSON Layout)に保存されています。エクスペリエンスエディターでJSONデバイスに切り替えると、JSONレイアウトを使用していることがわかります。

![JSON layout](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/5C12562257F14A4F992E98056D223B09.png)

## JSONレンダリング

[JSONレイアウトを作成するために使える特別なレンダリング](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/add-a-json-rendering-and-variant-to-your-page.html "Add a JSON rendering and variant to your page")があります。これらのレンダリングはsitecore/Tenant/Site/Presentation/Available Renderings/JSONに保存されています。箱から出して、利用可能なJSONレンダリングは3つあります:

-   **JSON Content** – JSONレンダリングやJSONバリアントを使ってページのフィールドを表示します。
-   **JSONリスト** – 事前定義または合成されたクエリによるページリストを表示します。
-   **JSON Results** – 検索クエリの結果を表示します。

## JSONバリエーション

JSONレンダリングの追加フィールドをサポートするには、JSONバリアントを作成できます。JSONバリアントはJSONレンダリングのグループ項目(例:sitecore/Tenant/Site/Presentation/Rendering Variants/JSON content)に保存されます。

表示するフィールドを定義するには、レンダリングバリアントに子アイテムを追加できます。これを行うには、バリアントを右クリックし、「 **挿入**」をクリックし、該当するアイテムをクリックします。

以下の子項目をJSONバリアントに追加できます:

-   **JSON Checkbox** – Checkbox型のフィールドの値を異なるモードでレンダリングする特別なJSONバリアントフィールドです。
-   **JSON Date** – 日付と時刻をカスタム形式で表示します。
-   **JSONフィールド** – HTMLでフィールドをレンダリングします。
-   **JSONファイル** – ファイルフィールドのJSONバージョンで、ファイルへのリンクを出力します。
-   **JSON Image** – Image型のフィールドの値を異なるモードでレンダリングする、専門的なJSONバリアントフィールドです。
-   **JSON マルチリスト参照** – マルチリスト派生フィールドで定義された参照を列挙する特別なJSONフィールド値。子項目を使って何をレンダリングするかを決定します。例えば、すべてのページとそのタイトルを一覧化します。
-   **JSON Placeholder** – 例えば、JSON コンテンツレンダリング内でJSONリストを読み込むためのプレースホルダーを提供します。
-   **JSON Reference** – リンクされたアイテムからコンテンツをレンダリングできます。 **PassThroughField** フィールドで参照として使いたいフィールドを定義します。このバリアントフィールドは、以下のフィールドに使えます: **LinkField** (GeneralLink, DropLink)、 **FileField** (File)、 **ImageField** (画像)、 **ReferenceField** (Droptree)。参照項目には子項目として他のJSONレンダリング項目を含める必要があります。これは、レンダリング済みアイテムからリンクされたアイテムを持ち、その項目からフィールドを表示したい場合に便利です。Variant詳細セクションに名前を追加することで、追加のJSONオブジェクトを作成できます。
-   **JSON セクション** – フィールドのグループ化に使用されます。このレンダラーには **、Name** (子レンダラーのラッピング要素を作成するための)などのフィールドが含まれています。セクションアイテムをネストして、より複雑なバリアント構造を作ることもできます。
-   **JSON Text** – テキストを表示し、例えば説明文などのカスタム文字列をレンダリングするために使われます。以下のフィールドを使用できます: **Name** (テキストのプロパティ名を定義)、 **Text** (レンダリングするテキストを含む)。
-   **JSON トークン** – SXA 以下のトークンをサポートしています:$id(アイテムのIDをレンダリング)、$size(付随するアセットのサイズをフォーマット)、$name(アイテム名をレンダリング)、$FileTypeIcon(CSSクラスがファイル拡張子と等しいスパンをレンダリング)。カスタム resolveVariantTokens パイプラインはバリアントトークンのセットを拡張するために使われます。
-   **JSONリッチテキスト** – JSONコンポーネント内のリッチテキストフィールドを表示します。フィールドは提供されたモードのいずれかでレンダリングできます(例えば、出力前にHTMLタグを除去するためにクリーンアップすることも可能です)。

追加するアイテムによって、異なるフィールドを設定できます:

フィールド

概要

モード

レンダリングバリアントの子アイテムによって、モードフィールドは異なるビューに設定できます:Raw – 生のSitecore値、フォーマットされていないデータをレンダリングします。Text – テキストをレンダリングします。Rendered – フィールドレンダラーを使って値をレンダリングします。Plain – アイテムをプレーンテキストとしてレンダリングします。Path – アイテムのパスをレンダリングします。Guid – Sitecoreでアイテムのグローバルに一意な識別子をレンダリングします。

真の価値

真としてレンダリングされる値を決定します。

偽の価値

偽としてレンダリングされる値を決定します。

名称

JSONプロパティ名を上書きします。JSON参照フィールドに名前を追加することで、追加のオブジェクトを作成できます。

フィールド名

フィールドの現在の項目名。

パススルーフィールド

別のアイテムへのリンクを格納するフィールド名を定義します。例えば、リンクのような単純な参照や、ツリーリストのような多重参照フィールドなどです。

日付形式

ドロップダウンリストから日付形式を選択してください。

本文

レンダリングするテキスト。

トークン

特定のフィールド値をフォーマットするために特別なトークンを使用します。以下のトークンがサポートされています:$Size – サイズ単位に応じてファイルのサイズを表示します。$FileTypeIcon – ファイル拡張子に応じてアイコンを表示します。