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

AEM、Adobe Experience Managerの地域開発を始めるためのガイド。 ローカルインストール、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のコピーについてお話します。 ​** AllAEM開発では、ローカルのAEMインスタンスに対してコードを記述し、実行することで開始を行う必要があります。

AEMを初めて使用する場合は、次の2つの基本的な実行モードをインストールできます。作成者​と​発行作成者 runmodeは、デジタルマーケターがコンテンツの作成と管理に使用する環境です。 ほとんど​を開発する場合は、作成者インスタンスにコードをデプロイします。 これにより、新しいページを作成したり、コンポーネントを追加および設定したりできます。 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ディレクトリの下に配置します。 追加/authorディレクトリの下の​license.properties​ファイル。

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

    ~/aem-sdk
        /author
            + aem-author-p4502.jar
            + license.properties
        /publish
            + aem-publish-p4503.jar
            + license.properties
    
  6. aem-author-p4502.jar​ファイルを重複クリックし、作成者​インスタンスをインストールします。 これは、ローカルコンピューターのポート​4502​で実行されている作成者インスタンスを開始します。

    aem-publish-p4503.jar​ファイルを重複クリックして、発行​インスタンスをインストールします。 これは、ローカルコンピューターのポート​4503​で実行されている発行インスタンスを開始します。

    メモ

    開発マシンのハードウェアによっては、作成者インスタンスと発行​インスタンスの両方を同時に実行するのは難しい場合があります。 ローカルセットアップで同時に両方を実行する必要がある場合はほとんどありません。

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

Apache Mavenのインストール

Apache Maven は、Javaベースのプロジェクトの構築と展開の手順を管理するツールです。AEMはJavaベースのプラットフォームで、MavenはAEMプロジェクトのコードを管理する標準的な方法です。 AEM Maven Project​または​AEM Project​のみと言うと、サイトの​カスタム​コードのすべてを含む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に追加されていることを確認します。

  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. mavenのビルドプロセスに追加​repo.adobe.com​を自動的に追加するために、Maven settings.xmlファイルの​adobe-public​プロファイルーを指定します。

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

  6. 追加に示す指示に基づくsettings.xmlファイルへの​adobe-public​プロファイル。

    サンプル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​が表示されない場合は、~/.m2/settings.xmlファイルでAdobeレポートが正しく参照されていないことを示しています。 前の手順を再度実行し、settings.xmlファイルがAdobeレポートを参照していることを確認してください。

統合開発環境の設定

統合開発環境(IDE)は、テキストエディタ、構文サポート、および構築ツールを組み合わせたアプリケーションです。 開発の種類に応じて、IDEの方が他のIDEよりも優れている場合があります。 IDEに関係なく、ローカルAEMインスタンスに対して定期的に​プッシュ​コードをテストできることが重要です。 また、Gitのようなソース管理システムに持続させるために、時折、ローカルのAEMインスタンスから​pull​設定をAEMプロジェクトに取り込むことも重要です。

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

メモ

WKNDプロジェクトは、AEMでCloud Serviceとして動作するようにデフォルトに更新されました。 6.5/6.4](https://github.com/adobe/aem-guides-wknd#building-for-aem-6xx)と[下位互換性を持つように更新されました。 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つで、大部分はオープンソースで、free!です。 Adobeは、AEM Developer Tools​というプラグインを提供し、Eclipseの開発を容易にし、良いGUIでコードをローカルのAEMインスタンスと同期できるようにします。 Eclipse IDEは、AEMを初めて使う開発者には大部分推奨されます。これは、AEM Developer ToolsがGUIをサポートしているからです。

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

  1. Eclipse IDE for Java EE Developersをダウンロードしてインストールします。https://www.eclipse.org
  2. 手順に従ってAEM Developer Toolsプラグインをインストールします。https://eclipse.adobe.com/aem/dev-tools/
  • 00:30 - Mavenプロジェクトのインポート
  • 01:24 - Mavenを使用したソースコードの構築とデプロイ
  • 04:33 - AEM Developer Toolでのプッシュコードの変更
  • 10:55 - AEM Developer Toolでのプルコード変更
  • 13:12 - Eclipseの統合デバッグツールの使用

IntelliJ IDEA

IntelliJ IDEA​は、Javaの専門的な開発を行う強力なIDEです。 IntelliJ IDEA フレディションとコマーシャル(有料)の2種類の味が ​** Community あ 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 — リポで変更を取り込む
  • 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 は、主にAEMクライアントライブラリを作成するためにCSS/LESSとJavaScriptコードを記述するフロントエンド開発者に最適です。ノード定義(ダイアログやコンポーネント)はすべて生のXMLで編集する必要があるので、新しいAEM開発者にとってこのツールは最適な選択ではないかもしれません。 Visual Studio CodeにはいくつかのJava拡張が使用できますが、主にJava開発を行う場合はEclipse IDEまたはIntelliJをお勧めします。

重要なリンク

  • DownloadVisual Studio コード
  • repo - JCRコンテンツ用のFTPに似たツール
  • aemfed - AEMフロントエンドワークフローの高速化
  • AEM同期 — コミュニティでサポートされる* Visual Studioコードの拡張機能
  • 00:30 - Mavenプロジェクトのインポート
  • 00:53 - Mavenを使用したソースコードの構築とデプロイ
  • 04:03 — リポコマンドラインツールを使用したプッシュコードの変更
  • 08:29 — リポコマンドラインツールを使用したプルコードの変更
  • 10:40 — 埋め込みツールを使用したプッシュコードの変更
  • 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のようなツールを使用してファイルの増分更新を行う場合、はCRXDE Lite​にファイルがローカルのAEMインスタンスにプッシュされ、ファイルの内容が更新されたことを確認します。http://localhost:4502/crx/de/index.jsp
  3. OSGiバンドル内のJavaコードに関連する問題が見つかった場合に、バンドルがアップロードされていることを確認し ます。Adobe Experience ManagerWebコンソールを開きます。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はインストール済み状態です。 これは、バンドルが予期しているcom.adobe.cq.wcm.core.components.modelsのバージョンが、AEMインスタンスで使用できるバージョンと異なるためです。

使用できる便利なツールは、依存関係ファインダーです。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コンポーネントは、ビジネスロジックをカプセル化し、HTLレンダリングスクリプトをクリーンな状態に保つために、常にSling Modelによってバックアップする必要があります。 Slingモデルが見つからない問題が発生した場合は、コンソールからSling Modelsをチェックすると便利です。http://localhost:4502/system/console/status-slingmodels. Slingモデルが登録済みかどうか、およびSlingモデルが関連付けられているリソースタイプ(コンポーネントパス)が表示されます。

Slingモデルの状態

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

CSSまたはJavaScriptの問題

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

CSSまたはJSの問題

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

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

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

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

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

Clientlibのデバッグ

メモ

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

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free