AEM での React SPA の作成(チュートリアル)

Adobe Experience Manager(AEM)の​SPAエディタ​機能を初めて使用する開発者向けに設計されたマルチパートチュートリアルをご利用いただき、ありがとうございます。 このチュートリアルでは、架空のライフスタイルブランドであるWKNDに対するReactアプリケーションの実装について説明します。 Reactアプリは、AEM SPA Editorでデプロイするように開発、設計されます。 Editorは、ReactコンポーネントをAEMコンポーネントにマッピングします。 完成したSPAは、AEMに導入され、AEMの従来のインライン編集ツールで動的に作成できます。

最終的なSPAの実装

WKND SPAの実装

について

このマルチパートチュートリアルの目標は、AEMのSPAエディタ機能を使用してReactアプリケーションを実装する方法を開発者に教えることです。 現実世界のシナリオでは、開発アクティビティはパーソナ別に分類され、多くの場合、フロントエンド開発者​と​バックエンド開発者​が関与します。 AEM SPAエディタのプロジェクトに参加する開発者にとって、このチュートリアルを完了するのは有益なことだと思います。

このチュートリアルは、AEMをCloud Service​として使用するように設計されており、AEM 6.5.4+​および​AEM 6.4.8+​と下位互換性があります。 SPAは次を使用して実装されます。

チュートリアルの各パートの所要時間は 1~2 時間です。

最新コード

チュートリアルコードはすべてGitHubにあります。

最新のコードベースは、ダウンロード可能なAEMパッケージとして入手できます。

前提条件

このチュートリアルを開始する前に、次の情報が必要です。

AEM Sitesの伝統的な部品の 開発に関する基本的な理解を持つことは必須ではありませんが

ローカル開発環境

このチュートリアルを完了するには、ローカルの開発環境が必要です。スクリーンショットとビデオは、Mac OS環境上でVisual Studio CodeをIDEとして実行するCloud ServiceSDKとしてAEMを使用してキャプチャされます。 コマンドとコードは、特に断りのない限り、ローカルのオペレーティングシステムとは独立している必要があります。

メモ

AEM as a Cloud Service は初めてですか? AEMをCloud ServiceSDKとして使用するローカル開発環境を設定するには、 次のガイドを参照してください

AEM 6.5を初めて使用する場合 ローカル開発環境を設定するには、 次のガイドを参照してください

次の手順

何を待ってる!!「SPA Editor Project」の章に移動してチュートリアルを開始し、AEM Project Archetypeを使用してSPA Editor対応プロジェクトを生成する方法を学びます。

下位互換性

このチュートリアルのプロジェクトコードは、AEM用にCloud Serviceとして構築されています。 プロジェクトコードを​6.5.4+​と​6.4.8+​に対して後方互換性を持たせるため、チュートリアルのPOMファイルにいくつかの変更が加えられました。

UberJar v6.4.4​が依存関係として含まれています。

<!-- Adobe AEM 6.x Dependencies -->
<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.4</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>

classicという名前のMavenプロファイルが追加され、ターゲットAEM 6.x環境にビルドを変更しました。

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

classicプロファイルはデフォルトで無効になっています。 AEM 6.xでチュートリアルを行う場合は、Mavenビルドの実行を指示された時にclassicプロファイルを追加してください。

$ mvn clean install -PautoInstallSinglePackage -Pclassic

AEM実装用の新しいプロジェクトを生成する場合、必ず最新バージョンのAEMプロジェクトアーキタイプを使用し、意図したバージョンのAEMをターゲットするようにaemVersionを更新してください。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now