コンポーネントの基本 component-basics
この章では、簡単な 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 プロジェクトアーキタイプで生成された汎用プロジェクトに基づいています。以下のビデオを視聴し、前提条件を確認してから始めましょう。
新しいコマンドラインターミナルを開き、以下のアクションを実行します。
-
空のディレクトリで、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 にどのように保持されるかを調べます。
上記のビデオで実行している大まかな手順を以下に示します。
- 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 スクリプトを更新します。
上記のビデオで実行している大まかな手順を以下に示します。
-
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 <?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 モデルを少し更新します。
-
ファイル
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 ... @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 <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 スタイルを更新します。
上記のビデオで実行している大まかな手順を以下に示します。
-
新しいターミナルウィンドウを開き、
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 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
でローカルにデプロイします。