コンテンツモデリング
Adobe Experience Manager（AEM）のコンテンツフラグメントと GraphQL エンドポイントに関するチュートリアルの章へようこそ。ここでは、コンテンツフラグメントの活用、フラグメントモデルの作成および AEM での GraphQL エンドポイントの使用について説明します。
コンテンツフラグメントは、様々なチャネルにわたるコンテンツの管理に対する構造化されたアプローチを提供し、柔軟性と再利用性を向上させます。AEM でコンテンツフラグメントを有効にすると、モジュール型コンテンツを作成できるようになり、一貫性と適応性が高まります。
まず、シームレスな統合に必要な設定に触れながら、AEM でコンテンツフラグメントを有効にする方法を順を追って説明します。
次に、構造と属性を定義するフラグメントモデルの作成について説明します。コンテンツ要件に合うモデルを設計し、それらを効果的に管理する方法を説明します。
次に、モデルからコンテンツフラグメントを作成する方法の例を示し、オーサリングと公開に関する詳しい手順を説明します。
さらに、AEM GraphQL エンドポイントの定義についても説明します。GraphQL は AEM からデータを効率的に取得します。ここでは、目的のデータを公開するためのエンドポイントをセットアップし設定します。永続クエリは、パフォーマンスとキャッシュを最適化します。
チュートリアル全体を通して、説明、コード例および実用的なヒントを提供します。チュートリアルの終了時には、コンテンツフラグメントの有効化、フラグメントモデルの作成、フラグメントの生成および AEM GraphQL エンドポイントと永続クエリの定義を行うスキルが身につきます。それでは、始めましょう。
コンテキスト対応の設定
-
ツール／設定ブラウザー に移動して、ヘッドレスエクスペリエンスの設定を作成します。
「タイトル」と「名前」を指定し、「GraphQL 永続クエリ」と「コンテンツフラグメントモデル」にチェックを入れます。
コンテンツフラグメントモデル
-
ツール／コンテンツフラグメントモデル に移動し、手順 1 で作成した設定と同じ名前のフォルダーを選択します。
-
フォルダー内で、「作成」を選択し、モデルに「ティーザー」という名前を付けます。次のデータタイプを ティーザー モデルに追加します。
table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4 データタイプ 名前 必須 オプション コンテンツ参照 アセット はい 必要に応じて、デフォルトの画像を追加します。例：/content/dam/wknd-headless/assets/AdobeStock_307513975.mp4 1 行のテキスト title（タイトル） はい 1 行のテキスト 事前タイトル いいえ 複数行テキスト 説明 いいえ デフォルトのタイプがリッチテキストであることを確認します 列挙 スタイル はい ドロップダウンとしてレンダリングします。オプションは、ヒーロー／ヒーローとおすすめ／おすすめです 
-
フォルダー内に、オファー という名前の 2 つ目のモデルを作成します。「作成」をクリックし、モデルに「オファー」という名前を付けて、次のデータタイプを追加します。
table 0-row-4 1-row-4 2-row-4 3-row-4 データタイプ 名前 必須 オプション コンテンツ参照 アセット はい デフォルトの画像を追加します。例： /content/dam/wknd-headless/assets/AdobeStock_238607111.jpeg複数行テキスト 説明 いいえ 複数行テキスト 記事 いいえ 
-
フォルダー内に、画像リスト という名前の 3 つ目のモデルを作成します。「作成」をクリックし、モデルに「画像リスト」という名前を付けて、次のデータタイプを追加します。
table 0-row-4 1-row-4 データタイプ 名前 必須 オプション フラグメント参照 リスト項目 はい 複数フィールドとしてレンダリングします。許可されているコンテンツフラグメントモデルはオファーです。 
コンテンツフラグメント
-
次に、アセットに移動し、新しいサイト用のフォルダーを作成します。「作成」をクリックし、フォルダーに名前を付けます。
-
フォルダーを作成したら、フォルダーを選択してその プロパティ を開きます。
-
フォルダーの「クラウド設定」タブで、前に作成した設定を選択します。
新規フォルダーをクリックし、ティーザーを作成します。「作成」と「コンテンツフラグメント」をクリックし、ティーザー モデルを選択します。モデルに ヒーロー という名前を付け、「作成」をクリックします。
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 名前 備考 アセット デフォルト値のままにするか、別のアセット（ビデオまたは画像）を選択します。 タイトル Explore. Discover. Live.事前タイトル Join use for your next adventure.説明 空白のままにします スタイル Hero
GraphQL エンドポイント
-
ツール／GraphQL に移動します。
-
「作成」をクリックし、新しいエンドポイントに名前を付け、新しく作成した設定を選択します。
GraphQL 永続クエリ
-
新しいエンドポイントをテストしましょう。ツール／GraphQL クエリエディター に移動し、ウィンドウの右上にあるドロップダウンのエンドポイントを選択します。
-
クエリエディターで、異なるクエリをいくつか作成します。
code language-graphql { teaserList { items { title } } }上記で作成した単一のフラグメントを含んだリストが得られます。
この演習では、AEM ヘッドレスアプリで使用する完全なクエリを作成します。パスごとに 1 つのティーザーを返すクエリを作成します。クエリエディターで、次のクエリを入力します。
code language-graphql query TeaserByPath($path: String!) { component: teaserByPath(_path: $path) { item { __typename _path _metadata { stringMetadata { name value } } title preTitle style asset { ... on MultimediaRef { __typename _authorUrl _publishUrl format } ... on ImageRef { __typename _authorUrl _publishUrl mimeType width height } } description { html plaintext } } } }下部の クエリ変数 入力に、以下を入力します。
code language-json { "path": "/content/dam/pure-headless/hero" }note note NOTE 場合によっては、フォルダー名とフラグメント名に応じてクエリ変数 pathを調整する必要があります。クエリを実行して、先ほど作成したコンテンツフラグメントの結果を受け取ります。
-
「保存」をクリックして、クエリを永続化（保存）し、クエリに ティーザー という名前を付けます。これで、アプリケーション内でクエリを名前で参照できるようになります。
次の手順
これで完了です。コンテンツフラグメントと GraphQL エンドポイントを作成できるように AEM as a Cloud Service を正常に設定しました。また、コンテンツフラグメントモデルとコンテンツフラグメントを作成し、GraphQL エンドポイントと永続クエリを定義しました。これで、次のチュートリアルの章に進む準備ができました。次の章では、この章で作成したコンテンツフラグメントと GraphQL エンドポイントを使用する、AEM ヘッドレス React アプリケーションを作成する方法について説明します。