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

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

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

はじめに introduction

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

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

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

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

デザイン design

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

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

ページモデルの解決と管理は、指定の PageModel ライブラリに委任されます。SPA エディターで初期化とオーサリングを行うには、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 アプリケーションを実装する必要があります。動作させるために必要な基本的な知識については、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 Exporter の要件に応じて拡張子を .json にする必要があります。

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

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

この処理の例については、WKND Journal サンプルコンテンツを参照してください。

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

制限事項 limitations

AEM SPA Editor SDK は、AEM 6.4 サービスパック 2 で導入されました。AEM SPA Editor SDK はアドビで完全にサポートされており、新機能として機能強化と拡張が続けられています。次のAEM機能は、SPA Editor ではまだ対応していません。