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

最終更新日： 2023-11-18

ユニバーサルエディターへのアクセス権を取得する方法と、これを使用するために最初の 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.TokenAuthenticationHandler の SameSite 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:aue:<category>:<referenceName>" content="<protocol>:<url>">
  • <category> — これは、2 つのオプションを持つ接続の分類です。
  • <referenceName> - 接続を識別するためにドキュメントで再利用される短い名前です。例：aemconnection
  • <protocol> - 使用するユニバーサルエディター永続化サービスの永続化プラグインを示します。例：aem
  • <url> - 変更が保持されるシステムの URL です。例：http://localhost:4502

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

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

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

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

接続例

<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 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>

設定

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

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

  • メタ名 — 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>">

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

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

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

その他のリソース

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

前のページ
Next page

このページ