ユニバーサルエディターのユースケースと学習パス use-cases-learning-paths

ユニバーサルエディターの主なユースケースと、その使用方法の詳細、独自のプロジェクトでの実装方法について説明します。

概要 overview

ユニバーサルエディターは、Adobe Experience Manager Sites の一部である多用途のビジュアルエディターです。これにより、オーサーは、ヘッドレスまたはヘッドフルエクスペリエンスに対して、見たままが得られる(WYSIWYG)編集を実行できます。

このドキュメントでは、これら 2 つのユースケースを詳しく説明し、ユニバーサルエディターを独自のプロジェクトに実装できるように、これらのユースケースについて詳しく説明する方法を示します。

TIP
ユニバーサルエディターの完全な概要と値については、ドキュメント ユニバーサルエディターの概要を参照してください。

ユースケース use-cases

ユニバーサルエディターは、コンテンツ作成者が作成するコンテンツの種類に関係なく、便利で直感的なビジュアルエディターを提供します。 主なユースケースは次の 2 つです。

  • WYSIWYG オーサリング- AEM Sites コンソールを使用すると、ユニバーサルエディターを使用してコンテンツを管理し、AEM内でページを作成できます
  • ヘッドレスオーサリング- ユニバーサルエディターを使用して、独自のカスタムヘッドレスアプリケーションでコンテンツを作成します。

WYSIWYG オーサリング wysiwyg-authoring

AEMを既に熟知している場合は、Sites コンソールを使用してページを作成および管理したあと、ユニバーサルエディターで編集できます。

この方法では、ページ管理(コピー、貼り付け、移動)やワークフローなど、Sites コンソールで使用できるツールを利用できるだけでなく、最新のユニバーサルエディターも利用できます。

これがあなたのユースケースである場合、すぐに次の手順として、AEMのユニバーサルエディターを使用して開始する方法の概要については、次のドキュメントを参照してください。

  1. Edge Delivery Servicesを使用した WYSIWYG オーサリングの開発者向けスタートガイド- AEMでの最初のユニバーサルエディタープロジェクトの概要
  2. ユニバーサルエディターで使用するために実装されたブロックの作成- ブロックを実装して、コンテンツをユニバーサルエディターで編集可能にする方法を説明します
  3. Edge Delivery Services プロジェクトでの WYSIWYG オーサリング向けコンテンツモデリング- ユニバーサルエディターで使用するためにコンテンツを効果的にモデル化するためのブロックの構造化方法の詳細について説明します。

これらのドキュメントを読んだら、このページに戻って、ヘッドレスオーサリングのユースケースとユニバーサルエディターの一般的な仕組みについて学ぶことができます。

ヘッドレスオーサリング headless-authoring

既にヘッドレスアプリがある場合は、ユニバーサルエディターを使用してアプリのコンテンツを作成し、そのコンテンツをAEMでコンテンツフラグメントとして保持できます。 唯一の要件は、ユニバーサルエディターを使用できるようにアプリのインストルメントが行われることです。

これがあなたのユースケースである場合、すぐに次の手順として、ユニバーサルエディターを使用するために実装されたヘッドレスアプリの例については、次のドキュメントを参照してください。

このドキュメントを読んだら、このページに戻って WYSIWYG オーサリングのユースケースとユニバーサルエディターの一般的な動作を確認してください。

ユニバーサルエディターの仕組み how-ue-works

ユニバーサルエディターの機能は、あらゆるコンテンツをインプレースで作成する機能で、コンテンツ作成者はコンテンツに関係なく、完全に直感的な統一された UI を提供します。

ユニバーサルエディターは次のように動作します。

  1. 開発者は、ユニバーサルエディターを使用するアプリまたはページをインストルメントします。 このインストルメンテーションは、編集可能なコンテンツと、その永続化方法をエディターに指示します。

    • WYSIWYG オーサリングの場合、ボイラープレートテンプレートを使用して作成されたページが自動的に実装されます。
    • ヘッドレスオーサリングの場合、アプリのインストルメント化は簡単にできます。
  2. コンテンツ作成者がユニバーサルエディターを読み込むと、編集用にページが読み込まれます。 実装されているので、編集可能なコンテンツとその表現および保持方法が把握されています。

  3. コンテンツ作成者が、直観的な WYSIWYG インターフェイスを使用して、ページコンテンツをインプレース編集します。

  4. ユニバーサルエディターは、変更内容を自動的にAEMに戻します。

ユニバーサルエディターのアーキテクチャについて詳しくは、「ユニバーサルエディターのアーキテクチャ のドキュメントを参照してください

ユニバーサルエディターの概念 concepts

ページまたはアプリをユニバーサルエディターで編集できるようにするには、適切にインストルメント化する必要があります。 実装が完了すると、プロジェクトのニーズに合わせてさらに調整できます。

  • 属性とタイプ- アプリまたはページをユニバーサルエディターで編集できるようにするには、適切にインストルメントを行う必要があります。 これには、エディターがアプリのコンテンツを編集できるように、適切なメタデータを含めることが含まれます。
  • モデル定義、フィールド、コンポーネントタイプ- コンポーネントの編集を有効にするメタデータが存在したら、エディターのプロパティパネルで、操作できるフィールドとコンポーネントタイプを定義します。 これを行うには、モデルを作成し、コンポーネントからそのモデルにリンクします。
  • ユニバーサルエディターのオーサリングエクスペリエンスのカスタマイズ- アプリまたはページのインストルメントが完全に行われると、使用可能なコンポーネントをフィルタリングしたり、エディターの機能を拡張したりして、ユニバーサルエディターのエクスペリエンスをさらに調整できます。
  • ユニバーサルエディターイベント- ユニバーサルがコンテンツと UI に変更を送信する標準イベントに反応して、アプリをさらにカスタマイズできます。
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab