AEM SPA Editor の開発方法に関する、複数のパートから成るチュートリアル。React JS を使用して作成された、Adobe Experience Manager 内で編集可能なシングルページアプリケーション(SPA)を実装するための手順について説明します。プロジェクトのセットアップ、コンポーネントのマッピング、フロントエンドの開発ツール、およびアプリケーションのルーティングなどの基本的なトピックが含まれます。

概要

この複数パートから成るチュートリアルは、SPA Editor を使用して Adobe Experience Manager(AEM)内で編集可能なシングルページアプリケーション(SPA)を実装するための手順を開発者に教えることを目的としています。チュートリアルでは、SPA のエンドツーエンドの作成、および AEM との統合について説明します。

現実世界では、開発アクティビティは担当者(多くの場合はフロントエンドの開発者バックエンドの開発者)が分担して作業します。このチュートリアルの各タスクには、開発アクティビティの分担をわかりやすくするために、担当者のラベルが記載されています。チュートリアルは、誰でもエンドツーエンドで完了できるように作られていますが、希望する場合は、好きなステージで途中から開始できます。

実装は、AEM 6.4 + SP2 で機能するように作られています。SPA 実装は、React JS フレームワークを使用して構築されています。Angular を使用した同等のチュートリアルおよび実装については、近い将来に公開される予定です。チュートリアルでは、以下の最新 Web 開発ツールも使用します。

注意:

近い将来、チュートリアルには以下のようなパートも追加される予定です。

  • Google Maps API を使用したカスタムマップコンポーネントの構築
  • コンテンツフラグメントの統合
  • リストコンポーネントの拡張

最新

チュートリアルを途中から開始する前に最新のコードをテストするには、ローカル AEM インスタンスで以下のパッケージをダウンロードおよびインストールしてください。

ダウンロード

aem-final

GitHub

プロジェクトのすべてのコードは、Adobe Experience Cloud 組織の GitHub にあります。

GitHub:WKND Events SPA Editor プロジェクト

さらに、チュートリアルの各章は、GitHub に独自のブランチを持っています。ユーザーは、前のパートに対応するブランチをチェックするだけで、どこからでもチュートリアルを開始できます。

チュートリアルで問題が発生した場合は、Github で問題を報告してください。

目次 - React

チュートリアルの章のリスト:

ローカル開発環境

このチュートリアルを完了するには、ローカルの開発環境が必要です。スクリーンショットおよびビデオは Mac OS 環境からのものですが、使用されているコマンドおよびコードは、特に断りのない限り、ローカルのオペレーティングシステムに依存しません。

前提条件

以下をインストールしておく必要があります。

最初に、上記のツールがインストールされており、コマンドラインパスで利用できることを確認します。新しいターミナルを開き、以下のコマンドを実行します。

$ java -version
java version "1.8.+"
Java(TM) SE Runtime Environment (build 1.8.0_111-b14)
Java HotSpot(TM) 64-Bit Server VM (build 25.111-b14, mixed mode)
 
$ mvn -version
Apache Maven 3.3.9
Maven home: /Library/apache-maven-3.3.9
Java version: 1.8.0_111, vendor: Oracle Corporation
Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home/jre
 
$ node --version
v10.8.0
 
$ npm --version
6.2.0

統合開発環境

AEM の開発では、Eclipse、IntelliJ、Visual Studio コードなどの人気の IDE を使用できます。これらのツールをローカルで設定する場合は、以下のリソースを参照してください。

次の手順

チュートリアルを開始する

ヘルプ

行き詰まったり、追加の質問がある場合は、AEM 用 Experience League フォーラムを確認するか、既存の GitHub の問題を参照してください。

探していた情報が見つからなかった場合やエラーが見つかった場合は、WKND Events プロジェクトに関する GitHub の問題を報告してください。