Visual Studio Codeを使ったAEMの開発環境を構築する

こんにちは、大和株式会社の浅尾です。
今回は開発者ブログの記念すべき第一回目ということで、開発環境の構築手順を紹介します。

Eclipseを使った開発環境の構築手順が書かれた公式のドキュメントはあるのですが、
正直、Eclipseは重すぎて耐え難い！ので、ここではVisual Studio Codeを使った開発環境の構築手順を紹介します。

以下の手順で

HTLファイル（JSPも）・JCRノード・バンドルの同期
バンドルのデバッグ

などができるようになります。

以下ではAEMのバージョンは6.5.0である前提で手順を紹介しますが、他のバージョンでも基本的には変わりません。

必要なもの

AEM Quickstart Jar (cq-quickstart-6.5.0.jar)
ライセンスファイル (license.properties)
JDK 1.8
Visual Studio Code
Apache Maven 3.3.9以上

JDK・VSCode・MavenがOSにインストールされていることを前提とします。

AEMのインストールと起動

なにはともあれ、AEMのインストールと起動です。
jarファイルを置いて、ファイル名を変えてダブルクリック、でもいいのですが、簡単にデバッグモードでAEMを起動できるように少し仕込みをします。

AEMを格納する適当なディレクトリを作成したのち、そこにQuickstart Jarファイルとライセンスファイルを置き、以下のコマンドを実行します。

java -jar cq-quickstart-6.5.0.jar -unpack

これでcrx-quickstartフォルダが作成されるので、

Windowsであればcrx-quickstart/bin/start.batの

if not defined CQ_JVM_OPTS set CQ_JVM_OPTS=-Xmx1024m -XX:MaxPermSize=256M -Djava.awt.headless=true

を

if not defined CQ_JVM_OPTS set CQ_JVM_OPTS=-Xmx1024m -XX:MaxPermSize=256M -Djava.awt.headless=true -agentlib:jdwp=transport=dt_socket,address=8000,server=y,suspend=n

のように変更し、

Linux/Macであればcrx-quickstart/bin/startの

CQ_JVM_OPTS='-server -Xmx1024m -XX:MaxPermSize=256M -Djava.awt.headless=true'

を

CQ_JVM_OPTS='-server -Xmx1024m -XX:MaxPermSize=256M -Djava.awt.headless=true -agentlib:jdwp=transport=dt_socket,address=8000,server=y,suspend=n'

のように変更します。
（必要があればヒープの最大サイズもここで変更できます）

あとは、このスクリプトを実行すれば（デバッグモードで）AEMが起動されるので、http://localhost:4502 からユーザー名：admin、パスワード：adminでログインできることを確認してください。

AEMサンプルプロジェクトの作成

AEMに関わるソースコードの初期セットを、Adobe公式のAEM ArchetypeからMavenコマンドで作成します。

AEMサンプルプロジェクトを格納する適当なディレクトリを作成し、そこで次のコマンドを実行します。

mvn -B archetype:generate -DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=23 -DoptionAemVersion=6.5.0 -DgroupId=com.example -DappsFolderName=tutorial

ここで、 - archetypeVersionは最新のもの（ここで確認できます） - optionAemVersionは起動するAEMのバージョン - groupIdとappsFolderNameはそのプロジェクトにあった名前

を指定します。
コマンドの詳細はここで確認できます。

次に、作成されたcom.example.tutorialディレクトリに移動し、次のコマンドを実行します。

mvn clean install -PautoInstallPackage

これでMavenプロジェクトの作成・ビルド、およびAEMへのデプロイができました。

Visual Studio Codeの設定

まずVSCodeでAEM開発を行うために便利な以下の拡張機能をインストールします。

VSCode AEM Sync
HTLファイル・JCRノード等をAEMとクライアントPC上で同期させるための拡張機能（弊社お手製！）
Java Extension Pack
Java開発を行うにあたって便利な拡張機能セット

次に、拡張機能の設定を行います。

ひとつめは、VSCode AEM Syncの設定です。
VSCode上で「設定」を開くと、検索画面が表示されるので、そこに「Aemsync」と入力し、Aemsync: Autopushを有効にします。
これにより、VSCode上で変更したファイルが自動でAEMに同期されます。

ふたつめは、Java Extension Packに含まれるDebugger for Javaの設定です。
アクティビティバー（VSCode画面左側のアイコンが縦に並んでいる部分）の虫マークをクリックし、「create a launch.json file.」をクリックします。
するとlaunch.jsonファイルが開かれるので、それを以下の用に変更します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "java",
      "name": "Debug (Attach)",
      "request": "attach",
      "hostName": "localhost",
      "port": 8000
    }
  ]
}

以上で開発環境の構築は完了です！

それでは、VSCodeを使ってコンポーネント（ページを編集するための部品）をいじってみましょう。

Hello Worldコンポーネントに変更を加える

サンプルのMavenプロジェクトをデプロイしたことで、AEMにはすでにいくつかのサンプルコンポーネントがインストールされた状態になっています。
まずはHello Worldコンポーネントを配置してみましょう。

コンポーネントの配置

以下の手順で、ページを作成し、Hello Worldコンポーネントを配置します。

http://localhost:4502 にアクセスし、Navigation > Sitesを選択する
tutorial > us > enをクリックして、「Create」によりContent Pageを作成後、ページを開く
「Drag components here」をクリックして「+」ボタンから、「Hello World Component」を選択する
ページに置かれた「Hello World Component」をクリックして、レンチマークからダイアログを開き、適当なテキストを入力してチェックボタンをクリックする

これで以下のようにコンポーネントが表示されているはずです。
（サンプルプロジェクトではCSSが定義されていないため、見た目は気にしないでください） f:id:yamato_tech:20200225183010p:plain

ファイルシステム上の変更をAEMにExportする

VSCodeのワークスペースにcom.example.tutorialフォルダを追加する
ui.apps/src/main/content/jcr_root/apps/tutorial/comonents/content/helloworld/helloworld.htmlを開き、
<p data-sly-test="${properties.text}">Text property: ${properties.text}</p>のpタグをh1に変更して保存

VSCodeの通知に「Successfully exported: ...」と表示されれば、AEMへのExportは完了です。
先程のAEM上のページを確認してみましょう。以下の通り、テキストがh1で表示されているはずです。 f:id:yamato_tech:20200225183021p:plain

AEM上の変更をファイルシステムにImportする

http://localhost:4502/crx/de にアクセスし、/apps/tutorial/components/content/helloworldノードを開く
jcr:titleプロパティをHello World Componentからハローワールドコンポーネントに変更し、保存する
VSCodeでui.apps/src/main/content/jcr_root/apps/tutorial/comonents/content/helloworldフォルダを右クリックし、「Import from AEM Server」をクリックする

VSCodeの通知に「Successfully imported: ...」と表示されれば、AEMからのImportは完了です。
ui.apps/src/main/content/jcr_root/apps/tutorial/comonents/content/helloworld/.content.xmlを開くと、jcr:titleの値が「ハローワールドコンポーネント」に変更されているはずです。

バンドルの変更

VSCodeでcore\src\main\java\com\example\core\models\HelloWorldModel.javaを開く
getMessageメソッドを以下のように変更して保存する java public String getMessage() { return "[[[[" + message + "]]]]"; }
「Ctrl + Shift + P」でコマンドパレットを開き、「Maven: Execute commands」を実行
2回目以降は「Maven: History ...」から以前の入力を選択可能
「com.example.tutorial.core」を選択し、「Custom ...」から、「install -PautoInstallBundle」と入力

ターミナル画面が開き、「BUILD SUCCESS」が表示されれば、AEMとの同期は完了です。
先程のAEM上のページを確認してみましょう。以下の通り、メッセージが[[[[と]]]]に囲まれているはずです。
（バンドルのデプロイ時は数秒程度ページが404になるため、少しだけ時間を置いてページを開いてください） f:id:yamato_tech:20200225183024p:plain

Javaのデバッグ

VSCodeでcore\src\main\java\com\example\core\models\HelloWorldModel.javaを開き、「F5」キーでデバッグモードを起動する
message = "\tHello AEM World!\n"の行番号の左側をクリックし、Break Pointを設定する
AEM上のページを更新

するとページのレンダリング処理が設定したBreak Pointで中断し、VSCode上では元時点での変数が表示されます。
処理を先に進めたい場合は、再生ボタンをクリックしてください。

ということで

こんな感じで、VSCodeで開発できる環境が整いました。
紹介は省きましたが、Mavenプロジェクトの依存関係を考慮した補完もValidateもしてくれるし、JUnitの連携も簡単にできます。

Eclipseに苦しめられた日々は遠くなりにけり…

次のステップ

さて、開発環境はできたけど実際の開発はどうしたらいいんだ、というそこのあなたには
Adobe公式のWKND Tutorialをおすすめします。
フロントエンド開発からバックエンド開発まで広く扱っていて、コンポーネント開発で必要なことはざっくりわかるようになるはずです。
日本語翻訳版もあるのですが、英語版より内容の更新が遅いなどの難点があるので、やっぱりできれば英語版がおすすめです。

AEM開発者ブログ by YAMATO

アドビ社のデリバリーパートナー大和株式会社のAEM開発者ブログです。