装飾タグ decoration-tag

Web ページのコンポーネントがレンダリングされる際に、レンダリングしたコンポーネントをラッピングする HTML 要素を生成できます。これは主に 2 つの目的を果たします。

AEM では、含まれているコンポーネントをラップする装飾タグを制御する明確でシンプルなロジックを開発者向けに提供しています。装飾タグがレンダリングされるかどうか、またその方法は、このページで説明する 2 つの要素の組み合わせによって定義されます。

レコメンデーション recommendations

予期しない問題発生の回避に役立つ、ラッパー要素を含めるタイミングに関する一般的な推奨事項を以下に示します。

コンポーネントの制御 component-controls

次のプロパティおよびノードをコンポーネントに適用して、装飾タグの動作を制御できます。

スクリプトの制御 script-controls

ただし、ラッパーの動作は、HTL または JSP のどちらを使用して要素を含めるかによって異なります。

HTL htl

通常、HTL のラッパー動作は、次のように要約できます。

また、ラッパーの動作も完全に制御できます。

HTL スクリプトおよびその関連ロジックからラッパータグの動作を完全に制御できます。

HTL での開発について詳しくは、HTL ドキュメントを参照してください。

デシジョンツリー decision-tree

このデシジョンツリーは、ラッパータグの動作を決定するロジックの概要を示します。

ユースケース use-cases

次の 3 つの使用例は、ラッパータグの処理方法の例です。また、目的のラッパータグの動作を制御するのがいかに簡単であるかを説明しています。

以下のすべての例は、次のコンテンツ構造とコンポーネントを前提としています。

/content/test/
  @resourceType = "test/components/one"
  child/
    @resourceType = "test/components/two"

/apps/test/components/
  one/
    one.html
  two/
    two.html
    cq:htmlTag/
      @cq:tagName = "article"
      @class = "component-two"

使用例 1：コードの再利用のためのコンポーネントを含める use-case-include-a-component-for-code-reuse

最も一般的な使用例は、コードの再利用のためにコンポーネントが他のコンポーネントを含む場合です。その場合、含まれるコンポーネントは、独自のツールバーとダイアログで編集することは望ましくないので、ラッパーは必要なく、コンポーネントのです cq:htmlTag は無視されます。 これはデフォルトの動作と見なすことができます。

one.html: <sly data-sly-resource="child"></sly>

two.html: Hello World!

/content/test.html に出力される結果：

Hello World!

この例は、画像を表示するためのコア画像コンポーネントを含むコンポーネントになります。その場合、通常、コンポーネントが持つすべてのプロパティを表す Map オブジェクトを data-sly-resource に渡すことで、仮想子コンポーネントを含んで構成される合成リソースを使用します。

使用例 2：編集可能なコンポーネントを含める use-case-include-an-editable-component

もうひとつの一般的な使用例は、コンテナコンポーネントがレイアウトコンテナのような編集可能な子コンポーネントを含む場合です。この場合、含まれた各子は、必ずエディターが機能するためのラッパーを必要とします（cq:noDecoration プロパティで明示的に無効になっている場合を除く）。

含まれるコンポーネントは、この場合、独立したコンポーネントなので、エディターが機能するためにはラッパー要素が必要で、適用するレイアウトおよびスタイルを定義する必要があります。この動作をトリガーするために、decoration=true オプションがあります。

one.html: <sly data-sly-resource="${'child' @ decoration=true}"></sly>

two.html: Hello World!

/content/test.html に出力される結果：

<article class="component-two">Hello World!</article>

使用例 3：カスタム動作 use-case-custom-behavior

複雑な使用例はいくつもありますが、明示的に次を提供する HTL を利用することで簡単に実現できます。

one.html: <sly data-sly-resource="${'child' @ decorationTagName='aside', cssClassName='child'}"></sly>

two.html: Hello World!

/content/test.html に出力される結果：

<aside class="child">Hello World!</aside>

JSP jsp

cq:includ または sling:include を使用してコンポーネントを含める場合、AEM のデフォルトの動作は、DIV を使用して要素をラッピングできます。ただし、このラッピングは 2 つの方法でカスタマイズできます。

デシジョンツリー decision-tree-1

次のデシジョンツリーで、cq:noDecoration、cq:htmlTag、cq:tagName および decorationTagName がどのようにラッパー動作に影響するかを説明します。