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

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

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

オンボーディング手順 onboarding

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

AEM アプリをオンボーディングし、ユニバーサルエディターを使用できるようにするには、手順がいくつかあります。

このドキュメントでは、これらの手順を説明します。

ユニバーサルエディターへのアクセスをリクエスト request-access

最初にユニバーサルエディターへのアクセスをリクエストする必要があります。`https://experience.adobe.com/#/aem/editor`` を開いてサインインし、ユニバーサルエディターにアクセスできるかどうか検証します。

アクセス権がない場合は、同じページにリンクされたフォームからリクエストできます。

ユニバーサルエディターへのアクセスをリクエスト

利用申請」をクリックして、アクセスをリクエストするフォームに入力します。リクエストを確認したアドビ担当者から、ユースケースについて話し合うために連絡が届きます。

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

ユニバーサルエディターで使用できるようにアプリの実装を行う前に、次の依存関係を含める必要があります。

@adobe/universal-editor-cors

実装を有効にするには、以下の読み込みを index.js に追加する必要があります。

import "@adobe/universal-editor-cors";

非 React アプリの代替 alternative

React アプリを実装していない場合や、サーバーサイドでのレンダリングが必要な場合は、ドキュメント本文に次のものを含める方法もあります。

<script src="https://universal-editor-service.experiencecloud.live/corslib/LATEST" async></script>

常に最新バージョンをお勧めしますが、重大な変更があった場合には以前のバージョンのサービスを参照できます。

  • https://universal-editor-service.experiencecloud.live/corslib/LATEST - 最新の UE CORS ライブラリ
  • https://universal-editor-service.experiencecloud.live/corslib/2/LATEST - バージョン 2.x の最新の UE CORS ライブラリ
  • https://universal-editor-service.experiencecloud.live/corslib/2.1/LATEST - バージョン 2.1.x の最新の UE CORS ライブラリ
  • https://universal-editor-service.experiencecloud.live/corslib/2.1.1 - バージョン 2.1.1 の正確な UE CORS ライブラリ

必要な OSGi 設定を追加 osgi-configurations

ユニバーサルエディターを使用して AEM コンテンツをアプリで編集するには、AEM 内で CORS と Cookie の設定を行う必要があります。

次の OSGi 設定は、AEM オーサリングインスタンスで設定する必要があります。

  • com.day.crx.security.token.impl.impl.TokenAuthenticationHandlerSameSite Cookies = None
  • org.apache.sling.engine.impl.SlingMainServlet の X-FRAME-OPTIONS: SAMEORIGIN ヘッダーを削除します

com.day.crx.security.token.impl.impl.impl.TokenAuthenticationHandler samesite-cookies

ログイントークン cookie は、サードパーティドメインとして AEM に送信する必要があります。したがって、SameSite cookie を明示的に None に設定する必要があります。

このプロパティは、com.day.crx.security.token.impl.impl.TokenAuthenticationHandler OSGi 設定で設定される必要があります。

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="sling:OsgiConfig"
          token.samesite.cookie.attr="None" />

org.apache.sling.engine.impl.SlingMainServlet sameorigin

X-Frame-Options: SAMEORIGIN は、iframe 内で AEM ページのレンダリングを防ぎます。ヘッダーを削除すると、ページを読み込むことができます。

このプロパティは、org.apache.sling.engine.impl.SlingMainServlet OSGi 設定で設定する必要があります。

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="sling:OsgiConfig"
          sling.additional.response.headers="[X-Content-Type-Options=nosniff]"/>

ページの実装 instrument-page

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

接続の作成 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>">

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

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

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

その他のリソース additional-resources

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

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