AEM での初めての Angular SPA の作成 introduction

[Edge 配信サービスを使用して AEM Sites から公開するには、こちらをクリックしてください。]{class="badge positive" title="AEM から Edge 配信サービスへの公開"}

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

WKND SPA の実装

概要

複数のパートから成るこのチュートリアルの目的は、AEM の SPA エディター機能と連携する Angular アプリケーションを実装する方法をデベロッパー向けに説明することです。現実世界では、開発アクティビティは担当者（多くの場合、フロントエンド開発者 ​と​ バックエンド開発者）が分担します。このチュートリアルを修了することは、AEM SPA エディタープロジェクトに関与するすべての開発者にとって有益であると考えています。

このチュートリアルは、AEM as a Cloud Service で動作するように作られており、AEM 6.5.4 以降 ​と AEM 6.4.8 以降 ​と下位互換性があります。SPA は以下を使用して実装されます。

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

最新のコード

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

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

前提条件

このチュートリアルを開始するにあたって、以下が必要です。

必須ではありませんが、従来の AEM Sites コンポーネントの開発の基礎知識があると役に立ちます。

ローカル開発環境 local-dev-environment

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

次の手順 next-steps

すぐに取りかかりましょう。SPA エディタープロジェクトの章に移動してチュートリアルを開始し、AEM プロジェクトアーキタイプを使用して SPA エディター対応のプロジェクトを生成する方法を学びます。

下位互換性 compatibility

このチュートリアルのプロジェクトコードは、AEM as a Cloud 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 プロジェクトアーキタイプを使用し、AEM の意図したバージョンをターゲットにするには aemVersion をアップデートしてください。