記事の概要

要約

ParSys システムが使用する CQ コンポーネントの開発方法について説明します。このコンポーネントは、複数のタブを持つダイアログボックスと画像をサポートし、コンテンツファインダーが提供する機能に接続します。
Digital Marketing のソリューション Adobe Experience Manager(Adobe CQ)
対象
開発者(中級)
必要なスキル
JavaScript、JCR、Sling
テスト済み Adobe CQ 5.5

テキストと画像を管理する AEM コンポーネントを作成できます。また、この記事で作成を学ぶコンポーネントには、ユーザーがデザイン時に画像を選択できる CQ ダイアログボックスがあります。 

Widget

ユーザーが画像を選択すると、ウィジェットに表示されます。

Widget2

この記事では、コンテンツ作成者が画像を編集でき、コンテンツファインダーからドラッグできます。

この記事で、画像は:

  • ダイアログウィジェット(xtype of smartimage)です。
  • この図に示すように、コンテンツファインダーから画像をドラッグできるようにするため、コンポーネントの cq:editConfig で設定する必要があります。
Content

リッチテキスト:

1. ダイアログウィジェット(xtype of richtext)です。
2.ウィジェットは、リッチテキスト編集プラグインテーブルのすべての機能を有効にします。
3. ウィジェットにはデフォルトのテキストがあります。

ページのパス:

1. デザインダイアログウィジェットで、pathcompletion の xtype である可能性があります。
2. ウィジェットは、ユーザーの入力を検証する正規表現を持つ regex プロパティが必要です(例えば、"/^\/content\/training\/(.)*$/").
3. 正規表現に失敗した場合、ウィジェットは regexText プロパティにエラーメッセージを表示する必要があります。

CQ アプリケーションフォルダー構造の作成

CRXDE Lite を使用して、テンプレート、コンポーネントおよびページを含む Adobe CQ アプリケーションフォルダー構造を作成します。

CQAppSetup

各アプリケーションフォルダーについて説明します。

  • アプリケーション名:アプリケーションが使用するすべてのリソースが含まれます。リソースには、テンプレート、ページ、コンポーネントなどがあります。
  • コンポーネント:アプリケーションが使用するコンポーネントを含みます。
  • ページ:ページのコンポーネントが含まれています。ページコンポーネントは、JSP ファイルなどのスクリプトです。
  • グローバル:アプリケーションが使用するグローバルコンポーネントが含まれています。
  • テンプレート:ページコンポーネントに基づくテンプレートが含まれています。
  • ソース:OSGi コンポーネントを構成するソースコードが含まれます(この開発記事では、このフォルダーを使用して OSGi バンドルを作成しません)。
  • インストール:コンパイルされた OSGi バンドルのコンテナが含まれています。

アプリケーションフォルダー構造を作成するためには:

1. CQ ウェルカムページを表示するには、Web ブラウザーに URL http://[ ホスト名 ]:[ ポート ] を入力します。例えば、http://localhost:4502.

2. CRXDE Lite を選択します。

3. アプリのフォルダー(または親フォルダー)を右クリックし、「作成」、「フォルダーを作成」を選択します。

4. 「フォルダーを作成」のダイアログボックスにフォルダー名を入力します。imagecomponent を入力します。

5. 前述の図で指定された各フォルダーについて、手順 1~4 を繰り返します。

6. 「すべて保存」ボタンをクリックします。

注意:

変更するために CRXDE Lite で作業する場合は、「すべて保存」ボタンをクリックする必要があります。 

テンプレートの作成

CRXDE Lite を使用してテンプレートを作成できます。CQ テンプレートを使用すると、アプリケーションのページに一貫したスタイルを定義できます。テンプレートは、ページ構造を指定するノードで構成されます。テンプレートについて詳しくは、http://dev.day.com/docs/en/cq/current/developing/templates.html を参照してください。

テンプレートを作成するには、次のタスクを実行します。
1.CQ のウェルカムページを表示するには、Web ブラウザーに URL http://[ ホスト名 ]:[ ポート ] を入力します。例えば、http://localhost:4502.
2. CRXDE Lite を選択します。
3. テンプレートフォルダー(アプリケーション内)を右クリックし、「作成」、「テンプレートを作成」
を選択します。
4. 「テンプレートを作成」のダイアログボックスに、次の情報を入力します。

  • ラベル:作成するテンプレートの名前。 templateImage. を入力します。
  • タイトル:テンプレートに割り当てられたタイトル。
  • 説明:テンプレートに割り当てられた説明。
  • リソースタイプ:テンプレートに割り当てられ、実装するページにコピーされるコンポーネントのパス。imagecomponent/components/page/templatelmage を入力します。
  • ランキング:このテンプレートが他のテンプレートに関連して表示される順序(昇順)。この値を 1 に設定すると、テンプレートがリストの最初に表示されます。

5. 許可されているパスにパスを追加します。プラス記号をクリックし、次の値を入力します。/content(/.*)?.
6.「許可された親」で、「次へ」をクリックします。
7. 「許可されている子」で、「OK」を選択します。

画像コンポーネントの作成

コンポーネントは、Web サイトのコンテンツをレンダリングするために、特定のアプリケーションロジックを実装する再利用可能なモジュールです。コンポーネントは、特定の機能を完全に実行するスクリプト(例えば、JSP、Java サーブレットなど)のコレクションとして考えることができます。この機能を実現するため、特定の機能を実行するスクリプトを作成することは CQ 開発者としての責任となります。コンポーネントについて詳しくは、http://dev.day.com/docs/en/cq/current/developing/components.html を参照してください。

デフォルトでは、コンポーネントにはコンポーネントの名前と同じデフォルトスクリプトが少なくとも 1 つ含まれています。レンダリングコンポーネントを作成するには、次のタスクを実行します。
1.CQ のウェルカムページを表示するには、Web ブラウザーに URL http://[ ホスト名 ]:[ ポート ] を入力します。例えば、http://localhost:4502.
2. CRXDE Lite を選択します。
3. /apps/imagecomponent/components/page で右クリックし、「作成」、「コンポーネントを作成」を選択
します。
4. 「コンポーネントを作成」ダイアログボックスに次の情報を入力します。

  • ラベル:作成するコンポーネントの名前。templateImage; を入力します。
  • タイトル:コンポーネントに割り当てられたタイトル。
  • 説明:テンプレートに割り当てられた説明。

5. 「コンポーネントの詳細設定」および「許可された親」で「次へ」を選択します。
6. 「許可されている子」で、「OK」を選択します。
7. /apps/imagecomponent/components/page/templateImage/templateImage.jsp にある templateImage.jsp を開きます。

8. 次の JSP コードを入力します。 

<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>


<body>
<h1>Here is where the Component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

注意:

この開発記事で作成した画像コンポーネントを追加するページコンポーネントです。この記事の残りの部分では、画像を使用できるコンポーネントの作成方法について説明します。

画像のドラッグ&ドロップをサポートするコンポーネントの開発

ここでは、この記事の最初に表示されているすべての要件をサポートする complex component を作成します。次の図は、このセクションで作成されたコンポーネントの構造を示しています。 

struc

CRXDE を使用して次のタスクを実行します。

1. /apps/imagecomponent/components で右クリックし、「新規作成」、「コンポーネント」を選択します。

2. 「コンポーネントを作成」ダイアログボックスに、次の情報を入力します。

  • ラベル:作成するコンポーネントの名前。complex を入力します。
  • タイトル:コンポーネントに割り当てられたタイトル。Training Complex を入力します。
  • 説明:テンプレートに割り当てられた説明。Complex Component を入力します。
  • スーパーリソースタイプfoundation/components/parbase を入力します。
  • グループ:コンポーネントが表示されるサイドキックのグループ。Training を入力します。
  • 許可された親 */*parsys を入力します。

3. complex.jsp を開いて、次の JavaScript コードを入力します。

<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="com.day.cq.wcm.foundation.Image" %>
<%
// getting the image from the Dialog/resouce
// notice the use of the second parameter "image" -- this signifies that the
// image will live on a resource (called image) below the requested resource
Image image = new Image(resource, "image");
// setting the selector so that the "parbase" can work its magic
image.setSelector(".img");
// getting the rich text from the Dialog
String text = properties.get("text", "TEXT NA");
// getting the path from the Design Dialog
String path = currentStyle.get("path", "PATH NA");
%>
<h2><%= path %></h2>
<%= text %><br />
<%
image.draw(out);
%>

4. complex component にダイアログを追加します。/apps/imagecomponent/components/complex を選択し、右クリックして「新規作成」、「ダイアログ」を選択します。

5. コンポーネントダイアログの tab1 ノードの下に項目ノード(ノードタイプ cq:WidgetCollection
を作成します。

6. 新しく作成された項目ノードの下にテキストノード(ノードタイプ cq:Widget)を作成します。

7. 新しく作成したテキストノードに次のプロパティを割り当てます。

名前 種類 説明
名前 文字列 と入力します。/text コンテンツの保存場所を定義します。
xtype 文字列 richtext ウィジェットタイプを定義します。
hideLabel Boolean true ウィジェットのラベルを非表示に指定します。
defaultValue 文字列 これはデフォルトのテキストです。 デフォルトのテキスト値を定義します。

8. 新しく作成した
テキストノードの下に rtePlugins ノード(ノードタイプ nt:unstructured)を作成します。

9. 新しく作成した rtePlugins ノードの下に、テーブルノード
(ノードタイプ nt:unstructured)を作成します。

10. 新しく作成されたテーブルノードに機能プロパティ(タイプ=文字列、値=*)を割り当てます。

11. ノード /libs/foundation/components/textimage/dialog/items でノード tab2 および tab3 をコピーします。tab1 のピアになるように、complex Component ダイアログに貼り付けます(例えば、/apps/imagecomponent/components/complex/dialog/items/items)。

tab2 は smartimage タブで、tab3 は詳細画像プロパティです。必要に応じて、既存のダイアログ/ウィジェットをコピーして貼り付ける方が効率的です。CQ の内部動作をより理解するために、コピーしたものをレビューして理解することをお勧めします。

十分に確認すると、ウィジェットが現在のリソースよりも深いレベルで、画像関連のコンテンツを実際に保存していることがわかります(例えば、/image/file, ./image/fileReference など)。これは、complex.jsp(画像 image = new Image(resource, "image");)のコードに対応しています。

12. コンポーネントのデザインダイアログの tab1 ノードの下に、項目ノード(ノードタイプ cq:WidgetCollection)を作成します。

13. 項目ノードの下に、パスノード(ノードタイプ cq:Widget)を作成します。

14. パスノードに次のプロパティを割り当てます。

名前 種類 説明
名前 文字列 と入力します。/path コンテンツの保存場所を定義します。
xtype 文字列 pathfield ウィジェットタイプを定義します。
fieldLabel 文字列 パスを入力します。 ウィジェットに適用されるラベルを定義します。
rootPath 文字列 /content/trainingSite 表示するルートパスを定義します。
regex 文字列 /^\/content\/trainingSite\/(.)*$/ ユーザー入力を評価するために使用する正規表現を定義します。
regexText 文字列 /content/trainingSite にページを挿入してください。 ユーザーの入力が正規表現に失敗した場合、エラーメッセージを定義します。

15. ノード /libs/foundation/components/textimage/cq:editConfig をコピーします。complex Component(/apps/imagecomponent/components/complex)のルートノードに貼り付けします。

この操作により、コンテンツファインダーからのドラッグ&ドロップ機能が有効になります。 

コンテンツファインダーからページ上のコンポーネントにアセットをドラッグ&ドロップするには、コンポーネントの設定を編集ノード(cq:editConfig)下に、cq:dropTargets(of type nt:unstructured)というドロップ先設定ノードが必要です。

16. CRXDE を使用して、次のパスに移動します。

/apps/imagecomponent/components/complex/cq:editConfig/cq:dropTargets/image

画像ノードに次のプロパティがあることを検証します。

  • accept(タイプ=文字列)使用可能なメディアのタイプ(例えば、image/.* など)
  • groups(タイプ=文字列)-コンテンツファインダーアセットの groups は、(例えば、メディア)から使用できます。
  •  propertyName(タイプ=文字列)-プロパティと参照が保存されている必要があります。
    (例えば、/image/fileReference)

17. 画像ノードの子ノードであるパラメーターノードに移動します。sling:resourceType プロパティの値を training/
components/complex
の値に変更します。
sling:resourceType プロパティ
は、レンダリングスクリプトを検索する場所を参照する必要があります。

新規のコンポーネントを使用する CQ Web ページを作成します。

最後のタスクは、templateImage(この開発記事で最初に作成したテンプレート)に基づくページを含むサイトを作成することです。この CQ ページでは、次の図に示すように、CQ のサイドキックから作成した複雑なウィジェットを選択できます。

 

sidekick


1. http://[ ホスト名 ]:[ ポート ] の CQ ウェルカムページに移動します。例えば、http://localhost:4502
「Web サイト」を選択します。

2. 左側のウィンドウで、「Web サイト」を選択します。

3. 「新しいページ」を選択します。

4. タイトルフィールドで、ページタイトルを指定します。

5. 名前フィールドに、ページ名を指定します。

6. 表示されるテンプレートリストから templateImage を選択します。この値は、この開発記事で作成されたテンプレートを表します。表示されない場合は、この開発記事の手順を繰り返します。例えば、パス情報に入力するときに入力を間違えた場合、そのテンプレートは新しいページのダイアログボックスに表示されません。

6. 右側のウィンドウをダブルクリックして、作成した新しいページを開きます。新しいページが Web ブラウザーで開きます。

7. サイドキックから、下にあるデザインアイコンをクリックします。

8. 表示される「編集」ボタンをクリックします。

Edit


9. 表示される「コンポーネントを編集」ダイアログから、次の図に示すように、training の下にあるコンポーネントを選択します。

SIdeKickedit


10. 「OK」をクリックします。

11. これで、新しいコンポーネントは、サイドキックに表示されます。コンポーネントを Web ページにドラッグします。これで、この記事の最初に示されたコンポーネントが表示されます。表示されない場合は、この記事で作成したすべてのノードとプロパティが作成されているか確認してください。

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

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