コンポーネントの基本 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-branchnote note NOTE オプションで、前の章プロジェクトの設定で生成されたプロジェクトを引き続き使用することもできます。 -
aem-guides-wkndフォルダー内に移動します。code language-shell $ cd aem-guides-wknd -
次のコマンドを使用して、プロジェクトをビルドし、AEM のローカルインスタンスにデプロイします。
code language-shell $ mvn clean install -PautoInstallSinglePackagenote 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 -PautoInstallBundlenote 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 でローカルにデプロイします。