AEM のユニバーサルエディターの概要 getting-started

ユニバーサルエディターへのアクセス権を取得する方法と、これを使用するために最初の AEM アプリのインストルメントを開始する方法について説明します。

TIP
すぐに例を確認したい場合は、GitHub のユニバーサルエディターサンプルアプリを参照してください。

ユニバーサルエディターは任意のソースからコンテンツを編集できますが、このドキュメントでは AEM アプリを例として使用します。このドキュメントでは、これらの手順を説明します。

ページの実装 instrument-page

ユニバーサルエディターでは、エディターでページをレンダリングおよび編集するために JavaScript ライブラリが必要です。

さらに、ユニバーサルエディターサービスでは、編集中のアプリ内のコンテンツに適したバックエンドシステムを識別して使用するために、統一リソース名(URN)が必要です。したがって、コンテンツをコンテンツリソースにマッピングし直すには、URN スキーマが必要です。

ユニバーサルエディター CORS ライブラリを含める cors-library

ユニバーサルエディターをアプリに接続するには、アプリにユニバーサルエディター CORS ライブラリを含める必要があります。アプリに次のスクリプトを追加します。

 <script src="https://universal-editor-service.adobe.io/cors.js" async></script>

接続の作成 connections

アプリで使用する接続は、ページの <head> 内に <meta> タグとして格納されます。

<meta name="urn:adobe:aue:<category>:<referenceName>" content="<protocol>:<url>">
  • <category> - これは、2 つのオプションを持つ接続の分類です。

  • <referenceName> - 接続を識別するためにドキュメントで再利用される短い名前です。例:aemconnection

  • <protocol> - 使用するユニバーサルエディター永続化サービスの永続化プラグインを示します。例:aem

  • <url> - 変更が保持されるシステムの URL です。例:http://localhost:4502

識別子 urn:adobe:aue:system は、Adobe Universal Editor の接続を表します。

data-aue-resourceurn プレフィックスを使用して識別子を短縮します。

data-aue-resource="urn:<referenceName>:<resource>"
  • <referenceName> - <meta> タグに記載されている名前付きリファレンスです。例:aemconnection
  • <resource> - ターゲットシステム内のリソースへのポインターです。例:/content/page/jcr:content などの AEM コンテンツのパス
TIP
ユニバーサルエディターが必要とするデータ属性とタイプについて詳しくは、ドキュメント属性とタイプを参照してください。

接続例 example

<meta name="urn:adobe:aue:system:<referenceName>" content="<protocol>:<url>">

<html>
<head>
    <meta name="urn:adobe:aue:system:aemconnection" content="aem:https://localhost:4502">
    <meta name="urn:adobe:aue:system:fcsconnection" content="fcs:https://example.franklin.adobe.com/345fcdd">
</head>
<body>
        <aside>
          <ul data-aue-resource="urn:aemconnection:/content/example/list" data-aue-type="container">
            <li data-aue-resource="urn:aemconnection:/content/example/listitem" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">Jane Doe</p>
              <p data-aue-prop="title" data-aue-type="text">Journalist</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>

...

            <li data-aue-resource="urn:fcsconnection:/documents/mytext" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">John Smith</p>
              <p data-aue-resource="urn:aemconnection:/content/example/another-source" data-aue-prop="title" data-aue-type="text">Photographer</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>
          </ul>
        </aside>
</body>
</html>

設定 configuration-settings

接続 URN で config プレフィックスを使用して、必要に応じてサービスおよび拡張エンドポイントを設定します。

アドビがホストするユニバーサルエディターサービスを使用しない場合は、これはメタタグで設定できます。ユニバーサルエディターが提供するデフォルトのサービスエンドポイントを上書きするには、独自のサービスエンドポイントを設定します。

  • メタ名 - urn:adobe:aue:config:service
  • メタコンテンツ - content="https://adobe.com"(例)
<meta name="urn:adobe:aue:config:service" content="<url>">

ページに対して特定の拡張機能のみを有効にしたい場合は、メタタグで設定できます。拡張機能を取得するには、拡張機能エンドポイントを設定します。

  • メタ名:urn:adobe:aue:config:extensions
  • メタコンテンツ:content="https://adobe.com,https://anotherone.com,https://onemore.com"(例)
<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">

ユニバーサルエディターを開くコンテンツパスまたは sling:resourceTypes を定義します。 (オプション) content-paths

ページエディターを使用して既存のAEM プロジェクトがある場合、コンテンツ作成者がページを編集すると、ページはページエディターで自動的に開きます。 コンテンツパスまたは sling:resourceType に基づいてAEMを開くエディターを定義できるので、選択したコンテンツに必要なエディターに関係なく、作成者のエクスペリエンスがシームレスになります。

  1. Configuration Manager を開きます。

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

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

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

    • ユニバーサルエディターを開くマッピング フィールドで、ユニバーサルエディターを開くパスを指定します。
    • ユニバーサルエディターで開く Sling:resourceTypes フィールドに、ユニバーサルエディターによって直接開かれるリソースのリストを指定します。
  4. 保存」をクリックします。

AEMは、この設定に基づくページのユニバーサルエディターを次の順序で開きます。

  1. AEMは Universal Editor Opening Mapping の下のマッピングをチェックします。コンテンツがそこに定義されたパスの下にある場合は、ユニバーサルエディターが開きます。
  2. Universal Editor Opening Mapping で定義されたパスにないコンテンツの場合、AEMは、コンテンツの resourceType が、ユニバーサルエディターで開かれる Sling:resourceTypes で定義されたものと一致するかどうかを確認し コンテンツがこれらの型のいずれかに一致する場合、ユニバーサルエディターは ${author}${path}.html で開かれます。
  3. それ以外の場合は、AEMによってページエディターが開きます。

ユニバーサルエディターでマッピングを開く」フィールドでマッピングを定義するには、次の変数を使用できます。

  • path:開くリソースのコンテンツパス
  • localhost:スキーマを含まない localhost (例:localhost:4502)の Externalizer エントリ
  • author:スキーマなしのオーサー用 Externalizer エントリ(例:localhost:4502
  • publish:スキーマを使用しないパブリッシュ用の Externalizer エントリ(例:localhost:4503
  • preview:スキーマを使用しないプレビュー用の Externalizer エントリ(例:localhost:4504
  • env:定義された Sling 実行モードに基づく prodstagedev
  • token: QueryTokenAuthenticationHandler にクエリトークンが必要です

マッピングの例 example-mappings

  • 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> が開きます

ユニバーサルエディターを使用する準備が整いました youre-ready

ユニバーサルエディターを使用するようにアプリのインストルメントが行われました。

コンテンツ作成者が簡単かつ直感的にユニバーサルエディターを使用してコンテンツを作成する方法について詳しくは、ユニバーサルエディターを使用したコンテンツの作成を参照してください。

その他のリソース additional-resources

ユニバーサルエディターの詳細については、次のドキュメントを参照してください。

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab