AEM Sites のコードおよび設定を管理するための、Maven のマルチモジュールプロジェクトの作成について説明します。

前提条件

これは、複数のパートで構成されているチュートリアルの第 1 章です。概要については、こちらで参照できます

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

必要なものは以下のとおりです。

  1. Java 1.8
  2. Apache Maven(3.3.9 以降)
  3. AEM 6.4 + Service Pack 2 または 
  4. AEM 6.3 + Service Pack 3
  5. Eclipse または他の IDE

詳細については、こちらを参照してください。Apache Maven を使用して AEM プロジェクトをビルドする方法

Maven AEM プロジェクトアーキタイプ 15 を使用したプロジェクトの作成

Maven で AEM 用のマルチモジュールプロジェクトを作成するには、いくつかのオプションがあります。このチュートリアルでは、Maven AEM プロジェクトアーキタイプ 15 を使用します。このほか、ACS AEM Lazybones テンプレートを使用する方法も有効です。

以降の一連の手順では、UNIX ベースのコマンドラインターミナルを使用しますが、Windows のターミナルを使用している場合でも、それほど変わりません。

  1. Maven のバージョンを確認する

    コマンドラインターミナルを開き、Maven がインストールされ、コマンドラインのパスに追加されていることを確認します。

    $ mvn -version
    
    Apache Maven 3.3.9 
    Maven home: /Library/apache-maven-3.3.9
    Java version: 1.8.+, vendor: Oracle Corporation
    Java home: /Library/Java/JavaVirtualMachines/jdk1.8.+.jdk/Contents/Home/jre
  2. Maven のアーキタイプを作成する

    以下をコマンドラインに貼り付け、新しいプロジェクトの作成を開始します。

    mvn org.apache.maven.plugins:maven-archetype-plugin:2.4:generate \
     -DarchetypeGroupId=com.adobe.granite.archetypes \
     -DarchetypeArtifactId=aem-project-archetype \
     -DarchetypeVersion=15 \
     -DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/

    注意:

    AEM Developer Tools plugin for Eclipse を使用して Maven AEM プロジェクトを作成することも可能です。

  3. アーキタイプの質問に答える

    AEM プロジェクトアーキタイプは、プロジェクトを設定するために一連の質問をおこないます。次の表は、このチュートリアルで使用される値の一覧です。

    説明 プロパティ
    Maven のグループ ID groupId com.adobe.aem.guides
    Maven のアーティファクト ID artifactId aem-guides-wknd
    プロジェクトの開始バージョン version 0.0.1-SNAPSHOT
    Java ソースパッケージ package com.adobe.aem.guides.wknd
    /apps フォルダー名 appsFolderName wknd
    Maven プロジェクト名 artifactName WKND Sites Project
    AEM コンポーネントグループ名 componentGroupName WKND.Content
    /conf フォルダー名 confFolderName wknd
    /content フォルダー名 contentFolderName wknd
    生成された CSS で使用されるプレフィックス cssId wknd
    コンテンツパッケージのグループ名 packageGroup aem-guides/wknd
    AEM サイト名 siteName WKND Site
  4. プロジェクトを構築する

    aem-guides-wknd ディレクトリに移動し、次の maven コマンドを実行してプロジェクトをビルドおよびデプロイします。

    $ cd aem-guides-wknd
    $ mvn -PautoInstallPackage -Padobe-public clean install
    
    ...
    [INFO] ------------------------------------------------------------------------
    [INFO] Reactor Summary:
    [INFO] 
    [INFO] aem-guides-wknd .................................... SUCCESS [  0.369 s]
    [INFO] WKND Sites Project - Core .......................... SUCCESS [  3.836 s]
    [INFO] WKND Sites Project - UI apps ....................... SUCCESS [  3.172 s]
    [INFO] WKND Sites Project - UI content .................... SUCCESS [  0.554 s]
    [INFO] WKND Sites Project - Integration Tests Bundles ..... SUCCESS [  0.896 s]
    [INFO] WKND Sites Project - Integration Tests Launcher .... SUCCESS [  2.574 s]
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time: 12.530 s
    [INFO] Finished at: 2018-04-04T18:17:45-04:00
    [INFO] Final Memory: 57M/600M
    [INFO] ------------------------------------------------------------------------
    
    

    Maven プロファイル autoInstallPackage は、AEM プロジェクトのデプロイで最も一般的に使用されるプロファイルです。アーキタイプは POM ファイルを生成し、これは資格情報を admin:admin として、ポート 4502 でローカル実行されている AEM インスタンスにデプロイされます。

    adobe-public プロファイルによって、プロジェクトのビルド時に必ず repo.adobe.com が参照されるようになります。

    $ mvn -PautoInstallPackage -Padobe-public clean install
  5. ベストプラクティスとしては、repo.adobe.com を自動で maven のビルドプロセスに追加するために、adobe-public プロファイルを Maven の settings.xml ファイルに追加することが推奨されます。

    settings.xml という名前のファイルが ${user.home}/.m2/settings.xml に存在しない場合、作成します。

  6. こちらの手順に従って、adobe-public プロファイルを settings.xml ファイルに追加します。

    以下は settings.xml の例です。

    <settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0
                          https://maven.apache.org/xsd/settings-1.0.0.xsd">
    
    <profiles>
    <!-- ====================================================== -->
    <!-- P U B L I C P R O F I L E -->
    <!-- ====================================================== -->
    <profile>
        <id>adobe-public</id>
     
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
     
        <properties>
     
            <releaseRepository-Id>adobe-public-releases</releaseRepository-Id>
            <releaseRepository-Name>Adobe Public
                Releases</releaseRepository-Name>
     
            <releaseRepository-URL>http://repo.adobe.com/nexus/content/groups/public</releaseRepository-URL>
        </properties>
     
        <repositories>
            <repository>
                <id>adobe-public-releases</id>
                <name>Adobe Basel Public Repository</name>
                <url>http://repo.adobe.com/nexus/content/groups/public</url>
                <releases>
                    <enabled>true</enabled>
                    <updatePolicy>never</updatePolicy>
                </releases>
                <snapshots>
                    <enabled>false</enabled>
                </snapshots>
            </repository>
        </repositories>
     
        <pluginRepositories>
            <pluginRepository>
                <id>adobe-public-releases</id>
                <name>Adobe Basel Public Repository</name>
                <url>http://repo.adobe.com/nexus/content/groups/public</url>
                <releases>
                    <enabled>true</enabled>
                    <updatePolicy>never</updatePolicy>
                </releases>
                <snapshots>
                    <enabled>false</enabled>
                </snapshots>
            </pluginRepository>
        </pluginRepositories>
    </profile>
    
    </profiles>
    <activeProfiles>
    <activeProfile>adobe-public</activeProfile>
      </activeProfiles> 
    </settings>
    
  7. プロジェクトを構築する

    aem-guides-wknd ディレクトリに移動し、adobe-public プロファイルを使用せずに、次の maven コマンドを実行してプロジェクトをビルドおよびデプロイします。

    $ cd aem-guides-wknd
    $ mvn -PautoInstallPackage clean install
    
    ...
    [INFO] ------------------------------------------------------------------------
    [INFO] Reactor Summary:
    [INFO] 
    [INFO] aem-guides-wknd .................................... SUCCESS [  0.369 s]
    [INFO] WKND Sites Project - Core .......................... SUCCESS [  3.836 s]
    [INFO] WKND Sites Project - UI apps ....................... SUCCESS [  3.172 s]
    [INFO] WKND Sites Project - UI content .................... SUCCESS [  0.554 s]
    [INFO] WKND Sites Project - Integration Tests Bundles ..... SUCCESS [  0.896 s]
    [INFO] WKND Sites Project - Integration Tests Launcher .... SUCCESS [  2.574 s]
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time: 12.530 s
    [INFO] Finished at: 2018-04-04T18:17:45-04:00
    [INFO] Final Memory: 57M/600M
    [INFO] ------------------------------------------------------------------------
    
    
  8. AEM でパッケージを表示する

    ローカルの AEM インスタンス上で、パッケージマネージャーに移動します(http://localhost:4502/crx/packmgr/index.jsp)。以下の 5 つのパッケージがインストールされていることが確認できます。

    wknd-packages

    注意:

    コアコンポーネントに関連する 3 つのパッケージもインストールされていることに注意してください。これについては、以下で詳しく確認します。

  9. AEM Sites コンソールに移動する(http://localhost:4502/sites.html

    サイトの 1 つに WKND サイトがあります。これには、英語とフランス語の 2 つのコンテンツページが含まれています。

    wknd-samplesite
  10. サイトエディターでどちらかのコンテンツページを開く(http://localhost:4502/editor.html/content/wknd/en.html

    いくつかの作成済みコンテンツおよびページに追加できるコンポーネントがあります。これらのコンポーネントを使用してみることで、機能について大まかに把握できます。このページおよびコンポーネントがどのように設定されているかについては、このチュートリアルの後半で詳細に説明します。

    2018-10-31_at_7_00pm

プロジェクト構造の確認

プロジェクトには 6 つの領域があります。

  1. 親 POM - maven モジュールをデプロイし、依存関係のバージョンを管理します。
  2. core - OSGi サービス、リスナー、スケジューラなどのすべてのコア機能、およびサーブレットや要求フィルターなどのコンポーネント関連の Java コードが含まれる Java バンドル。
  3. ui.apps - JS および CSS のクライアントライブラリ、コンポーネント、実行モードに特化した設定、および Hobbes テストなど、プロジェクトの /apps の部分が含まれます。
  4. ui.content - 構造化されたコンテンツおよび設定が含まれます(/content、/conf)。
  5. ui.tests - サーバー側で実行される JUnit テストが含まれる Java バンドル。このバンドルは実稼動環境にはデプロイされません。
  6. ui.launcher - ui.tests バンドル(および依存するバンドル)をサーバーにデプロイし、JUnit のリモート実行をトリガーするグルーコードが含まれます。
project-pom

親 POM

プロジェクトのルートにある pom.xml (<src-directory>/aem-guides-wknd/pom.xml)には、いくつかのグローバルプロパティが定義されています。

<properties>
        <aem.host>localhost</aem.host>
        <aem.port>4502</aem.port>
        <aem.publish.host>localhost</aem.publish.host>
        <aem.publish.port>4503</aem.publish.port>
        <sling.user>admin</sling.user>
        <sling.password>admin</sling.password>
        <vault.user>admin</vault.user>
        <vault.password>admin</vault.password>

        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>

これらのプロパティは、ローカルの AEM インスタンスにデプロイするために設定されています。これは、開発者がおこなう最も一般的なビルドです。オーサーインスタンスにデプロイするためのプロパティおよびパブリッシュインスタンスにデプロイするためのプロパティが存在することに注意してください。ここでは AEM インスタンスを認証するための basic-auth 認証も設定されます。デフォルトの admin:admin 認証が使用されています。

これらのプロパティは、より上位の環境にデプロイされる際には上書きされるよう設定されています。そうすることで、POM ファイルを変更する必要がなく、aem.host および aem.password などの変数をコマンドライン引数で上書きできます。

mvn -PautoInstallPackage clean install -Daem.host=production.hostname -Dsling.password=productionpasswd

親 POM は、coreui.appsui.contentui.testsit.launcher という 5 つのサブモジュールをビルドします。これらのモジュールはファイルの一番下で定義されます。プロジェクトの拡大に合わせて、いつでもモジュールを追加できます。

<modules>
        <module>core</module>
        <module>ui.apps</module>
        <module>ui.content</module>
        <module>it.tests</module>
        <module>it.launcher</module>
</modules>

親 POM には DependencyManagement セクションが含まれ、ここでは、プロジェクトで使用されるすべての依存関係および API のバージョンがリストされます。バージョンは親 POM 内で管理する必要があり、Core や UI.apps などのサブモジュールにはバージョン情報を一切含めてはなりません。

確認すべき主要な依存関係の 1 つに AEM uber-jar があります。これにより、AEM のバージョンに対して、すべての AEM API が単一の依存関係のエントリで含められます。uber-jar の詳細については、こちらを参照してください。

 <dependencyManagement>
        ...
         <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>uber-jar</artifactId>
                <version>6.3.0</version>
                <scope>provided</scope>
                <classifier>apis</classifier>
            </dependency>
            ...
</dependencyManagement>

注意:

ベストプラクティスとしては、AEM のターゲットバージョンに合わせて uber-jar のバージョンを更新することが推奨されます。例えば、AEM 6.4 をデプロイする予定であれば、uber-jar のバージョンを 6.4.0 に更新します。

Core モジュール

Core maven モジュール(<src-directory>/aem-guides-wknd/core)には、実装で必要となるすべての Java コードが含まれます。このモジュールは、すべての Java コードをパッケージ化し、OSGi バンドルとして AEM インスタンスにデプロイします。

aem-guides-wknd/core/pom.xml で定義される Maven Bundle Plugin は、AEM の OSGi コンテナによって認識される OSGi バンドルに Java コードをコンパイルするために使用されます。Sling Model もここで定義されます。Sling Model は、チュートリアルの後半で使用します。

//core/pom.xml

<plugin>
    <groupId>org.apache.felix</groupId>
        <artifactId>maven-bundle-plugin</artifactId>
        <extensions>true</extensions>
        <configuration>
            <instructions>
            <!-- Import any version of javax.inject, to allow running on multiple versions of AEM -->
            <Import-Package>javax.inject;version=0.0.0,*</Import-Package>
                    <Sling-Model-Packages>
                        com.adobe.aem.guides.wknd.core
                    </Sling-Model-Packages>
            </instructions>
    </configuration>
</plugin>

Maven Sling プラグインにより、autoInstallBundle プロファイル(Parent Pom.xml で定義されます)を直接使用して Core バンドルを AEM ディレクトリにデプロイできるようになります。

注意:

ui.apps モジュールに依存せずに、Core バンドルを上位の環境にデプロイすることは滅多にありません。Core バンドルを直接デプロイすることは、ローカルでの開発およびテストで役立ちます。

//core/pom.xml

<plugin>
    <groupId>org.apache.sling</groupId>
    <artifactId>maven-sling-plugin</artifactId>
</plugin>

ターミナルで次のコマンドを使用して、Core バンドルをプロジェクトの他の要素とは独立してビルドしてみましょう。

$ cd aem-guides-wknd/core/
$ mvn -PautoInstallBundle clean install

...

[INFO] Installing Bundle com.adobe.aem.guides.aem-guides-wknd.core(/src/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: 4.304 s
[INFO] Finished at: 2018-04-05T12:10:59-04:00
[INFO] Final Memory: 29M/469M
[INFO] ------------------------------------------------------------------------

http://localhost:4502/system/console/bundles に移動すると、インストール済みのアクティブなバンドルが表示されます。

bundle-2

OSGi バンドルは jar であり、ui.apps モジュールの組み込み部分として AEM リポジトリにデプロイされます。jar の「物理的」な場所は CRXDE-Lite で確認できます。

jcr-bundle-location

UI.apps モジュール

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

Apache Jackrabbit FileVault Package プラグイン は、ui.apps モジュールのコンテンツを、AEM にデプロイできる AEM パッケージにコンパイルするために使用されます。プラグインのグローバル設定は、Parent pom.xml で定義されます。プラグインの定義を参照すると、filterSource の設定が確認できます。filterSource は filter.xml ファイルの場所を指定しています。filter.xml ファイルは、パッケージに含まれる jcr パスを定義するために使用されます。filterSourcefilter.xml ファイルの場所を指定しています。filter.xml ファイルは、パッケージに含まれる jcr パスを定義するために使用されます。  FileVault Package プラグインの下には Content Package プラグイン の定義があり、これはその後、パッケージを AEM にプッシュする際に使用されます。aem.host、aem.port、vault.user、および vault.password には変数が使用されており、これらはグローバルプロパティに対応します。

// pom.xml

<!-- Jackrabbit FileVault Package Plugin -->
                <plugin>
                    <groupId>org.apache.jackrabbit</groupId>
                    <artifactId>filevault-package-maven-plugin</artifactId>
                    <version>1.0.1</version>
                    <configuration>
                        <filterSource>src/main/content/META-INF/vault/filter.xml</filterSource>
                    </configuration>
                </plugin>
                <!-- Content Package Plugin -->
                <plugin>
                    <groupId>com.day.jcr.vault</groupId>
                    <artifactId>content-package-maven-plugin</artifactId>
                    <version>1.0.2</version>
                    <configuration>
                        <targetURL>http://${aem.host}:${aem.port}/crx/packmgr/service.jsp</targetURL>
                        <failOnError>true</failOnError>
                        <userId>${vault.user}</userId>
                        <password>${vault.password}</password>
                    </configuration>
                </plugin>

ui.apps フォルダーの下の pom.xml を参照すると、filevault-package-maven-plugin が確認できます。embedded タグには、ui.apps パッケージの一部としてコンパイルされた core バンドル、およびそのインストール先が含まれています。

//ui.apps/pom.xml

<!-- ====================================================================== -->
            <!-- V A U L T   P A C K A G E   P L U G I N                                -->
            <!-- ====================================================================== -->
<plugin>
                <groupId>org.apache.jackrabbit</groupId>
                <artifactId>filevault-package-maven-plugin</artifactId>
                <extensions>true</extensions>
                <configuration>
                    <embeddeds>
                        <embedded>
                            <groupId>com.adobe.aem.guides</groupId>
                            <artifactId>aem-guides-wknd.core</artifactId>
                            <target>/apps/wknd/install</target>
                        </embedded>
                    </embeddeds>
                    <subPackages>
                        <subPackage>
                            <groupId>com.adobe.cq</groupId>
                            <artifactId>core.wcm.components.all</artifactId>
                            <filter>true</filter>
                        </subPackage>
                    </subPackages>
                </configuration>
            </plugin>

core.wcm.components.allsubPackage として含まれていることに注意してください。コアコンポーネントの組み込みについては、後述されます。

ファイル ui.apps/src/main/content/META-INF/vault/filter.xml を開きます。このファイルには、ui.apps パッケージに含められ、インストールされるパスが定義されています。

<!-- ui.apps/src/main/content/META-INF/vault/filter.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/apps/wknd"/>
    <filter root="/apps/sling" />
</workspaceFilter>

UI.content モジュール

ui.content maven モジュールの /content および /conf の下には、ベースラインコンテンツおよび設定が含まれています。ui.content は ui.apps と同様、AEM パッケージにコンパイルされます。主な違いは、ui.content に格納されているノードは AEM インスタンスで直接修正できる点です。これには、ページ、DAM アセット、および編集可能テンプレートが含まれます。ui.content モジュールは、クリーンなインスタンスのサンプルコンテンツ、またはソース管理システムで管理されるベースライン設定を格納するために使用できます。

ファイル ui.content/src/main/content/META-INF/vault/filter.xml を開きます。このファイルには、ui.content パッケージに含められ、インストールされるパスが定義されています。mode="merge" 属性がパスに追加されています。これにより、コードのデプロイメント時にデプロイされた設定が、AEM インスタンスで直接作成されたコンテンツや設定を自動で上書きすることを回避できます。

 

<!-- ui.content/src/main/content/META-INF/vault/filter.xml -->

<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/conf/wknd" mode="merge"/>
    <filter root="/content/wknd" mode="merge"/>
    <filter root="/content/dam/wknd" mode="merge"/>
</workspaceFilter>

ui.content/pom.xml は、ui.apps モジュールと同様に FileVault Package プラグインを使用します。ここで、merge_preserve が指定された acHandling という設定が追加されていることに注意してください。ui.content モジュールにはテンプレートを編集できるユーザーに関するいくつかの権限が含まれているので、この設定が追加されています。これらのアクセス制御リスト(ACL)を AEM に読み込むには、acHandling プロパティが必要です。

<!-- ui.content/pom.xml -->
 <!-- ====================================================================== -->
            <!-- V A U L T   P A C K A G E   P L U G I N S                              -->
            <!-- ====================================================================== -->
            <plugin>
                <groupId>org.apache.jackrabbit</groupId>
                <artifactId>filevault-package-maven-plugin</artifactId>
                <extensions>true</extensions>
                <configuration>
                    <acHandling>merge_preserve</acHandling>
                </configuration>
            </plugin>

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

このプロジェクトでは AEM コアコンポーネントを使用します。これまで、AEM にデプロイされたパッケージについて確認した際に、コアコンポーネントに関連した 3 つのパッケージが含められていました。コアコンポーネントは、AEM Sites プロジェクトの開発を迅速化するために設計された一連の基本コンポーネントです。コアコンポーネントはオープンソースであり、GitHub で利用できます。コアコンポーネントについて詳しくは、こちらを参照してください。

コアコンポーネントは、デフォルトの実行モードで AEM に自動的にインストールされます。また、サンプルの We.Retail サイトで使用されます。コアコンポーネントは実稼動の実行モード(「nosamplecontent」)では使用できません。すべてのデプロイメントでコアコンポーネントを使用するには、それらを Maven プロジェクトの一部に組み込むことが推奨されます。

AEM プロジェクトアーキタイプには、デフォルトでコアコンポーネントが組み込まれています。どのように組み込まれているか見てみましょう。

  1. aem-guides-wknd/pom.xml の dependencies セクションを参照してください。

    コアコンポーネントのバージョン 2.2.0 への依存関係が追加されています。

    <dependencies>
    ...
     <dependency>
        <groupId>com.adobe.cq</groupId>
        <artifactId>core.wcm.components.all</artifactId>
        <type>zip</type>
       <version>2.2.0</version>
    </dependency>
    ...
    </dependencies>
  2. aem-guides-wknd/ui.apps/pom.xml を参照してください。

    依存リストには、core.wcm.components.all への依存関係が含められています。また、ここではバージョンは追加されていません。ベストプラクティスとしては、依存関係のバージョンを Parent Pom ファイルで管理することが推奨されます。

    //ui.apps/pom.xml
    
    <dependencies>
    ...
    
    <dependency>
       <groupId>com.adobe.cq</groupId>
        <artifactId>core.wcm.components.all</artifactId>
        <type>zip</type>
    </dependency>
    ...
    </dependencies>
  3. aem-guides-wknd/ui.apps/pom.xml 内の Vault Package プラグインを参照してください。

    core.wcm.components.all zip がサブパッケージとして含められています。これにより、WKND コードと共に毎回コアコンポーネントのパッケージがデプロイされます。

    //ui.apps/pom.xml
    
    <!-- ====================================================================== -->
                <!-- V A U L T   P A C K A G E   P L U G I N                                -->
                <!-- ====================================================================== -->
    <plugin>
                    <groupId>org.apache.jackrabbit</groupId>
                    <artifactId>filevault-package-maven-plugin</artifactId>
                    <extensions>true</extensions>
                    <configuration>
                        <embeddeds>
                            <embedded>
                                <groupId>com.adobe.aem.guides</groupId>
                                <artifactId>aem-guides-wknd.core</artifactId>
                                <target>/apps/wknd/install</target>
                            </embedded>
                        </embeddeds>
                        <subPackages>
                            <subPackage>
                                <groupId>com.adobe.cq</groupId>
                                <artifactId>core.wcm.components.all</artifactId>
                                <filter>true</filter>
                            </subPackage>
                        </subPackages>
                    </configuration>
                </plugin>

(オプション)パッケージへのカスタムサムネールの追加

このタスクはオプションですが、カスタムコードパッケージを簡単に特定するために役立ちます。カスタムサムネールを ui.apps モジュールに追加すると、AEM にデプロイするときにパッケージマネージャーに表示されます。

  1. thumbnail.png という名前の画像を作成する

    サイズは 64 x 64 ピクセルとすることが推奨されます。

    thumbnail
  2. サムネールを vault/definition フォルダーに配置する

    aem-guides-wknd/ui.apps/src/main/content/META-INF/vault/definition の下に definition という名前の新しいフォルダーを作成します。

    definition フォルダーにサムネールを追加します。

    thumbnail.png の兄弟として、definition フォルダー内に .content.xml という名前のファイルを追加します。このファイルに以下を記述します。

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:vlt="http://www.day.com/jcr/vault/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0">
        <thumbnail.png/>
    </jcr:root>
    
    2018-11-15_at_9_00am
  3. definition フォルダーを含めるよう ui.apps の pom.xml を更新する

    パッケージのビルド時、maven の content-package プラグインは ui.apps プロジェクト内のファイルおよびフォルダーを AEM パッケージにコンパイルします。ui.apps/pom.xml の <build> タグを更新することで、カスタムサムネールを使用するよう指定できます。

    <!-- ui.apps/pom.xml -->
    
    <!-- ====================================================================== -->
    <!-- B U I L D   D E F I N I T I O N                                        -->
    <!-- ====================================================================== -->
    <build>
        <sourceDirectory>src/main/content/jcr_root</sourceDirectory>
        <resources>
            <!-- define the resources that will go into the package -->
            <resource>
                <directory>${basedir}/src/main/content/jcr_root</directory>
                <excludes>
                    <!-- exclude .vlt control files in the package -->
                    <exclude>**/.vlt</exclude>
                    <exclude>**/.vltignore</exclude>
                    <exclude>**/.gitignore</exclude>
                    <exclude>**/*.iml</exclude>
                    <exclude>**/.classpath</exclude>
                    <exclude>**/.project</exclude>
                    <exclude>**/.settings</exclude>
                    <exclude>**/.DS_Store</exclude>
                    <exclude>**/target/**</exclude>
                    <exclude>**/pom.xml</exclude>
                </excludes>
            </resource>
    <!-- added thumbnail -->
            <resource>
                <directory>${basedir}/src/main/content/META-INF/vault/definition</directory>
                <targetPath>../vault-work/META-INF/vault/definition</targetPath>
            </resource>
        </resources>
  4. ui.content モジュールについて上記の手順を繰り返す

プロジェクトの AEM へのデプロイ

  1. 変更をテストおよび確認するために、プロジェクトのルートから、次の maven コマンドを再度実行します。

    $ cd <src>/aem-guides-wknd
    $ mvn -PautoInstallPackage -Padobe-public clean install
  2. AEM のパッケージマネージャーに移動します。

    5 つのパッケージがインストールされています。core.wcm.components.all には 2 つのサブパッケージ(core.wcm.components.configcore.wcm.components.content)が含まれています。WKND の ui.apps パッケージおよび ui.content パッケージのカスタムサムネールも表示されています。

    2018-11-01_at_1159am

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

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

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

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

AEM プロジェクトアーキタイプはサンプルの .gitignore ファイルを生成します。まずはこのファイルを使用して、安全に無視できるファイルを判断できます。

# Created by https://www.gitignore.io/api/eclipse,java,maven

### Eclipse ###
*.pydevproject
.metadata
.gradle
bin/
tmp/
*.tmp
*.bak
*.swp
*~.nib
local.properties
.settings/
.loadpath

# Eclipse Core
.project
MANIFEST.MF

# External tool builders
.externalToolBuilders/

# Locally stored "Eclipse launch configurations"
*.launch

# CDT-specific
.cproject

# JDT-specific (Eclipse Java Development Tools)
.classpath

# Java annotation processor (APT)
.factorypath

# PDT-specific
.buildpath

# sbteclipse plugin
.target

# TeXlipse plugin
.texlipse


### Java ###
*.class

# Mobile Tools for Java (J2ME)
.mtj.tmp/

# Package Files #
*.jar
*.war
*.ear

# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
hs_err_pid*

# Mac OS #
.DS_Store

### Maven ###
target/
pom.xml.tag
pom.xml.releaseBackup
pom.xml.versionsBackup
pom.xml.next
release.properties
dependency-reduced-pom.xml
buildNumber.properties
.mvn/timing.properties

### Vault ###
.vlt

### IntelliJ ###
.idea/
*.iml

統合開発環境の使用

AEM での開発には複数のツールを使用できます。

一般的に、Eclipse と IntelliJ は Java 開発に向いており、Brackets はフロントエンド開発に向いています。

開発者のワークフロー
一般的な開発者のワークフロー

このチュートリアルでは、Eclipse IDE および AEM Developer Tools プラグインを使用します。

  1. Eclipse Java EE IDE for Web Developer をダウンロードおよびインストールします

  2. https://eclipse.adobe.com/aem/dev-tools/ の指示に従って、AEM Developer Tools をインストールします

  3. WKND Maven プロジェクトを Eclipse に読み込みます

    Eclipse 内で、File/Import/Maven/Existing Maven Projects にアクセスします。aem-guides-wknd のディレクトリを参照します。すべてのモジュールを選択し、読み込みます。

    import-maven_project
  4. AEM Developer Tools を使用して「AEM サーバー」を作成します

    • AEM パースペクティブに移動していることを確認します(Window/Perspective/Open Perspective/AEM)。
    • Servers パネルの左下隅をクリックして新しいサーバーを作成します。
    • 手順 1: タイプに Adobe/Adobe Experience Manager を選択し、ホスト名およびサーバー名のプロパティを入力します。
    • 手順 2: aem-guides-wknd.coreaem-guides-wknd.ui.apps、および aem-guides-wknd.ui.content をサーバーに追加します。

     

    aem-servers
  5. 新規作成したサーバーをダブルクリックして開きます

    ローカルの AEM インスタンスと一致するよう、接続プロパティを更新します。

    • ポート:4502
    • ユーザー名:admin
    • パスワード:admin

    さらに、公開を自動的に無効にできます。サーバーを有効にし、ローカルの AEM インスタンスに接続できます。

    Screen Shot 2017-07-26 at 12.19.56 PM

開発者のワークフロー

開発者のワークフロー
AEM のローカル環境で作業する場合の、開発者のワークフローの概要

開発者は、ローカルファイルシステムとローカルで実行されている AEM インスタンスとの間でコードおよび設定をプッシュおよびプルします。ローカルの AEM インスタンス上でコードを詳細にテストし、必要なすべてのコードおよび設定がファイルシステムと同期されると、開発者はコードをコミットし、SCM の共有リポジトリにプッシュできます。そこで、コードはマスターのコードベースに統合され、Dev および QA などの共有環境にプッシュすることができます。

ヘルプ

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

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

次の手順

チュートリアルの次のパート:

完了したコードを GitHub で参照するか、チュートリアルのこのパートで完了したパッケージをダウンロードしてください。

ダウンロード

注意:

以下に列挙したビデオでは、Eclipse IDE および IntelliJ IDE を使用した開発者フローをご覧いただけます。異なるツールが使用されていますが、最終的な結果は同じになります。ビデオでは、このチュートリアルの以前のバージョンでおこなったコンポーネント開発をご紹介しています。ビデオ内のコードはここに含まれているので、コピーする必要はありません。これにより、ローカルマシン上での AEM 開発についてより良く理解していただけます。

Eclipse を使用した開発者フロー


IntelliJ を使用した開発者フロー


上記のビデオで言及されている repo プラグインはこちら(Repo - Integration with IntelliJ)から入手できます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー