ドキュメント AEM AEM チュートリアル AEM Sites WKND チュートリアル

コンポーネントの基本 component-basics

Last update: Wed Feb 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

Beginner
Developer

この章では、簡単な HelloWorld の例を通して、Adobe Experience Manager（AEM）Sites コンポーネントの基盤となるテクノロジーを調べます。オーサリング、HTL、Sling モデル、クライアントサイドライブラリなどのトピックに対応する小さな変更が、既存のコンポーネントに加えられます。

前提条件 prerequisites

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

ビデオで使用されている IDE は、Visual Studio Code と VSCode AEM Sync プラグインです。

目的 objective

HTML を動的にレンダリングするための HTL テンプレートと Sling モデルの役割を学びます。
ダイアログを使用してコンテンツのオーサリングを促進する方法を理解します。
コンポーネントをサポートする CSS と JavaScript を組み込むためのクライアントサイドライブラリの基本中の基本を学びます。

作ろうとしているもの what-build

この章では、簡単な HelloWorld コンポーネントにいくつかの変更を加えます。HelloWorld コンポーネントを更新しながら、AEM コンポーネント開発の主要な領域について学びます。

チャプタースタータープロジェクト starter-project

この章は、AEM プロジェクトアーキタイプで生成された汎用プロジェクトに基づいています。以下のビデオを視聴し、前提条件を確認してから始めましょう。

NOTE

前の章を正常に完了した場合は、プロジェクトを再利用して、スタータープロジェクトをチェックアウトする手順をスキップできます。

https://video.tv.adobe.com/v/345304?quality=12&learn=on&captions=jpn

新しいコマンドラインターミナルを開き、以下のアクションを実行します。

空のディレクトリで、aem-guides-wknd リポジトリのクローンを作成します。

code language-shell
`$ git clone git@github.com:adobe/aem-guides-wknd.git --branch tutorial/component-basics-start --single-branch`

note note
NOTE
オプションで、前の章プロジェクトの設定で生成されたプロジェクトを引き続き使用することもできます。

aem-guides-wknd フォルダー内に移動します。

code language-shell
`$ cd aem-guides-wknd`

次のコマンドを使用して、プロジェクトをビルドし、AEM のローカルインスタンスにデプロイします。

code language-shell
`$ mvn clean install -PautoInstallSinglePackage`

note note
NOTE
AEM 6.5 または 6.4 を使用している場合は、`classic` プロファイルをすべての Maven コマンドに追加します。

code language-shell
`$ mvn clean install -PautoInstallSinglePackage -Pclassic`

ローカル開発環境を設定する手順に従って、プロジェクトを好みの IDE に読み込みます。

コンポーネントのオーサリング component-authoring

コンポーネントは、web ページの小さなモジュール型構築ブロックと考えることができます。コンポーネントを再利用するには、コンポーネントを設定可能にする必要があります。これは、オーサーダイアログを通じて実行します。次に、簡単なコンポーネントを作成して、ダイアログ内の値が AEM にどのように保持されるかを調べます。

https://video.tv.adobe.com/v/345294?quality=12&learn=on&captions=jpn

上記のビデオで実行している大まかな手順を以下に示します。

WKND Site > US > en の下に Component Basics という名前のページを作成します。
新しく作成したページに Hello World コンポーネント を追加します。
コンポーネントのダイアログを開き、テキストを入力します。変更を保存して、ページに表示されるメッセージを確認します。
開発者モードに切り替え、CRXDE-Lite でコンテンツパスを表示し、コンポーネントインスタンスのプロパティを調べます。
CRXDE-Lite を使用して、/apps/wknd/components/content/helloworld から cq:dialog および helloworld.html スクリプトを表示します。

HTL（HTML テンプレート言語）とダイアログ htl-dialogs

HTML テンプレート言語（HTL）は、AEM コンポーネントでコンテンツをレンダリングするために使用する軽量のサーバーサイドテンプレート言語です。

ダイアログ では、コンポーネントに対して可能な設定を定義します。

次に、テキストメッセージの前に追加の挨拶を表示するように HelloWorld HTL スクリプトを更新します。

https://video.tv.adobe.com/v/345287?quality=12&learn=on&captions=jpn

上記のビデオで実行している大まかな手順を以下に示します。

IDE に切り替え、ui.apps モジュールにプロジェクトを開きます。
helloworld.html ファイルを開き、HTML マークアップを更新します。
VSCode AEM Sync などの IDE ツールを使用して、ファイルの変更内容をローカルの AEM インスタンスと同期します。
ブラウザーに戻り、コンポーネントのレンダリングが変更されたことを確認します。

HelloWorld コンポーネントのダイアログを定義する .content.xml ファイル（以下に示す場所にある）を開きます。

code language-plain
`<code>/aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml`

ダイアログを更新して、Title という名前のテキストフィールドを ./title という名前で追加します。

code language-xml

code language-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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="nt:unstructured" jcr:title="Properties" sling:resourceType="cq/gui/components/authoring/dialog"> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <title jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Title" name="./title"/> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Text" name="./text"/> </items> </column> </items> </content> </jcr:root>

<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Title"
                        name="./title"/>
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Text"
                        name="./text"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

下記パスの HelloWorld コンポーネントをレンダリングするメイン HTL スクリプトを表すファイル helloworld.html を再度開きます。

code language-plain
`<code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html`

「Greeting」テキストフィールドの値を H1 タグの一部としてレンダリングするように、helloworld.html を更新します。

code language-html
`<div class="cmp-helloworld" data-cmp-is="helloworld"> <h1 class="cmp-helloworld__title">${properties.title}</h1> ... </div>`

開発者向けプラグインを使用するか Maven スキルを使用して、AEM のローカルインスタンスに変更内容をデプロイします。

Sling モデル sling-models

Sling モデルは、JCR から Java™ 変数へのデータのマッピングを容易にする注釈主導の Java™「POJO」（Plain Old Java™ Objects）です。また、AEM のコンテキストで開発する際には、他の詳細情報もいくつか提供します。

次に、JCR に格納された値にビジネスロジックを適用してから値をページに出力するため、HelloWorldModel Sling モデルを少し更新します。

https://video.tv.adobe.com/v/36150?quality=12&learn=on&captions=jpn

ファイル HelloWorldModel.java（HelloWorld コンポーネントで使用される Sling モデル）を開きます。

code language-plain
`<code>/aem-guides-wknd.core/src/main/java/com/adobe/aem/guides/wknd/core/models/HelloWorldModel.java`

次の import 文を追加します。

code language-java
`import org.apache.commons.lang3.StringUtils; import org.apache.sling.models.annotations.DefaultInjectionStrategy;`

DefaultInjectionStrategy を使用するように @Model 注釈を更新します。

code language-java
`@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL) public class HelloWorldModel { ...`

以下の行を HelloWorldModel クラスに追加して、コンポーネントの JCR プロパティ title および text の値を Java™ 変数にマッピングします。

code language-java

code language-java
`... @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL) public class HelloWorldModel { ... @ValueMapValue private String title; @ValueMapValue private String text; @PostConstruct protected void init() { ...`

...
@Model(adaptables = Resource.class,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class HelloWorldModel {

    ...

    @ValueMapValue
    private String title;

    @ValueMapValue
    private String text;

    @PostConstruct
    protected void init() {
        ...

以下のメソッド getTitle() を HelloWorldModel クラスに追加します。このメソッドは title という名前のプロパティの値を返します。このメソッドは、「Default Value here!」という String 値を返すロジックを追加します。プロパティが title が null または空白の場合：

code language-java
`/*** * * @return the value of title, if null or blank returns "Default Value here!" */ public String getTitle() { return StringUtils.isNotBlank(title) ? title : "Default Value here!"; }`

以下のメソッド getText() を HelloWorldModel クラスに追加します。このメソッドは text という名前のプロパティの値を返します。このメソッドは、文字列をすべて大文字に変換します。

code language-java
`/*** * * @return All caps variation of the text value */ public String getText() { return StringUtils.isNotBlank(this.text) ? this.text.toUpperCase() : null; }`

core モジュールからバンドルをビルドしてデプロイします。

code language-shell
`$ cd core $ mvn clean install -PautoInstallBundle`

note note
NOTE
AEM 6.4／6.5 の場合は、`mvn clean install -PautoInstallBundle -Pclassic` を使用します。

aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/content/helloworld/helloworld.html のファイル helloworld.html を更新して、HelloWorld モデルの新しく作成したメソッドを使用するようにします。

HelloWorld モデルは、このコンポーネントインスタンスに対して HTL ディレクティブ data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel" を介してインスタンス化され、インスタンスを変数 model に保存します。

HelloWorld モデルインスタンスは、HelloWord を使用して model 変数を介して HTL で使用できるようになりました。これらのメソッドの呼び出しでは、短縮メソッドの構文を使用できます。例えば、${model.getTitle()} は ${model.title} に短縮できます。

同様に、すべての HTL スクリプトには、Sling Model オブジェクトと同じ構文を使用してアクセスできるグローバルオブジェクトが挿入されます。

code language-html

code language-html
<div class="cmp-helloworld" data-cmp-is="helloworld" data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel"> <h1 class="cmp-helloworld__title">${model.title}</h1> <div class="cmp-helloworld__item" data-sly-test="${properties.text}"> <p class="cmp-helloworld__item-label">Text property:</p> <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${properties.text}</pre> </div> <div class="cmp-helloworld__item" data-sly-test="${model.text}"> <p class="cmp-helloworld__item-label">Sling Model getText() property:</p> <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${model.text}</pre> </div> </div>

<div class="cmp-helloworld" data-cmp-is="helloworld"
    data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel">
    <h1 class="cmp-helloworld__title">${model.title}</h1>
    <div class="cmp-helloworld__item" data-sly-test="${properties.text}">
        <p class="cmp-helloworld__item-label">Text property:</p>
        <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${properties.text}</pre>
    </div>
    <div class="cmp-helloworld__item" data-sly-test="${model.text}">
        <p class="cmp-helloworld__item-label">Sling Model getText() property:</p>
        <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${model.text}</pre>
    </div>
</div>

Eclipse Developer プラグインまたは Maven スキルを使用して、AEM のローカルインスタンスに変更内容をデプロイします。

クライアントサイドライブラリ client-side-libraries

クライアントサイドライブラリ（略して clientlibs）は、 AEM Sites 実装に必要な CSS および JavaScript ファイルを編成および管理するメカニズムを提供します。クライアントサイドライブラリは、AEM のページに CSS と JavaScript を組み込む標準的な方法です。

ui.frontend モジュールは、ビルドプロセスに統合されている独立した webpack プロジェクトです。これにより、Sass、LESS、TypeScript などの一般的なフロントエンドライブラリを使用できます。 ui.frontend モジュールについては、クライアントサイドライブラリの章で詳しく説明しています。

次に、 HelloWorld コンポーネントの CSS スタイルを更新します。

https://video.tv.adobe.com/v/344336?quality=12&learn=on&captions=jpn

上記のビデオで実行している大まかな手順を以下に示します。

新しいターミナルウィンドウを開き、ui.frontend ディレクトリに移動します。
ui.frontend ディレクトリで、npm install npm-run-all --save-dev コマンドを実行して npm-run-all ノードモジュールをインストールします。この手順は、アーキタイプ 39 で生成された AEM プロジェクト では必要ですが、今後のアーキタイプバージョンでは必要ありません。

次に、 npm run watch コマンドを実行します。

code language-shell
`$ npm run watch`

IDE に切り替え、ui.frontend モジュールにプロジェクトを開きます。
ui.frontend/src/main/webpack/components/_helloworld.scss ファイルを開きます。

赤いタイトルを表示するように、ファイルを更新します。

code language-scss
`.cmp-helloworld {} .cmp-helloworld__title { color: red; }`

ui.frontend モジュールがコンパイルされて変更内容を AEM のローカルインスタンスと同期中であることを示すアクティビティがターミナルに表示されます。

code language-shell

code language-shell
Entrypoint site 214 KiB = clientlib-site/site.css 8.45 KiB clientlib-site/site.js 206 KiB 2022-02-22 17:28:51: webpack 5.69.1 compiled successfully in 119 ms change:dist/index.html + jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css + jcr_root/apps/wknd/clientlibs/clientlib-site/css + jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js + jcr_root/apps/wknd/clientlibs/clientlib-site/js + jcr_root/apps/wknd/clientlibs/clientlib-site + jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt + jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt + jcr_root/apps/wknd/clientlibs/clientlib-dependencies

Entrypoint site 214 KiB = clientlib-site/site.css 8.45 KiB clientlib-site/site.js 206 KiB
2022-02-22 17:28:51: webpack 5.69.1 compiled successfully in 119 ms
change:dist/index.html
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies

ブラウザーに戻り、タイトルの色が変更されたことを確認します。

おめでとうございます。 congratulations

おめでとうございます。これで、Adobe Experience Managerでのコンポーネント開発の基本を学びました。

次の手順 next-steps

次の章ページとテンプレートで、Adobe Experience Manager のページとテンプレートについて理解します。コアコンポーネントがプロジェクト内にどのようにプロキシ化されるかを理解し、適切に構造化された Article Page テンプレートを構築するための編集可能なテンプレートの高度なポリシー設定について学びます。

完成したコードを GitHub で確認するか、コードをレビューして Git ブランチ tutorial/component-basics-solution でローカルにデプロイします。

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9