AEM での Angular SPA の作成（チュートリアル）

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

最終的なSPAの実装

WKND SPAの実装

について

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

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

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

最新コード

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

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

前提条件

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

必須ではありませんが、従来のAEM Sitesコンポーネントの開発に関する基本的な 知識を持つことは有益です。

ローカル開発環境

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

メモ

AEM as a Cloud Service は初めてですか？ AEM as a Cloud ServiceSDKを使用したローカル開発環境のセットアップについては、次のガイドを参照してください。

AEM 6.5を初めて使用する場合 次のガイドを参照し て、ローカル開発環境を設定します。

次の手順

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

後方互換性

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

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>

AEM 6.x環境を対象としてビルドを変更するために、classicという名前のMavenプロファイルが追加されました。

  <!-- 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プロジェクトアーキタイプを使用し、aemVersionを更新して、目的のバージョンのAEMをターゲットにします。

このページ