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

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

ヒント

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

オンボーディング手順

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

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

  1. ユニバーサルエディターへのアクセスをリクエストします。
  2. ユニバーサルエディターのコアライブラリを含めます。
  3. 必要な OSGi 設定を追加します。
  4. ページを実装します。

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

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

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

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

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

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

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

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

@adobe/universal-editor-cors

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

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

非 React アプリの代替

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

<script src="https://cdn.jsdelivr.net/gh/adobe/universal-editor-cors/dist/universal-editor-embedded.js" async></script>

必要な OSGi 設定を追加

ユニバーサルエディターを使用して 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

ログイントークン 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

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]"/>

ページの実装

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

ページに追加されたインストルメンテーション属性は、ほとんどが HTML マイクロデータで構成されており、HTML により適切な意味を持たせたり、HTML 文書をインデックス化したりなどに使用することもできる、業界標準です。

接続の作成

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

<meta name="urn:adobe:aem:editor:<referenceName>" content="<protocol>:<url>">
  • <referenceName> - 接続を識別するためにドキュメントで再利用される短い名前です。例:aemconnection
  • <protocol> - 使用するユニバーサルエディター永続化サービスの永続化プラグインを示します。例:aem
  • <url> - 変更が保持されるシステムの URL です。例:http://localhost:4502

識別子 adobe:aem:editor は、ユニバーサルエディターのAdobeを表します。

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

itemid="urn:<referenceName>:<resource>"
  • <referenceName> - <meta> タグに記載されている名前付きリファレンスです。例:aemconnection
  • <resource> - ターゲットシステム内のリソースへのポインターです。例:/content/page/jcr:content などの AEM コンテンツのパス
ヒント

ユニバーサルエディターが必要とするデータ属性とタイプについて詳しくは、ドキュメント属性とタイプを参照してください。

接続例

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

...

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

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

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

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

その他のリソース

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

このページ