はじめに

最終更新日： 2023-12-05
  • 作成対象：
  • Beginner
    Developer

Edge 配信サービスを使用して AEM Sites から公開するには、こちらをクリックしてください。

開発者向けのマルチパートチュートリアルへようこそ。ここでは、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 つのプロジェクトで構成されています。

  1. AEM プロジェクト​には、AEM にデプロイする必要がある設定とコンテンツが含まれています。
  2. 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 で動作していること
メモ

ローカル開発環境のセットアップに関するサポートが必要な場合は、AEM as a Cloud Service SDK を使用するローカル開発環境のセットアップに関するガイドを参照してください。

1. SPA エディターに対応する AEM の設定

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

2. SPA のブートストラップ

AEM SPA エディターで SPA をオーサリングコンテキストに統合するには、SPA に対していくつかの追加を行う必要があります。

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

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

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

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

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

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

その他のリソース

前のページ
Next page

このページ