Experience Cloud Developer Guide (Experience Cloud 開発者ガイド)
jCMS Connect (JSON) 式
サイトページにコンポーネントを配置するときに、JSON 式を使用してそのプロパティを指定します。たとえば、ブログ記事内で対応付けている場合、CMS からブログの ID、タイトル、著者、コンテンツを取得する式を定義できます。
この JSON 構造をコンテンツソースとして使用した例を見てみましょう。この JSON レスポンスボディの例は、Drupal CMS からのものです。
1{
2 "data": {
3 "type": "node--page",
4 "id": "c53cf56c-f70d-456e-838b-47788742b074",
5 "attributes": {
6 "nid": 5,
7 "uuid": "c53cf56c-f70d-456e-838b-47788742 b074",
8 "vid ": 5,
9 "langcode": "en",
10 "title": "DIY Dryer Vent Cleaning",
11 "created": 1502133909,
12 "changed": 1502133933,
13 "body": {
14 "value": "This is the body of the blog article. Step 1...",
15 "summary ": "How to clean your dryer vent in 3 easy steps."
16 }
17 },
18 "relationships": {
19 "type ": {
20 "data ": {
21 "type": "node_type--node_type",
22 "id": "5b80bc9e-dc78-4612-add8-e46b2e2ff616"
23 }
24 }
25 }
26 }
27}CMS 接続を設定するには、コンテンツ項目 (ブログなど) またはコンテンツリスト (ブログシリーズ) を作成します。コンポーネントをページに追加するときに、JSON 式を入力してそのプロパティを定義します。
たとえば、タイトルを取得するために、式 @data/attributes/title でサンプル JSON リソースから「DIY Dryer Vent Cleaning (DIY: ドライヤーの排気口の掃除)」を取得します。@ 記号は、テキストがタイトル要素を参照する JSON 式を表すことを示します。
基本的な JSON 式
CMS JSON 接続の場合、式の構文は RFC 6901 の JSON ポインタ仕様に従います。サンプルコンテンツソースの場合、親ノード @data は最上位のソースコンテンツへのポインタです。ネストされた要素にアクセスするには、単にパスを指定します。たとえば、式 @data/attributes/body/value はブログコンテンツを参照します。
配列内の値にアクセスする場合、開始インデックス値は 0 です。単純な配列を含む JSON ソースの例を次に示します。
1{
2 "array": [
3 {
4 "key": 1,
5 "dictionary": {
6 "a": "Air gap",
7 "b": "Belt",
8 "c": "Clog",
9 "d": "Drain"
10 },
11 "var": 2
12 },
13 {
14 "key": 2,
15 "dictionary": {
16 "a": "Appliance",
17 "b": "Breaker",
18 "c": "Coffeemaker",
19 "d": "Dryer"
20 },
21 "var": 3
22 }
23 ]
24}このソースを使用すると、左側の式で右側の出力が生成されます。
| 式の例 | 出力 |
|---|---|
| @/array/0/key | 1 |
| @/array/1/key | 2 |
| @/array/1/dictionary/a | "Appliance" |
JSON 式での関数の使用
where、lookup、concat 関数を使用して、より複雑な式を作成できます。where 関数を使用して、配列要素を絞り込みます。この関数は、演算子 'eq' (次の文字列と一致する)、'ne' (次の文字列と一致しない)、'lt' (＜)、'gt' (＞)、'le' (以下)、または 'ge' (以上) を使用して 2 つの値を比較します。
| 式の例 | 出力 |
|---|---|
| @/array[where(key,'eq',2)]/0/dictionary/b | "Breaker" |
| @/array[where(key,'eq',2)][where(var,'eq',3)]/0/dictionary/d | "Dryer" |
最初の例では、where 式は配列を絞り込んで、キーの値が「2」と一致する場所を見つけます。2 番目の例では、2 つの where 関数を使用しています。目的の配列要素を見つけるには、両方の条件が満たされている���要があります。
- 開始ノード
- 開始ノード内を調べるためのキー
- キーと照合する文字列または数値
| 式の例 | 出力 |
|---|---|
| @lookup(/array,key,2)/0/var | 3 |
| @lookup(/array,key,1)/0/dictionary/a | "Air gap" |
| @lookup(/array,key,2)/0/dictionary/a | "Appliance" |
concat 関数は、指定した文字列とパラメータを連結します。式 @concat('DIY Focus', ': ', 'about your ' , /array/1/dictionary/d) では "DIY Focus: about your Dryer" が出力されます。CMS で、姓要素と名要素を使用して配列内に著者名を保存している場合、著者の氏名を出力するには、@concat(author/first_name,' ',author/last_name) などの式を使用します。
補足情報
JSON 式を作成するときは、次の点に留意してください。
- 文字列は一重引用符で囲みます。たとえば、式に文字列 hello を含めるには @'hello' と指定します。文字列に @ 文字を含めるには、'myname@gmail.com' のように一重引用符で囲みます。
- Boolean 値を示すには、true または false を使用します。値 true は Boolean ですが、'true' は文字列です。
- 同階層にはピリオド (.) を使用し、親には 2 つのピリオド (..) を使用して、現在のコンテキストに相対的な同階層または親要素を指定します。たとえば、タイトルで検索するには、@data/attributes/title/../id を指定して、タイトルに対応する ID を取得します。
- バックスラッシュ文字 (\) をエスケープ文字として使用します。たとえば、@/author/name は author 要素の下位の name を検索しますが、@/author\/name は author/name をキーとして検索します。
エラーのシナリオ
間違いはときどき起こります。JSON 式が正しくない場合に考えられるエラーメッセージのいくつかを次に示します。
- エクスペリエンスビルダーのプロパティエディタに無効な JSON パスを入力する。たとえば、著者の JSON 式を @author/name ではなく @author/invalid として入力すると、次のようなエラーメッセージが表示されます。
- 期待値が 1 つのみの場合に複数の値を返す式を入力する。たとえば、著者の JSON 式を @author/name ではなく @author として入力すると、次のエラーメッセージが表示されます。
- CMS 接続のコンテンツリストまたは接続の詳細を作成するときに、無効な URL パスを指定する。問題に応じて、HTTP エラー (HTTP 0 エラーや HTTP 404 エラーなど) または次のようなエラーが表示されます。CMS 接続の設定を確認します。
