単一ページアプリケーション(SPA)により、Web サイトのユーザーに魅力的なエクスペリエンスを提供することができます。開発者はSPAフレームワークを使用してサイトを構築できるようにしたいと考え、作成者は、そのようなフレームワークを使用して構築されたサイトのコンテンツをAEM内でシームレスに編集したいと考えています。
SPA エディターには、AEM 内で SPA をサポートするための包括的なソリューションが用意されています。このページでは、AEMでのSPAサポートの構造と、SPAエディターの仕組み、SPAフレームワークとAEMの同期の仕組みの概要を説明します。
React やAngularなどの一般的なSPAフレームワークを使用して構築されたサイトは、動的 JSON を介してコンテンツを読み込むので、AEMページエディターで編集コントロールを配置するために必要なHTML構造は提供されません。
AEM 内で SPA の編集を有効にするには、SPA の JSON 出力と AEM リポジトリーのコンテンツモデルとの間でマッピングを行い、変更をコンテンツに保存できるようにする必要があります。
AEMでのSPAのサポートには、イベントの送信に使用できるページエディターに読み込まれる際にSPA JS コードとやり取りするシン JS レイヤーが導入され、編集コントロールの場所をアクティブにして、コンテキスト内編集が可能になります。 この機能は、SPAのコンテンツを Content Services 経由で読み込む必要があるので、Content Services API エンドポイントの概念に基づいて構築されます。
AEMでのSPAについて詳しくは、次のドキュメントを参照してください。
SPAのページコンポーネントは、JSP ファイルまたは HTL ファイルを介して子コンポーネントのHTML要素を提供しません。 この処理は SPA フレームワークに委任されます。子コンポーネントまたはモデルの表現は、JCR から JSON データ構造として取得されます。次に、その構造に従ってSPAコンポーネントがページに追加されます。 この動作は、ページコンポーネントの初期本文の構成をSPA以外の対応するものと区別します。
ページモデルの解決と管理は、指定の PageModel
ライブラリに委任されます。SPA エディターで初期化とオーサリングを行うには、SPA でこのページモデルライブラリを使用する必要があります。このページモデルライブラリは、aem-react-editable-components
npm によって AEM のページコンポーネントに間接的に提供されます。ページモデルは、AEM と SPA 間のインタープリターであるので、常に存在している必要があります。ページを作成したら、ページエディターとの通信を可能にするために、cq.authoring.pagemodel.messaging
ライブラリを追加する必要があります。
SPA ページのコンポーネントがページのコアコンポーネントから継承される場合、cq.authoring.pagemodel.messaging
クライアントライブラリのカテゴリを使用可能にするオプションが 2 つあります。
customfooterlibs.html
を使用して、カテゴリを追加する。書き出されたモデル内のリソースごとに、SPA はレンダリングを行う実際のコンポーネントをマッピングします。JSON 形式で表現されたモデルは、コンテナ内のコンポーネントマッピングを使用してレンダリングされます。
cq.authoring.pagemodel.messaging
カテゴリの追加は、SPA エディターのコンテキストに限定する必要があります。
cq.authoring.pagemodel.messaging
カテゴリがページに追加されると、ページエディターにメッセージが送信され、JSON 通信データタイプが確立されます。通信データタイプが JSON に設定されると、GET リクエストにより、コンポーネントの Sling Model エンドポイントとの通信が行われます。ページエディターで更新が実行されると、更新されたコンポーネントの JSON 表現がページモデルのライブラリに送信されます。次に、ページモデルライブラリが、SPAに更新を通知します。
SPA と AEM 間のインタラクションのフローは、SPA エディターが両者の仲介役になっていると考えると理解することができます。
SPA エディターの主な要素に留意すると、AEM 内での SPA 編集の高度なワークフローは、作成者の観点では次のようになります。
次の点に注意してください。
下図は、SPA を編集する際のクライアントとサーバーのインタラクションの概要をより詳しく説明したものです。
SPA がそれ自体を初期化し、Sling Model Exporter にあるページモデルをリクエストします。
Sling Model Exporter がリポジトリーに、ページを構成するリソースをリクエストします。
リポジトリーがリソースを返します。
Sling Model Exporter がページのモデルを返します。
SPA がページモデルに基づいてコンポーネントをインスタンス化します。
6a コンテンツがエディターに、オーサリングの準備ができたことを通知します。
6b ページエディターがコンポーネントオーサリング設定を要求します。
6c ページエディターがコンポーネント設定を受け取ります。
作成者がコンポーネントを編集すると、ページエディターがデフォルトの POST サーブレットに変更リクエストをポストします。
リソースがリポジトリーで更新されます。
更新されたリソースが POST サーブレットに提供されます。
デフォルトの POST サーブレットがページエディターに、リソースが更新されたことを通知します。
ページエディターが新しいページモデルをリクエストします。
(リポジトリーにある)ページを構成するリソースが、リクエストされます。
ページを構成するリソースが、リポジトリーから Sling Model Exporter に提供されます。
更新されたページモデルがエディターに返されます。
ページエディターが SPA のページモデル参照を更新します。
SPA が新しいページモデル参照に基づいてコンポーネントを更新します。
ページエディターのコンポーネント設定が更新されます。
17a SPA がページエディターに、コンテンツの準備ができたことを通知します。
17b ページエディターが SPA にコンポーネント設定を提供します。
17c SPA が、更新されたコンポーネント設定を提供します。
下図は、オーサリングエクスペリエンスに重点を置いた、より詳細な概要です。
SPA がページモデルを取得します。
2A ページモデルがエディターに、オーサリングに必要なデータを提供します。
2b 通知を受けると、コンポーネントオーケストレーターがページのコンテンツ構造を更新します。
コンポーネントオーケストレーターが、AEM リソースタイプと SPA コンポーネントの間のマッピングについて問い合わせます。
コンポーネントオーケストレーターが、ページモデルとコンポーネントマッピングに基づいて、SPA コンポーネントを動的にインスタンス化します。
ページエディターがページモデルを更新します。
6a ページモデルがページエディターに、更新されたオーサリングデータを提供します。
6b ページモデルがコンポーネントオーケストレーターに変更を発行します。
コンポーネントオーケストレーターがコンポーネントマッピングを取得します。
コンポーネントオーケストレーターがページのコンテンツを更新します。
SPA がページコンテンツの更新を完了すると、ページエディターがオーサリング環境を読み込みます。
作成者がページエディターを使用して SPA のコンテンツを編集できるようにするには、AEM SPA Editor SDK とやり取りする SPA アプリケーションを実装する必要があります。正常に動作させるために必要な最低限の知識については、React を使用した AEM での SPA の利用を参照してください。
SPA Editor SDK では、最低限、次のバージョンをサポートしています。
これらのフレームワークの旧バージョンは、AEM SPA Editor SDK で動作する可能性はありますが、サポートされていません。
AEM SPA Editor SDK で動作する他の SPA フレームワークを追加で実装することができます。AEM SPA エディターで動作するモジュール、コンポーネント、サービスで構成されるフレームワーク固有のレイヤーを作成するためにフレームワークが満たすべき要件については、SPA ブループリントドキュメントを参照してください。
カスタムセレクターの定義を追加すると、AEM SPA SDK 用に開発された SPA の一部として使用することができます。ただし、これをサポートするには、model
セレクターを最初のセレクターにし、JSON エクスポーターの要件に応じて拡張子を .json
にする必要があります。
SPA で作成したテキストコンポーネントのインプレースエディタを使用する場合は、追加の設定が必要です。
<div>
要素がこれに該当し、使用されているセレクターは data-rte-editelement
です。cq:InplaceEditingConfig
で、そのセレクター(例:data-rte-editelement
など)を指す設定 editElementQuery
を指定します。これにより、HTML テキストを折り返す HTML 要素をエディターが把握できます。editElementQuery
プロパティとリッチテキストエディターの設定について詳しくは、リッチテキストエディターの設定を参照してください。
AEM SPA エディター SDK はアドビで完全にサポートされており、新機能として機能強化と拡張が続けられています。次の AEM 機能は、SPA エディターではまだサポートされていません。