AEM Sites の概要（第 1 章）- プロジェクトの設定

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

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

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

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

Java 1.8
Apache Maven（3.3.9 以降）
AEM 6.4 + Service Pack 2 または
AEM 6.3 + Service Pack 3
Eclipse または他の IDE

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

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

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

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

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 プロジェクトを作成することも可能です。

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

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

プロジェクトを構築する

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

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

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

こちらの手順に従って、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>

プロジェクトを構築する

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] ------------------------------------------------------------------------

AEM でパッケージを表示する

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

注意：

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

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

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

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

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

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

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

プロジェクトのルートにある 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 は、core、ui.apps、ui.content、ui.tests、it.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 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 に移動すると、インストール済みのアクティブなバンドルが表示されます。

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

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 パスを定義するために使用されます。filterSource は filter.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.all が subPackage として含まれていることに注意してください。コアコンポーネントの組み込みについては、後述されます。

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

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>

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>

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 にデプロイするときにパッケージマネージャーに表示されます。

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

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

サムネールを 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>

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>

ui.content モジュールについて上記の手順を繰り返す

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

$ cd <src>/aem-guides-wknd
$ mvn -PautoInstallPackage -Padobe-public clean install

AEM のパッケージマネージャーに移動します。

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

アプリケーションのコードを管理するために、何らかのソース管理システムを使用することが常に推奨されます。このチュートリアルでは 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 プラグインを使用します。

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

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

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

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

AEM Developer Tools を使用して「AEM サーバー」を作成します

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

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

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

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

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

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

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

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

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

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

AEM Sites の概要（第 2 章）- ベースページとテンプレートの作成

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

ダウンロード

ファイルを取得する

WKND ソリューションパッケージ（第 1 章～第 8 章）

注意：

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

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

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

AEM Sites の概要（第 1 章）- プロジェクトの設定

前提条件

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

プロジェクト構造の確認

親 POM

Core モジュール

UI.apps モジュール

UI.content モジュール

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

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

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

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

統合開発環境の使用

開発者のワークフロー

ヘルプ

次の手順

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

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

アドビサポートコミュニティ

サポート

AEM Sites の概要（第 1 章）- プロジェクトの設定

前提条件

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

プロジェクト構造の確認

親 POM

Core モジュール

UI.apps モジュール

UI.content モジュール

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

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

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

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

統合開発環境の使用

開発者のワークフロー

ヘルプ

次の手順

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

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

Language Navigation

Language Navigation