ドキュメントAEMAEM チュートリアルAEM ヘッドレスチュートリアル

コンテンツフラグメントモデルの定義

Last update: Thu Mar 27 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用対象:
  • Experience Manager as a Cloud Service
  • トピック:
  • コンテンツフラグメント

作成対象:

  • 初心者
  • 開発者

この章では、コンテンツフラグメントモデル ​を使用してコンテンツをモデル化し、スキーマを構築する方法について説明します。また、モデルの一部としてスキーマの定義に使用できる様々なデータタイプについて説明します。

チーム ​と​ 人物 ​という 2 つのシンプルなモデルを作成します。チーム ​データモデルには、名前、短い名前、説明が付けられており、姓名、プロフィールの詳細、プロファイルの画像、職業のリストを含む​ 人物 ​データモデルを参照します。

また、基本的な手順に従って独自のモデルを作成し、GraphQL クエリや React App コードなどの各手順を微調整するか、これらの章で説明されている手順に従うこともできます。

前提条件

これは複数のパートから成るチュートリアルで、AEM オーサー環境が使用可能であることを前提としています。

目的

  • コンテンツフラグメントモデルを作成します。
  • モデルの構築に使用できるデータタイプと検証オプションを特定します。
  • コンテンツフラグメントモデルが、コンテンツフラグメントのデータスキーマとオーサリングテンプレートの​ 両方 ​を定義する方法を理解します。

プロジェクト設定の作成

プロジェクト設定には、特定のプロジェクトに関連付けられたすべてのコンテンツフラグメントモデルが含まれており、モデルを整理する手段を提供します。コンテンツフラグメントモデルを作成する​ 前 ​に、少なくとも 1 つのプロジェクトを作成する必要があります。

  1. AEM オーサー ​環境にログインします(例:https://author-pYYYY-eXXXX.adobeaemcloud.com/)。

  2. AEM 開始画面から、ツール/一般/設定ブラウザー ​に移動します。

    設定ブラウザーに移動

  3. 右上隅にある「作成」をクリックします。

  4. 表示されたダイアログで、次のように入力します。

    • タイトル*:マイプロジェクト
    • 名前*:my-project(単語を区切る場合にはハイフンを使用し、小文字のみを使用します。この文字列は、クライアントアプリケーションがリクエストを実行する一意の GraphQL エンドポイントに影響を与えます。)
    • コンテンツフラグメントモデル ​にチェックを入れます
    • GraphQL 永続クエリ ​にチェックを入れます

    マイプロジェクトの設定

コンテンツフラグメントモデルを作成する

次に、チーム ​と​ 人物 ​の 2 つのモデルを作成します。

人物モデルの作成

人物 ​モデルを作成します。これは、チームの一員である個人を表すデータモデルです。

  1. AEM 開始画面から、ツール/一般/コンテンツフラグメントモデル ​に移動します。

    コンテンツフラグメントモデルに移動

  2. マイプロジェクト ​フォルダーに移動します。

  3. 右上隅にある「作成」をクリックして、モデルを作成 ​ウィザードを表示します。

  4. モデルタイトル ​フィールドに「人物」と入力し、「作成」をクリックします。表示されたダイアログで、「開く」をクリックしてモデルを作成します。

  5. 1 行のテキスト ​要素をメインパネルにドラッグ&ドロップします。「プロパティ」タブで次のプロパティを入力します。

    • フィールドラベル:フルネーム
    • プロパティ名:fullName
    • 「必須」にチェックを入れます

    「フルネーム」プロパティフィールド

    プロパティ名 ​は、AEM に永続化されるプロパティの名前を定義します。プロパティ名 ​は、データスキーマの一部としてこのプロパティの​ キー ​名も定義します。この​ キー ​は、GRAPHQL API を介してコンテンツフラグメントデータを公開する際に使用されます。

  6. 「データタイプ」タブをクリックし、「フルネーム」フィールドの下にある「複数行テキスト」フィールドをドラッグ&ドロップします。次のプロパティを入力します。

    • フィールドラベル:略歴
    • プロパティ名:biographyText
    • デフォルトのタイプ:リッチテキスト
  7. 「データタイプ」タブをクリックして、「コンテンツ参照」フィールドをドラッグ&ドロップ します。次のプロパティを入力します。

    • フィールドラベル:プロファイル画像
    • プロパティ名:profilePicture
    • ルートパス:/content/dam

    ルートパス ​を設定する際に、フォルダー ​アイコンをクリックしてモーダルを表示し、パスを選択できます。 これにより、作成者がパスへの入力に使用できるフォルダーが制限されます。 /content/dam は、すべての AEM Assets(画像、ビデオ、その他のコンテンツフラグメント)が保存されるルートです。

  8. 画像参照 ​に検証を追加して、画像 ​コンテンツタイプのみをフィールドの入力に使用できるようにします。

    画像に制限

  9. 「データタイプ」タブをクリックし、定義済みリスト データタイプを「画像参照」フィールドの下にドラッグ&ドロップします。次のプロパティを入力します。

    • レンダリング形式:チェックボックス
    • フィールドラベル:職業
    • プロパティ名:occupation
  10. 「オプションを追加」ボタンを使用して、いくつかの​ オプション ​を追加します。同じ値を「オプションラベル」および「オプション値」で使用します。

    アーティスト、インフルエンサー、写真家、旅行者、ライター、YouTuber

  11. 最終的な​ 人物 ​モデルは次のようになります。

    最終人物モデル

  12. 「保存」をクリックして、変更を保存します。

チームモデルを作成する

チーム ​のモデルを作成します。これは、人物のチームのデータモデルです。チームモデルは、チームのメンバーを表す人物モデルを参照します。

  1. マイプロジェクト ​フォルダーで、右上隅にある「作成」をタップすると、モデルを作成l ​ウィザードが表示されます。

  2. 「モデルタイトル」フィールドに「チーム」と入力して、「作成」をタップします。

    表示されたダイアログで「 開く」をタップして、新しく作成したモデルを開きます。

  3. 1 行テキスト ​要素をメインパネルにドラッグ&ドロップします。 次のプロパティを「プロパティ」タブに入力します。

    • フィールドラベル:タイトル
    • プロパティ名:title
    • 「 必須」にチェックを入れます。
  4. 「データタイプ」タブをタップし、1 行テキスト ​要素をメインパネルにドラッグ&ドロップします。次のプロパティを「プロパティ」タブに入力します。

    • フィールドラベル:短縮名
    • プロパティ名:shortName
    • 「必須」にチェックを入れます。
    • 「一意」にチェックを入れます。
    • 検証タイプ ​の下で、「カスタム」を選択します。
    • カスタム検証正規表現 ​の下で、^[a-z0-9\-_]{5,40}$ を入力します。これにより、5~40 文字の小文字の英数字とダッシュのみを入力できるようになります。

    shortName プロパティを使用すると、短縮パスに基づいて個々のチームに対してクエリを実行できます。 一意 ​設定により、このモデルのコンテンツフラグメントごとに常に一意の値が設定されます。

  5. 「データタイプ」タブをタップし、「複数行テキスト」フィールドを「短縮名」フィールドの下にドラッグ&ドロップします。次のプロパティを入力します。

  • フィールドラベル:説明
  • プロパティ名:description
  • デフォルトのタイプ:リッチテキスト
  1. 「データタイプ」タブをタップし、「フラグメント参照」フィールドをドラッグ&ドロップします。次のプロパティを入力します。
  • レンダリング形式:複数のフィールド
  • フィールドラベル:チームメンバー
  • プロパティ名:teamMembers
  • 許可されているコンテンツフラグメントモデル:フォルダーアイコンを使用して、人物 ​モデルを選択します。
  1. 最終​ チーム ​モデルは次のようになります。

    最終チームモデル

  2. 「保存」をクリックして、変更を保存します。

  3. これで、2 つのモデルを使用できるようになります。

    2 つのモデル

プロジェクト設定およびコンテンツフラグメントモデルを公開

レビューと検証で Project Configuration と Content Fragment Model を公開します

  1. AEM 開始画面から、ツール/一般/設定ブラウザー ​に移動します。

  2. マイプロジェクト ​の横にあるチェックボックスをタップし、「公開」をタップします。

    プロジェクト設定を公開

  3. AEM 開始画面から、ツール/一般/コンテンツフラグメントモデル ​に移動します。

  4. マイプロジェクト ​フォルダーに移動します。

  5. 人物 ​と​ チーム ​のモデルをタップして、「公開」をタップします。

    コンテンツフラグメントモデルを公開

これで完了です。

これで、最初のコンテンツフラグメントモデルが作成されました。

次の手順

次の章、コンテンツフラグメントモデルのオーサリングでは、コンテンツフラグメントモデルに基づいて新しいコンテンツフラグメントを作成し、編集します。また、コンテンツフラグメントのバリエーションを作成する方法についても説明します。

関連ドキュメント

  • コンテンツフラグメントモデル
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4