クラシック UI では、ExtJS を使用して、コンポーネントのルックアンドフィールを提供するウィジェットを作成します。このウィジェットの性質により、クラシック UI とタッチ操作対応 UI では、コンポーネントとのやり取りにいくつかの相違点があります。
コンポーネント開発の多くの側面は、クラシックUIとタッチ対応UIの両方に共通なので、クラシックUIの詳細を扱うこのページを使用するには、AEM Components - The Basics beforeを読む必要があります。
クラシック UI 用のコンポーネントの開発には HTML テンプレート言語(HTL)と JSP のどちらも使用できますが、このページでは JSP を使用した開発について説明します。これは単に、クラシック UI 内では JSP が使用されてきたからです。
現在では、HTL が AEM の推奨スクリプティング言語とされています。方法を比較するには、HTLとAEMコンポーネントの開発を参照してください。
コンポーネントの基本構造は、「AEM Components - The Basics」ページで説明しています。このページでは、タッチアンバールドとクラシックUIの両方を適用します。 新しいコンポーネントでタッチ操作対応 UI の設定を使用する必要がない場合でも、この情報は既存のコンポーネントを継承する際に設定を把握するのに役立ちます。
コンポーネントをレンダリングするには JSP スクリプトまたはサーブレットを使用します。Sling のリクエスト処理規則に従って、デフォルトスクリプトの名前は、
<*componentname*>.jsp
JSP スクリプトファイルの global.jsp
は、コンポーネントのレンダリングに使用される任意の JSP スクリプトの特定オブジェクト(コンテンツ)にすばやくアクセスするために使用されます。
したがって、global.jsp
で提供される 1 つ以上のオブジェクトを使用する場合は、JSP スクリプトをレンダリングするすべてのコンポーネントに global.jsp
を含める必要があります。
デフォルトの global.jsp
は次の場所にあります。
/libs/foundation/global.jsp
バージョンCQ 5.3以前で使用されていたパス/libs/wcm/global.jsp
は、現在は廃止されています。
デフォルトの global.jsp
から提供される最も重要なオブジェクトを次に示します。
概要:
<cq:defineObjects />
slingRequest
— ラップされたリクエストオブジェクト( SlingHttpServletRequest
)。slingResponse
— ラップされた応答オブジェクト( SlingHttpServletResponse
)。resource
- Slingリソースオブジェクト( slingRequest.getResource();
)。resourceResolver
- Sling Resource Resolverオブジェクト( slingRequest.getResoucreResolver();
)。currentNode
- リクエストに対して解決された JCR ノード。log
— デフォルトのロガー()。sling
- Slingスクリプトヘルパー。properties
— アドレス指定されたリソース( resource.adaptTo(ValueMap.class);
)のプロパティ。pageProperties
- 指定されたリソースのページのプロパティ。pageManager
- AEMコンテンツページにアクセスするためのページマネージャ( resourceResolver.adaptTo(PageManager.class);
)。component
- 現在の AEM コンポーネントのコンポーネントオブジェクト。designer
— デザイン情報を取得するためのdesignerオブジェクト( resourceResolver.adaptTo(Designer.class);
)。currentDesign
- 指定されたリソースのデザイン。currentStyle
- 指定されたリソースのスタイル。AEM WCM のコンテンツにアクセスするには、3 つの方法があります。
global.jsp
で紹介されたプロパティオブジェクトを使用:
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");
CQ と Sling のタグライブラリを使用すると、テンプレートやコンポーネントの JSP スクリプトで使用する特定の機能にアクセスできます。
詳しくは、「タグライブラリ」ドキュメントを参照してください。
最近の Web サイトは、複雑な JavaScript や CSS コードを利用したクライアント側の処理に大きく依存しています。このコードの提供を編成および最適化することが厄介な問題となることがあります。
この問題の解決に役立つように、AEMはクライアント側ライブラリフォルダーを提供します。これにより、クライアント側コードをリポジトリに格納し、カテゴリに整理し、コードの各カテゴリをクライアントに提供するタイミングと方法を定義できます。 その後、クライアント側ライブラリシステムにより、最終的な Web ページで、正しいコードを読み込むための正しいリンクが作成されます。
詳しくは、「クライアント側HTMLライブラリの使用」のドキュメントを参照してください。
コンポーネントのコンテンツを作成者が追加したり設定できるようにするには、ダイアログが必要です。
詳しくは、AEMコンポーネント — 基本を参照してください。
コンポーネントの編集動作を設定できます。これには、コンポーネントに対して使用可能なアクションなどの属性、インプレースエディターの特性、コンポーネントに対するイベントに関連するリスナーも含まれます。固有の相違点は多少ありますが、設定はタッチ操作対応 UI とクラシック UI の両方に共通です。
コンポーネントの編集動作は、タイプcq:EditConfig
のcq:editConfig
ノードをコンポーネントノード(タイプcq:Component
)の下に追加し、特定のプロパティと子ノードを追加することで設定されます。
詳しくは、ExtJS ウィジェットの使用と拡張を参照してください。
詳しくは、xtype の使用を参照してください。
この節では、独自のコンポーネントを作成し、それを段落システムに追加する方法について説明します。
既存のコンポーネントをコピーし、必要な変更をおこなうことが、開発を始めるうえで最も簡単な方法です。
コンポーネントの開発方法の例について詳しくは、テキストコンポーネントと画像コンポーネントの拡張 - 例を参照してください。
既存のコンポーネントをベースに新しい AEM コンポーネントを開発するには、既存のコンポーネントをコピーし、新しいコンポーネント用の JavaScript ファイルを作成して、AEM からアクセスできる場所に保存します(「コンポーネントおよびその他の要素のカスタマイズ」も参照してください)。
CRXDE Lite を使用して、新しいコンポーネントフォルダーを以下の場所に作成します。
/ apps/<myProject>/components/<myComponent>
libs 内にあるものと同じノード構造を再作成してから、テキストコンポーネントなどの既存のコンポーネントの定義をコピーします。例えば、テキストコンポーネントをカスタマイズするには、次のようにコピーします。
/libs/foundation/components/text
から/apps/myProject/components/text
jcr:title
を変更して新しい名前を反映します。
新しいコンポーネントフォルダーを開き、必要な変更をおこないます。また、フォルダー内にある不要な情報を削除します。
例えば、次のような変更をおこなうことができます。
ダイアログボックスへの新しいフィールドの追加
cq:dialog
— タッチ対応UIのダイアログdialog
- クラシック UI 用ダイアログ.jsp
ファイルの置き換え(新しいコンポーネントの後に名前を付ける)
または、コンポーネント全体の作成し直し(必要な場合)
例えば、標準のテキストコンポーネントのコピーを取得する場合、ダイアログボックスにフィールドを追加し、.jsp
を更新してそこで行った入力を処理できます。
使用するコンポーネント:
クラシック UI 用に定義したダイアログは、タッチ操作対応 UI 内で動作します。
タッチ操作対応 UI 用に定義したダイアログは、クラシック UI 内では動作しません。
インスタンスと作成環境によっては、コンポーネント用に両方のタイプのダイアログを定義する必要が生じる場合があります。
新しいコンポーネントを表示するには、次のいずれかのノードが存在し、適切に初期化されている必要があります。
cq:dialog
— タッチ対応UIのダイアログdialog
- クラシック UI 用ダイアログcq:editConfig
- 編集環境でのコンポーネントの動作(ドラッグ&ドロップなど)design_dialog
— デザインモードのダイアログ(クラシックUIのみ)次のどちらかの方法で、段落システムで新しいコンポーネントを利用できるようにします。
<path-to-component>
の値(例:/apps/geometrixx/components/myComponent
)をノード/etc/designs/geometrixx/jcr:content/contentpage/par
のプロパティコンポーネントに追加するAEM WCM で、Web サイトのページを開き、作成した新しいタイプの段落を挿入してコンポーネントが正常に動作することを確認します。
ページ読み込みのタイミング統計を確認するには、Ctrl-Shift-U — を使用し、URLに?debugClientLibs=true
を設定します。
コンポーネントを開発したら、段落システムに追加します。この操作により、ページの編集時に、作成者がコンポーネントを選択して使用できるようになります。
<contentPath>/Test.html
のように、オーサリング環境内の段落システムを使用するページにアクセスします。
次のどちらかの方法でデザインモードに切り替えます。
URLの末尾に?wcmmode=design
を追加し、もう一度アクセスする、例:
<contextPath>/ Test.html?wcmmode=design
サイドキックで「デザイン」をクリックします。
デザインモードになり、段落システムを編集できるようになります。
「編集」をクリックします。
その段落システムに所属するコンポーネントのリストが一覧表示されます。新しいコンポーネントも一覧に表示されます。
これらのコンポーネントをアクティブ化または非アクティブ化することで、ページの編集時に作成者に提供するコンポーネントを決定できます。
コンポーネントをアクティブ化したら、標準編集モードに戻り、利用可能かどうかを確認します。
この節では、広く利用されているテキストと画像の標準コンポーネントを、設定可能な画像配置機能を使用して拡張する方法について説明します。
テキストコンポーネントと画像コンポーネントの拡張により、エディターは、コンポーネントのすべての既存機能を使用できるだけでなく、次のどちらかの方法で画像の配置を指定できる追加のオプションも利用できます。
このコンポーネントを拡張したら、コンポーネントのダイアログボックスを使用して画像の配置を設定できます。
この演習では、以下の方法を説明します。
この例は、クラシック UI を対象としています。
この例は、Geometrixx サンプルコンテンツに基づいています。これは、AEM に付属されなくなり、We.Retail に置き換えられました。Geometrixxのダウンロードおよびインストール方法については、ドキュメントWeb.Retail Reference Implementationを参照してください。
新しいコンポーネントを作成するには、標準のtextimageコンポーネントを基に変更します。 ここでは、Geometrixx AEM WCM の例のアプリケーションに新しいコンポーネントを保存します。
ターゲットノード名としてtextimageを使用し、/libs/foundation/components/textimage
からGeometrixxコンポーネントフォルダー/apps/geometrixx/components
に標準のtextimageコンポーネントをコピーします。 (コンポーネントに移動し、右クリックして「コピー」を選択し、ターゲットディレクトリに移動することでコンポーネントをコピーします)。
この例ではシンプルに保つために、コピーしたコンポーネントに移動し、新しい textimage ノードから、以下に示すサブノードを除く、すべてのサブノードを削除します。
textimage/dialog
textimage/textimage.jsp
textimage/cq:editConfig
ダイアログの定義は、UI に依存します。
textimage/cq:dialog
textimage/dialog
コンポーネントのメタデータを編集します。
コンポーネント名
jcr:description
をText Image Component (Extended)
に設定jcr:title
をText Image (Extended)
に設定サイドキック内でコンポーネントが一覧表示されるグループ(修正しない)
componentGroup
をGeneral
に設定したままにします新しいコンポーネントの親コンポーネント(標準の textimage コンポーネント)
sling:resourceSuperType
をfoundation/components/textimage
に設定この手順を終えると、コンポーネントのノードは以下のようになります。
画像の設定の編集ノードのsling:resourceType
プロパティを変更します(プロパティ:textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType
) ~ geometrixx/components/textimage.
これで、画像がページ上のコンポーネントにドロップされると、拡張された textimage コンポーネントの sling:resourceType
プロパティが geometrixx/components/textimage.
に設定されます。
コンポーネントのダイアログボックスを変更して新しいオプションを含めます。新しいコンポーネントは元のコンポーネントと同じダイアログボックスのパーツを継承します。「詳細」タブを拡張するために、「左」と「右」のオプションのある「画像の位置」ドロップダウンリストだけを追加します。
textimage/dialog
プロパティは変更しないでください。textimage/dialog/items
に、textimage ダイアログボックスの 4 つのタブを表す 4 つのサブノード(tab1 から tab4)があることを確認します。
最初の 2 つのタブ(tab1 および tab2):
/libs/foundation/components/textimage/dialog/items/tab1.infinity.json
および/libs/foundation/components/textimage/dialog/items/tab2.infinity.json
のパスプロパティ。tab3:
プロパティとサブノードは変更せずに保持します。
追加tab3/items
に対する新しいフィールド定義、タイプcq:Widget
のノード位置
新しいtab3/items/position
ノードに次のプロパティ(文字列型)を設定します。
name
: ./imagePosition
xtype
: selection
fieldLabel
: Image Position
type
: select
画像配置の2つの選択肢を表すタイプcq:WidgetCollection
の追加サブノードposition/options
。その下にタイプnt:unstructured
の2つのノード(o1とo2)が作成されます。
ノードposition/options/o1
に対して、次のプロパティを設定します。text
~ Left
、value
~ left.
ノードposition/options/o2
に対して、次のプロパティを設定します。text
~ Right
、およびvalue
~ right
です。
tab4 を削除します。
画像の位置は、imagePosition
の段落を表すノードの textimage
プロパティとしてコンテンツ内で保持されます。これらの手順を終えると、コンポーネントのダイアログボックスは以下のようになります。
コンポーネントのスクリプト textimage.jsp
を拡張し、新しいパラメーターの処理を追加します。
Image image = new Image(resource, "image");
if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
image.loadStyleData(currentStyle);
強調表示したコードのフラグメント %><div class="image"><% は、このタグのカスタムスタイルを生成する新しいコードで置き換える予定です。
// todo: add new CSS class for the 'right image' instead of using
// the style attribute
String style="";
if (properties.get("imagePosition", "left").equals("right")) {
style = "style=\"float:right\"";
}
%><div <%= style %> class="image"><%
コンポーネントをリポジトリに保存します。コンポーネントをテストする準備ができました。
コンポーネントを開発したら、段落システムに追加します。この操作により、ページの編集時に、作成者がコンポーネントを選択して使用できるようになります。コンポーネントをテストするには、以下の手順を実行します。
コンポーネントには、Company ページの段落のコンテンツが格納されます。
この機能を無効にするには、標準の画像コンポーネントを基に変更を加えます。 Geometrixx の例のアプリケーションに新しいコンポーネントを保存します。
標準画像コンポーネントを/libs/foundation/components/image
からGeometrixxコンポーネントフォルダー/apps/geometrixx/components
にコピーし、ターゲットノード名としてimageを使用します。
コンポーネントのメタデータを編集します。
Image (Extended)
に設定/apps/geometrixx/components/image/dialog/items/image
に移動します。
新しいプロパティを追加します。
allowUpload
String
false
「すべて保存」をクリックします。コンポーネントをテストする準備ができました。
Geometrixx でページを開きます(例:English/Company)。
デザインモードに切り替え、Image (Extended) をアクティブ化します。
編集モードに切り替え、画像を段落システムに追加します。次の画像で、元の画像コンポーネントと先ほど作成したコンポーネントの違いを確認できます。
元の画像コンポーネント:
新しい画像コンポーネント:
コンポーネントを使用する準備ができました。