概要

このたびは、AEM SPA Editor を使用して、既存の React ベース(または Next.js)のリモートSPAに編集可能なAEMコンテンツを拡張する開発者向けの、マルチパートチュートリアルをご利用いただき、誠にありがとうございます。

このチュートリアルでは、 WKND GraphQL アプリ:AEM GraphQL API を介してAEMコンテンツフラグメントコンテンツを使用する React アプリですが、SPAコンテンツのコンテキスト内オーサリングは提供されていません。

このチュートリアルについて

AEMのコンテキスト外で実行されるSPAやリモートSPAを更新して、AEMで作成したコンテンツを使用および配信する方法を説明するためのチュートリアルです。

このチュートリアルのほとんどのアクティビティは JavaScript の開発に焦点を当てていますが、AEMを中心に重要な側面について説明しています。 これらの側面には、コンテンツのオーサリングおよび格納場所の定義や、SPAルートのAEM Pages へのマッピングが含まれます。

このチュートリアルは、 AEMas a Cloud Service とは、次の 2 つのプロジェクトで構成されています。

  1. この AEM Project には、AEMにデプロイする必要がある設定とコンテンツが含まれています。
  2. WKND アプリ プロジェクトは、AEM SPA Editor と統合するSPAです

最新のコード

  • このチュートリアルのコードの開始点は、次の場所にあります。 GitHubremote-spa-tutorial フォルダー。

前提条件

このチュートリアルでは、次の項目が必要です。

このチュートリアルでは、次を前提としています。

  • Microsoft® Visual Studio Code IDE として
  • の作業ディレクトリ ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial
  • AEM SDK as a Author サービスを http://localhost:4502
  • ローカルでのAEM SDK の実行 admin パスワードを持つアカウント admin
  • でのSPAの実行 http://localhost:3000
メモ

ローカル開発環境の設定に関するヘルプが必要ですか? 以下を確認します。 AEM as a Cloud Service SDK を使用したローカル開発環境の設定に関する以下のガイド.

1. AEM for SPA Editor を設定する

SPAをAEM SPA Editor と統合するには、AEMの設定が必要です。 これらの設定は、AEMプロジェクトを介して管理およびデプロイされます。 この章では、必要な設定とその定義方法について説明します。

2. SPAのBootstrap

AEM SPA Editor をSPAのオーサリングコンテキストに統合するには、SPAに対していくつかの追加をおこなう必要があります。

3.編集可能な固定コンポーネント

まず、編集可能な「固定コンポーネント」をSPAに追加します。 この例では、開発者が特定の編集可能なコンポーネントをSPAに配置する方法を示します。 作成者はコンポーネントのコンテンツを変更できますが、コンポーネントを削除したり、コンポーネントの配置、配置、サイズを変更したりすることはできません。

4.編集可能なコンテナコンポーネント

次に、編集可能な「コンテナコンポーネント」をSPAに追加する方法を説明します。 この例では、開発者がSPAにコンテナコンポーネントを配置する方法を示します。 コンテナコンポーネントを使用すると、作成者は許可されたコンポーネントをその中に配置したり、コンポーネントのレイアウトを調整したりできます。

5.動的ルートと編集可能コンポーネント

最後に、前の章で説明した概念を使用して、動的ルートを設定します。ルートのパラメータに基づいて異なるコンテンツを表示するルート。 この例では、AEM SPA Editor を使用して、プログラムによって駆動され、派生されるルートのコンテンツを作成する方法を示します。

その他のリソース

このページ