ドキュメントAEM 6.5 LTSユーザーガイド

ユニバーサルエディターについて universal-editor

Last update: Fri Feb 06 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用対象：
  • Experience Manager 6.5 LTS

作成対象：

  • 開発者

ユニバーサルエディターの柔軟性と、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 オーサーインスタンスからDispatcherを介してAEM ページを読み取ります。
  • Dispatcher と同じホストで実行されるユニバーサルエディターサービスは、変更を AEM オーサーインスタンスに書き戻します。

ユニバーサルエディターを使用したオーサーフロー

要件 requirements

以下では、ユニバーサルエディターをサポートしています。

  • AEM 6.5 LTS GA
    • オンプレミスおよびAdobe Managed Services（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

ユニバーサルエディターを使用するには、次の手順を実行します。

  1. AEM オーサーインスタンスでサービスを設定します。
  2. ローカルのユニバーサルエディターサービスを設定します。
  3. ユニバーサルエディターサービスを許可するようにDispatcherを調整します。

設定が完了したら、アプリケーションを実装してユニバーサルエディターを使用できます。

サービスの設定 configure-aem

ユニバーサルエディターは、設定が必要な多数のサービスに依存しています。

  1. Configuration Manager を開きます。
    • http://<host>:<port>/system/console/configMgr
  2. リストで Adobe Granite Token Authentication Handler を見つけて、「設定値を変更」をクリックします。
  3. ダイアログで、login-token cookie の SameSite 属性（token.samesite.cookie.attr）の値を Partitioned に変更します。
  4. 「保存」をクリックします。

SAMEORIGIN ヘッダーの X-Frame オプションを削除します。 sameorigin

  1. Configuration Manager を開きます。
    • http://<host>:<port>/system/console/configMgr
  2. リストで Apache Sling Main Servlet を見つけて、「設定値を編集」をクリックします。
  3. 追加の応答ヘッダー​属性（sling.additional.response.headers）から X-Frame-Options=SAMEORIGIN 値が存在する場合は削除します。
  4. 「保存」をクリックします。

Adobe Granite クエリパラメーター認証ハンドラーを設定する query-parameter

  1. Configuration Manager を開きます。
    • http://<host>:<port>/system/console/configMgr
  2. リストで Adobe Granite Query Parameter Authentication Handler を見つけて、「設定値を編集」をクリックします。
  3. 「パス」フィールド（path）に、/ を追加して有効にします。
    • 値が空の場合は、認証ハンドラーが無効になります。
  4. 「保存」をクリックします。

ユニバーサルエディターで開くコンテンツパスまたは sling:resourceTypes を定義する paths

  1. Configuration Manager を開きます。

    • http://<host>:<port>/system/console/configMgr

  2. リストで​ ユニバーサルエディター URL サービス ​を見つけて、「設定値を編集」をクリックします。

  3. ユニバーサルエディターを開くコンテンツパスまたは sling:resourceTypes を定義します。

    • 「ユニバーサルエディターを開くマッピング」フィールドに、ユニバーサルエディターを開くパスを指定します。
    • ユニバーサルエディターで開く「Sling:resourceTypes」フィールドに、ユニバーサルエディターで直接開くリソースのリストを入力します

  4. 「保存」をクリックします。

  5. 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は次の順序でページ用のユニバーサルエディターを開きます。

  1. AEMは Universal Editor Opening Mapping の下のマッピングを確認し、コンテンツがそこに定義されたパスの下にある場合は、ユニバーサルエディターが開きます。

  2. Universal Editor Opening Mapping で定義されているパス外のコンテンツの場合、AEMは、コンテンツ resourceType が Sling:resourceTypes のエントリと一致するかどうかを確認します。このエントリはユニバーサルエディターで開かれ す。 一致する場合、AEMは ${author}${path}.html でユニバーサルエディターにコンテンツを開きます。

  3. それ以外の場合は、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、dev
  • token：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 を更新および設定すると、独自のローカル開発およびテスト用にローカルのユニバーサルエディターサービスを設定できます。

  1. Node.js バージョン 20 以降をインストールします。

  2. ​ ソフトウェア配布 ​ から最新のユニバーサルエディターサービスをダウンロードして展開します

  3. 環境変数または .env ファイルを使用してユニバーサルエディターサービスを設定します。

  4. universal-editor-service.cjs を実行します

Dispatcher の更新 update-dispatcher

AEMが設定され、ローカルのユニバーサルエディターサービスが実行されている場合は、（Dispatcherで ​ 新しいサービスのリバースプロキシを許可する必要があ ​ ます。

  1. オーサーインスタンスの 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 パラメーターを使用して変更した場合は、ここでポート値をそれに応じて調整する必要があります。

  2. Apache を再起動します。

アプリの実装 instrumentation

AEM が更新され、ローカルのユニバーサルエディターサービスが実行されている場合は、ユニバーサルエディターを使用してヘッドレスコンテンツの編集を開始できます。

ただし、ユニバーサルエディターを利用するには、アプリのインストルメントを行う必要があります。 これには、コンテンツを保持する方法と場所をエディターに指示するメタタグを含める必要があります。 この実装について詳しくは、AEM as a Cloud Service のユニバーサルエディターのドキュメントを参照してください。

AEMを使用したユニバーサルエディターのドキュメントに従う場合、AEM as a Cloud Service 6.5 LTS で使用する際には次の変更が適用されます。

  • メタタグのプロトコルは、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 を使用する必要があります。

TIP
ユニバーサルエディターの包括的な開発者ガイドについては、AEM as a Cloud Service ドキュメントの AEM開発者向けユニバーサルエディターの概要 ​ を参照してください。 この節で説明するAEM 6.5 LTS の変更点に注意してください。

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とは異なるアセットピッカーと異なるコンテンツフラグメントピッカーを使用します。
recommendation-more-help
51c6a92d-a39d-46d7-8e3e-2db9a31c06a2