レイアウトクエリとレスポンス

クエリの作成

以下のGraphQLクエリでは、ページのパスで完全なレイアウトデータ(ページ表現)を取得します。ページの言語バージョンと、そのページを掲載するサイトを指定する必要があることに注意してください。これはコンテンツをレンダリングする際に最もよくあるクエリの一つです。

query { layout(site:"my-site" language:"en" routePath:"/") { item { rendered # Returns layout data } } }

クエリを出す

以下の擬似コードは、アプリから直接クエリを作成することを説明しています。このクエリを自社のフレームワークに適応させるか、アプリのウォークスルー でRender SitecoreAIの内容 を完成させて完全なコード例を入手できます。

function fetchLayoutData(site, language, routePath): endpoint = ENV.SITECORE_EDGE_PLATFORM_URL contextId = ENV.SITECORE_EDGE_CONTEXT_ID

query = """ query { layout(site: "{site}" language: "{language}" routePath: "{routePath}") { item { rendered } } } """

headers = { "Content-Type": "application/json", "x-sitecore-contextid": contextId }

response = HTTP_POST(endpoint, { query }, headers) result = PARSE_JSON(response.body)

if result.errors: throw result.errors

rendered = result.data.layout.item.rendered return (rendered is string) ? PARSE_JSON(rendered) : rendered

脚本について以下の点に注目してください:

• エンドポイントとコンテキストIDは環境変数として格納されます。
• コンテキストIDは x-sitecore-contextid リクエストヘッダーに含まれています。
• クエリでは、ページが属するサイト、ページの言語バージョン、ページへの経路を指定する必要があります。これにより、どのページのレイアウトデータを取得するかをコントロールできます。例えば、あなたの"example-site"の"/products"ページの"ja-JP"言語版です。
• クエリでは、 layout.item.rendered レイアウトデータを返します。
• レスポンスはJSONで、アプリが解析する必要があります。

応答の理解

前節で説明したリクエストを行うと、Sitecoreは以下のようなJSONオブジェクトを返します。

{ "data": { "layout": { "item": { "rendered": { "sitecore": { "context": { "pageEditing": false, "site": { "name": "<YOUR_SITE_NAME>" }, "pageState": "normal", "editMode": "chromes", "language": "<YOUR_SITE_LANGUAGE_CODE>", "itemPath": "/" }, "route": { "name": "Home", "displayName": "Home", "fields": { /* Page-level content fields (title, summary, thumbnail, keywords, navigation information, etc.) */ }, "placeholders": { "headless-header": /* Array of components for page header */ , "headless-main": /* Array of components for page main section */ , "headless-footer": /* Array of components for page footer */ } } } } } } } }

sitecoreルートレベルオブジェクトにはメタデータ、ルート情報、ページレベルのコンテンツフィールド、そしてplaceholdersオブジェクトが含まれています。

• sitecore.context - 現在のページリクエストに関するメタデータ(現在のアイテムの経路、サイト名、ページビルダーで現在編集中かどうかなど)を提供します。
• sitecore.route - ルートのSitecoreアイテム上で定義されたルートセグメント名、表示名、ページレベルのコンテンツフィールドを提供します。
• sitecore.placeholders - はページのレイアウトツリーを表します。ほとんどのサイトは、 headless-header、 headless-main、 headless-footerのトップレベルのプレースホルダーを使用しています。各最上層プレースホルダーには、レンダリングすべきコンポーネントの順序付けリストが含まれています。こちらは headless-mainの例のコンポーネントで、ページの主なセクションを表しています:

{ "uid": "<UNIQUE_COMPONENT_ID>", "componentName": "<COMPONENT_NAME>", "dataSource": "<DATA_SOURCE_PATH>", "params": { /* Display parameters (styles, modes) */ }, "fields": { /* Content data for this component */ }, "placeholders": { /* Nested children components (recursive structure) */ "nested-placeholder-name": /* More components */ } }

各成分の性質は以下の通りです:

• uid - ページ上のこの構成インスタンスの一意識別子。
• componentName - 成分名( "Promo" や "RichText"など)。これを使ってコンポーネントマッピングで正しい実装を調べることができます。
• dataSource - コンポーネントのコンテンツを提供するSitecoreのアイテムパスまたはID。
• params - コンテンツ作成者がページビルダーで設定したパラメータ(CSSクラス名、スタイルバリアント、レイアウトオプションなど)をレンダリングすること。すべてのパラメータ値は文字列です。これらを実装に活用して、著者のビジュアル構成を適用してください。
• fields - コンポーネントを埋めるために使われるコンテンツフィールド。これらのフィールドがどこから来るかは、レンダリングアイテムに設定されているRendering Contents Resolverによって異なります。デフォルトではフィールドはコンポーネントのデータソース項目から取得されますが、他のリゾルバはコンテキスト項目、データソースの子、ナビゲーション階層などからコンテンツをソースできます。フィールドタイプごとにJSON形状が異なります。ほとんどのフィールドは単純な { "value": "..." } 構造を用い、 Image や Link のような複雑なタイプはオブジェクトを valueにします。フィールド タイプも参照してください。
• placeholders - コンポーネントは他のコンポーネントも含めることができ、これによりネストされたレイアウト構造が可能になり、レンダリングが再帰的になります。コンポーネントに他のコンポーネントが含まれている場合、それらはそのコンポーネント自身のネストされた placeholders オブジェクトにリストされます。 ColumnSplitter や Containerなどの構造的コンポーネントは、入れ子状のプレースホルダーを使うことがよくあります。ネストされたプレースホルダーは、トップレベルのプレースホルダーと同じように、 Placeholder コンポーネントに渡してレンダリングします。

Sitecoreのコンテンツをサイト上でレンダリングする際、プログラム的にSitecoreにレイアウトデータをクエリし、応答の再帰JSONを解析し、ページのコンポーネントをレンダリングします。