AEM Developerのみなさま、こんにちは。大和株式会社の大崎です。
前回に引き続いて、HTLブロックステートメントについて解説いたします。
前回分とあわせ、種類が多くてわかりにくいHTLのブロックステートメントについてのリファレンスとしてぜひご活用ください！
前回の記事： HTLブロックステートメントとは Part.01
今回の記事では、以下のHTLブロックステートメントをご紹介します。
- data-sly-set
- data-sly-unwrap
- data-sly-element
- data-sly-attribute
- data-sly-template
- data-sly-call
- data-sly-include
- data-sly-resource
代表的な data-sly 属性
data-sly-set
用途
HTL内で変数を設定します。
使用例
<span data-sly-set.profile="${user.profile}"> Hello, ${profile.name}! </span>
ここでは profile という識別子に user.profile の値をセットしています。
そして、profile にセットしたオブジェクトから、name プロパティを参照して出力しています。
profile.name = "Yamato"の場合のレンダリング結果：
<span> Hello, Yamato! </span>
data-sly-unwrap
用途
HTMLタグを条件によって表示・非表示にします。
具体的には、
data-sly-unwrap が true（または値の有無などの条件判定で true になる場合）はタグを消して中身だけ表示し、
data-sly-unwrap が false（または条件判定で false になる場合）はタグごと表示します。
使用例
<a data-sly-unwrap="${!href}" href="${href}">${text}</a>
href = "/contact.html" の場合のレンダリング結果：
<a href="/contact.html">お問い合わせはこちら</a>
このとき href に値があるため、<a> タグごと出力されます。
href = ""（空文字）の場合のレンダリング結果：
お問い合わせはこちら
このときは href が空のため、data-sly-unwrap により <a> タグが削除され、中身のテキストだけが表示されます。
data-sly-element
用途
data-sly-element 属性をつけたタグは、条件によって動的に別のタグに変えることができます。
使用例
<div data-sly-element="${headingLevel}">こんにちは</div>
headingLevel = "h1"の場合のレンダリング結果：
<h1>こんにちは</h1>
このように、data-sly-element を使えば、HTMLタグ（この例では <div>）を、headingLevelの値によって動的に変更できます。
ちなみに、data-sly-elementでは一部使えないタグ（<script>, <style>, <form>, <input>）がありますのでご注意ください。
data-sly-attribute
用途
HTMLタグに１つまたは複数の属性を動的に追加・変更します。
使用例1：識別子をつけた場合
<tag class="className" data-sly-attribute.class="${myVar}"></tag>
myVar = "myClassName"の場合のレンダリング結果：
<tag class="myClassName"></tag>
このように、data-sly-attributeに識別子をつけると、識別子で指定した属性の値を設定することができます。
ちなみに、識別子と同じ属性がすでにHTMLに設定されていた場合は、上書きされます。
そのため、上記の例では、HTMLに class="className" と書かれていますが、data-sly-attribute.class="${myVar}" によって、その class 属性が "myClassName" に上書きされます。
使用例2：識別子をつけない場合
<input data-sly-attribute="${foobar}" type="text"/>
foobar = { id: "foo", class: "bar" }の場合のレンダリング結果：
<input id="foo" class="bar" type="text"/>
このように、data-sly-attributeに識別子をつけない場合は、Sling Model から Map 形式で属性名＋値のセットを渡すことで、属性を動的に設定できます。複数の属性を一度に設定したい場合などに便利です。
data-sly-template
用途
HTMLで繰り返し使いたいパーツを「テンプレート」としてまとめるために使います。 テンプレートはパラメーターを渡して内容を変えられるので、表示するテキストやクラス名などをデータに応じて柔軟に切り替えることができます。
使用例
<div data-sly-template.card="${@ title, description }"> <div class="card"> <h2>${title}</h2> <p>${description}</p> </div> </div>
ここでは、data-sly-template.card で「card」という名前のテンプレートを作り、title, description というパラメーターを受け取れるように設定しています。このテンプレートを呼び出して出力するには、次に紹介するdata-sly-callを使用します。
data-sly-call
用途
data-sly-templateで定義したテンプレートを呼び出して、実際にそのHTMLを表示します。テンプレートにパラメーターを渡すことで、表示内容を動的に変えることができます。
使用例
先ほどdata-sly-templateの項目で作成したテンプレートを呼び出してみましょう。
<!-- テンプレートを定義 --> <div data-sly-template.card="${@ title, description }"> <div class="card"> <h2>${title}</h2> <p>${description}</p> </div> </div> <!-- テンプレートの呼び出し１回目 --> <div data-sly-call="${card @ title='りんご', description='赤くて甘い果物です'}"> </div> <!-- テンプレートの呼び出し２回目 --> <div data-sly-call="${card @ title='みかん', description='冬においしい柑橘類です'}"></div>
ここでは２回テンプレートを呼び出しており、１回目と２回目の呼び出しでtitle, description というパラメーターに異なる値を渡して呼び出しています。
レンダリング結果：
<!-- テンプレートの呼び出し１回目 --> <div class="card"> <h2>りんご</h2> <p>赤くて甘い果物です</p> </div> <!-- テンプレートの呼び出し２回目 --> <div class="card"> <h2>みかん</h2> <p>冬においしい柑橘類です</p> </div>
１回目と２回目の呼び出しでtitle, description というパラメーターに異なる値を渡して呼び出しているため、タイトルや説明が異なるカードが表示されます。
このように、同じテンプレートを使い回しつつ内容を自由に変えて表示できるため、コードの再利用性が高まり効率的に開発できます。
data-sly-include
用途
他のファイルを現在のテンプレート内に埋め込むために使います。
使用例
<!--/* 下記の2文はどちらも同じ意味 */--> <div data-sly-include="header.html"></div> <div data-sly-include="${'header.html'}"></div>
パスは相対パス／絶対パスで指定します。
レンダリング結果：
<!--/* header.html */--> <header> <h1>Welcome to My Site</h1> </header>
オプション
data-sly-includeは、@以降にパラメータを指定することで様々なパスの制御が可能です。
| オプション | 説明 |
|---|---|
| @ appendPath='XXX' | 指定したパスの末尾にappendPathで指定されたパスを連結する 例：${'my/path' @ appendPath='extra'} → "my/path/extra" |
| @ prependPath='XXX' | 指定したパスの先頭にprependPathで指定されたパスを連結する 例：${'my/path' @ prependPath='extra'} → "extra/my/path" |
data-sly-resource
用途
指定したパスやリソースをHTML内に描画するために使います。
使用例1: パスを指定してリソースを描画する
<!--/* 下記の2文はどちらも同じ意味 */--> <section data-sly-resource="./content/myComponent"></section> <section data-sly-resource="${'./content/myComponent'}"></section>
myComponent のHTMLが <section> の中に埋め込まれます。
レンダリング結果：
<section> <div> <p>こんにちは、これはMyComponentの内容です！</p> </div> </section>
使用例2: resourceTypeを指定してリソースを描画する
<div data-sly-resource="${ 'myPlaceholder' @ resourceType='myproject/components/myComponent' }"> </div>
resourceTypeで指定したmyComponentコンポーネントがレンダリングされます。
この myPlaceholder は、ノード名になります。これは同じ階層で一意である必要があります。
レンダリング結果：
<div> <div class="cmp-myComponent"> <h2>見出し</h2> <p>説明文</p> </div> </div>
オプション
data-sly-resourceは、@以降にパラメータを指定することでリソースパスやセレクターの制御が可能です。
| オプション | 説明 |
|---|---|
| appendPath | 指定したパスの末尾にappendPathで指定されたパスを連結する 例：${'my/path' @ appendPath='extra'} → "my/path/extra" |
| prependPath | 指定したパスの先頭にprependPathで指定されたパスを連結する 例：${'my/path' @ prependPath='extra'} → "extra/my/path" |
| selectors | パスのセレクター部分を、selectors で指定した値に置き換える 例：${'/content/page' @ selectors='print'} → /content/page.print.html |
| addSelectors | パスのセレクター部分に、addSelectors で指定した値を追加する 例：{'/content/page.print' @ addSelectors='draft'} → /content/page.print.draft.html |
| removeSelectors | パスのセレクター部分からremoveSelectorsで指定したセレクターを削除する（または、すべて削除） 例（セレクター一部削除）：${'/content/page.print.draft' @ removeSelectors='draft'} → /content/page.print.html 例（セレクター全部削除）：${'/content/page.print.draft' @ removeSelectors} → /content/page.html |
最後に
今回紹介したHTLブロックステートメントを使いこなすことで、コンテンツ制御がぐっと楽になり、再利用性やメンテナンス性の高いコードも書けるようになるはずです！
ぜひ今回の内容を活かして、自分のAEMプロジェクトで試してみてくださいね。
また、過去の記事でHTLのDisplay Context 記法と、各種 context による出力例わかりやすく紹介しています。 こちらも合わせてチェックしてみてください！
HTL - Display Context 記法と出力の例 - AEM開発者ブログ by YAMATO
参考
https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md
