ローカル AEM 開発環境の設定

Adobe Experience Manager、AEM用のローカル開発の設定ガイド。 ローカルインストール、Apache Maven、統合開発環境、デバッグ/トラブルシューティングの重要なトピックについて説明します。 Eclipse IDE、CRXDE Lite、Visual Studio CodeおよびIntelliJ​を使用した開発について説明します。

概要

Adobe Experience ManagerまたはAEM向けにローカル開発を開発する際は、まず、環境を設定する必要があります。 生産性を高め、より良いコードを迅速に書き込むために、品質の高い開発環境の設定に時間をかけます。 AEMローカル開発環境は、次の4つの領域に分割できます。

  • ローカルAEMインスタンス
  • Apache Maven project
  • 統合開発環境(IDE)
  • トラブルシューティング

ローカルのAEMインスタンスのインストール

ローカルのAEMインスタンスを参照する場合、開発者のパーソナルマシン上で動作するAdobe Experience Managerのコピーについて説明します。 ​** すべてのAEM開発は、まず、ローカルのAEMインスタンスに対してコードを記述して実行する必要があります。

AEMを初めて使用する場合は、次の2つの基本的な実行モードをインストールできます。オーサー​と​パブリッシュ作成者 実行モードは、デジタルマーケターがコンテンツの作成と管理に使用する環境です。 オーサーインスタンスにコードをデプロイする​ほとんど​を開発する場合。 これにより、新しいページを作成したり、コンポーネントを追加および設定したりできます。 AEM SitesはWYSIWYGオーサリングCMSなので、CSSとJavaScriptのほとんどはオーサリングインスタンスに対してテストできます。

また、ローカルの​パブリッシュ​インスタンスに対する​重要な​テストコードです。 パブリッシュ​インスタンスは、Webサイトの訪問者がやり取りするAEM環境です。 パブリッシュ​インスタンスは、オーサー​インスタンスと同じテクノロジースタックですが、設定と権限に関しては大きな違いがあります。 上位の環境に昇格する前に、コードを常に​**​ローカルの​パブリッシュ​インスタンスに対してテストする必要があります。

手順

  1. Javaがインストールされていることを確認します。

  2. AEM QuickStart Jarと license.propertiesのコピーを取得します。

  3. 次のようなフォルダー構造をコンピューター上に作成します。

    ~/aem-sdk
        /author
        /publish
    
  4. QuickStart JARの名前を​aem-author-p4502.jar​に変更し、/authorディレクトリの下に配置します。 license.properties​ファイルを/authorディレクトリの下に追加します。

  5. QuickStart JARのコピーを作成し、aem-publish-p4503.jar​に名前を変更して、/publishディレクトリの下に配置します。 license.properties​ファイルのコピーを/publishディレクトリの下に追加します。

    ~/aem-sdk
        /author
            + aem-author-p4502.jar
            + license.properties
        /publish
            + aem-publish-p4503.jar
            + license.properties
    
  6. aem-author-p4502.jar​ファイルをダブルクリックして、Author​インスタンスをインストールします。 これにより、ローカルコンピューターのポート​4502​で実行されているオーサーインスタンスが起動します。

    aem-publish-p4503.jar​ファイルをダブルクリックして、パブリッシュ​インスタンスをインストールします。 これにより、ローカルコンピューターのポート​4503​で実行されているパブリッシュインスタンスが起動します。

    メモ

    開発マシンのハードウェアによっては、オーサーインスタンスとパブリッシュ​インスタンスの両方を同時に実行するのが困難な場合があります。 ローカルセットアップで同時に両方を実行する必要が生じることはほとんどありません。

    詳しくは、AEMインスタンスのデプロイとメンテナンスを参照してください。

Apache Mavenのインストール

Apache Maven は、Javaベースのプロジェクトのビルドおよびデプロイ手順を管理するツールです。AEMはJavaベースのプラットフォームで、 AEMプロジェクトのコードを管理する標準的な方法です。 Maven***​AEM Mavenプロジェクト***​または​AEMプロジェクト​のみと言うと、サイトのすべての​カスタム​コードを含むMavenプロジェクトを指します。

すべてのAEMプロジェクトは、AEM Project Archetype​の最新バージョンを使用して構築する必要があります。https://github.com/Adobe-Marketing-Cloud/aem-project-archetype. AEM Project Archetypeは、サンプルコードとコンテンツを含むAEMプロジェクトのブートストラップを作成します。 AEM Project Archetypeには、プロジェクトで使用するように設定された​AEM WCM Core Components​も含まれます。

注意

新しいプロジェクトを開始する際には、最新バージョンのアーキタイプを使用することをお勧めします。 アーキタイプには複数のバージョンがあり、すべてのバージョンが以前のバージョンのAEMと互換性があるわけではないことに注意してください。

手順

  1. Apache Mavenをダウンロードします。

  2. Apache Mavenをインストールし、インストールがコマンドラインPATHに追加されていることを確認します。

    • macOS ユーザーは、Homebrewを使用してMavenをインストールで きます
  3. 新しいコマンドラインターミナルを開き、次のコマンドを実行して、Maven​がインストールされていることを確認します。

    $ mvn --version
    Apache Maven 3.3.9
    Maven home: /Library/apache-maven-3.3.9
    Java version: 1.8.0_111, vendor: Oracle Corporation
    Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home/jre
    Default locale: en_US, platform encoding: UTF-8
    
  4. adobe-public​プロファイルをMaven settings.xmlファイルに追加して、repo.adobe.com​をMavenのビルドプロセスに自動的に追加します。

  5. settings.xmlという名前のファイルが存在しない場合は、~/.m2/settings.xmlに作成します。

  6. 🔗での手順に基づいて、adobe-public​プロファイルをsettings.xmlファイルに追加します。

    settings.xmlの例を以下に示します。 の命名規則と、ユーザーの settings.xml ディレクトリの下の配置が重 .m2 要です。

    <settings xmlns="https://maven.apache.org/SETTINGS/1.0.0"
      xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://maven.apache.org/SETTINGS/1.0.0
                          https://maven.apache.org/xsd/settings-1.0.0.xsd">
    <profiles>
     <!-- ====================================================== -->
     <!-- A D O B E   P U B L I C   P R O F I L E                -->
     <!-- ====================================================== -->
         <profile>
             <id>adobe-public</id>
             <activation>
                 <activeByDefault>true</activeByDefault>
             </activation>
             <properties>
                 <releaseRepository-Id>adobe-public-releases</releaseRepository-Id>
                 <releaseRepository-Name>Adobe Public Releases</releaseRepository-Name>
                 <releaseRepository-URL>https://repo.adobe.com/nexus/content/groups/public</releaseRepository-URL>
             </properties>
             <repositories>
                 <repository>
                     <id>adobe-public-releases</id>
                     <name>Adobe Public Repository</name>
                     <url>https://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 Public Repository</name>
                     <url>https://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. 次のコマンドを実行して、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
    

    adobe-public​が表示されない場合は、Adobeリポジトリが~/.m2/settings.xmlファイルで正しく参照されていないことを示しています。 前の手順を再度実行し、settings.xmlファイルがAdobeリポジトリを参照していることを確認してください。

統合開発環境の設定

統合開発環境またはIDEは、テキストエディタ、構文サポート、ビルドツールを組み合わせたアプリケーションです。 実行する開発の種類によっては、IDEが別のIDEよりも優先される場合があります。 IDEに関係なく、ローカルのAEMインスタンスに​プッシュ​コードを定期的にプッシュしてテストできることが重要です。 また、Gitなどのソース管理システムに持続するためには、ローカルのAEMインスタンスからAEMプロジェクトに​プル​設定を行うことも重要です。

ローカルのAEMインスタンスとの統合を示す、対応するビデオを含む、AEM開発で使用される、より一般的なIDEの例を以下に示します。

メモ

WKNDプロジェクトは、AEM as a Cloud Serviceで動作するようにデフォルトに更新されました。 6.5/6.4🔗と後方互換性を持つように更新されました。 AEM 6.5または6.4を使用している場合は、任意のMavenコマンドにclassicプロファイルを追加します。

$ mvn clean install -PautoInstallSinglePackage -Pclassic

IDEを使用する場合は、「Mavenプロファイル」タブでclassicを確認してください。

「Mavenプロファイル」タブ

IntelliJ Mavenプロファイル

Eclipse IDE

Eclipse IDE​は、オープンソースで​無料​なので、Java開発用のIDEの中でも一般的なものの1つです。 Adobeには、AEM Developer Tools​というプラグインが用意されています。Eclipseを使用すると、優れたGUIで開発を容易にし、コードをローカルAEMインスタンスと同期できます。 Eclipse IDEは、AEM Developer ToolsによるGUIのサポートのため、AEMを初めて使用する開発者に推奨されます。

インストールとセットアップ

  1. Eclipse IDEをJava EE Developers用にダウンロードしてインストールします。https://www.eclipse.org
  2. AEM Developer Toolsプラグインをインストールする手順に従います。https://experienceleague.adobe.com/docs/experience-manager-65/developing/devtools/aem-eclipse.html?lang=ja?lang=ja
  • 00:30 - Mavenプロジェクトのインポート
  • 01:24 - Mavenを使用したソースコードのビルドとデプロイ
  • 04:33 - AEM開発者ツールを使用したプッシュコードの変更
  • 10:55 - AEM Developer Toolを使用したプルコード変更
  • 13:12 - Eclipseの統合デバッグツールの使用

IntelliJ IDEA

IntelliJ IDEA​は、Javaのプロフェッショナル開発用の強力なIDEです。 IntelliJ IDEA は、フレディションと商 ​** Community 業版(有料)の2種類の味で Ultimate す。Community版のIntellIJ IDEAは、より多くのAEM開発に十分ですが、Ultimate 機能セットを拡張します。

Installation and Setup

  1. IntelliJ IDEAをダウンロードしてインストールします。https://www.jetbrains.com/idea/download
  2. Repo (コマンドラインツール)をインストールします。https://github.com/Adobe-Marketing-Cloud/tools/tree/master/repo
  • 00:00 - Mavenプロジェクトのインポート
  • 05:47 - Mavenを使用したソースコードのビルドとデプロイ
  • 08:17 — リポジトリを使用したプッシュの変更
  • 14:39 - Repoを使用した変更のプル
  • 17:25 - IntelliJ IDEAの統合デバッグツールの使用

Visual Studio Code

Visual Studio Codeは、強化されたJavaScriptのサポート、およびブラウザーのデバッ グサポートを備えたフロントエ ンド開発者にとって、すぐにお気に入りのツールになっていま Intellisenseす。Visual Studio Code は、多くの強力な拡張機能を備えたオープンソースで、無料です。Visual Studio Code は、Adobeツール repoを使用して、AEMと統合するように設定できます。 また、AEMと統合するためにインストールできる、コミュニティでサポートされる拡張機能もいくつかあります。

Visual Studio Code は、主にCSS/LESSとJavaScriptコードを記述してAEMクライアントライブラリを作成するフロントエンド開発者に最適です。ノード定義(ダイアログ、コンポーネント)はすべて生のXMLで編集する必要があるので、このツールは新しいAEM開発者にとって最適な選択ではない可能性があります。 Visual Studio Codeには複数のJava拡張機能が使用できますが、主にJava開発を行う場合はEclipse IDEまたはIntelliJを使用することをお勧めします。

重要なリンク

  • 🔗 DownloadVisual Studio Code
  • repo - JCRコンテンツ用のFTPに似たツール
  • aemfed - AEMフロントエンドワークフローの高速化
  • AEM Sync - Community supported* extension for Visual Studio Code
  • 00:30 - Mavenプロジェクトのインポート
  • 0時53分 — Mavenを使用したソースコードのビルドとデプロイ
  • 04:03 — リポジトリコマンドラインツールを使用したプッシュコードの変更
  • 08:29 - Repoコマンドラインツールを使用したプルコードの変更
  • 10:40 - AEMFEDツールを使用したプッシュコードの変更
  • 14:24 — トラブルシューティング、クライアントライブラリの再構築

CRXDE Lite

CRXDE Lite は、AEMリポジトリのブラウザーベースのビューです。CRXDE Lite はAEMに埋め込まれており、開発者は、ファイルの編集、コンポーネント、ダイアログ、テンプレートの定義など、標準的な開発タスクを実行できます。CRXDE Lite は、完 ​** 全な開発環境ではなく、デバッグツールとして非常に効果的です。CRXDE Lite は、を拡張する場合や、コードベース外の製品コードについて理解する場合に役立ちます。CRXDE Lite は、リポジトリを強力に表示し、権限を効果的にテストおよび管理する方法を提供します。

CRXDE Lite は、常に他のIDEと組み合わせてコードのテストとデバッグを行う必要がありますが、主な開発ツールとしては使用しないでください。構文のサポートが制限され、オートコンプリート機能はなく、ソース管理システムとの統合も制限されます。

トラブルシューティング

ヘルプ! コードが機能しない!すべての開発と同様に、コードが期待どおりに動作しない場合も(おそらく多く)あります。 AEMは強力なプラットフォームですが、大きな力を持って…は、大きな複雑性をもたらします。 以下に、問題のトラブルシューティングと追跡に関する概要をいくつか示します(ただし、問題が発生する可能性のあるすべてを網羅したリストからは程遠い)。

コードのデプロイメントの検証

問題が発生した場合の最初の手順は、コードがAEMに正常にデプロイされ、インストールされていることを確認することです。

  1. パッケージ マネージャー で、コードパッケージがアップロードおよびインストールされていることを確認します。 http://localhost:4502/crx/packmgr/index.jspを参照してください。タイムスタンプを確認して、パッケージが最近インストールされたことを確認します。
  2. RepoやAEM Developer Toolsなどのツールを使用して増分ファイル更新をおこなう場合は、ファイルがローカルのAEMインスタンスにプッシュされ、ファイルの内容が更新されたことを確認します。http://localhost:4502/crx/de/index.jsp CRXDE Lite
  3. OSGiバンドル内のJavaコードに関 連する問題が見つかった場合は、バンドルがアップロードされていることを確認します。Adobe Experience Manager Webコンソールを開きます。http://localhost:4502/system/console/bundlesを検索し、バンドルを検索します。 バンドルのステータスが​アクティブ​であることを確認します。 Installed​状態のバンドルのトラブルシューティングに関する詳細は、以下を参照してください。

ログの確認

AEMはチャットプラットフォームで、error.log​に多くの有用な情報を記録します。 error.log​は、AEMがインストールされている場所にあります。< aem-installation-folder>/crx-quickstart/logs/error.log.

問題を追跡するための有効な手法は、Javaコードにログステートメントを追加することです。

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
...

public class MyClass {
    private final Logger log = LoggerFactory.getLogger(getClass());

    ...

    String myVariable = "My Variable";

    log.debug("Debug statement of myVariable {}", myVariable);

    log.info("Info statement of myVariable {}", myVariable);
}

デフォルトでは、error.log​は​INFO​文をログに記録するように設定されます。 ログレベルを変更する場合は、ログサポートに移動して、次の手順を実行します。http://localhost:4502/system/console/slinglog. また、error.log​がチャットしすぎる場合もあります。 ログサポートを使用して、指定したJavaパッケージのログステートメントを設定できます。 これは、カスタムコードの問題をOOTB AEMプラットフォームの問題から簡単に分離できるように、プロジェクトのベストプラクティスです。

AEMでのログ設定

バンドルがインストール済みの状態である

すべてのバンドル(フラグメントを除く)は、アクティブ​状態である必要があります。 コードバンドルがInstalledの状態にある場合は、解決する必要がある問題があります。 ほとんどの場合、これは依存関係の問題です。

AEMのバンドルエラー

上のスクリーンショットでは、WKND Core bundleはInstalled状態です。 これは、バンドルにはAEMインスタンスで使用可能なcom.adobe.cq.wcm.core.components.modelsとは異なるバージョンが必要であるためです。

使用できる便利なツールの1つは、依存関係ファインダーです。http://localhost:4502/system/console/depfinder. AEMインスタンスで使用可能なバージョンを調べるJavaパッケージ名を追加します。

コアコンポーネント

上記の例では、AEMインスタンスにインストールされているバージョンが、バンドルが予期していた​12.2​対​12.6​であることがわかります。 そこから後方に進み、AEM上のMaven依存関係がAEMプロジェクト内のMaven依存関係と一致するかどうかを確認できます。 上記の例では、 Core Components v2.2.0​がAEMインスタンスにインストールされていますが、コードバンドルは​v2.2.2​に依存関係を持って構築されたので、依存関係の問題が発生します。

Slingモデルの登録の検証

AEMコンポーネントは、常にSling Modelを使用して、あらゆるビジネスロジックをカプセル化し、HTLレンダリングスクリプトをクリーンな状態に維持する必要があります。 Slingモデルが見つからない問題が発生した場合は、コンソールからSling Modelsを確認すると役立つ場合があります。http://localhost:4502/system/console/status-slingmodels. これにより、Slingモデルが登録されているかどうか、およびSlingモデルが関連付けられているリソースタイプ(コンポーネントパス)が示されます。

Slingモデルのステータス

Sling Model、wknd/components/content/bylineのコンポーネントリソースタイプに結び付けられたBylineImplの登録を表示します。

CSSまたはJavaScriptの問題

ほとんどのCSSおよびJavaScriptの問題に対して、ブラウザーの開発ツールを使用することが、最も効果的なトラブルシューティング方法です。 AEMオーサーインスタンスに対して開発する際の問題を絞り込むには、「公開済み」ページを表示すると便利です。

CSSまたはJSの問題

ページのプロパティメニューを開き、「公開済みとして表示」をクリックします。 これにより、AEMエディターを使用せずにページが開き、クエリパラメーターが​wcmmode=disabled​に設定されます。 これにより、AEMオーサリングUIが効果的に無効になり、フロントエンドの問題のトラブルシューティングやデバッグがより簡単になります。

フロントエンドコードの開発時に、古い、または古いCSS/JSが読み込まれている際に、よく発生する問題がもう1つあります。 最初の手順として、ブラウザー履歴がクリアされ、必要に応じて匿名ブラウザーまたは新しいセッションを開始します。

クライアントライブラリのデバッグ

カテゴリや埋め込みの様々な方法で複数のクライアントライブラリを含めると、トラブルシューティングが面倒になる場合があります。 AEM はそのためにいくつかのツールを公開しています。最も重要なツールの1つは、クライアントライブラリの再構築です。これは、AEMがLESSファイルを再コンパイルし、CSSを生成するよう強制します。

  • ライブラリのダンプ - AEMインスタンスに登録されているすべてのクライアントライブラリをリストします。<host>/libs/granite/ui/content/dumplibs.html
  • 出力テスト - カテゴリ別を含む、clientlib の予想される HTML 出力を確認できます。<host>/libs/granite/ui/content/dumplibs.test.html
  • ライブラリの依存関係の検証 — 見つからない依存関係や埋め込みカテゴリをハイライトします。<host>/libs/granite/ui/content/dumplibs.validate.html
  • クライアントライブラリの再ビルド - AEM はすべてのクライアントライブラリを強制的に再ビルドするか、クライアントライブラリのキャッシュを無効にできます。このツールでは、AEM が生成された CSS を強制的に再コンパイルするので、LESS を使用した開発において特に効果的です。一般的に、キャッシュを無効化した後にページの更新をおこなう方が、すべてのライブラリを再ビルドするよりも効果的です。<host>/libs/granite/ui/content/dumplibs.rebuild.html

clientlibのデバッグ

メモ

クライアントライブラリの再構築ツールを使用してキャッシュを常に無効にする必要がある場合は、すべてのクライアントライブラリを1回再構築するだけで済みます。 この処理には約15分かかりますが、通常は将来キャッシュの問題が発生しなくなります。

このページ