ユニバーサルエディター universal-editor
ユニバーサルエディターの柔軟性と、AEM 6.5 LTS を使用してヘッドレスエクスペリエンスを強化する方法について説明します。
概要 overview
ユニバーサルエディターは、Adobe Experience Manager Sites の一部である多用途のビジュアルエディターです。作成者は、ヘッドレスエクスペリエンスに対して見たままが得られる（WYSIWYG）編集を行うことができます。
- 作成者は、ユニバーサルエディターがAEM ヘッドレスコンテンツのすべてのフォームに対して同じ一貫性のあるビジュアル編集をサポートするので、ユニバーサルエディターの柔軟性の利点を活用できます。
- ユニバーサルエディターは実装の真の分離をサポートするので、開発者はユニバーサルエディターの汎用性のメリットを受けます。 SDKやテクノロジに制約を課すことなく、任意のフレームワークやアーキテクチャを使用できます。
詳しくは、ユニバーサルエディターの AEM as a Cloud Service ドキュメントを参照してください。
アーキテクチャ architecture
ユニバーサルエディターは、AEMと連携してコンテンツをヘッドレスにオーサリングするサービスです。
- ユニバーサルエディターは
https://experience.adobe.com/#/aem/editor/canvasでホストされ、AEM 6.5 LTS によってレンダリングされたページを編集できます。 - AEMページは、ユニバーサルエディターによって、AEM オーサーインスタンスから Dispatcher を介して読み取られます。
- Dispatcherと同じホスト上で動作するユニバーサルエディターサービスが、変更内容をAEM オーサーインスタンスに書き戻します。
要件 requirements
ユニバーサルエディターは、以下でサポートされています。
- AEM 6.5 LTS GA
- オンプレミスと AMS ホスティングの両方がサポートされています。
- AEM 6.5
- オンプレミスと AMS ホスティングの両方がサポートされています。
- AEM as a Cloud Service （リリース
2023.8.13099以降）
このドキュメントでは、ユニバーサルエディターのAEM 6.5 LTS サポートに焦点を当てます。 AEM 6.5 LTS でユニバーサルエディターを使用するには、次が必要です。
- AEM 6.5 LTS GA
- Dispatcherが適切に設定されている
設定 setup
ユニバーサルエディターを使用するには、次の手順に従います。
設定が完了したら、 ユニバーサルエディターを使用するようにアプリケーションをインストルメントできます。
サービスの設定 configure-aem
ユニバーサルエディターは、設定が必要な多数のサービスに依存しています。
login-token cookie に SameSite 属性を設定します。 samesite-attribute
- Configuration Manager を開きます。
http://<host>:<port>/system/console/configMgr
- リストで Adobe Granite トークン認証ハンドラー を見つけて、「設定値を変更」をクリックします。
- ダイアログで、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 を見つけ、設定値を編集 をクリックします。
X-Frame-Options=SAMEORIGIN追加の応答ヘッダー 属性（）が存在する場合は、その属性からsling.additional.response.headers値を削除します。- 「保存」をクリックします。
Adobe Granite クエリパラメーター認証ハンドラーを設定します。 query-parameter
- Configuration Manager を開きます。
http://<host>:<port>/system/console/configMgr
- リストの Adobe Granite クエリパラメーター認証ハンドラー を見つけて、「設定値を編集」をクリックします。
- パス フィールド（
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 です。 UES_PORTファイル.envのパラメーターを使用してこの値を変更した場合は、ポートの値を適宜調整する必要があります。 -
Apache を再起動します。
アプリの実装 instrumentation
AEMが更新され、ローカルのユニバーサルエディターサービスが実行されている状態で、ユニバーサルエディターを使用してヘッドレスコンテンツの編集を開始できます。
ただし、ユニバーサルエディターを利用するには、アプリのインストルメントを行う必要があります。 これには、コンテンツを保持する方法と場所をエディターに指示するメタタグを含める必要があります。 この実装について詳しくは、AEM as a Cloud Serviceのユニバーサルエディターのドキュメントを参照してください。
AEMを使用したユニバーサルエディターのドキュメントに従う場合、AEM as a Cloud Service 6.5 LTS で使用する際には次の変更が適用されます。
-
メタタグのプロトコルは、
aem65ではなくaemにする必要があります。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セクションでは、aem65の代わりにaemを使用する必要があります。
AEM 6.5 LTS とAEM as a Cloud Serviceの違い differences
AEM 6.5 LTS のユニバーサルエディターは、UI や多くの設定を含め、AEM as a Cloud Serviceと広く同じように機能します。 ただし、注意すべき違いがあります。
- 6.5 LTS のユニバーサルエディターは、ヘッドレスユースケースのみをサポートしています。
- ユニバーサルエディターの設定は、（現在のドキュメントで説明されているように 6.5 LTS の場合若干異なります。
- 6.5 LTS のユニバーサルエディターは、AEM as a Cloud Serviceとは異なるアセットピッカーと異なるコンテンツフラグメントピッカーを使用します。