概要

AEM SPA Editorを使用して、既存のReactベース(またはNext.js)のリモートSPAに編集可能なAEMコンテンツを拡張する開発者向けの、マルチパートチュートリアルへようこそ。

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

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

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

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

このチュートリアルは、AEMをCloud Service​として使用するように設計されており、次の2つのプロジェクトで構成されています。

  1. AEMプロジェクト​には、AEMにデプロイする必要がある設定とコンテンツが含まれます。
  2. WKND Appprojectは、AEM SPA Editorと統合されるSPAです

最新のコード

  • このチュートリアルのコードは、GitHubfeature/spa-editorブランチにあります。

前提条件

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

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

  • IDEとしてのMicrosoft® Visual Studio Codeas
  • ~/Code/wknd-appの作業ディレクトリ
  • http://localhost:4502でのAEM SDKのオーサーサービスとしての実行
  • パスワードadminを使用したローカルadminアカウントでのAEM SDKの実行
  • http://localhost:3000でのSPAの実行
メモ

クイックセットアップ

クイックセットアップを使用すると、WKND App SPA and AEM SPA Editorを15分で使い始めることができます。 この高速化されたセットアップでは、チュートリアルの最後の段階に直接進み、AEM SPA EditorでのSPAのオーサリングを検討できます。

1. AEMを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を使用して、プログラムによって駆動され、派生されるルートのコンテンツを作成する方法を示します。

その他のリソース

このページ