AEM におけるヘッドフルとヘッドレス headful-headless

Adobe Experience Manager プロジェクトはヘッドフルモデルでもヘッドレスモデルで実装できますが、二者択一ではありません。AEM は、1 つのプロジェクトで両方のモデルのメリットを活用できる柔軟性を備えています。このドキュメントでは、各モデルの概要と SPA 統合のレベルについて説明します。

概要 overview

AEM には、コンテンツの作成と配信を 1 つのプラットフォームで管理するための強力なツールが用意されています。それは、従来の「ヘッドフル」コンテンツ管理モデルです。このモデルでは、コンテンツ作成者と開発者が同じプラットフォームで作業して、コンテンツ利用者にエクスペリエンスを提供します。

また、AEM をコンテンツの管理だけに使用することもでき、その場合はコンテンツの表示と配信を別のプラットフォームで管理できます。これは「ヘッドレス」コンテンツ管理モデルです。このモデルでは、コンテンツ作成者と開発者が様々なプラットフォームで作業して、コンテンツ利用者にエクスペリエンスを提供します。

しかし、これはバイナリ選択である必要はありません。AEM にはこれまでにはない柔軟性があるので、プロジェクトに両方のモデルのメリットを活用できます。

ヘッドフルモデルまたはフルスタックモデルでは、コンテンツは AEM リポジトリで管理され、Java、HTL などに基づく AEM コンポーネントを使用して、ユーザーエクスペリエンス用にコンテンツをレンダリングします。このモデルでは、コンテンツの作成、スタイル設定、表示、配信がすべて AEM で行われます。

ヘッドレスモデルでは、コンテンツは AEM リポジトリで管理されますが、REST や GraphQL などの API を使用して別のシステムに配信されて、ユーザーエクスペリエンス用にレンダリングされます。このモデルでは、コンテンツは AEM で作成されますが、コンテンツのスタイル設定、表示、配信はすべて別のプラットフォームで行われます。

AEM がヘッドレスで配信するコンテンツの宛先は、多くの場合、単一ページアプリケーション（SPA）です。ただし、これらの SPA は完全に AEM の外部にある必要はありません。AEM では、SPA をどの程度 AEM に統合するかを決定できます。例を見てみましょう。

Web ショップの例 web-shop-example

会社の既存の Web ショップが SPA として存在するとします。その中に製品の詳細や画像がすべて含まれています。この状況で、プロモーションサイト、ブログ、キャンペーンコンテンツなどのマーケティング活動を強化するために AEM を導入します。これら 2 つをどのように統合すればよいでしょうか。AEM を使用すると、次のような幅広い選択肢があります。

次の節では、これらの統合レベルについて詳しく説明します。

SPA 統合レベル integration-levels

SPA 統合は AEM の 4 つのレベルに分かれます。

レベル 1 は典型的なヘッドレス実装の例です。ただし、コンテンツ作成者は SPA 内でインコンテクストでのみコンテンツを表示できます。AEM はオーサリングツールにすぎません。

レベル 2 とレベル 3 では AEM のメリットと柔軟性が明白になる一方、SPA のメリットも維持されます。コンテンツ作成者は AEM でコンテンツを作成できますが、AEM 内でインコンテクストでコンテンツを表示できます。SPA は、AEM でオーサリングできるようになりますが、引き続き SPA として配信できます。

統合レベルの実装 implementing

選択する統合レベルに応じて、使用可能な様々なツールが AEM に用意されています。各レベルは、前に使用したツールに基づいて構築されます。以下のリストは、関連するリソースへのリンクです。