ユニバーサルエディター universal-editor
ユニバーサルエディターの柔軟性と、AEM 6.5 を使用してヘッドレスエクスペリエンスを強化する方法について説明します。
概要 overview
ユニバーサルエディターは、Adobe Experience Manager Sites の一部である多用途のビジュアルエディターです。これにより、作成者は任意のヘッドレスエクスペリエンスで What You See Is What You Get（WYSIWYG）編集を利用できるようになります。
- ユニバーサルエディターはあらゆる形式の AEM ヘッドレスコンテンツに対して同じ一貫したビジュアル編集をサポートしているので、作成者はその柔軟性の恩恵を受けることができます。
- ユニバーサルエディターは実装の真の分離もサポートしているので、開発者はユニバーサルエディターの汎用性の恩恵を受けることができます。これにより、開発者は SDK やテクノロジの制約を受けずに、事実上任意のフレームワークやアーキテクチャを利用できるようになります。
詳しくは、ユニバーサルエディターの AEM as a Cloud Service ドキュメントを参照してください。
アーキテクチャ architecture
ユニバーサルエディターは、AEM と連携してヘッドレスでコンテンツを作成するサービスです。
- ユニバーサルエディターは、
https://experience.adobe.com/#/aem/editor/canvasでホストされ、AEM 6.5 でレンダリングされたページを編集できます。 - AEM ページは、AEM オーサーインスタンスから Dispatcher を通じてユニバーサルエディターで読み取られます。
- Dispatcher と同じホストで実行されるニバーサルエディターサービスは、変更を AEM オーサーインスタンスに書き戻します。
要件 requirements
ユニバーサルエディターは、以下でサポートされています。
- AEM 6.5
- オンプレミスと AMS ホスティングの両方がサポートされています。
- AEM 6.5 LTS
- オンプレミスと AMS ホスティングの両方がサポートされています。
- AEM as a Cloud Service
このドキュメントでは、ユニバーサルエディターの AEM 6.5 のサポートに焦点を当てています。AEM 6.5 でユニバーサルエディターを使用するには、次が必要です。
- AEM 6.5 サービスパック 23 以降
- サービスパック 21 および 22 は、機能パックでもサポートされます。
- Dispatcher が適切に設定されている
設定 setup
ユニバーサルエディターをテストするには、次の操作が必要です。
設定が完了したら、アプリケーションを実装してユニバーサルエディターを使用できます。
サービスの設定 configure-services
ユニバーサルエディターでは、追加の設定が必要ないくつかのパッケージを活用します。
login-token cookie の SameSite 属性を設定します。 samesite-attribute
- Configuration Manager を開きます。
http://<host>:<port>/system/console/configMgr
- リストで Adobe Granite Token Authentication Handler を見つけて、「設定値を変更」をクリックします。
- ダイアログで、login-token cookie の SameSite 属性（
token.samesite.cookie.attr）の値をPartitionedに変更します。 - 「保存」をクリックします。
SAMEORIGIN ヘッダーの X-Frame オプションを削除します。 sameorigin
- Configuration Manager を開きます。
http://<host>:<port>/system/console/configMgr
- リストで Apache Sling Main Servlet を見つけて、「設定値を編集」をクリックします。
- 追加の応答ヘッダー 属性（
sling.additional.response.headers）からX-Frame-Options=SAMEORIGIN値が存在する場合は削除します。 - 「保存」をクリックします。
Adobe Granite Query Parameter Authentication Handler を設定します。 query-parameter
- Configuration Manager を開きます。
http://<host>:<port>/system/console/configMgr
- リストで Adobe Granite Query Parameter Authentication Handler を見つけて、「設定値を編集」をクリックします。
- 「パス」フィールド（
path）に、/を追加して有効にします。- 値が空の場合は、認証ハンドラーが無効になります。
- 「保存」をクリックします。
ユニバーサルエディターを開くコンテンツパスまたは sling:resourceTypes を定義します。 paths
-
Configuration Manager を開きます。
http://<host>:<port>/system/console/configMgr
-
リストで ユニバーサルエディター URL サービス を見つけて、「設定値を編集」をクリックします。
-
ユニバーサルエディターを開くコンテンツパスまたは
sling:resourceTypesを定義します。- 「ユニバーサルエディターを開くマッピング」フィールドに、ユニバーサルエディターを開くパスを指定します。
- 「ユニバーサルエディターで開く Sling:resourceTypes」フィールドに、ユニバーサルエディターによって直接開かれるリソースのリストを指定します。
-
「保存」をクリックします。
-
Externalizer の設定を確認し、少なくともローカル、オーサー、パブリッシュ環境が次の例のように設定されていることを確認します。
code language-text "local $[env:AEM_EXTERNALIZER_LOCAL;default=http://localhost:4502]", "author $[env:AEM_EXTERNALIZER_AUTHOR;default=http://localhost:4502]", "publish $[env:AEM_EXTERNALIZER_PUBLISH;default=http://localhost:4503]"
これらの設定手順が完了すると、AEM は次の順序でページのユニバーサルエディターを開きます。
- AEM は
Universal Editor Opening Mappingの下にあるマッピングを確認し、コンテンツがそこに定義されているパスの下にある場合は、ユニバーサルエディターが開かれます。 Universal Editor Opening Mappingで定義されたパスの下にないコンテンツの場合、AEM はコンテンツのresourceTypeが、ユニバーサルエディターで開かれる Sling:resourceTypes で定義されたものと一致するかどうかを確認し、コンテンツがこれらのタイプのいずれかに一致する場合は、${author}${path}.htmlでユニバーサルエディターが開かれます。- それ以外の場合は、AEM によってページエディターが開かれます。
次の変数は、Universal Editor Opening Mapping でマッピングを定義するために使用できます。
path：開くリソースのコンテンツパスlocalhost：スキーマなしのlocalhostの Externalizer エントリ（例：localhost:4502）author：スキーマなしのオーサーの Externalizer エントリ（例：localhost:4502）publish：スキーマなしのパブリッシュの Externalizer エントリ（例：localhost:4503）preview：スキーマなしのプレビューの Externalizer エントリ（例：localhost:4504）env：定義された Sling 実行モードに基づくprod、stage、devtoken：QueryTokenAuthenticationHandlerに必要なクエリトークン
マッピングの例：
-
AEM オーサーの
/content/fooの下にあるすべてのページを開きます。/content/foo:${author}${path}.html?login-token=${token}- これにより、
https://localhost:4502/content/foo/x.html?login-token=<token>が開きます。
-
リモート NextJS サーバー上の
/content/barの下にあるすべてのページを開き、すべての変数を情報として指定します/content/bar:nextjs.server${path}?env=${env}&author=https://${author}&publish=https://${publish}&login-token=${token}- これにより、
https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token>が開きます。
ユニバーサルエディターサービスの設定 set-up-ue
AEM を更新および設定すると、独自のローカル開発およびテスト用にローカルのユニバーサルエディターサービスを設定できます。
-
Node.js バージョン 20 以降をインストールします。
-
ソフトウェア配布から最新のユニバーサルエディターサービスをダウンロードして展開します
-
環境変数または
.envファイルを通じてユニバーサルエディターサービスを設定します。- 詳しくは、AEM as a Cloud Service ユニバーサルエディターのドキュメントを参照してください。
- 内部 IP の書き換えが必要な場合は、
UES_MAPPINGオプションを使用する必要があります。
-
universal-editor-service.cjsを実行します
Dispatcher の更新 update-dispatcher
AEM が設定され、ローカルのユニバーサルエディターサービスが実行されている場合は、Dispatcher で新しいサービスのリバースプロキシを許可する必要があります。
-
オーサーインスタンスの vhost ファイルを調整して、リバースプロキシを含めます。
code language-html <IfModule mod_proxy.c> ProxyPass "/universal-editor" "http://localhost:8080" ProxyPassReverse "/universal-editor" "http://localhost:8080" </IfModule>note note NOTE 8080 がデフォルトのポートです。 .envファイルのUES_PORTパラメーターを使用して変更した場合は、ここでポート値をそれに応じて調整する必要があります。 -
Apache を再起動します。
アプリの実装 instrumentation
AEM が更新され、ローカルのユニバーサルエディターサービスが実行されている場合は、ユニバーサルエディターを使用してヘッドレスコンテンツの編集を開始できます。
ただし、ユニバーサルエディターを利用するには、アプリを実装する必要があります。これには、エディターにコンテンツを保持する方法と場所を指示するメタタグを含める必要があります。この実装について詳しくは、AEM as a Cloud Service のユニバーサルエディターのドキュメントを参照してください。
AEM as a Cloud Service のユニバーサルエディターに関するドキュメントに従う場合、AEM 6.5 で使用する際に次の変更が適用されます。
-
メタタグのプロトコルは、
aemの代わりにaem65にする必要があります。code language-html <meta name="urn:adobe:aue:system:aemconnection" content={`aem65:${getAuthorHost()}`}/> -
ユニバーサルエディターサービスのエンドポイントは、メタタグを通じて通知する必要があります。
code language-html <meta name="urn:adobe:aue:config:service" content={`${getAuthorHost()}/universal-editor`}/> -
コンポーネント定義の
pluginsセクションでは、aemの代わりにaem65を使用する必要があります。
AEM 6.5 と AEM as a Cloud Service の違い differences
AEM 6.5 のユニバーサルエディターは、UI や多くの設定を含め、AEM as a Cloud Service と広く同じように動作します。ただし、注意する必要がある違いもいくつかあります。
- 6.5 のユニバーサルエディターは、ヘッドレスユースケースのみをサポートします。
- ユニバーサルエディターの設定は、6.5 ではわずかに異なります（現在のドキュメントで説明しているように）。
- 6.5 のユニバーサルエディターでは、AEM as a Cloud Service とは異なるアセットピッカーとコンテンツフラグメントピッカーが使用されます。