はじめに
開発者向けのマルチパートチュートリアルへようこそ。ここでは、AEM SPA エディターを使用して編集可能な AEM コンテンツで既存の React ベース（Next.js）のリモート SPA を拡張する方法を見ていきます。
このチュートリアルは、AEM の GraphQL API を介して AEM コンテンツフラグメントコンテンツを使用する React アプリである WKND GraphQL アプリをベースにしていますが、SPA コンテンツのコンテキスト内オーサリングは提供していません。
このチュートリアルについて
このチュートリアルでは、AEM のコンテキスト外で動作している SPA やリモート SPA を、AEM でオーサリングしたコンテンツを使用および配信するように更新する方法について説明します。
このチュートリアルのほとんどのアクティビティでは JavaScript による開発に重点が置かれていますが、AEM を中心とする非常に重要な側面についても扱います。こうした側面としては、AEM でコンテンツをオーサリングおよび保存する場所の定義や、AEM ページへの SPA ルートのマッピングなどがあります。
このチュートリアルは AEM as a Cloud Service で動作するように作られており、次の 2 つのプロジェクトで構成されています。
- AEM プロジェクト には、AEM にデプロイする必要がある設定とコンテンツが含まれています。
- WKND アプリ プロジェクトは、AEM の SPA エディターと統合する SPA です。
最新のコード
- このチュートリアルのコードは、GitHub の
remote-spa-tutorialフォルダーにあるコードを出発点としています。
前提条件
このチュートリアルでは、次の項目が必要です。
このチュートリアルでは、次を前提としています。
- IDE としての Microsoft® Visual Studio Code
~/Code/aem-guides-wknd-graphql/remote-spa-tutorialの作業ディレクトリ- AEM SDK を
http://localhost:4502でオーサーサービスとして実行 adminパスワードを持つローカルアカウントadminでの AEM SDK の実行- SPA が
http://localhost:3000で動作していること
1. SPA エディターに対応する AEM の設定
SPA を AEM SPA エディターと統合するには、AEM の設定が必要です。これらの設定は、AEM プロジェクトを通じて管理およびデプロイされます。この章では、必要な設定とその定義方法について説明します。
2. SPA のブートストラップ
AEM SPA エディターで SPA をオーサリングコンテキストに統合するには、SPA に対していくつかの追加を行う必要があります。
3. 編集可能な固定コンポーネント
まず、編集可能な「固定コンポーネント」を SPA に追加する方法を調べます。この例では、特定の編集可能なコンポーネントを SPA に配置する方法を示しています。作成者はコンポーネントのコンテンツを変更できますが、コンポーネントを削除したり、コンポーネントの配置や位置またはサイズを変更したりすることはできません。
4. 編集可能なコンテナコンポーネント
次に、編集可能な「コンテナコンポーネント」を SPA に追加する方法を説明します。 この例では、SPA にコンテナコンポーネントを配置する方法を示しています。 コンテナコンポーネントを使用すると、作成者は許可されたコンポーネントをその中に配置したり、コンポーネントのレイアウトを調整したりできます。
5. 動的ルートと編集可能コンポーネント
最後に、動的ルート（ルートのパラメータに基づいて異なるコンテンツを表示するルート）に関する前の章で説明した概念を活用します。 この例では、AEM SPA エディターを使用して、プログラムによって駆動、生成されるルートのコンテンツを作成する方法を示します。