ユニバーサルエディターを使用した React アプリの編集
ユニバーサルエディターを使用してサンプル React アプリのコンテンツを編集する方法について説明します。コンテンツは、AEM のコンテンツフラグメント内に保存され、GraphQL API を使用して取得されます。
このチュートリアルでは、ローカル開発環境の設定、React アプリの実装とそのコンテンツの編集、ユニバーサルエディターを使用したコンテンツの編集のプロセスについて順を追って説明します。
学習内容
このチュートリアルでは、以下のトピックを扱います。
-
ユニバーサルエディターの簡単な概要
-
ローカル開発環境の設定
- AEM SDK：GraphQL API を使用して、React アプリのコンテンツフラグメント内に保存されたコンテンツを提供します。
- React アプリ：AEM のコンテンツを表示するシンプルなユーザーインターフェイス。
- ユニバーサルエディターサービス：ユニバーサルエディターと AEM SDK をバインドする ユニバーサルエディターサービスのローカルコピー。
-
ユニバーサルエディターを使用してコンテンツを編集するために React アプリを実装する方法
-
ユニバーサルエディターを使用して React アプリのコンテンツを編集する方法
ユニバーサルエディターの概要
ユニバーサルエディターは、コンテンツ作成者と開発者（フロントエンドとバックエンド）をサポートします。ユニバーサルエディターの主なメリットのいくつかを確認してみましょう。
- ヘッドレスコンテンツとヘッドフルコンテンツを WYSIWYG（What You See Is What You Get）モードで編集できるように作成されています。
- React、Angular、Vue などの様々なフロントエンドテクノロジーをまたいで一貫したコンテンツ編集エクスペリエンスを提供します。したがって、コンテンツ作成者は、基になるフロントエンドテクノロジーを気にせずにコンテンツを編集できます。
- フロントエンドアプリケーションでユニバーサルエディターを有効にするには、最小限の実装が必要です。したがって、開発者の生産性が最大化され、エクスペリエンスの作成に焦点を合わせることができます。
- 懸念事項をコンテンツ作成者、フロントエンド開発者、バックエンド開発者の 3 つの役割に分けることで、各役割は自分たちの中核的な職務に集中できます。
サンプル React アプリ
このチュートリアルでは、サンプル React アプリとして WKND Teams を使用します。WKND Teams React アプリには、チームメンバーとその詳細のリストが表示されます。
タイトル、説明、チームメンバーなどのチームの詳細は、AEM に「チーム」コンテンツフラグメントとして保存されます。同様に、名前、略歴、プロファイル画像などのユーザーの詳細は、AEM に「人物」コンテンツフラグメントとして保存されます。
React アプリのコンテンツは、GraphQL API を使用して AEM によって提供され、ユーザーインターフェイスは、Teams と Person という 2 つの React コンポーネントを使用して作成されます。
WKND Teams React アプリの作成方法を学ぶには、対応するチュートリアルを参照してください。チュートリアルについては、こちらを参照してください。