ビジュアルコンテンツフラグメント visual-content-fragments

最終更新日： 2026年6月26日

適用対象：
Experience Manager as a Cloud Service

トピック：
Content Fragments

作成対象：

User
Developer

コンテンツフラグメントには、デザインやレイアウトを使用せずにJSON出力を行うための構造化コンテンツが含まれています。 HTML テンプレートを追加すると、HTML形式の構造化されたコンテンツを使用して、完全に装飾された視覚的なエクスペリエンスを作成できます。

コンテンツフラグメントを視覚化することで、コンテンツの品質保証が可能になり、関係者はコンテンツフラグメントエディターを開かなくても、コンテンツを使用する前にコンテンツを確認できます
ビジュアルフラグメントを提供することで、オムニチャネル配信を促進し、web、電子メール、モバイルアプリなどのチャネルをまたいでモジュール型のエクスペリエンスを再利用できます。

添付されたAEM テンプレートのレイアウトとデザインを使用するHTML コンテンツフラグメントのレンダリング出力は、ビジュアルコンテンツフラグメントと呼ばれます。

HTMLのテンプレートには、レイアウトやデザインに関する情報が含まれているため、コンテンツフラグメントを視覚化することができます。テンプレートとコンテンツフラグメント間の接続は、Handlebars構文を使用して、HTML タグをコンテンツフラグメントモデルで定義されたデータタイプ（フィールド）にマッピングするために確立されます。この定義により、コンテンツフラグメントエディターのそれぞれのフィールドで作成されたコンテンツを、テンプレート内の適切な場所に表示できます。

お客様または開発チームは、🔗独自のHTML テンプレートを作成してカスタマイズし、1つ以上をコンテンツフラグメントモデルにアップロードして添付することで、対応するフラグメントをエクスペリエンスにレンダリングできます。プレビューおよび必要に応じて配信。

NOTE

汎用テンプレートは、常にAEM内でデフォルトとして使用でき、すべてのモデルに関連付けられます。このテンプレートを使用すると、構造化されたコンテンツのキーと値のペアを、クリーンで表スタイルのフォーマットで表示して、コンテンツのQuality Assurance（QA）ユースケースをサポートできます。

テンプレートの作成 create-a-template

Handlebarsを使用して開発されたHTML テンプレートを使用すると、ビジュアルコンテンツフラグメントをHTML形式でプレビューおよび配信できます。 Handlebars.js構文は、コンテンツフラグメントフィールドで作成されるコンテンツのプレースホルダーを定義します。

独自のテンプレートの開発について詳しくは、ビジュアルコンテンツフラグメント – テンプレートを参照してください。

テンプレートのアップロードと割り当て upload-and-assign-your-template

テンプレートはコンテンツフラグメントモデルに関連付けられているため、そのモデルから作成された任意のコンテンツフラグメントで使用できます。

新しいHTML テンプレートをアップロードするには：

コンテンツフラグメントコンソールで、コンテンツフラグメントモデルのタブを開きます。
フラグメントモデルの場所に移動します。
必要なモデルの情報アイコン（i）を選択します。

右側のパネルが表示されます。
下にスクロールして HTML テンプレート を表示します。汎用テンプレートは既にデフォルトとしてリストされています。
+を選択して、HTML ファイル（.html）からテンプレートをアップロードします。ダイアログでは、ローカルファイルシステムを参照し、テンプレートファイルを選択できます。
アップロードされたテンプレートの2つのビューは、レビュー用に表示されます。
- 左：コンテンツのないテンプレートのレンダリング
- 右：AEMに読み込む前にここで編集できるHTML コード
続行するには、次へを選択してください。
AEMで使用する テンプレート名 を入力します。
テンプレートの作成を確認します。
テンプレートはAEMで作成され、HTML テンプレートの下にコンテンツフラグメントモデルのプロパティで一覧表示されます。
読み込みが完了すると、フラグメントのプレビューに使用できます。テンプレートを ダウンロード または削除することもできます。

テンプレートを使用したフラグメントのプレビュー preview-your-fragment-with-a-template

テンプレートを使用してコンテンツフラグメントをプレビューするには：

NOTE

汎用テンプレートは常に使用できるため、カスタムテンプレートを読み込まずにフラグメントをプレビューできます。

コンテンツフラグメントコンソールで、フラグメントの場所に移動します。
以下のいずれかの操作を行います。
- コンソールでフラグメントを選択します
- エディターでフラグメントを開きます
次の一番上のツールバーから プレビュー を選択します。
- コンテンツフラグメントコンソール
- エディター。ここで テンプレート を選択できます

どちらの場合も、新しいモーダルウィンドウが開きます。

利用できるカスタムテンプレートがない場合、AEMは 汎用テンプレート を使用してフラグメントを表示します。 汎用テンプレート:
- フラグメントのフィールドを表形式で表示します。名前と内容
- 同じビュー内の参照フラグメントの完全にハイドレートされたコンテンツを表示します
カスタムテンプレートが使用可能な場合は、使用するテンプレート（汎用テンプレートを含む）を選択できます。
コンテンツフラグメントが公開されている場合は、その プレビューURL と 公開URL を表示してコピーすることもできます。