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

この章では、5 つのコンテンツフラグメントモデルを作成する手順について説明します。

  • Contact Info
  • アドレス
  • Person
  • 場所
  • チーム

コンテンツフラグメントモデルを使用すると、コンテンツタイプ間の関係を定義し、スキーマなどの関係を保持できます。 ネストされたフラグメント参照、様々なコンテンツデータタイプ、ビジュアルコンテンツ編成用のタブタイプを使用します。 タブプレースホルダー、フラグメント参照、JSON オブジェクト、日時データ型など、より高度なデータ型。

この章では、画像などのコンテンツ参照の検証ルールを拡張する方法についても説明します。

前提条件

これは、高度なチュートリアルです。 この章を進める前に、 クイック設定. 高度なチュートリアルの設定の詳細については、前の概要の章も必ずお読みください。

目的

  • コンテンツフラグメントモデルを作成する.
  • タブのプレースホルダー、日時、JSON オブジェクト、フラグメント参照、およびコンテンツ参照をモデルに追加します。
  • コンテンツ参照に検証を追加します。

コンテンツフラグメントモデルの概要

次のビデオでは、コンテンツフラグメントモデルと、このチュートリアルでの使用方法について簡単に説明します。

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

WKND アプリ用のコンテンツフラグメントモデルをいくつか作成しましょう。 コンテンツフラグメントモデルの作成に関する基本的な概要が必要な場合は、 基本チュートリアル.

  1. に移動します。 ツール > Assets > コンテンツフラグメントモデル.

    コンテンツフラグメントモデルのパス

  2. 選択 WKND サイト をクリックして、サイトの既存のコンテンツフラグメントモデルのリストを表示します。

連絡先情報モデル

次に、個人または場所の連絡先情報を含むモデルを作成します。

  1. 選択 作成 をクリックします。

  2. モデルに「連絡先情報」というタイトルを付け、 作成. 表示される成功モーダルで、「 」を選択します。 開く をクリックして、新しく作成したモデルを編集します。

  3. 最初に 1 行のテキスト フィールドをモデル上に配置します。 以下を実行します。 フィールドラベル の「電話」 プロパティ タブをクリックします。 プロパティ名は phone. チェックボックスを選択してフィールドを作成します。 必須.

  4. 次に移動: データタイプ 「 」タブに移動して、別の 1 行のテキスト 「電話」フィールドの下のフィールド。 以下を実行します。 フィールドラベル 」と入力し、 必須.

Adobe Experience Managerには、いくつかの組み込みの検証方法が用意されています。 これらの検証方法を使用すると、コンテンツフラグメントモデル内の特定のフィールドにガバナンスルールを追加できます。 この場合、ユーザーがこのフィールドに入力する際に有効な電子メールアドレスのみを入力できるようにする検証ルールを追加します。 以下 検証タイプ ドロップダウン、選択 電子メール.

完成したコンテンツフラグメントモデルは次のようになります。

連絡先情報モデルのパス

完了したら、「 」を選択します。 保存 変更を確定して、コンテンツフラグメントモデルエディターを閉じます。

住所モデル

次に、アドレスのモデルを作成します。

  1. 次の WKND サイト​を選択します。 作成 を右上隅からクリックします。

  2. 「住所」のタイトルを入力し、 作成.

    i.表示される成功モーダルで、「 」を選択します。 開く をクリックして、新しく作成したモデルを編集します。

  3. ドラッグ&ドロップ 1 行のテキスト フィールドをモデルに入れ、 フィールドラベル 「番地」の プロパティ名は、 streetAddress. を選択します。 必須 チェックボックス。

  4. 上記の手順を繰り返し、さらに 4 つの「1 行のテキスト」フィールドをモデルに追加します。 次のラベルを使用します。

    • City(市区町村)
    • 状態
    • 郵便番号
    • country(国)
  5. 選択 保存 をクリックして、住所モデルの変更を保存します。

    完成した「住所」フラグメントモデルは次のようになります。
    住所モデル

人物モデル

次に、人物に関する情報を含むモデルを作成します。

  1. 右上隅で、「 作成.

  2. モデルに「人」というタイトルを付け、「 作成. 表示される成功モーダルで、「 」を選択します。 開く をクリックして、新しく作成したモデルを編集します。

  3. 最初に 1 行のテキスト フィールドをモデル上に配置します。 以下を実行します。 フィールドラベル 」の名前を付けます。 プロパティ名は fullName. チェックボックスを選択してフィールドを作成します。 必須.

    フルネームオプション

  4. コンテンツフラグメントモデルは、他のモデルでも参照できます。 次に移動: データタイプ 「 」タブに移動し、「 」をドラッグ&ドロップします。 フラグメント参照 フィールドに入力し、「Contact Info」というラベルを付けます。

  5. プロパティ タブの 許可されているコンテンツフラグメントモデル 「 」フィールドで、フォルダーアイコンを選択し、 連絡先情報 前に作成されたフラグメントモデル。

  6. を追加します。 コンテンツ参照 フィールドに入力し、 フィールドラベル 」の「プロフィール写真」 の下のフォルダーアイコンを選択します。 ルートパス をクリックして、パス選択モーダルを開きます。 「 」を選択してルートパスを選択します。 コンテンツ > Assets​を選択し、 WKND サイト. 以下を使用: 選択 ボタンを使用してパスを保存します。 最終的なテキストパスは /content/dam/wknd.

    コンテンツ参照のルートパス

  7. の下 指定したコンテンツタイプのみを受け入れる、「画像」を選択します。

    プロファイルの画像オプション

  8. 画像ファイルのサイズとサイズを制限するには、コンテンツ参照フィールドの検証オプションを見てみましょう。

    の下 指定したファイルサイズのみを受け入れる、「次よりも小さいか等しい」を選択すると、追加のフィールドが下に表示されます。
    指定したファイルサイズのみを許可

  9. の場合 最大、「5」と入力し、次の値を入力します。 単位を選択、「メガバイト (MB)」を選択します。 この検証では、指定したサイズの画像のみを選択できます。

  10. の下 指定した画像の幅のみを受け入れる、「最大の幅」を選択します。 内 最大(ピクセル) 表示されるフィールドに、"500"と入力します。 同じオプションを選択 指定した画像の高さのみを受け入れる.

    これらの検証機能により、追加された画像が指定された値を超えないようにします。 検証ルールは次のようになります。
    コンテンツ参照の検証ルール

  11. を追加します。 複数行テキスト フィールドに入力し、 フィールドラベル 「伝記」の を デフォルトのタイプ ドロップダウンをデフォルトの「リッチテキスト」オプションとして使用します。

    伝記オプション

  12. 次に移動: データタイプ 「 」タブをクリックし、 列挙 「Profile Picture」の下のフィールド デフォルトの レンダリング形式 オプション、選択 ドロップダウン. エキスパート、アドバンス、中級など、講師の経験レベルのオプションを入力します。

  13. 次に、別の 列挙 「Instructor Experience Level」の下のフィールドを選択し、 レンダリング形式 オプション。 ロッククライミング、サーフィン、サイクリング、スキー、バックパッキンなど、さまざまなスキルを入力します。 オプションのラベルとオプションの値は、次のように一致する必要があります。

    スキル列挙

  14. 最後に、 複数行テキスト フィールドに入力します。

選択 保存 変更を確定して、コンテンツフラグメントモデルエディターを閉じます。

ロケーションモデル

次のコンテンツフラグメントモデルは、物理的な場所を示します。 このモデルでは、タブのプレースホルダを使用します。 タブプレースホルダーは、モデルエディター内のデータタイプとフラグメントエディター内のコンテンツを、それぞれコンテンツを分類して整理するのに役立ちます。 各プレースホルダーは、インターネットブラウザーのタブと同様に、コンテンツフラグメントエディターにタブを作成します。 ロケーションモデルには、次の 2 つのタブが必要です。場所の詳細と場所の住所。

  1. 以前と同様に、 作成 をクリックして、別のコンテンツフラグメントモデルを作成します。 [ モデルタイトル ] に、"Location"と入力します。 選択 作成 続いて 開く が表示される成功モーダルに表示されます。

  2. を追加します。 タブプレースホルダー フィールドをモデルに追加し、「Location Details」というラベルを付けます。

  3. ドラッグ&ドロップ 1 行のテキスト 「名前」というラベルを付けます。 このフィールドラベルの下に、 複数行テキスト フィールドに入力し、「説明」というラベルを付けます。

  4. 次に、 フラグメント参照 フィールドに入力し、「Contact Info」というラベルを付けます。 「プロパティ」タブの「 許可されているコンテンツフラグメントモデル​を選択し、 フォルダーアイコン 前に作成した「連絡先情報」フラグメントモデルを選択します。

  5. を追加します。 コンテンツ参照 「連絡先情報」の下のフィールド ラベルを「Location Image」にします。 この ルートパス は、 /content/dam/wknd. の下 指定したコンテンツタイプのみを受け入れる、「画像」を選択します。

  6. また、 JSON オブジェクト フィールドの下の「ロケーション画像」 このデータタイプは柔軟なので、コンテンツに含める任意のデータの表示に使用できます。 この場合、 JSON オブジェクトを使用して天気に関する情報が表示されます。 JSON オブジェクトに「Weather by Season」というラベルを付けます。 内 プロパティ タブ、追加 説明 したがって、ユーザーは、ここに入力するデータが明確になります。「季節別のイベントの場所の天気(春、夏、秋、冬)に関する JSON データ。」

    JSON オブジェクトのオプション

  7. 「場所の住所」タブを作成するには、 タブプレースホルダー フィールドをモデルに追加し、「Location Address」というラベルを付けます。

  8. ドラッグ&ドロップ フラグメント参照 フィールドを選択し、「プロパティ」タブの「 許可されているコンテンツフラグメントモデル​を選択し、 住所 モデル。

  9. 選択 保存 変更を確定して、コンテンツフラグメントモデルエディターを閉じます。 完成したロケーションモデルは、次のように表示されます。

    コンテンツ参照オプション

チームモデル

最後に、人々のチームを表すモデルを作成します。

  1. 次の WKND サイト ページ、選択 作成 をクリックして、別のコンテンツフラグメントモデルを作成します。 モデルタイトルに"Team"と入力します。 以前と同様に、 作成 続いて 開く が表示される成功モーダルに表示されます。

  2. を追加します。 複数行テキスト フィールドをフォームに追加します。 の下 フィールドラベル、「説明」と入力します。

  3. を追加します。 日時 フィールドをモデルに追加し、「Team Bunsing Date」というラベルを付けます。 この場合、デフォルトの タイプ を「日付」に設定しますが、「日時」または「時間」を使用することもできます。

    日付と時間のオプション

  4. 次に移動: データタイプ タブをクリックします。 「チームの創設日」の下に、 フラグメント参照. 内 レンダリング形式 ドロップダウンから「multifield」を選択します。 の場合 フィールドラベル、「チームメンバー」と入力します。 このフィールドは、以前に作成した人物モデルにリンクします。 データタイプは複数フィールドなので、複数のユーザーフラグメントを追加して、ユーザーのチームを作成できます。

    フラグメント参照オプション

  5. の下 許可されているコンテンツフラグメントモデル​をクリックし、フォルダーアイコンを使用してパスを選択モーダルを開いてから、 人物 モデル。 以下を使用: 選択 ボタンをクリックしてパスを保存します。

    担当者モデルを選択

  6. 選択 保存 変更を確定して、コンテンツフラグメントモデルエディターを閉じます。

フラグメント参照をアドベンチャーモデルに追加

チームモデルには、人物モデルへのフラグメント参照が含まれるのと同様に、WKND アプリにこれらの新しいモデルを表示するには、チームモデルと場所モデルをアドベンチャーモデルから参照する必要があります。

  1. 次の WKND サイト ページで、 冒険 モデルを選択し、 編集 上部ナビゲーションから。

    アドベンチャー編集パス

  2. フォームの下部で、「持ち込むもの」の下に、 フラグメント参照 フィールドに入力します。 を入力します。 フィールドラベル 」と入力します。 の下 許可されているコンテンツフラグメントモデル​を選択し、 場所 モデル。

    場所フラグメントの参照オプション

  3. もう 1 つ追加 フラグメント参照 「Instructor Team」というラベルを付けます。 の下 許可されているコンテンツフラグメントモデル​を選択し、 チーム モデル。

    チームフラグメント参照オプション

  4. 別の フラグメント参照 フィールドに入力し、「管理者」というラベルを付けます。

    管理者フラグメント参照オプション

  5. 選択 保存 変更を確定して、コンテンツフラグメントモデルエディターを閉じます。

ベストプラクティス

コンテンツフラグメントモデルの作成に関するベストプラクティスはいくつかあります。

  • UX コンポーネントにマッピングするモデルを作成する。 例えば、WKND アプリには、アドベンチャ、記事、場所用のコンテンツフラグメントモデルがあります。 また、ヘッダー、プロモーション、免責事項を追加することもできます。 これらの例はそれぞれ、特定の UX コンポーネントを構成しています。

  • できるだけ少ないモデルを作成します。 モデルの数を制限すると、再利用を最大限に高め、コンテンツ管理をシンプル化できます。

  • 必要に応じて、コンテンツフラグメントモデルを必要に応じてネストします。 ネストはフラグメント参照またはコンテンツ参照を使用して実行されることを思い出してください。 最大 5 レベルのネストを検討します。

おめでとうございます。

おめでとうございます。これで、タブを追加し、日時と JSON オブジェクトのデータ型を使用し、フラグメントとコンテンツの参照に関する詳細を学ぶことができました。 また、コンテンツ参照検証ルールも追加しました。

次の手順

このシリーズの次の章では、 コンテンツフラグメントのオーサリング この章で作成したモデルから。 この章で紹介するデータタイプを使用し、フォルダーポリシーを作成して、アセットフォルダーで作成できるコンテンツフラグメントモデルを制限する方法について説明します。

このチュートリアルではオプションですが、実際の実稼動環境ではすべてのコンテンツを必ず公開してください。 AEMのオーサー環境とパブリッシュ環境について詳しくは、
AEMヘッドレスおよび GraphQL ビデオシリーズ.

このページ