SPA エディターの概要

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

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

メモ

SPAフレームワークベースのクライアント側レンダリング(ReactやAngularなど)を必要とするプロジェクトには、SPA Editorが推奨されるソリューションです。

概要

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

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

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

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として表されたモデルは、コンテナ内のコンポーネントマッピングを使用してレンダリングされます。
screen_shot_2018-08-20at144152

注意

The inclusion of the cq.authoring.pagemodel.messaging category should be limited to the context of the SPA Editor.

通信データタイプ

When the cq.authoring.pagemodel.messaging category is added to the page, it will send a message to the Page Editor to establish the JSON communication data type. 通信データタイプが JSON に設定されると、GET リクエストにより、コンポーネントの Sling Model エンドポイントとの通信がおこなわれます。ページエディターで更新が実行されると、更新されたコンポーネントの JSON 表記がページモデルのライブラリに送信されます。次に、ページモデルのライブラリから、SPA に更新が通知されます。

screen_shot_2018-08-20at143628

ワークフロー

SPAとAEMの間のやり取りの流れは、SPAエディタを仲介者と考えると理解できます。

  • ページエディターと SPA 間の通信は、HTML ではなく JSON を使用しておこなわれます。
  • ページエディターは、iframe とメッセージング API を使用して、SPA にページモデルの最新バージョンを提供します。
  • ページモデルマネージャーは、編集の準備ができたことをエディターに通知し、ページモデルを JSON 構造として渡します。
  • エディターは、作成しているページの DOM 構造を変更したり、アクセスしたりすることなく、最新のページモデルを提供します。

screen_shot_2018-08-20at144324

基本的なSPAエディタのワークフロー

SPAエディタの主要な要素に留意し、AEM内でSPAを編集する際の高度なワークフローは、次のように作成者に表示されます。

untitled1

  1. SPAエディタが読み込まれます。
  2. SPAは別のフレームに読み込まれます。
  3. SPAはJSONコンテンツを要求し、コンポーネントをクライアント側でレンダリングします。
  4. SPA Editorは、レンダリングされたコンポーネントを検出し、オーバーレイを生成します。
  5. 作成者がオーバーレイをクリックし、コンポーネントの編集ツールバーが表示されます。
  6. SPA Editorは、POST要求に対して編集を保持します。
  7. SPA Editorは、更新されたJSONをSPA Editorに要求し、 EditorはDOMイベントと共にSPAに送信されます。
  8. SPAは、関連するコンポーネントを再レンダリングし、DOMを更新します。
メモ

注意:

  • SPAは常にその展示を担当している。
  • SPAエディタは、SPA自体から切り離されています。
  • 実稼働版(公開)では、SPAエディターは読み込まれません。

クライアントサーバー型のページ編集ワークフロー

これは、SPAを編集する際のクライアントとサーバーの対話操作について、より詳しく説明したものです。

page_editor_spa_authoringmediator-2

  1. SPA がそれ自体を初期化し、Sling Model Exporter にあるページモデルをリクエストします。

  2. Sling Model Exporter がリポジトリに、ページを構成するリソースをリクエストします。

  3. リポジトリがリソースを返します。

  4. Sling Model Exporter がページのモデルを返します。

  5. SPA がページモデルに基づいてコンポーネントをインスタンス化します。

  6. 6a コンテンツがエディターに、オーサリングの準備ができたことを通知します。

    6b ページエディターがコンポーネントのオーサリング設定をリクエストします。

    6c ページエディターがコンポーネントの設定を受け取ります。

  7. 作成者がコンポーネントを編集すると、ページエディターがデフォルトの POST サーブレットに変更リクエストをポストします。

  8. リソースがリポジトリで更新されます。

  9. 更新されたリソースが POST サーブレットに提供されます。

  10. デフォルトの POST サーブレットがページエディターに、リソースが更新されたことを通知します。

  11. ページエディターが新しいページモデルをリクエストします。

  12. (リポジトリにある)ページを構成するリソースが、リクエストされます。

  13. ページを構成するリソースが、リポジトリから Sling Model Exporter に提供されます。

  14. 更新されたページモデルがエディターに返されます。

  15. ページエディターが SPA のページモデル参照を更新します。

  16. SPA が新しいページモデル参照に基づいてコンポーネントを更新します。

  17. ページエディターのコンポーネント設定が更新されます。

    17a SPA がページエディターに、コンテンツの準備ができたことを通知します。

    17b ページエディターが SPA にコンポーネント設定を提供します。

    17c SPA が、更新されたコンポーネント設定を提供します。

オーサリングワークフロー

これは、オーサリングの経験に重点を置いた、より詳細な概要です。

spa_content_authoringmodel

  1. SPA がページモデルを取得します。

  2. 2A ページモデルがエディターに、オーサリングに必要なデータを提供します。

    2b 通知を受けると、コンポーネントオーケストレーターがページのコンテンツ構造を更新します。

  3. コンポーネントオーケストレーターが、AEM リソースタイプと SPA コンポーネントの間のマッピングについて問い合わせます。

  4. コンポーネントオーケストレーターが、ページモデルとコンポーネントマッピングに基づいて、SPA コンポーネントを動的にインスタンス化します。

  5. ページエディターがページモデルを更新します。

  6. 6a ページモデルがページエディターに、更新されたオーサリングデータを提供します。

    6b ページモデルがコンポーネントオーケストレーターに変更を発行します。

  7. コンポーネントオーケストレーターがコンポーネントマッピングを取得します。

  8. コンポーネントオーケストレーターがページのコンテンツを更新します。

  9. SPA がページコンテンツの更新を完了すると、ページエディターがオーサリング環境を読み込みます。

要件と制限

作成者がページエディターを使用してSPAのコンテンツを編集できるようにするには、AEM SPA Editor SDKとやり取りするSPAアプリケーションを実装する必要があります。 お使いの環境での実行に必要な情報については、AEM ドキュメントの「SPA使用の手引き」を参照してください。

サポートされるフレームワーク

SPAエディターSDKは、以下の最小バージョンをサポートしています。

  • 16.x以降に対応
  • Angular 6.x以上

これらのフレームワークの以前のバージョンは、AEM SPAエディタSDKで動作する場合がありますが、サポートされていません。

その他のフレームワーク

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

複数のセレクターの使用

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

テキストエディタの要件

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

  1. テキストHTMLを含むコンテナラッパー要素に属性(任意)を設定します。 WKNDジャーナルのサンプルコンテンツの場合、その要素は <div> 要素であり、使用されているセレクターはで data-rte-editelementす。
  2. 対応するAEMテキストコンポーネント editElementQuery の、そのセレクターを指す設定 cq:InplaceEditingConfig を設定します。例: data-rte-editelement. これにより、HTMLテキストを折り返すHTML要素がエディターに表示されます。

この方法の例については、 WKNDジャーナルのサンプルコンテンツを参照してください。

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

制限事項

AEM SPAエディタSDKは、AEM 6.4 Service Pack 2で導入されました。 この機能はAdobeで完全にサポートされ、新機能として引き続き拡張および拡張されます。 次のAEM機能は、SPAエディタではまだサポートされていません。

  • ターゲットモード
  • ContextHub
  • インライン画像の編集
  • 設定の編集( listeners)
  • スタイルシステム
  • 取り消し/やり直し
  • ページの相違とタイムワープ
  • リンクチェッカー、CDNリライターサービス、URL短縮など、サーバー側でHTMLの書き換えを実行する機能。
  • 開発者モード
  • AEM起動回数

このページ