AEM SPA エディターで使用するカスタムコンポーネントを作成する方法を説明します。オーサーダイアログと Sling モデルを開発して JSON モデルを拡張し、カスタムコンポーネントを設定する方法について説明します。
前の章では、SPA コンポーネントの開発と、それらを既存の AEM コアコンポーネントにマッピングする方法を重点的に説明しました。 この章では、新規の AEM コンポーネントを作成および拡張する方法と、AEM から提供される JSON モデルを操作する方法に重点を置いて説明します。
まったく新しい AEM コンポーネントを作成する際に必要な手順をシンプルな Custom Component
で示しています。
ローカル開発環境の設定に必要なツールや手順を確認してください。
このチュートリアルの出発点となるものを Git からダウンロードします。
$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/custom-component-start
Maven を使用してコードベースをローカルの AEM インスタンスにデプロイします。
$ mvn clean install -PautoInstallSinglePackage
AEM 6.x を使用している場合は、classic
プロファイルを追加します。
$ mvn clean install -PautoInstallSinglePackage -Pclassic
従来の WKND リファレンスサイトの完成したパッケージをインストールします。WKND リファレンスサイトから提供された画像は、WKND SPA で再利用されます。パッケージは、AEM のパッケージマネージャーを使用してインストールできます。
いつでも、完成したコードを GitHub で確認したり、ブランチ Angular/custom-component-solution
に切り替えてローカルにチェックアウトしたりできます。
AEM コンポーネントは、ノードおよびプロパティとして定義されます。 プロジェクトでは、これらのノードおよびプロパティは、ui.apps
モジュールの XML ファイルとして表されます。 次に、ui.apps
モジュールに AEM コンポーネントを作成します。
AEM コンポーネントの基本についてざっと復習しておくと役立つ場合があります。
ui.apps
フォルダーを任意の IDE で開きます。
ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components
に移動し、 custom-component
という名前のフォルダーを作成します。
custom-component
フォルダーの下に .content.xml
という名前のファイルを作成します。custom-component/.content.xml
に以下を入力します。
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Component"
jcr:title="Custom Component"
componentGroup="WKND SPA Angular - Content"/>
jcr:primaryType="cq:Component"
- このノードが AEM コンポーネントであることを示します。
jcr:title
は、コンテンツ作成者に表示される値で、componentGroup
はオーサリング UI でのコンポーネントのグループ化を決定します。
custom-component
フォルダーの下に、_cq_dialog
という名前の新しいフォルダーを作成します。
_cq_dialog
フォルダーの下に .content.xml
という名前のファイルを作成し、次の内容を入力します。
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Custom Component"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<properties
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<message
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="The text to display on the component."
fieldLabel="Message"
name="./message"/>
</items>
</column>
</items>
</columns>
</items>
</properties>
</items>
</tabs>
</items>
</content>
</jcr:root>
上記の XML ファイルの場合は、Custom Component
の簡単なダイアログが生成されます。ファイルの重要な部分は、内側の <message>
ノードです。このダイアログには、Message
という名前の単純な textfield
が含まれています。このテキストフィールドの値を message
という名前のプロパティに保持します。
次に Sling モデルを作成し、JSON モデルを介して message
プロパティの値を公開します。
コア コンポーネントの定義を確認することで、ダイアログのより多くの例を確認できます。また、CRXDE-Lite の /libs/granite/ui/components/coral/foundation/form
の下にある select
、textarea
、pathfield
などの追加のフォームフィールドも確認できます。
従来の AEM コンポーネントでは、通常 HTL スクリプトが必要です。SPA がコンポーネントをレンダリングするので、HTL スクリプトは必要ありません。
Sling モデルは、JCR から Java™ 変数へのデータのマッピングを容易にする注釈主導の Java™「POJO」(Plain Old Java™ Objects)です。Sling モデルは通常、AEM コンポーネントの複雑なサーバーサイドビジネスロジックをカプセル化する機能を果たします。
SPA エディターのコンテキストでは、Sling モデルは Sling Model Exporter を使用した機能により、JSON モデルを通じてコンポーネントのコンテンツを公開します。
任意に選択した IDE で core
モジュールを開きます。CustomComponent.java
と CustomComponentImpl.java
は既に作成されており、この章の初期コードの一部としてスタブ化されています。
Visual Studio Code IDE を使用している場合は、Java™ の拡張機能をインストールすると役立つ可能性があります。
core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/CustomComponent.java
で Java™ インターフェイス CustomComponent.java
を開きます。
これは、Sling モデルで実装されている Java™ インターフェイスです。
ComponentExporter
インターフェイスを拡張するように CustomComponent.java
を更新します。
package com.adobe.aem.guides.wknd.spa.angular.core.models;
import com.adobe.cq.export.json.ComponentExporter;
public interface CustomComponent extends ComponentExporter {
public String getMessage();
}
ComponentExporter
インターフェイスの実装は、JSON モデル API で Sling モデルが自動的に取得されるための要件です。
CustomComponent
インターフェイスには、単一のゲッターメソッド getMessage()
が含まれています。これは、JSON モデルを通じてオーサーダイアログの値を公開するメソッドです。空のパラメータ ()
を持つゲッターメソッドのみが JSON モデルに書き出されます。
core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/impl/CustomComponentImpl.java
で CustomComponentImpl.java
を開きます。
これは CustomComponent
インターフェイスの実装です。@Model
注釈は、Java™ クラスを Sling モデルとして識別します。@Exporter
注釈により、Sling Model Exporter を通じて Java™ クラスをシリアル化して書き出すことができます。
静的変数 RESOURCE_TYPE
を更新して、前の演習で作成した AEM コンポーネント wknd-spa-angular/components/custom-component
を指すようにします。
static final String RESOURCE_TYPE = "wknd-spa-angular/components/custom-component";
コンポーネントのリソースタイプは、Sling モデルを AEM コンポーネントにバインドし、最終的に Angular コンポーネントにマッピングするものです。
コンポーネントのリソースタイプを返す getExportedType()
メソッドを CustomComponentImpl
クラスに追加します。
@Override
public String getExportedType() {
return CustomComponentImpl.RESOURCE_TYPE;
}
このメソッドは ComponentExporter
インターフェースを実装する際に必要で、Angular コンポーネントへのマッピングを可能にするリソースタイプを公開します。
オーサーダイアログが保持する message
プロパティの値を返すように、getMessage()
メソッドを更新します。@ValueMap
注釈を使用すると、JCR 値 message
を Java™ 変数にマッピングできます。
import org.apache.commons.lang3.StringUtils;
...
@ValueMapValue
private String message;
@Override
public String getMessage() {
return StringUtils.isNotBlank(message) ? message.toUpperCase() : null;
}
メッセージの値を大文字で返すための「ビジネスロジック」がいくつか追加されています。 これにより、オーサーダイアログに保存されている生の値と、Sling モデルで公開される値の違いを確認できます。
完成した CustomComponentImpl.java は、こちらで確認できます。
カスタムコンポーネントの Angular コードは既に作成されています。次に、Angular コンポーネントを AEM コンポーネントにマッピングするために、いくつかの更新を行います。
ui.frontend
モジュールで、ファイル ui.frontend/src/app/components/custom/custom.component.ts
を開きます。
@Input() message: string;
行を確認します。変換された大文字の値がこの変数にマッピングされるはずです。
MapTo
オブジェクトを AEM SPA エディター JavaScript SDK から読み込み、それを使用して AEM コンポーネントにマッピングします。
+ import {MapTo} from '@adobe/cq-angular-editable-components';
...
export class CustomComponent implements OnInit {
...
}
+ MapTo('wknd-spa-angular/components/custom-component')(CustomComponent, CustomEditConfig);
cutom.component.html
を開いて、{{message}}
の値が <h2>
タグ内に表示されていることを確認します。
custom.component.css
を開いて、次のルールを追加します。
:host-context {
display: block;
}
コンポーネントが空のときに AEM エディターのプレースホルダーを正しく表示するには、:host-context
または別の <div>
を display: block;
に設定する必要があります。
Maven のスキルを活用して、プロジェクトディレクトリのルートからローカル AEM 環境にアップデートをデプロイします。
$ cd aem-guides-wknd-spa
$ mvn clean install -PautoInstallSinglePackage
次に、AEM に移動してアップデートを確認し、Custom Component
を SPA に追加できるようにします。
http://localhost:4502/system/console/status-slingmodels に移動して、新しい Sling モデルの登録を確認します。
com.adobe.aem.guides.wknd.spa.angular.core.models.impl.CustomComponentImpl - wknd-spa-angular/components/custom-component
com.adobe.aem.guides.wknd.spa.angular.core.models.impl.CustomComponentImpl exports 'wknd-spa-angular/components/custom-component' with selector 'model' and extension '[Ljava.lang.String;@6fb4a693' with exporter 'jackson'
CustomComponentImpl
が wknd-spa-angular/components/custom-component
コンポーネントに関連付けられていることと、それが Sling Model Exporter を介して登録されていることを示す上記の 2 行があります。
http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html にある SPA ページテンプレートに移動します。
レイアウトコンテナのポリシーを更新して、新しい Custom Component
を許可されたコンポーネントとして追加します。
ポリシーへの変更を保存し、Custom Component
を許可されたコンポーネントとして確認します。
次に、AEM SPA エディターを使用して Custom Component
を作成します。
http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html に移動します。
Edit
モードで、Custom Component
を Layout Container
に追加します。
コンポーネントのダイアログを開き、小文字を含んだメッセージを入力します。
これは、この章で前述した XML ファイルに基づいて作成されたダイアログです。
変更を保存します。表示されるメッセージがすべて大文字であることを確認します。
http://localhost:4502/content/wknd-spa-angular/us/en.model.json に移動して、JSON モデルを表示します。wknd-spa-angular/components/custom-component
を検索します。
"custom_component_208183317": {
"message": "HELLO WORLD",
":type": "wknd-spa-angular/components/custom-component"
}
Sling モデルに追加されたロジックに基づいて、JSON 値がすべて大文字に設定されます。
以上、カスタム AEM コンポーネントを作成する方法と、Sling モデルおよびダイアログが JSON モデルと連携する仕組みについて学びました。
いつでも、完成したコードを GitHub で確認したり、ブランチ Angular/custom-component-solution
に切り替えてローカルにチェックアウトしたりできます。
コアコンポーネントの拡張 - 既存のコアコンポーネントを拡張して AEM SPA エディターで使用できるようにする方法を説明します。既存のコンポーネントにプロパティとコンテンツを追加する方法を理解すると、AEM SPA エディター実装の機能を拡張するための強力な手法になります。