プロジェクトのセットアップ

このチュートリアルでは、Adobe Experience Manager Siteのコードと設定を管理するためのMavenマルチモジュールプロジェクトの作成について説明します。

前提条件

ローカル開発環境の設定に必要なツールと手順を確認します。 Adobe Experience Managerの新しいインスタンスがローカルで使用でき、追加のサンプル/デモパッケージ(必要なサービスパック以外)がインストールされていないことを確認します。

目的

  1. Mavenアーキタイプを使用して新しいAEMプロジェクトを生成する方法を説明します。
  2. AEMプロジェクトアーキタイプで生成される様々なモジュールとそれらの連携方法を理解します。
  3. AEMコアコンポーネントがAEMプロジェクトに含まれる仕組みを説明します。

作成する内容

この章では、AEM Project Archetypeを使用して新しいAdobe Experience Managerプロジェクトを生成します。 AEMプロジェクトには、Sites実装で使用されるすべてのコード、コンテンツ、設定が含まれています。 この章で生成されるプロジェクトは、WKNDサイトの実装の基礎となり、今後の章で構築される予定です。

Mavenプロジェクトとは - Apache Mavenis は、プロジェクトを構築するソフトウェア管理ツールです。すべてのAdobe Experience Manager実 装では、Mavenプロジェクトを使用して、AEM上にカスタムコードを作成、管理およびデプロイします。

Mavenアーキタイプとは - Mavenアーキタ プは、新しいプロジェクトを生成するためのテンプレートまたはパターンです。AEMプロジェクトのアーキタイプを使用すると、カスタム名前空間を持つ新しいプロジェクトを生成し、ベストプラクティスに従うプロジェクト構造を含めて、プロジェクトを大幅に高速化できます。

プロジェクトの作成

AEM用のMavenマルチモジュールプロジェクトを作成する方法はいくつかあります。 このチュートリアルでは、Maven AEMプロジェクトアーキタイプ​26を活用します。 また、Cloud Managerには、AEMアプリケーションプロジェクトの作成を開始するためのUIウィザード🔗も用意されています。 Cloud Manager UIで生成される基になるプロジェクトの結果は、アーキタイプを直接使用するのと同じ構造になります。

メモ

このチュートリアルでは、アーキタイプのバージョン​26​を使用します。 新しいプロジェクトを生成する場合は、常にアーキタイプの​最新の​バージョンを使用することをお勧めします。

次の一連の手順は、UNIXベースのコマンドラインターミナルを使用して実行されますが、Windowsターミナルを使用する場合は同様の手順を実行する必要があります。

  1. コマンドラインターミナルを開きます。 Mavenがインストールされていることを確認します。

    $ mvn --version
    Apache Maven 3.6.2
    Maven home: /Library/apache-maven-3.6.2
    Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home
    
  2. 次のコマンドを実行して、adobe-public​プロファイルがアクティブであることを確認します。

    $ mvn help:effective-settings
        ...
    <activeProfiles>
        <activeProfile>adobe-public</activeProfile>
    </activeProfiles>
    <pluginGroups>
        <pluginGroup>org.apache.maven.plugins</pluginGroup>
        <pluginGroup>org.codehaus.mojo</pluginGroup>
    </pluginGroups>
    </settings>
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  0.856 s
    

    not adobe-public​を参照すると、Adobeリポジトリが~/.m2/settings.xmlファイルで正しく参照されていないことを示しています。 ローカル開発環境にApache Mavenをインストールして設定する手順を再度参照してください。

  3. AEMプロジェクトを生成するディレクトリに移動します。 これには、プロジェクトのソースコードを管理する任意のディレクトリを指定できます。 例えば、ユーザーのホームディレクトリの下にcodeという名前のディレクトリがあるとします。

    $ cd ~/code
    
  4. 次の内容をコマンドラインに貼り付けて、バッチモードでプロジェクトを生成します。

    mvn -B archetype:generate \
        -D archetypeGroupId=com.adobe.aem \
        -D archetypeArtifactId=aem-project-archetype \
        -D archetypeVersion=26 \
        -D appTitle="WKND Sites Project" \
        -D appId="wknd" \
        -D groupId="com.adobe.aem.guides.wknd" \
        -D artifactId="aem-guides-wknd" \
        -D version="0.0.1-SNAPSHOT" \
        -D aemVersion="cloud"
    
    メモ

    AEM 6.5.5以降をターゲットにする場合は、 aemVersion="cloud"aemVersion="6.5.5"に置き換えます。 6.4.8以降をターゲットにする場合は、aemVersion="6.4.8"を使用します。

    プロジェクトの設定に使用できるプロパティの完全なリストは、にあります。

  5. 次のフォルダーとファイル構造は、ローカルファイルシステム上のMavenアーキタイプによって生成されます。

     ~/code/
        |--- aem-guides-wknd/
            |--- all/
            |--- core/
            |--- ui.apps/
            |--- ui.apps.structure/
            |--- ui.config/
            |--- ui.content/
            |--- ui.frontend/
            |--- ui.tests /
            |--- it.tests/
            |--- dispatcher/
            |--- analyse/
            |--- pom.xml
            |--- README.md
            |--- .gitignore
    

プロジェクトのデプロイとビルド

プロジェクトコードを構築し、AEMのローカルインスタンスにデプロイします。

  1. AEMのオーサーインスタンスがポート​4502​でローカルに実行されていることを確認します。

  2. コマンドラインからaem-guides-wkndプロジェクトディレクトリに移動します。

    $ cd aem-guides-wknd
    
  3. 次のコマンドを実行して、プロジェクト全体を構築し、AEMにデプロイします。

    $ mvn clean install -PautoInstallSinglePackage
    

    ビルドには約1分かかり、最後に次のメッセージが表示されます。

    ...
    [INFO] ------------------------------------------------------------------------
    [INFO] Reactor Summary for aem-guides-wknd 0.0.1-SNAPSHOT:
    [INFO]
    [INFO] aem-guides-wknd .................................... SUCCESS [  0.269 s]
    [INFO] WKND Sites Project - Core .......................... SUCCESS [  8.047 s]
    [INFO] WKND Sites Project - UI Frontend ................... SUCCESS [01:02 min]
    [INFO] WKND Sites Project - Repository Structure Package .. SUCCESS [  1.985 s]
    [INFO] WKND Sites Project - UI apps ....................... SUCCESS [  8.037 s]
    [INFO] WKND Sites Project - UI content .................... SUCCESS [  4.672 s]
    [INFO] WKND Sites Project - UI config ..................... SUCCESS [  0.313 s]
    [INFO] WKND Sites Project - All ........................... SUCCESS [  0.270 s]
    [INFO] WKND Sites Project - Integration Tests ............. SUCCESS [ 15.571 s]
    [INFO] WKND Sites Project - Dispatcher .................... SUCCESS [  0.232 s]
    [INFO] WKND Sites Project - UI Tests ...................... SUCCESS [  0.728 s]
    [INFO] WKND Sites Project - Project Analyser .............. SUCCESS [ 33.398 s]
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  02:18 min
    [INFO] Finished at: 2021-01-31T12:33:56-08:00
    [INFO] ------------------------------------------------------------------------
    

    MavenプロファイルautoInstallSinglePackageは、プロジェクトの個々のモジュールをコンパイルし、AEMインスタンスに1つのパッケージをデプロイします。 デフォルトでは、このパッケージは、ポート​4502​でローカルに実行され、資格情報admin:adminを持つAEMインスタンスにデプロイされます。

  4. ローカルのAEMインスタンス上でパッケージマネージャーに移動します。http://localhost:4502/crx/packmgr/index.jsp. aem-guides-wknd.ui.appsaem-guides-wknd.ui.configaem-guides-wknd.ui.contentaem-guides-wknd.allのパッケージが表示されます。

  5. サイトコンソールに移動します。http://localhost:4502/sites.html/content. サイトの 1 つに WKND サイトがあります。US階層と言語階層を持つサイト構造が含まれるマスターです。 このサイト階層は、アーキタイプを使用してプロジェクトを生成する際のlanguage_countryisSingleCountryWebsiteの値に基づきます。

  6. ページを選択し、メニューバーの「編集」ボタンをクリックして、米国 > 英語​ページを開きます。

    サイトコンソール

  7. スターターコンテンツは既に作成済みで、ページに追加できる複数のコンポーネントが用意されています。 これらのコンポーネントを使用してみることで、機能について大まかに把握できます。次の章では、コンポーネントの基本について学びます。

    ホームスターターコンテンツ

    アーキタイプで生成されたサンプルコンテンツ

Inspect

生成されるAEMプロジェクトは、個々のMavenモジュールで構成され、それぞれ異なる役割を持ちます。 このチュートリアルと開発の大部分は、次のモジュールに焦点を当てています。

  • コア - Javaコード。主にバックエンド開発者。

  • ui.frontend — 主にフロントエンド開発者向けのCSS、JavaScript、Sass、Type Scriptのソースコードを含みます。

  • ui.apps — コンポーネントとダイアログの定義を含み、コンパイル済みのCSSとJavaScriptをクライアントライブラリとして埋め込みます。

  • ui.content — 編集可能なテンプレート、メタデータスキーマ(/content%E3%80%81/conf?lang=ja)などの構造的なコンテンツや設定が含まれます。

  • all - AEM環境にデプロイできる、1つのパッケージに上記のモジュールを組み合わせた空のMavenモジュール。

Mavenプロジェクト図

すべての Mavenモジュールの詳細については、AEMプロジェクトアーキタイプのドキュメントを参照してください。

コアコンポーネントを組み込む

AEMコアコン ポーネントは、AEM用の標準化されたWebコンテンツ管理(WCM)コンポーネントのセットです。これらのコンポーネントは、機能のベースラインセットを提供し、個々のプロジェクト用にスタイル設定、カスタマイズ、拡張するように設計されています。

AEM as a Cloud Service環境には、AEMコアコンポーネントの最新バージョンが含まれています。 したがって、AEM as aCloud Service用に生成されたプロジェクトには、AEMコアコンポーネントの埋め込みが​含まれていません

AEM 6.5/6.4で生成されたプロジェクトの場合、アーキタイプによって、プロジェクトにAEMコアコンポーネントが自動的に埋め込まれます。 AEM 6.5/6.4では、AEMコアコンポーネントを埋め込んで、最新バージョンがプロジェクトに確実にデプロイされるようにすることをお勧めします。 コアコンポーネントがプロジェクトに含まれる方法について詳しくは、を参照してください。

ソース管理システムによる管理

アプリケーションのコードを管理するために、何らかのソース管理システムを使用することが常に推奨されます。このチュートリアルでは git および GitHub を使用します。Maven などの任意の IDE では、SCM で無視すべきいくつかのファイルが生成されます。

Maven は、コードパッケージをビルドおよびインストールするたびにターゲットフォルダーを作成します。ターゲットフォルダーとコンテンツは、SCMから除外する必要があります。

ui.appsの下に、多数の.content.xmlファイルが作成されるのを観察します。 これらの XML ファイルは、JCR にインストールされているコンテンツのノードタイプおよびプロパティをマッピングします。これらのファイルは重要で、無視しないでください

AEMプロジェクトのアーキタイプは、サンプルの.gitignoreファイルを生成します。このファイルを出発点として使用し、ファイルを安全に無視できます。 ファイルは<src>/aem-guides-wknd/.gitignoreに生成されます。

おめでとうございます。

これで、最初のAEMプロジェクトが作成されました。

次の手順

コンポーネントの基本のチュートリアルを使用して、簡単なHelloWorld例を通じて、Adobe Experience Manager(AEM)Sitesコンポーネントの基盤となるテクノロジーを理解します。

高度なMavenコマンド(ボーナス)

開発時には、1つのモジュールで作業を行う場合があり、時間を節約するためにプロジェクト全体を構築する必要がない場合があります。 また、AEMパブリッシュインスタンスに直接デプロイする場合や、ポート4502で実行されていないAEMのインスタンスにデプロイする場合もあります。

次に、開発時の柔軟性を高めるために使用できる、追加のMavenプロファイルおよびコマンドについて説明します。

コアモジュール

core​モジュールには、プロジェクトに関連付けられたすべてのJavaコードが含まれます。 ビルド時に、AEMにOSGiバンドルがデプロイされます。 このモジュールのみを構築するには:

  1. coreフォルダー(aem-guides-wkndの下)に移動します。

    $ cd core/
    
  2. 次のコマンドを実行します。

    $ mvn clean install -PautoInstallBundle
    ...
    [INFO] --- sling-maven-plugin:2.4.0:install (install-bundle) @ aem-guides-wknd.core ---
    [INFO] Installing Bundle aem-guides-wknd.core(~/code/aem-guides-wknd/core/target/aem-guides-wknd.core-0.0.1-SNAPSHOT.jar) to http://localhost:4502/system/console via WebConsole
    [INFO] Bundle installed
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  8.558 s
    
  3. http://localhost:4502/system/console/bundlesに移動します。 これはOSGi Webコンソールで、AEMインスタンスにインストールされているすべてのバンドルに関する情報が含まれます。

  4. Id​並べ替え列を切り替えると、WKNDバンドルがインストールされ、アクティブになっていることがわかります。

    コアバンドル

  5. jarの「物理的な」場所はCRXDE-Liteで確認できます。

    JARのCRXDEの場所

Ui.appsおよびUi.contentモジュール

ui.apps mavenモジュールには、/appsの下のサイトで必要となるすべてのレンダリングコードが含まれます。 これには CSS/JS が含まれ、それらは clientlibs と呼ばれる AEM の形式で保存されます。また、これには動的 HTML をレンダリングするための HTL スクリプトも含まれます。ui.apps​モジュールは、JCR内の構造へのマップと考えることができますが、ファイルシステムに保存し、ソース管理にコミットできる形式です。 ui.apps​モジュールには、コードのみが含まれます。

このモジュールのみを構築するには:

  1. コマンドラインから。 ui.appsフォルダー(aem-guides-wkndの下)に移動します。

    $ cd ../ui.apps
    
  2. 次のコマンドを実行します。

    $ mvn clean install -PautoInstallPackage
    ...
    Package installed in 122ms.
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  6.972 s
    [INFO] Finished at: 2019-12-06T14:44:12-08:00
    [INFO] ------------------------------------------------------------------------
    
  3. http://localhost:4502/crx/packmgr/index.jspに移動します。 ui.appsパッケージが最初にインストールされたパッケージとして表示され、他のパッケージのタイムスタンプよりも新しいものが表示されます。

    Ui.appsパッケージがインストールされている

  4. コマンドラインに戻り、次のコマンドを実行します(ui.appsフォルダー内)。

    $ mvn -PautoInstallPackagePublish clean install
    ...
    [INFO] --- content-package-maven-plugin:1.0.2:install (install-package-publish) @ aem-guides-wknd.ui.apps ---
    [INFO] Installing aem-guides-wknd.ui.apps (/Users/dgordon/code/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4503/crx/packmgr/service.jsp
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD FAILURE
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  6.717 s
    [INFO] Finished at: 2019-12-06T14:51:45-08:00
    [INFO] ------------------------------------------------------------------------
    

    プロファイルautoInstallPackagePublishは、ポート​4503​で実行されているパブリッシュ環境にパッケージをデプロイすることを目的としています。 上記のエラーは、http://localhost:4503で実行されているAEMインスタンスが見つからない場合に発生します。

  5. 最後に、次のコマンドを実行して、ui.appsパッケージをポート​4504​にデプロイします。

    $ mvn -PautoInstallPackage clean install -Daem.port=4504
    ...
    [INFO] --- content-package-maven-plugin:1.0.2:install (install-package) @ aem-guides-wknd.ui.apps ---
    [INFO] Installing aem-guides-wknd.ui.apps (/Users/dgordon/code/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4504/crx/packmgr/service.jsp
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD FAILURE
    [INFO] --------------------------------------------------------------------
    

    この場合も、ポート​4504​で実行されているAEMインスタンスがない場合、ビルドエラーが発生することが予想されます。 パラメーターaem.portは、POMファイル(aem-guides-wknd/pom.xml)で定義されます。

ui.content​モジュールの構造は、ui.apps​モジュールと同じです。 唯一の違いは、ui.content​モジュールには、可変​コンテンツと呼ばれるものが含まれる点です。 ​多言語コンテンツとは、基本的に、ソース管理下に保存されているがAEMインスタンス上で直接変更できる、テンプレート、ポリシー、フォルダー構造などの非コード設定を指しま ​す。これについては、ページとテンプレートの章で詳しく説明します。

ui.apps​モジュールの構築に使用するのと同じMavenコマンドを、ui.content​モジュールの構築に使用できます。 ui.content​フォルダー内から上記の手順を自由に繰り返してください。

このページ