現在表示中:

このページでは、AEM コンポーネントの概要を説明します。 以降のページでは、より詳細な情報を説明します。

コンポーネントの厳密な定義

コンポーネント:

  • 特定の機能を実現し、Web サイトにコンテンツを提供するためのモジュールユニットです。
  • 再利用が可能です。
  • リポジトリの 1 つのフォルダー内の自己完結型ユニットとして開発されます。
  • 非表示の設定ファイルを持ちません。
  • 他のコンポーネントを組み込むことができます。
  • AEM システム内であれば、どの場所でも実行できます。 特定のコンポーネントの下でのみ実行するように制限することもできます。
  • 標準化されたユーザーインターフェイスを持ちます。
  • ウィジェットを使用します。
  • 設定可能な編集動作を持ちます。

コンポーネントはモジュールです。そのため、新しいコンポーネントをローカルインスタンスで開発したら、そのコンポーネントをテスト環境へ、次に実稼働環境へとシームレスにデプロイすることが可能です。

各 AEM コンポーネント:

  • リソースタイプです。
  • 特定の機能を完全に実現するスクリプトのコレクションです。
  • 「単独」で(AEM 内またはポータル内で)機能できます。

AEM に組み込まれているコンポーネント:

  • 段落システム
  • ヘッダー
  • 画像(説明テキスト付き)
  • ツールバー

コンポーネントのプロパティおよび子ノード

コンポーネントは、タイプ cq:Component のノードであり、次のプロパティおよび子ノードを持っています。

名前
タイプ
説明
.
 cq:Component 現在のコンポーネント。 ノードタイプ cq:Component のコンポーネント。
 componentGroup  String サイドキックでこのグループの下のコンポーネントを選択できます。
 cq:cellName  String 設定した場合、このプロパティはセル ID として取得されます。 詳しくは、ナレッジベースのこの記事を参照してください。
 cq:isContainer  Boolean このコンポーネントがコンテナコンポーネントであるかどうかを確認します。 例えば、段落システムコンポーネントであるかどうかを確認します。
 cq:noDecoration  Boolean true の場合、コンポーネントは、自動生成された div クラスと css クラスでレンダリングされません。
 cq:templatePath  String サイドキックからコンポーネントを追加するときにコンテンツテンプレートとして使用されるノードのパス。 これは、コンポーネントノードの相対パスではなく、絶対パスにする必要があります。
ほかの場所で既に使用可能なコンテンツを再利用しないのであれば不要であり、cq:template で十分です(下記参照)
 dialogPath  String コンポーネントにダイアログノードがない場合のダイアログのパス。
 jcr:created  Date コンポーネントの作成日。
 jcr:description  String コンポーネントの説明。
 jcr:title  String コンポーネントのタイトル。
 sling:resourceSuperType  String 設定した場合、コンポーネントの継承元がこのコンポーネントになります。
 <breadcrumb.jsp>  nt:file
スクリプトファイル。
 design_dialog  cq:Dialog  デザインダイアログの定義。
 cq:childEditConfig  cq:EditConfig コンポーネントがコンテナの場合(例えば、段落システムの場合)は、これにより子ノードの設定を編集できます。
 cq:editConfig  cq:EditConfig コンポーネントの編集設定
 cq:htmlTag  nt:unstructured  対象を囲んでいる html タグに追加されたその他のタグ属性を返します。 自動生成された div に属性を追加できます。 ブログ記事「cq:htmlTag を使用した自動生成 div の変更」を参照してください。
 cq:template  nt:unstructured 見つかった場合、このノードは、サイドキックからコンポーネントを追加するときにコンテンツテンプレートとして使用されます。
 dialog  nt:unstructured
編集ダイアログの定義。
 icon.png  nt:file コンポーネントのアイコンがサイドキックのタイトルの隣に表示されます。
 thumbnail.png  nt:file  サイドキックからコンポーネントをドラッグしている間に表示されるオプションのサムネール。
 virtual sling:Folder  仮想コンポーネントを作成できます。 例を参照するには、/libs/foundation/components/profile/form/contact の連絡先コンポーネントをご覧ください。

AEM 内のデフォルトコンポーネント

AEM には、すぐに使用できる様々なコンポーネントが付属しており、Web サイト作成者は包括的な機能を使用できます。 インストール済みの「Geometrixx」 Web サイト内にあるこれらのコンポーネントとその用途をご覧になると、コンポーネントを実装して使用する方法がわかります。 コンポーネントは、すべてのソースコードとともに提供されており、そのまま使用することも、コンポーネントを変更または拡張する出発点として使用することもできます。

リポジトリ内にあるすべてのコンポーネントのリストを取得するには、次の手順を実行します。

  1. CRXDE Lite で、ツールバーから「ツール」を選択し、次に「クエリ」を選択します。「クエリ」タブが開きます。
  2. 種類」として「XPath」を選択します。
  3. クエリ入力フィールドに次の文字列を入力します。
    //element(*, cq:Component)
  4. 実行」をクリックします。 リストが表示されます。

AEM ですぐに使用できないデフォルトコンポーネントを含む、すべてのデフォルトコンポーネントについて詳しくは、デフォルトコンポーネントの節を参照してください。

コンポーネントとその構造

コンポーネントの定義

既に説明したように、コンポーネントの定義は、次のように分類できます。

  • AEM コンポーネントは、Sling に基づいています
  • AEM コンポーネントは、/libs/foundation/components の下に配置されています
  • サイト固有のコンポーネントは、/apps/<sitename>/components の下に配置されています
  • AEM には、ページコンポーネントがあります。このコンポーネントは、コンテンツを管理する際に重要な特定タイプのリソースです。
  • AEM 標準コンポーネントは、cq:Component として定義され、次の要素を備えています。
    • jcr プロパティのリスト:これらのプロパティは変数です。cq:Component の定義では、コンポーネントノード、コンポーネントノードのプロパティ、およびサブノードの基本構造が規定されていますが、プロパティによっては、オプションとして使用できるものもあります。
    • ダイアログ:インターフェイスを定義しており、これによりユーザーは、コンポーネントを設定できます
    • 子ノード cq:editConfig(タイプ cq:EditConfig):コンポーネントの編集プロパティを定義し、コンポーネントをサイドキックに表示できるようにします。
      注意:コンポーネントにダイアログがある場合は、cq:editConfig が存在しなくても、自動的にコンポーネントがサイドキックに表示されます。
    • リソース:コンポーネントで使用される静的要素を定義します 
    • スクリプト:生成されたコンポーネントのインスタンスの動作を実装するために使用されます
    • サムネール:このコンポーネントが段落システム内にリストされる場合に表示される画像

テキストコンポーネントを取得する場合は、次の要素が表示されます。

特に重要なプロパティを次に示します。

 

  • jcr:title - コンポーネントのタイトル。例えば、サイドキック内のコンポーネントリストに表示されます
  • jcr:description - コンポーネントの説明。サイドキック内のコンポーネントリストにさらに加えて表示されます
  • icon.png - サイドキック内のコンポーネントのアイコンとして使用されるグラフィックファイル
  • thumbnail.png - サイドキックからコンポーネントをドラッグしている間、そのサムネールとして使用されるグラフィックファイル

特に重要な子ノードを次に示します。

 

  • cq:editConfig(cq:EditConfig) - 視覚的な側面を制御します。例えば、バーやウィジェットの外観を定義したり、カスタマイズしたコントロールを追加したりできます
  • cq:childEditConfig(cq:EditConfig) - 独自の定義を持たない子コンポーネントの視覚的な側面を制御します
  • dialog(nt:unstructured) - このコンポーネントのコンテンツを編集するためのダイアログを定義します
  • design_dialog(nt:unstructured) - このコンポーネントのデザイン編集オプションを指定します

ダイアログ

ダイアログは、コンポーネントの主要な要素の一つです。作成者がコンポーネントを設定し、コンポーネントに情報を入力するためのインターフェイスを備えているからです。

コンポーネントの複雑さに応じて、ダイアログには 1 つ以上のタブが必要です。これは、ダイアログを簡潔にし、入力フィールドを分類するためです。

   

ダイアログ内で、cq:WidgetCollection(項目)は、入力フィールド(cq:Widget)または追加のタブ(cq:Widget)の基礎を提供するために使用されます。 この階層は、拡張することが可能です。

コンポーネントの定義、およびコンポーネントの定義によって作成されるコンテンツ

テキスト段落(前述)のインスタンスを次のように <content-path>/Test.hml ページに作成した場合、

リポジトリ内に作成されたコンテンツの構造は、次のように表示されます。

特にテキストに注目した場合、

  • /libs/foundation/components/text/dialog/items/tab1/items/text の定義には、プロパティ name =./text があります
  • これにより、入力されたテストテキストを保持するプロパティ title がコンテンツ内に生成されます。

定義されるプロパティは、個々の定義によって異なり、前述のものより複雑な場合もありますが、同じ基本原則に従っています。

コンポーネントの階層および継承

AEM 内のコンポーネントは、次の 3 種類の階層で表現されます。

  • リソースタイプ階層
    プロパティ sling:resourceSuperType でコンポーネントを拡張する場合に使用されます。 これにより、コンポーネントは継承が可能になります。例えば、テキストコンポーネントが標準コンポーネントから各種の属性を継承します。
    • スクリプト(Sling によって解決)
    • ダイアログ
    • 説明(サムネール画像、アイコンなどを含む)
  • コンテナ階層
    子コンポーネントに設定を適用するために使用されます。parsys シナリオで最もよく使用されています。
    例えば、編集バーのボタン、コントロールセットのレイアウト(編集バー、ロールオーバー)、ダイアログのレイアウト(インライン、浮動)の設定を親コンポーネントで定義して、子コンポーネントに適用できます。
    cq:editConfig および cq:childEditConfig の(編集機能に関する)設定が適用されます。
  • インクルード階層
    実行時にインクルードのシーケンスによって適用されます。
    この階層は、デザイナーによって使用され、レンダリングの様々なデザイン側面、特にレイアウト情報、CSS 情報、parsys で使用可能なコンポーネントの基礎として機能します。

概要

次の概要は、すべてのコンポーネントに当てはまります。

概要

  • 場所: /apps/<myApp>/components

ルートノード

  • <mycomponent> (cq:Component) - コンポーネントの階層ノード。

重要なプロパティ

  • jcr:title - コンポーネントタイトル。例えば、サイドキック内にコンポーネントがリストされるときにラベルとして使用されます。
  • jcr:description - コンポーネントの説明。例えば、サイドキックのコンポーネントリストにも表示されます。
  • icon.png - このコンポーネントのアイコン。

重要な子ノード

  • cq:editConfig(cq:EditConfig) - 作成者の UI の様々な側面、例えば、バーやウィジェットの外観を制御し、カスタムコントロールを追加します。
  • cq:childEditConfig(cq:EditConfig) - 独自の cq:editConfig が定義されていない子コンポーネントについて、作成者の UI の様々な側面を制御します。
  • dialog(cq:Dialog) - このコンポーネントのコンテンツ編集ダイアログ。
  • design_dialog(cq:Dialog) - このコンポーネントのデザイン編集。

コンポーネントの開発

既存のコンポーネントをコピーし、必要な変更を行うというのが、開発を始めるうえで最も簡単な方法です。 独自のコンポーネントを作成して、段落システムを追加する方法については、「コンポーネントの開発」を参照してください。

発行インスタンスへのコンポーネントの移動

コンテンツをレンダリングするコンポーネントは、コンテンツと同じ AEM インスタンスにデプロイする必要があります。 したがって、作成者インスタンス上でページをオーサリングおよびレンダリングするために使用するすべてのコンポーネントを、発行インスタンスにデプロイする必要があります。 デプロイすると、コンポーネントを使用して、アクティブ化されたページをレンダリングできるようになります。

コンポーネントを発行インスタンスに移動するには、次のツールを使用します。

スクリプト

通常、JSP スクリプトまたはサーブレットは、コンポーネントをレンダリングするために使用されます。

Sling の要求処理ルールに従い、デフォルトスクリプトの名前は <componentname>.jsp です。

global.jsp

JSP スクリプトファイルの global.jsp を使用すると、コンポーネントのレンダリングに使用される任意の JSP スクリプトの特定オブジェクト(コンテンツ)に素早くアクセスできます。

したがって、global.jsp で提供される 1 つ以上のオブジェクトを使用する場合は、JSP スクリプトをレンダリングするすべてのコンポーネントに global.jsp を含める必要があります。

注意:

 

CQ 5.3 以降、global.jsp の正しいパスは、/libs/foundation/global.jsp に変更されました。

古いバージョンで使用されていたパス /libs/wcm/global.jsp は、現在使用されていません。

global.jsp、使用される API および Taglib の機能

デフォルトの global.jsp(/libs/foundation/global.jsp)から提供される最も重要なオブジェクトを次に示します。

概要:

  • <cq:defineObjects />
    • slingRequest - ラップされた要求オブジェクト(SlingHttpServletRequest)。
    • slingResponse - ラップされた応答オブジェクト(SlingHttpServletResponse)。
    • resource - Sling リソースオブジェクト(slingRequest.getResource();)。
    • resourceResolver - Sling リソースリゾルバーオブジェクト(slingRequest.getResoucreResolver();)。
    • currentNode - 要求に対して解決された JCR ノード。
    • log - デフォルトのロガー()。
    • sling - Sling スクリプトヘルパー。
    • properties - 指定されたリソースのプロパティ(resource.adaptTo(ValueMap.class);)。
    • pageProperties - 指定されたリソースのページのプロパティ。
    • pageManager - AEM コンテンツページにアクセスするためのページマネージャー(resourceResolver.adaptTo(PageManager.class);)。
    • component - 現在の AEM コンポーネントのコンポーネントオブジェクト。
    • designer - デザイン情報を取得するためのデザイナーオブジェクト(resourceResolver.adaptTo(Designer.class);)。
    • currentDesign - 指定されたリソースのデザイン。
    • currentStyle - 指定されたリソースのスタイル。

コンテンツへのアクセス

AEM WCM のコンテンツにアクセスするには、3 つの方法があります。

  • global.jsp に設定されている properties オブジェクト経由:
    properties オブジェクトは、ValueMap のインスタンス(Sling API を参照)で、現在のリソースのプロパティがすべて含まれています。
    例: String pageTitle = properties.get("jcr:title", "no title");。ページコンポーネントのレンダリングスクリプトで使用されます。
    例: String paragraphTitle = properties.get("jcr:title", "no title");。標準段落コンポーネントのレンダリングスクリプトで使用されます。
  • global.jsp に設定されている currentPage オブジェクト経由:
    currentPage オブジェクトは、ページのインスタンスです(AEM API を参照)。 ページクラスには、コンテンツにアクセスするためのメソッドがいくつかあります。
    例: String pageTitle = currentPage.getTitle();
  • global.jsp に設定されている currentNode オブジェクト経由:
    currentNode オブジェクトは、ノードのインスタンスです(JCR API を参照)。 ノードのプロパティにアクセスするには、getProperty() メソッドを使用します。
    例: String pageTitle = currentNode.getProperty("jcr:title");

JSP タグライブラリ

CQ と Sling のタグライブラリを使用すると、テンプレートやコンポーネントの JSP スクリプトで使用する特定の機能にアクセスできます。

詳しくは、タグライブラリを参照してください。 

クライアント側 HTML ライブラリの使用

最近の Web サイトは、複雑な JavaScript や CSS コードを利用したクライアント側の処理に大きく依存しています。 このコードの提供を編成および最適化することが厄介な問題となることがあります。

この問題への対処に役立つように、AEM では、クライアント側ライブラリフォルダーが提供されています。これにより、クライアント側コードをリポジトリに格納し、カテゴリ別に整理して、それぞれのカテゴリのコードをクライアントに提供するタイミングと方法を定義することができます。 その後、クライアント側ライブラリシステムにより、最終的な Web ページで、正しいコードを読み込むための正しいリンクが作成されます。

詳しくは、「クライアント側 HTML ライブラリの使用」を参照してください。

コンポーネントの編集動作の設定

この節では、コンポーネントの編集動作の設定方法について説明します。

コンポーネントの編集動作を設定するには、タイプ cq:EditConfigcq:editConfig ノードをコンポーネントノード(タイプ cq:Component)の下に追加し、特定のプロパティと子ノードを追加します。 使用可能なプロパティと子ノードを次に示します。

cq:editConfig ノードのプロパティ:

  • cq:actions(String 配列):コンポーネントで実行できるアクションを定義します。
  • cq:layout(String): コンポーネントの編集方法を定義します。
  • cq:dialogMode(String):コンポーネントダイアログを開く方法を定義します。
  • cq:emptyText(String):視覚的なコンテンツが存在しないときに表示するテキストを定義します。
  • cq:inherit(Boolean):欠落している値をその継承元のコンポーネントから継承するかどうかを定義します。

cq:editConfig の子ノード:

  • cq:dropTargets(ノードタイプ nt:unstructured):コンテンツファインダーのアセットからのドロップを受け入れ可能なドロップターゲットのリストを定義します。
  • cq:actionConfigs(ノードタイプ nt:unstructured):cq:actions リストに追加する新しいアクションのリストを定義します。
  • cq:formParameters(ノードタイプ nt:unstructured):ダイアログフォームに追加するその他のパラメーターを定義します。
  • cq:inplaceEditing(ノードタイプ cq:InplaceEditingConfig):コンポーネントのインプレース編集設定を定義します。
  • cq:listeners(ノードタイプ cq:EditListenersConfig):コンポーネントでアクションを実行する前後の処理を定義します。

注意:

このページでは、ノード(プロパティおよび子ノード)は、次の例に示すように XML として表現されます。

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afteredit="REFRESH_PAGE"/>
</jcr:root>

リポジトリには、既存の設定が多数あります。 ユーザーは、特定のプロパティや子ノードを簡単に検索できます。

  • cq:editConfig ノードのプロパティ、例えば cq:actions を探すには、CRXDE Lite のクエリツールで、次の XPath クエリ文字列を指定して、検索を実行します。
    //element(cq:editConfig, cq:EditConfig)[@cq:actions]
  • cq:editConfig の子ノード、例えば、タイプ cq:DropTargetConfigcq:dropTargets を探すには、CRXDE Lite のクエリツールで、次の XPath クエリ文字列を指定して、検索を実行します。
    //element(cq:dropTargets, cq:DropTargetConfig)

cq:EditConfig プロパティを使用した設定

cq:actions

cq:actions プロパティ(String 配列)では、コンポーネントで実行できるアクションを 1 個から数個定義します。 使用可能な値を次に示します。

プロパティの値 説明
text:<some text> 静的テキストの値 <some text> を表示します
- スペーサーを追加します
edit コンポーネントを編集するボタンを追加します
delete コンポーネントを削除するボタンを追加します
insert 現在のコンポーネントの前に新しいコンポーネントを挿入するボタンを追加します
copymove コンポーネントをコピーして切り取るボタンを追加します

次の設定では、編集ボタン、スペーサー、削除ボタンおよび挿入ボタンがコンポーネントの編集バーに追加されます。

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:actions="[edit,-,delete,insert]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig"/>

次の設定では、「Inherited Configurations from Base Framework」というテキストがコンポーネントの編集バーに追加されます。

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:actions="[text:Inherited Configurations from Base Framework]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig"/>

cq:layout

cq:layout プロパティ(String)では、コンポーネントを編集可能にする方法を定義します。 使用可能な値を次に示します。

プロパティの値 説明
rollover (デフォルト値)。 コンポーネントを編集するには、「マウスポインターを重ねて」クリックするか、コンテキストメニューを使用します。
高度な使用法の場合、対応するクライアント側オブジェクトは CQ.wcm.EditRollover であることに注意してください。
editbar コンポーネントを編集するには、ツールバーを使用します。
高度な使用法の場合、対応するクライアント側オブジェクトは CQ.wcm.EditBar であることに注意してください。
auto クライアント側のコードによって方法が選択されます。

次の設定では、編集ボタンがコンポーネントの編集バーに追加されます。

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
</jcr:root>

cq:dialogMode

コンポーネントを編集ダイアログにリンクできます。 cq:dialogMode プロパティ(String)では、コンポーネントダイアログを開く方法を定義します。 使用可能な値を次に示します。

プロパティの値 説明
floating ダイアログが浮動になります。
inline (デフォルト値)。 ダイアログがコンポーネント上に固定されます。
auto コンポーネントの幅がクライアント側の CQ.themes.wcm.EditBase.INLINE_MINIMUM_WIDTH 値よりも小さい場合、ダイアログは floating になります。大きい場合は、inline になります。

次の設定では、編集ボタンを含む編集バーと浮動ダイアログが定義されます。

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
</jcr:root>

cq:emptyText

cq:emptyText プロパティ(String)では、視覚的なコンテンツが存在しないときに表示するテキストを定義します。

デフォルト値は次のとおりです。 "Drag components or assets here".

cq:inherit

cq:inherit プロパティ(Boolean)では、欠落している値をその継承元のコンポーネントから継承するかどうかを定義します。

デフォルト値は false です。

cq:EditConfig の子ノードを使用した設定

cq:dropTargets

cq:dropTargets ノード(ノードタイプ nt:unstructured)では、コンテンツファインダーのアセットからのドロップを受け入れ可能なドロップターゲットのリストを定義します。 これは、タイプ cq:DropTargetConfig のノードのコレクションとして機能します。

タイプ cq:DropTargetConfig のそれぞれの子ノードでは、コンポーネントのドロップターゲットを定義します。 ノード名は重要です。ノード名は、JSP で次のように使用して、有効なドロップターゲットである DOM 要素に割り当てられる CSS クラス名を生成する必要があるからです。

<ドロップターゲット CSS クラス> = <ドラッグアンドドロッププレフィックス> + <編集設定のドロップターゲットのノード名>

<ドラッグアンドドロッププレフィックス> は、Java プロパティ com.day.cq.wcm.api.components.DropTarget.CSS_CLASS_PREFIX によって定義されます。

例えば、クラス名は、ダウンロードコンポーネントの JSP(/libs/foundation/components/download/download.jsp)で次のように定義されます。
    String ddClassName = DropTarget.CSS_CLASS_PREFIX + "file";
"file" は、ダウンロードコンポーネントの編集設定のドロップターゲットのノード名です。

タイプ cq:DropTargetConfig のノードには、次のプロパティが必要です。

プロパティ名 プロパティの値
accept ドロップを許可するかどうかを検証するためにアセット MIME タイプに適用される regex。
groups ドロップターゲットグループの配列。 各グループは、コンテンツファインダーの拡張子に定義されていて、アセットに付加されているグループタイプに一致する必要があります。
propertyName 有効なドロップの後に更新されるプロパティの名前。

次の設定は、ダウンロードコンポーネントから取得したものです。 この設定では、media グループの任意のアセット(MIME タイプが任意の文字列でよい)をコンテンツファインダーからコンポーネントにドロップすることが可能です。 ドロップを行うと、コンポーネントのプロパティ fileReference が更新されます。

    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <file
            jcr:primaryType="cq:DropTargetConfig"
            accept="[.*]"
            groups="[media]"
            propertyName="./fileReference"/>
    </cq:dropTargets>

cq:actionConfigs

cq:actionConfigs ノード(ノードタイプ nt:unstructured)では、cq:actions プロパティで定義されたリストに追加する新しいアクションのリストを定義します。 cq:actionConfigs のそれぞれの子ノードでは、ウィジェットを定義することにより新しいアクションを定義します。 デフォルトのウィジェットタイプは CQ.Ext.Button です。

次の設定例では、新しいボタンを 2 つ定義しています。

  • xtype tbseparator で定義される区切り文字。
  • 関数 CQ_collab_forum_openCollabAdmin() を実行する「Manage comments」という名前のボタン。
<jcr:root 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"
    cq:actions="[EDIT,COPYMOVE,DELETE,INSERT]"
    jcr:primaryType="cq:EditConfig">
    <cq:actionConfigs jcr:primaryType="nt:unstructured">
        <separator0
            jcr:primaryType="nt:unstructured"
            xtype="tbseparator"/>
        <manage
            jcr:primaryType="nt:unstructured"
            handler="function(){CQ_collab_forum_openCollabAdmin();}"
            text="Manage comments"/>
    </cq:actionConfigs>
</jcr:root>

cq:formParameters

cq:formParameters ノード(ノードタイプ nt:unstructured)では、ダイアログフォームに追加するその他のパラメーターを定義します。 各プロパティは、form パラメーターにマップされます。

次の設定では、値 photos/primary が設定された name という名前のパラメーターがダイアログフォームに追加されます。

    <cq:formParameters
        jcr:primaryType="nt:unstructured"
        name="photos/primary"/>

cq:inplaceEditing

cq:inplaceEditing ノード(ノードタイプ cq:InplaceEditingConfig)では、コンポーネントのインプレース編集設定を定義します。 このノードは、次のプロパティを持つことができます。

プロパティ名 プロパティの値
active (Boolean) true に設定した場合、コンポーネントのインプレース編集が可能になります。
configPath (String)エディター設定のパス。 設定は、設定ノードで指定できます。
editorType

(String)エディターのタイプ。 指定できるタイプを次に示します。

  • plaintext:コンテンツが HTML 以外の場合に使用します。
  • title:編集を開始する前にグラフィカルなタイトルをプレーンテキストに変換する拡張プレーンテキストエディター。 Geometrixx タイトルコンポーネントで使用されます。
  • text:コンテンツが HTML の場合に使用します(リッチテキストエディターを使用)。

次の設定では、コンポーネントのインプレース編集が可能になり、テキストエディターとして plaintext が定義されます。

    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        editorType="plaintext"/>

cq:listeners

cq:listeners ノード(ノードタイプ cq:EditListenersConfig)では、コンポーネントでアクションを実行する前後の処理を定義します。 このノードは、次のプロパティを持つことができます。

プロパティ名 プロパティの値
デフォルト値
beforedelete コンポーネントを削除する前にハンドラーがトリガーされます。
 
beforeedit コンポーネントを編集する前にハンドラーがトリガーされます。  
beforecopy コンポーネントをコピーする前にハンドラーがトリガーされます。  
beforemove コンポーネントを移動する前にハンドラーがトリガーされます。  
beforechildinsert コンポーネントを別のコンポーネント(コンテナのみ)の内部に挿入する前にハンドラーがトリガーされます。  
afterdelete コンポーネントを削除した後にハンドラーがトリガーされます。 REFRESH_SELF
afteredit コンポーネントを編集した後にハンドラーがトリガーされます。 REFRESH_SELF
aftercopy コンポーネントをコピーした後にハンドラーがトリガーされます。 REFRESH_SELF
afterinsert コンポーネントを挿入した後にハンドラーがトリガーされます。 REFRESH_INSERTED
aftermove コンポーネントを移動した後にハンドラーがトリガーされます。 REFRESH_SELFMOVED
afterchildinsert コンポーネントを別のコンポーネント(コンテナのみ)の内部に挿入した後にハンドラーがトリガーされます。  

注意:

コンポーネントがネストされている場合は、cq:listeners ノードでプロパティとして定義されるアクションに一定の制限があります。

  • コンポーネントがネストされている場合、次のプロパティの値を REFRESH_PAGE にする必要があります。
    • aftermove
    • aftercopy 

イベントハンドラーを実装するときは、カスタム実装を組み込むことができます。 次に例を示します。
afteredit = "project.customerAction"
ここで、project.customerAction は静的メソッドです。

次の例は、REFRESH_INSERTED 設定と同等です。
afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"

ハンドラーで使用できるパラメーターについては、CQ.wcm.EditBar および CQ.wcm.EditRollover ウィジェットのドキュメントに記載されている「<アクション> イベント前および <アクション> イベント後」の節を参照してください。

次の設定では、コンポーネントを削除、編集、挿入または移動した後にページが更新されます。

    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afterdelete="REFRESH_PAGE"
        afteredit="REFRESH_PAGE"
        afterinsert="REFRESH_PAGE"
        afterMove="REFRESH_PAGE"/>

いくつかの基盤コンポーネントの詳細

次の節では、参照 Web サイト Geometrixx の最もよく使用されるコンポーネントがどのように開発されているかを説明します。

上部ナビゲーションコンポーネント

上部ナビゲーションコンポーネントは、Web サイトのトップレベルページを表示します。 このナビゲーションコンポーネントは、Web サイトのコンテンツページの上部に配置されます。

このコンポーネントで処理されるコンテンツはありません。 したがって、ダイアログは不要で、レンダリングのみが行われます。

仕様の概要:

  • /libs/foundation/components/topnav

  • レベル 1 のページ(ホームページの下)を表示します。

  • オン/オフのステータスを考慮し、画像レンダリングを使用します。

  • 次のスクリーンショットのように表示されます。

ナビゲーションの基本事項

ナビゲーションコンポーネントの主な機能を次に示します。

  • Web サイトのページ構造を階層的に表示します

  • この構造内のページにアクセスできるようにします。

これを実現するには、特定ページの子ページを取得する関数が必要です。 また、特定の絶対レベルの任意のページの親ページ(ナビゲーションの開始ページ)のパスを取得する関数や、ページの妥当性を検査する関数、もちろんページのパスとタイトルを取得する関数も必要です。

関連する関数(API 呼び出し)を次に示します。

  • com.day.cq.wcm.core.PageManager.getPage(String path):パスに関連付けられているページを取得します

  • com.day.cq.wcm.core.Page.listChildren():ページの子ページを取得します

  • com.day.cq.wcm.core.Page.getPath() + .getTitle():それぞれページのパス、ページのタイトルを取得します

  • com.day.cq.wcm.core.Page.isValid() + .isHideInNav():それぞれページが有効であるかどうか、ナビゲーションプロパティの hide が設定されているかどうかを検査します

  • com.day.cq.wcm.core.Page.getAbsoluteParent(int level): 絶対レベルの親ページを取得します

  • PageFilter(): デフォルトの AEM ページフィルター。ページが有効であるかどうかを検査します(プロパティ hideInNav が設定されていないことの確認、オン/オフタイムに関する検査などを行います)。isValid() および isHideInNav() の代わりに使用できます

詳しくは、AEM WCM で提供される Javadoc を参照してください。

画像レンダリングの基本事項

画像ベースのナビゲーション項目を使用できるようにするには、画像ナビゲーション項目ビューでページを要求するメカニズムが必要です。

これを可能にするために、ページのナビゲーション項目画像の要求に特定のセレクターが追加されています(例:/path/to/a/page.navimage.png)。 このようなセレクターを使用した要求は、画像処理メカニズムで処理する必要があります。 Sling の要求処理メカニズムはこのために使用されています。 この仕組みを実現するために、画像処理スクリプト(またはサーブレット)が追加されています。このスクリプトによって、特定のセレクターを使用した要求がすべて処理されます(/contentpage/navimage.png.jsp や /contentpage/navimage.png.java など)。

テキスト画像をレンダリングする場合は、抽象サーブレット AbstractImageServlet が非常に便利です。 createLayer() メソッドを上書きすることにより、完全にカスタマイズされた画像をプログラムで作成できます。

関連する関数(API 呼び出し)を次に示します。

  • com.day.cq.wcm.commons.AbstractImageServlet

  • com.day.cq.wcm.commons.WCMUtils

  • com.day.cq.wcm.foundation.ImageHelper

  • com.day.image.Font

  • com.day.image.Layer

詳しくは、AEM WCM で提供される Javadoc を参照してください。

画像ベースの上部ナビゲーションコンポーネント

上部ナビゲーションコンポーネントは、グラフィカルな(画像ベースの)ナビゲーション項目をレンダリングします。

ナビゲーション項目の画像は、特定のビューのページリソースから要求されます。 つまり、ナビゲーション項目の画像タグのパスは、ナビゲーション項目によって表されるページのパスに等しくなります。 リソース(ページ)がレンダリングされるビュー(プレゼンテーションのようなもの)を識別するために、特定の URL セレクター(「navimage」)が追加されます。

子のリストコンポーネント

子のリストコンポーネントは、特定のルートページの下にある子ページを表示します。 ルートページは、このコンポーネントのすべてのインスタンス(このコンポーネントによってレンダリングされるすべての段落)に対して設定できます。 したがって、対応する段落リソースにルートページのパスをコンテンツとして保存するためにダイアログが必要です。 ルートページを設定しない場合は、現在のページがルートページとして取得されます。 このコンポーネントは、タイトル、説明、日付を含むリンクのリストを表示します。

仕様の概要:

  • タイトル、説明、日付を含むリンクのリストを表示し、現在のページの下、またはダイアログで指定したパスによって定義されるルートページの下にあるページを参照します

  • /libs/foundation/components/listchildren

  • 表示されるページのオン/オフステータスを考慮します

  • 次のスクリーンショットは、表示例を示しています。

ダイアログおよびウィジェット

コンポーネントのダイアログは、コンポーネントのルートノードの下にあるノードのサブツリーで定義されます。 ダイアログのルートノードは、nodeType が cq:Dialog で、dialog という名前になっています。 この下に、ダイアログの個々のタブのルートノードが追加されます。 これらのタブノードは、nodeType が cq:WidgetCollection です。 タブノードの下にウィジェットノードが追加されます。これらのノードの nodeType は cq:Widget です。

概要:

 

場所: /apps/<myapp>/<mycomponent>/dialog

ルートノード:

  • dialog(cq:Dialog) - ダイアログのノード

重要なプロパティ:

  • xtype=panel - ダイアログの xtype をパネルとして定義します。title でダイアログのタイトルを設定します

ダイアログノードの重要な子ノード:

  • 項目(cq:WidgetCollection) - ダイアログ内のタブノード

タブノードの重要な子ノード:

  • <mywidget>(cq:Widget) - タブ内のウィジェットノード

重要なプロパティ:

  • name - このウィジェットが提供するコンテンツが保存されるプロパティの名前を定義します(通常は、./mypropertyname のような名前です)

  • xtype - ウィジェットの xtype を定義します

  • fieldLabel - このウィジェットのラベルとしてダイアログに表示されるテキスト

ロゴコンポーネント

ロゴコンポーネントは、Web サイト Geometrixx のロゴを表示します。 ロゴの画像とホームリンクはグローバルに設定できます(Web サイトのすべてのページで同じものになります)。これは、このコンポーネントのすべてのインスタンスが同一になるようにするためです。 したがって、対応するページのデザインにホームリンクの画像とパスを提供するには、デザインダイアログが必要です。 ロゴコンポーネントは、Web サイトのすべてのページの左上隅に配置されます。

仕様の概要:

  • /libs/foundation/components/logo

  • リンクされているロゴ画像を左上隅に表示します(スプール画像、レンダリングなし)

  • リンクのパスは、定義済みの絶対レベルのページのパスです

  • ロゴ画像およびレベルは、Web サイトのすべてのページで同じです。ロゴ画像およびレベルは、geometrixx のデザインに保存します

  • 次のスクリーンショットのように表示されます

デザイナー

デザイナーは、グローバルコンテンツのルックアンドフィールを管理するために使用されます(これには、ツールページのパスやロゴの画像、そのほか、テキストファミリやサイズなどのデザイン値の管理も含まれます)。

概要:

 

場所: /etc/designs

ルートノード:

  • <mydesign>(cq:Page) - デザインページの階層ノード

重要な子ノード:

  • jcr:content(cq:PageContent) - デザインのコンテンツノード

子ノード jcr:content: の重要なプロパティ

  • sling:resourceType = “wcm/designer” - デザイナーレンダリングコンポーネントへの参照

デザイナーの値は、global.jsp で提供される currentStyle オブジェクトによってアクセスできます。

デザインダイアログの構造は、標準のダイアログと同じですが、その名前は design_dialog となっています。

段落システム

段落システムは、Web サイトの重要な部分の一つで、段落のリストを管理します。 このシステムは、Web サイトの個々のコンテンツを体系化するために使用されます。 段落システム内に段落を作成したり、段落を移動、コピー、削除したりすることが可能です。また、列の制御を使用して、列のコンテンツを体系化することも可能です。

AEM WCM 基盤で提供される段落システムは、必要なバリアントの大部分に対応します。また、現在の段落システム内でアクティブ化/非アクティブ化するコンポーネントをユーザーが選択できるようにすれば、この段落システムを設定することもできます。

継承段落システム(iparsys)

継承段落システムは、作成された段落を親から継承することもできる段落システムです。段落を(例えば /content/geometrixx/en/products にある) iparsys に追加すると、同じ名前の iparsys を持つ製品のすべてのサブページが、作成された段落を親から継承します。 各レベルで、段落をさらに追加することができます。追加した段落は、子ページによって継承されます。 また、あるレベルでの段落継承は、いつでもキャンセルできます。

デザインモードでは、次を設定できます。

  • 継承をキャンセル
    選択した場合、この段落システムのコンポーネントは、子ページに渡されません。
  • 継承を無効にする
    選択した場合、このページにあるこの段落システムのコンポーネントは、親ページから継承されません。

parbase

parbase は、コンポーネントが他のコンポーネントから属性を継承できるようにする重要なコンポーネントです。これは、Java や C++ などのオブジェクト指向言語のサブクラスに似ています。 例えば、CRXDE Lite で /libs/foundation/components/text ノードを開くと、parbase コンポーネントを参照する sling:resourceSuperType という名前のプロパティがあることがわかります。 ここで parbase は画像やタイトルなどをレンダリングするツリースクリプトを定義しているので、この parbase からサブクラス化されたすべてのコンポーネントは、このスクリプトを使用することが可能です。

ユーザーが parbase にアクセスする必要はありません。

画像コンポーネント

画像コンポーネントは、メインの段落システムに画像を表示します。

仕様の概要:

  • /libs/foundation/components/image

  • メインの段落システムに画像を表示します。

  • 画像および特定の段落関連の表示プロパティ(タイトル、説明、サイズ)は、ダイアログによって段落リソースに保存されます。

  • このタイプのすべての段落(最小サイズ、最大サイズ)で有効なグローバルデザインプロパティのいくつかは、デザインダイアログによってデザインに保存されます。

  • 画像のトリミングやマッピングなどが可能です。

ウィジェット smartimage

smartimage ウィジェットは、WCM システムの画像処理のうち、最も一般的な側面を処理するために使用される拡張ウィジェットです。 画像ファイルのアップロードを制御したり、メディアライブラリへの参照を保存したりします。 また、様々な機能がある中で、画像のトリミングやマッピングもサポートしています。

smartimage ウィジェットの最も重要なプロパティを次に示します。

  • xtype - ウィジェットのタイプ(「smartimage」)。

  • name - 画像ファイル(バイナリ)を保存する場所。通常は、./image/file または ./file です。

  • title - ダイアログに表示されるタイトル。

  • cropParameter - トリミングの座標を保存する場所。通常は、./image/imageCrop または ./imageCrop です。

  • ddGroups - コンテンツファインダーのグループで、このグループからこのウィジェットにアセットをドラッグできます。

  • fileNameParameter - 画像ファイルの名前を保存する場所を指定します。通常は、./image/fileName または ./fileName です。

  • fileReferenceParameter - メディアライブラリからの画像を使用するときに画像参照を保存する場所。通常は、./image/fileReference または ./fileReference です。

  • mapParameter - マップデータを保存する場所。通常は、./image/imageMap または ./imageMap です。

  • requestSuffix - このウィジェットで画像を参照するときに使用するデフォルトサフィックス。通常は、./image.img.png または ./img.png です。

  • rotateParameter - 回転の指定を保存する場所。通常は、./image/imageRotate または ./imageRotate です。

  • sizeLimit - 最大サイズ制限(100)。

  • uploadUrl - データを一時保存するときに使用するパス。通常は、/tmp/uploaded_test/* です。

コンテンツファインダーの基本事項

コンテンツファインダーからコンポーネントにアセットをドラッグできるようにするには、編集設定ノード(cq:editConfig)の下に cq_dropTargets という名前のドロップターゲット設定ノードが必要です。

概要:

場所: /apps/<myapp>/components/<mycomponent>/cq:editConfig/cq:dropTargets

ルートノード:

  • cq:dropTargets(cq:DropTargetConfig) - ドロップターゲット設定の階層ノード。

smartimage では、このノードの下に次のノードツリー(重要なプロパティを含む)を作成する必要があります。

  • 次の重要なプロパティを持つ画像(nt:unstructured):

    • accept - 受け入れるメディアタイプ(image/gif、image/jpeg または image/png)。

    • groups - コンテンツファインダーのグループで、このグループからアセットを受け入れることができます(media)

    • propertyName - 参照を保存する場所。通常は、./image/fileReference または ./fileReference です

コンテンツ内の個別の画像ノードに画像を保存する場合(例えば、textimage と同様、リソースに対して保存されるデータが画像のみでない場合)、次の 2 つのノードも作成する必要があります。

  • 画像ノードの下のパラメーター(nt:unstructured)

  • 次の重要なプロパティを持つパラメーターノードの下の画像(nt:unstructured):

    • sling:resourceType - (Alt ボタンを押しながら段落システムにアセットをドラッグするときなど)完全な段落を作成する必要がある場合に保存されるリソースタイプ。

画像コンポーネントの基本事項

この節では、画像をプログラムで操作する際に最も関係する関数(API 呼び出し)を示します。

  • com.day.cq.wcm.foundation.Image

    • addCssClass

    • loadStyleData

    • setSelector

    • setSuffix

    • draw

    • getDescription

  • com.day.cq.wcm.api.components.DropTarget

  • com.day.cq.wcm.api.components.EditConfig

  • com.day.cq.wcm.commons.WCMUtils

詳しくは、AEM WCM で提供される Javadoc を参照してください。

画像レンダリングの基本事項

上部ナビゲーションコンポーネントの場合と同様、AbstractImageServlet を使用して画像がレンダリングされます。 AbstractImageServlet については、上部ナビゲーションコンポーネントの節の「レンダリングの基本事項」を参照してください。

「画像ビュー」のリソースへの要求を検出する必要があるので、画像(/path/to/the/resource.img.png)の要求に対する特定のセレクターを追加する必要があります。 このようなセレクターを使用した要求は、画像処理サーブレットで処理されます。

テキスト画像コンポーネント

テキスト画像コンポーネントは、メインの段落システムにテキストと画像を表示します。

仕様の概要:

  • /libs/foundation/components/textimage
  • メインの段落システムにテキストと画像を表示します。
  • 特定の段落関連の表示プロパティ(タイトル、説明、サイズ)とともにテキストと画像が段落リソース(ダイアログ)に保存されます。
  • 画像の操作が可能です(様々な機能がありますが、トリミングやマッピングなども可能です)。
  • 画像レンダリングの場合は、(画像コンポーネントセット resourceSuperType から継承するために)画像コンポーネント用に作成されたサーブレットを使用します
  • テキスト入力では、詳細な設定が可能なリッチテキストエディターが使用されます。
  • 詳細画像プロパティ」タブで、CSS ファイルで定義されたスタイルをリストするようにスタイルを設定できます。 多くの場合、これは画像を左揃えまたは右揃えするために使用されます。

ウィジェット richtext

richtext ウィジェットは、WCM システムのテキスト処理のうち、最も一般的な側面を処理するために使用される拡張ウィジェットです。 テキストを書式設定情報とともに保存します。

richtext ウィジェットの最も重要なプロパティを次に示します。

  • xtype - ウィジェットのタイプ(「richtext」)

  • name - テキストを保存する場所。通常は、./text です。

  • hideLabel - ラベルを表示するかどうかを定義します。通常は、false です。

  • richFlag(xtype=hidden)。名前として ./textIsRich、ignoreData=true、value=true を指定 - 書式をリッチテキスト形式として定義するために使用します。

テキストおよび画像コンポーネントの基本事項

この節では、テキストと画像をプログラムで操作する際に最も関係する関数(API 呼び出し)を示します。

  • com.day.cq.wcm.foundation.TextFormat

  • com.day.cq.wcm.api.WCMMode

詳しくは、AEM WCM で提供される Javadoc を参照してください。

検索コンポーネント

検索コンポーネントは、すべてのページの段落システムに配置できます。 要求で指定されたクエリに応じて、サイトのコンテンツを検索します。

仕様の概要:

  • /libs/foundation/components/search

  • 検索フォームを表示します。

  • 要求で指定されたクエリに対する検索結果を表示します(クエリが指定された場合)。

  • プロパティを定義するためのダイアログを表示します

    • 検索ボタンのテキスト

    • 結果なしのテキスト

    • 前へのラベル

    • 次へのラベル

  • ページネーションを提供します

検索の基本事項

この節では、検索をプログラムで操作する際に最も関係する関数(API 呼び出し)を示します。

  • com.day.cq.wcm.foundation.Search - 検索のほぼすべての側面で使用される検索クラス。 「q」という名前の要求パラメーターでクエリが要求されます

    • getResult - 結果のオブジェクトを取得します

  • com.day.cq.wcm.foundation.Search.Result

    • getResultPages

    • getPreviousPage

    • getNextPage

詳しくは、AEM WCM で提供される API ドキュメントを参照してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー