カスタムコンポーネントの作成

AEM SPA Editorで使用するカスタムコンポーネントを作成する方法を説明します。 JSONモデルを拡張してカスタムコンポーネントを設定するためのオーサーダイアログとSlingモデルの開発方法について説明します。

目的

  1. AEMが提供するJSONモデルAPIを操作する際のSlingモデルの役割を理解します。
  2. 新しいAEMコンポーネントダイアログの作成方法を説明します。
  3. SPAエディターフレームワークと互換性のある​カスタム AEMコンポーネントの作成について説明します。

作成する内容

以前の章では、SPAコンポーネントの開発と、既存の​AEMコアコンポーネントへのマッピングに焦点を当てていました。​この章では、新しい AEMコンポーネントの作成と拡張、およびAEMが提供するJSONモデルの操作の方法に焦点を当てます。

簡単なCustom Componentは、新しいAEMコンポーネントを作成するために必要な手順を示しています。

すべて大文字で表示されるメッセージ

前提条件

ローカル開発環境の設定に必要なツールと手順を確認します。

コードの取得

  1. このチュートリアルの開始点をGitからダウンロードします。

    $ git clone git@github.com:adobe/aem-guides-wknd-spa.git
    $ cd aem-guides-wknd-spa
    $ git checkout Angular/custom-component-start
    
  2. Mavenを使用して、コードベースをローカルのAEMインスタンスにデプロイします。

    $ mvn clean install -PautoInstallSinglePackage
    

    AEM 6.xを使用する場合は、classicプロファイルを追加します。

    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    
  3. 従来のWKNDリファレンスサイト用に完成したパッケージをインストールします。 WKND参照サイトから提供された画像は、WKND SPAで再利用されます。 パッケージは、AEM Package Managerを使用してインストールできます。

    パッケージマネージャーによるwknd.allのインストール

GitHubで完成したコードをいつでも表示したり、ブランチAngular/custom-component-solutionに切り替えてコードをローカルでチェックアウトしたりできます。

AEMコンポーネントの定義

AEMコンポーネントは、ノードおよびプロパティとして定義されます。 プロジェクトでは、これらのノードとプロパティはui.appsモジュール内でXMLファイルとして表されます。 次に、ui.appsモジュールにAEMコンポーネントを作成します。

  1. 任意のIDEで、ui.appsフォルダーを開きます。

  2. ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/componentsに移動し、custom-componentという名前の新しいフォルダーを作成します。

  3. 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 は、コンテンツ作成者に表示される値で、はオーサリングUI componentGroup でのコンポーネントのグループを決定します。

  4. custom-componentフォルダーの下に、_cq_dialogという名前の別のフォルダーを作成します。

  5. _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の下にあるselecttextareapathfieldなど、追加のフォームフィールドを表示することもできます。

    従来のAEMコンポーネントでは、通常、HTLスクリプトが必要です。 SPAはコンポーネントをレンダリングするので、HTLスクリプトは不要です。

Slingモデルの作成

Slingモデルは、JCRからJava変数へのデータのマッピングを容易にする注釈駆動型のJava「POJO」(Plain Old Java Objects)です。 Sling Modelstypcalに より、AEM Components用の複雑なサーバー側のビジネスロジックがカプセル化されます。

SPA Editorのコンテキストでは、Sling Modelsは、Sling Model Exporterを使用する機能を使用して、JSONモデルを介してコンポーネントのコンテンツを公開します。

  1. 任意のIDEで、coreモジュールを開きます。 CustomComponent.java チャプ CustomComponentImpl.java タースターターコードの一部として既に作成およびスタブ化されている。

    メモ

    Visual Studio Code IDEを使用している場合は、Java🔗用の拡張機能をインストールすると便利です。

  2. core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/CustomComponent.javaにあるJavaインターフェイスCustomComponent.javaを開きます。

    CustomComponent.javaインターフェイス

    これは、Sling Modelによって実装されるJavaインターフェイスです。

  3. CustomComponent.javaを更新して、ComponentExporterインターフェイスを拡張します。

    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モデルに書き出されます。

  4. core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/impl/CustomComponentImpl.javaCustomComponentImpl.javaを開きます。

    これはCustomComponentインターフェイスの実装です。 @Model注釈は、JavaクラスをSling Modelとして識別します。 @Exporter注釈を使用すると、Sling Model Exporterを通じてJavaクラスをシリアル化および書き出すことができます。

  5. 静的変数RESOURCE_TYPEを更新して、前の演習で作成したAEMコンポーネントwknd-spa-angular/components/custom-componentを指すようにします。

    static final String RESOURCE_TYPE = "wknd-spa-angular/components/custom-component";
    

    コンポーネントのリソースタイプは、SlingモデルをAEMコンポーネントにバインドするもので、最終的にはAngularコンポーネントにマッピングされます。

  6. getExportedType()メソッドをCustomComponentImplクラスに追加して、コンポーネントのリソースタイプを返します。

    @Override
    public String getExportedType() {
        return CustomComponentImpl.RESOURCE_TYPE;
    }
    

    このメソッドは、ComponentExporterインターフェイスを実装する際に必要で、マッピングをAngularコンポーネントに許可するリソースタイプを公開します。

  7. getMessage()メソッドを更新して、オーサーダイアログで保持されているmessageプロパティの値を返します。 @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 Modelで公開される値の違いを確認できます。

    メモ

angularコンポーネントの更新

カスタムコンポーネントのAngularコードは既に作成されています。 次に、いくつかの更新を行って、AngularコンポーネントをAEMコンポーネントにマッピングします。

  1. ui.frontendモジュールで、ファイルui.frontend/src/app/components/custom/custom.component.tsを開きます。

  2. @Input() message: string;行を確認します。 変換後の大文字の値は、この変数にマッピングされる必要があります。

  3. AEM SPA Editor JS SDKからMapToオブジェクトを読み込み、それを使用してAEMコンポーネントにマッピングします。

    + import {MapTo} from '@adobe/cq-angular-editable-components';
    
     ...
     export class CustomComponent implements OnInit {
         ...
     }
    
    + MapTo('wknd-spa-angular/components/custom-component')(CustomComponent, CustomEditConfig);
    
  4. cutom.component.htmlを開き、{{message}}の値が<h2>タグの横に表示されるのを確認します。

  5. custom.component.cssを開き、次のルールを追加します。

    :host-context {
        display: block;
    }
    

    コンポーネントが空の場合にAEMエディターのプレースホルダーを正しく表示するには、:host-contextまたは別の<div>display: block;に設定する必要があります。

  6. Mavenのスキルを使用して、すべての更新をローカルAEM環境にプロジェクトディレクトリのルートからデプロイします。

    $ cd aem-guides-wknd-spa
    $ mvn clean install -PautoInstallSinglePackage
    

テンプレートポリシーの更新

次に、AEMに移動して更新を確認し、Custom ComponentをSPAに追加できるようにします。

  1. http://localhost:4502/system/console/status-slingmodelsに移動して、新しいSling Modelの登録を確認します。

    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'
    

    上記の2行が表示され、CustomComponentImplwknd-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ページテンプレートに移動します。

  3. レイアウトコンテナのポリシーを更新し、新しいCustom Componentを許可されたコンポーネントとして追加します。

    レイアウトコンテナポリシーの更新

    ポリシーに対する変更を保存し、Custom Componentを許可されたコンポーネントとして監視します。

    許可されたコンポーネントとしてのカスタムコンポーネント

カスタムコンポーネントのオーサリング

次に、AEM SPA Editorを使用してCustom Componentを作成します。

  1. http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.htmlに移動します。

  2. Editモードで、Custom ComponentLayout Containerに追加します。

    新規コンポーネントを挿入

  3. コンポーネントのダイアログを開き、小文字を含むメッセージを入力します。

    カスタムコンポーネントの設定

    これは、前の章のXMLファイルに基づいて作成されたダイアログです。

  4. 変更内容を保存します。表示されるメッセージがすべて大文字であることを確認します。

    すべて大文字で表示されるメッセージ

  5. 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"
    }
    

    JSON値は、Sling Modelに追加されたロジックに基づいて、すべての大文字に設定されます。

おめでとうございます。

これで、カスタムAEMコンポーネントの作成方法と、SlingモデルおよびダイアログがJSONモデルと連携する仕組みを学びました。

GitHubで完成したコードをいつでも表示したり、ブランチAngular/custom-component-solutionに切り替えてコードをローカルでチェックアウトしたりできます。

次の手順

コアコンポーネントの拡張 - AEM SPA Editorで使用する既存のコアコンポーネントを拡張する方法を説明します。既存のコンポーネントにプロパティとコンテンツを追加する方法を理解することは、AEM SPA Editor実装の機能を拡張する強力な手法です。

このページ