SPA エディターの概要 spa-editor-overview

単一ページアプリケーション（SPA）により、Web サイトのユーザーに魅力的なエクスペリエンスを提供することができます。開発者は SPA フレームワークを使用してサイトを構築したいと考え、作成者はそうして構築されたサイトのコンテンツを AEM 内でシームレスに編集したいと考えています。

SPA エディターには、AEM 内で SPA をサポートするための包括的なソリューションが用意されています。このページでは、AEM での SPA サポートの構成と、SPA エディターの仕組み、SPA フレームワークと AEM を同期させる方法について説明します。

はじめに introduction

React や Angular などの一般的な SPA フレームワークを使用して構築したサイトは、Dynamic JSON を使用してコンテンツを読み込みます。サイトには、AEM ページエディターが編集コントロールを配置するために必要な HTML 構造がありません。

AEM 内で SPA の編集を有効にするには、SPA の JSON 出力と AEM リポジトリーのコンテンツモデルとの間でマッピングを行い、変更をコンテンツに保存できるようにする必要があります。

AEM の SPA サポートにより、シン JS レイヤーが導入されました。このレイヤーは、ページエディターに読み込まれると、SPA の JS コードとやり取りします。これにより、イベントを送信したり、編集コントロールの場所をアクティブにしてコンテキスト内で編集したりできます。SPA のコンテンツは、コンテンツサービスを使用して読み込む必要があるため、この機能はコンテンツサービス API エンドポイントの概念に基づいて構築されています。

AEM の SPA について詳しくは、次のドキュメントを参照してください。

デザイン design

SPA のページコンポーネントは、JSP ファイルまたは HTL ファイルを介して子コンポーネントの HTML 要素を提供しません。この処理は SPA フレームワークに委任されます。子コンポーネントまたはモデルの表現は、JCR から JSON データ構造として取得されます。次に、その構造に従って、SPA コンポーネントがページに追加されます。この動作により、ページコンポーネントのボディの初期構成が、SPA 以外のコンポーネントの場合とは違う構成になります。

ページモデルの管理 page-model-management

ページモデルの解決と管理は、指定の PageModel ライブラリに委任されます。ページエディターで初期化とオーサリングを行うには、SPA でこのページモデルライブラリを使用する必要があります。このページモデルライブラリは、aem-react-editable-components npm によって AEM のページコンポーネントに間接的に提供されます。ページモデルは、AEM と SPA 間のインタープリターであるので、常に存在している必要があります。ページを作成したら、ページエディターとの通信を可能にするために、cq.authoring.pagemodel.messaging ライブラリを追加する必要があります。

SPA ページのコンポーネントがページのコアコンポーネントから継承される場合、cq.authoring.pagemodel.messaging クライアントライブラリのカテゴリを使用可能にするオプションが 2 つあります。

書き出されたモデル内のリソースごとに、SPA はレンダリングを行う実際のコンポーネントをマッピングします。JSON 形式で表現されたモデルは、コンテナ内のコンポーネントマッピングを使用してレンダリングされます。

通信データタイプ communication-data-type

cq.authoring.pagemodel.messaging カテゴリがページに追加されると、ページエディターにメッセージが送信され、JSON 通信データタイプが確立されます。通信データタイプが JSON に設定されると、GET リクエストにより、コンポーネントの Sling Model エンドポイントとの通信が行われます。ページエディターで更新が実行されると、更新されたコンポーネントの JSON 表現がページモデルのライブラリに送信されます。次に、ページモデルのライブラリから、SPA に更新が通知されます。

ワークフロー workflow

SPA と AEM 間のインタラクションのフローは、SPA エディターが両者の仲介役になっていると考えると理解することができます。

SPA エディターの基本的なワークフロー basic-spa-editor-workflow

SPA エディターの主な要素に留意すると、AEM 内での SPA 編集の高度なワークフローは、作成者の観点では次のようになります。

クライアントサーバーのページ編集ワークフロー client-server-page-editing-workflow

下図は、SPA を編集する際のクライアントとサーバーのインタラクションの概要をより詳しく説明したものです。

オーサリングワークフロー authoring-workflow

下図は、オーサリングエクスペリエンスに重点を置いた、より詳細な概要です。

要件と制限事項 requirements-limitations

作成者がページエディターを使用して SPA のコンテンツを編集できるようにするには、AEM SPA Editor SDK とやり取りする SPA アプリケーションを実装する必要があります。正常に動作させるために必要な最低限の知識については、React を使用した AEM での SPA の利用を参照してください。

サポートされているフレームワーク supported-frameworks

SPA Editor SDK では、最低限、次のバージョンをサポートしています。

これらのフレームワークの旧バージョンは、AEM SPA Editor SDK で動作する可能性はありますが、サポートされていません。

その他のフレームワーク additional-frameworks

AEM SPA Editor SDK で動作する他の SPA フレームワークを追加で実装することができます。AEM SPA エディターで動作するモジュール、コンポーネント、サービスで構成されるフレームワーク固有のレイヤーを作成するためにフレームワークが満たすべき要件については、SPA ブループリントドキュメントを参照してください。

複数のセレクターの使用 multiple-selectors

カスタムセレクターの定義を追加すると、AEM SPA SDK 用に開発された SPA の一部として使用することができます。ただし、これをサポートするには、model セレクターを最初のセレクターにし、JSON エクスポーターの要件に応じて拡張子を .json にする必要があります。

テキストエディターの要件 text-editor-requirements

SPA で作成したテキストコンポーネントのインプレースエディタを使用する場合は、追加の設定が必要です。

editElementQuery プロパティとリッチテキストエディターの設定について詳しくは、リッチテキストエディターの設定を参照してください。

制限事項 limitations

AEM SPA エディター SDK はアドビで完全にサポートされており、新機能として機能強化と拡張が続けられています。次の AEM 機能は、SPA エディターではまだサポートされていません。