ページエディターとユニバーサルエディター page-editor-universal-editor

ページエディターは引き続きアドビでサポートされますが、ユニバーサルエディターにより、新しいプロジェクトに魅力的な可能性がもたらされます。

背景 background

アドビは、最新の JavaScript ベースの開発アプローチを採用した効率化されたエディターとして、2024年にユニバーサルエディターを導入しました。ユニバーサルエディターは、シームレスで拡張性の高いビジュアルコンテンツオーサリングエクスペリエンスを実現するアドビのビジョンです。

アドビは、AEM の長い歴史を通じてページエディターのリッチな機能セットとこれに投資してきた無数のプロジェクトを認識し、引き続きページエディターを完全にサポートしますが、イノベーションはユニバーサルエディターに焦点を当てます。

レコメンデーション recommendation

ユニバーサルエディターとページエディターの間には、急速に縮小してはいますが、依然として機能の格差が存在します(機能の比較について詳しくは、次の節を参照してください)。

経験則として:

  • 新規プロジェクト ​では、デフォルトでユニバーサルエディターを活用することをお勧めします。
  • 既存のプロジェクト ​では、引き続きページエディターを使用し、Edge Delivery やヘッドレス開発を開始する際にはユニバーサルエディターの使用を検討してください。

選択するエディターは、個々のプロジェクトのニーズに応じて決定する必要があります。

機能の比較 feature-comparison

2 つのエディター間の機能のギャップは常に縮まっているので、最新の開発状況について詳しくは、ユニバーサルエディターのリリースノートを必ず参照してください。

配信 delivery

ページエディター
メモ
ユニバーサルエディター
メモ
公開配信
[使用可能]{class="badge positive"}
コアコンポーネントおよび従来の AEM プロジェクトで使用することをお勧めします。
[使用不可]{class="badge negative"}
従来の AEM ページは通常、ページエディター固有のいくつかの機能に依存し、ユニバーサルエディターではそのままレプリケートすることが困難です。
Edge Delivery
[使用不可]{class="badge negative"}
[使用可能]{class="badge positive"}
ヘッドレス配信
[部分的に使用可]{class="badge yellow"}
SPA エディター非推奨(廃止予定)となり、ユニバーサルエディターが導入されました。
[使用可能]{class="badge positive"}
ユニバーサルエディターを使用すると、開発者は特定のフレームワーク要件や実装の制約を課すことなく、独自の web アプリを導入できます。

永続性 persistence

ページエディター
メモ
ユニバーサルエディター
メモ
ページコンポーネントの編集
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
コンテンツフラグメントの編集
[使用不可]{class="badge negative"}
[使用可能]{class="badge positive"}
新しいフラグメントの挿入や並べ替えを含めます。

機能 capabilities

ページエディター
メモ
ユニバーサルエディター
メモ
ページテンプレート
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
ユニバーサルエディターは、使用されるテンプレートシステムに依存しません。ただし、一般的な実装パターンでは、開発者が定義したテンプレートが優先されます。これは、最新のフロントエンドツールによって、開発者がコード内でテンプレートロジックを直接定義し、維持することがはるかに容易になったからです。
WYSIWYG の編集
[使用可能]{class="badge positive"}
ページに制限されます
[使用可能]{class="badge positive"}
ページとコンテンツフラグメントをサポートします
バリエーションを生成
[使用不可]{class="badge negative"}
[使用可能]{class="badge positive"}
拡張機能として使用できます
新規ブロックを挿入
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
ブロックを並べ替え
[使用可能]{class="badge positive"}
コンテキスト内のドラッグ&ドロップでは可能ですが、「ツリービュー」サイドパネルでは不可能です
[使用可能]{class="badge positive"}
「ツリービュー」サイドパネルのドラッグ&ドロップでは可能ですが、コンテキスト内ではまだ不可能です(計画済み)
ブロックを切り取り/コピー&ペースト
[使用可能]{class="badge positive"}
[使用不可]{class="badge negative"}
計画済み
スタイルを適用
[使用可能]{class="badge positive"}
スタイルは、スタイルシステムを使用して、コンポーネントに適用できます。
[使用可能]{class="badge positive"}
スタイルは、通常のコンポーネント(またはコンテンツフラグメント)のプロパティを使用して適用できます。 ユニバーサルエディターでは同様のスタイルピッカーは使用できませんが、複数選択ウィジェットを使用すると、非常に類似した UX を実現できます。
レイアウトを適用
[使用可能]{class="badge positive"}
作成者が 3 つの定義済みブレークポイントをまたいでコンポーネントのサイズを変更できるようにするには、Sites で AEM レスポンシブグリッドを実装する必要があります。
[使用可能]{class="badge positive"}
レイアウトは、通常のコンポーネント(またはコンテンツフラグメント)プロパティを使用して適用できますが、レスポンシブグリッドはサポートされていません。
取り消し - やり直し
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
公開(プレビューにも)
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
ワークフローを開始
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
拡張機能として使用できます
コメント
[使用可能]{class="badge positive"}
注釈の使用
[使用不可]{class="badge negative"}
計画済み
Workfront の統合
[使用不可]{class="badge negative"}
[使用可能]{class="badge positive"}
拡張機能として使用できます
MSM とローンチ
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
ページに拡張機能として使用できます
実験とパーソナライゼーション
[使用可能]{class="badge positive"}
ターゲットモードの使用
[使用可能]{class="badge positive"}
Edge Delivery Services に拡張機能として使用できます
コンテンツツリー
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
ツリー内で並べ替えることもできます
デバイスのシミュレーション
[使用可能]{class="badge positive"}
設定されたデバイスはシミュレートできますが、ユーザーはシミュレートする異なる画面サイズを手動で入力できません。
[使用可能]{class="badge positive"}
シミュレートする画面サイズは手動で入力できますが、デフォルトのブレークポイントは設定できません。
ページのロック
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
Sites コンソールで設定されたロックステータスを適用し、エディターからページをロック/ロック解除できる拡張機能が使用できます
ページプロパティ
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
サイト管理者から使用可能で、エディターからページのプロパティにもアクセスできる拡張機能を備えています
複数フィールドのプロパティ
[使用可能]{class="badge positive"}
[使用不可]{class="badge negative"}
計画済み
リモート DAM
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
ページバージョン管理
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
タイムワープ差分表示
[使用可能]{class="badge positive"}
[使用不可]{class="badge negative"}
計画済み
管理画面で表示
[使用可能]{class="badge positive"}
[使用可能]{class="badge positive"}
ページに拡張機能として使用できます
ページステータスを表示
[使用可能]{class="badge positive"}
[使用不可]{class="badge negative"}
Sites コンソールで使用可能
拡張機能
[使用可能]{class="badge positive"}
AEM オーバーレイとして
[使用可能]{class="badge positive"}
App Builder を使用し、AEM 固有の知識をほとんど必要とせずに、明確に定義された拡張ポイントとして

ユニバーサルエディターの導入 adopt-ue

ユニバーサルエディターには多くのメリットがあり、新しいプロジェクトにとって優れたソリューションになります。

  • ビジュアル編集: ​ページエディターと同様に、作成者はプレビュー内でコンテンツを直接編集し、訪問者エクスペリエンスに影響する変更を即座に確認できます。
  • 将来性の検証:AEMのロードマップでは ユニバーサルエディターがビジュアルエディターとして優先されます。 これを採用することで、最新のイノベーションと機能強化にアクセスできます。
  • よりシンプルな統合: ​ユニバーサルエディターを使用するのに AEM 固有の SDK は必要ないので、テクニカルスタックのロックインが軽減されます。
  • 独自のアプリを導入: ​ユニバーサルエディターは任意の web フレームワークやアーキテクチャをサポートしているので、複雑なリファクタリングを必要とせずに導入できます。
  • 拡張性: ​ユニバーサルエディターは、生成 AI、Workfront などとの統合を含む強力な拡張フレームワークのメリットを受けます。

ユニバーサルエディターへの移行 migrate-ue

ページエディターからユニバーサルエディターへの直接的な移行パスはありません。これは、2 つのテクノロジーの基本的な違いによるものです。

  • ユニバーサルエディターでは、テンプレートエディター、スタイルシステム、レスポンシブグリッドなどの機能は再導入されません。

    • これらのユースケースでは、Edge Delivery Services またはヘッドレスプロジェクトの無駄のないフロントエンド CSS と JavaScript を使用して、より効率的に処理できるようになりました。
  • ユニバーサルエディターはサービスとしてのエディターなので、実装者がコンポーネントダイアログに CSS または JS を挿入できません。

    • これにより、ページエディターからのコンポーネントダイアログの自動変換を防ぐことができます。
    • これは、カスタムウィジェット、フィールド検証、表示/非表示ルール、テンプレートベースのカスタマイズなど、ダイアログの多くの領域に影響を与えます。
      • このような機能は引き続き使用可能ですが、ユニバーサルエディターでは、ダイアログにデプロイされたカスタム JavaScript の代わりに、設定を通じて解決します。

ユニバーサルエディターでは、従来の AEM プロジェクト(例:コアコンポーネントを使用して作成されたプロジェクト)のページの編集を技術的に有効にすることができますが、これらのサイトは通常、スタイルシステム、レスポンシブグリッド、編集可能なテンプレート、ダイアログ内のカスタム JavaScript など、ページエディター固有のいくつかの機能に依存しています。

ユニバーサルエディターは、これらの従来の機能をサポートしない、より効率化された最新のアプローチを採用しているので、このようなサイトを移行するには大幅なリファクタリングが必要になります。このため、ページエディターサイトをユニバーサルエディターに移行することは、Edge Delivery Services に移行するプロジェクトにのみ推奨されます。

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