HTLブロックステートメントとは Part.01 - AEM開発者ブログ by YAMATO

AEM Developerのみなさま、こんにちは。大和株式会社の大崎です。

AEMを触っていると、必ず出会う「HTL」。中でも「data-sly-〇〇」って、種類も多くて覚えるのがちょっと大変ですよね...。

今回はそんなHTLの“ブロックステートメント”について、初心者にもわかりやすく、使い慣れた人には開発中にサッと参照できるように、実例付きでまとめました！

今回の記事では、以下のHTLブロックステートメントをご紹介します。

data-sly-use
data-sly-text
data-sly-test
data-sly-list
data-sly-repeat

概要

HTLブロックステートメントは、HTMLのタグ内で動的なコンテンツを操作するための属性です。例えば、特定の条件に応じたコンテンツの表示や、リストのデータを繰り返し表示する際に使用されます。

HTLブロックステートメントは以下のような特徴があります。

data-sly-* 属性として記述されます。
処理が終わるとレンダリング結果のHTMLには出力されません。
data-sly-list.item = "${products}" の「item」のように、識別子を付けることも可能です。

使用するメリット

HTLを使用するメリットについては、過去の記事でJSPとの比較を交えながらわかりやすく紹介しています。
詳しく知りたい方は、ぜひチェックしてみてください！
HTL vs JSP - AEM開発者ブログ by YAMATO

代表的な data-sly 属性

data-sly-use

用途

バックエンドで作成した Javaのモデルクラスや JavaScriptのスクリプト、または HTMLテンプレートを読み込み、それらのフィールドやgetterメソッドをHTL内で使用できるようにします。

使用例1： Java クラスを使用する

下記の例では、com.example.UserModel という Java クラスを読み込んで、userという識別子に格納し、その name プロパティを表示しています。

<sly data-sly-use.user="com.example.UserModel" />
<p>ユーザー名: ${user.name}</p>

使用例2：クライアントライブラリ用のテンプレートを使用する

このコードは、AEMに組み込まれたクライアントライブラリ用テンプレート（clientlib.html）を読み込み、clientlib.all 関数で myCategory1 と myCategory2 のカテゴリのCSSとJSを読み込んでいます。

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.all @ categories=['myCategory1', 'myCategory2']}"/>

data-sly-text

用途

テキストを表示します。

使用例：AEMデータ「properties.title」を表示する

<p data-sly-text="${properties.title}">このテキストは表示されません</p>

properties.title = "こんにちは！"の場合のレンダリング結果：

<p>こんにちは！</p>

このように、data-sly-text は、モックアップのテキスト（上記の例では「このテキストは表示されません」）をAEMのデータで置き換え、HTMLを変更せずに済ませることができるので便利です！

また、HTMLタグを無効化して表示するため、ユーザー入力によるスクリプトも実行されず、安全に表示されます。

properties.title = "<script>alert('XSS');</script>"の場合のレンダリング結果：

<p>&lt;script&gt;alert('XSS');&lt;/script&gt;</p>

data-sly-test

用途

指定した条件の真偽に基づき、その要素と子要素の表示/非表示を切り替えます。

使用例：wcmmode.editの真偽によって、要素の表示を切り替える

<p data-sly-test="${wcmmode.edit}">You are in edit mode</p>

wcmmode.edit = trueの場合のレンダリング結果：

<p>You are in edit mode</p>

wcmmode.edit = falseの場合のレンダリング結果：

<!-- 何も表示されない-->

data-sly-list

用途

リスト（配列）を繰り返し表示します。

使用例1：サブページのリストを、リストタグ内に表示する

<ul data-sly-list="${currentPage.listChildren}">
    <li>${item.title}</li>
</ul>

item という識別子が自動で作成され、各リストの要素が表示されます。

レンダリング結果：

<ul>
    <li>About Us</li>
    <li>Services</li>
    <li>Products</li>
</ul>

使用例２：開始位置・終了位置を指定して、リストの要素を表示する

ループの開始位置・終了位置を指定することもできます。
下記の例では、11番目から20番目の要素が表示されます。

<ul data-sly-list="${currentPage.listChildren @ begin = 10, end = 19}">
    <li>${item.title}</li>
</ul>

使用例３：ループ情報を表示する

data-sly-listでは、ループの情報を表示する便利なオブジェクトも使用できます。 data-sly-listを使用した場合、itemListという識別子が自動で作成され、ループに関する情報にアクセスできます。

<ul data-sly-list="${currentPage.listChildren}">
    <li>
        ${item} (index: ${itemList.index}, count: ${itemList.count}, first: ${itemList.first}, last: ${itemList.last})
    </li>
</ul>

ループ情報にアクセスできるオブジェクト

オブジェクト	説明	値
index	0から始まるインデックス	0..length-1
count	1から始まるカウンター	1..length
first	最初の要素かどうか	true/false
middle	最初でも最後でもない要素かどうか	true/false
last	最後の要素かどうか	true/false
odd	count が奇数かどうか	true/false
even	count が偶数かどうか	true/false

data-sly-repeat

用途

リストや配列の各項目を繰り返し表示します。
data-sly-listとの違いは、 data-sly-repeatをつけた要素も繰り返されることです。

使用例1：resource.listChildren に含まれる各項目（item）の text を表示する

<p data-sly-repeat="${resource.listChildren}">${item.text}</p>

item という変数（識別子）が自動で作成され、各リストの要素が表示されます。

レンダリング結果：

<p>About Us</p>
<p>Services</p>
<p>Products</p>

使用例2：開始位置・終了位置を指定して、リストの要素を表示する

data-sly-listと同様、ループの開始位置・終了位置を指定することもできます。下記の例では、1番目から10番目の要素が表示されます。

<div data-sly-repeat="${currentPage.listChildren @ begin = 0, end = 9}">
  ${item.excerpt}
</div>

使用例3：ループ情報を表示する

こちらもdata-sly-listと同様、ループの情報を表示するオブジェクトも使用できます。 data-sly-repeatを使用した場合、itemListという識別子が自動で作成され、ループに関する情報にアクセスできます。

<ul>
    <li data-sly-repeat="${items}">
        ${item}(index: ${itemList.index}, count: ${itemList.count}, first: ${itemList.first})
    </li>
</ul>

ループ情報にアクセスできるオブジェクト

オブジェクト	説明	値
index	0から始まるインデックス	0..length-1
count	1から始まるカウンター	1..length
first	最初の要素かどうか	true/false
middle	最初でも最後でもない要素かどうか	true/false
last	最後の要素かどうか	true/false
odd	count が奇数かどうか	true/false
even	count が偶数かどうか	true/false