AEM コンポーネントの開発（クラシック UI）

クラシック UI では、ExtJS を使用して、コンポーネントのルックアンドフィールを提供するウィジェットを作成します。このウィジェットの性質により、クラシック UI とタッチ操作対応 UI では、コンポーネントとのやり取りにいくつかの相違点があります。

メモ

コンポーネント開発の多くの側面は、クラシックUIとタッチ操作対応UIの両方に共通なので、このページを使用する前にAEM Components - The Basicsを読む必要があります。

メモ

クラシック UI 用のコンポーネントの開発には HTML テンプレート言語（HTL）と JSP のどちらも使用できますが、このページでは JSP を使用した開発について説明します。これは単に、クラシック UI 内では JSP が使用されてきたからです。

現在では、HTL が AEM の推奨スクリプティング言語とされています。HTLとAEMコンポーネントの開発を参照して、メソッドを比較してください。

構造

コンポーネントの基本構造については、「 AEM Components - The Basics 」ページで説明しています。このページでは、タッチ操作対応UIとクラシックUIの両方を適用します。新しいコンポーネントでタッチ操作対応 UI の設定を使用する必要がない場合でも、この情報は既存のコンポーネントを継承する際に設定を把握するのに役立ちます。

JSP スクリプト

コンポーネントをレンダリングするには JSP スクリプトまたはサーブレットを使用します。Sling のリクエスト処理規則に従って、デフォルトスクリプトの名前は、

<*componentname*>.jsp

global.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、使用される API および Taglib の機能

デフォルトの 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 — デザイン情報を取得するためのデザイナーオブジェ 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");

JSP タグライブラリ

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

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

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

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

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

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

ダイアログ

コンポーネントのコンテンツを作成者が追加したり設定できるようにするには、ダイアログが必要です。

詳しくは、 AEMコンポーネント — 基本を参照してください。

編集動作の設定

コンポーネントの編集動作を設定できます。これには、コンポーネントに対して使用可能なアクションなどの属性、インプレースエディターの特性、コンポーネントに対するイベントに関連するリスナーも含まれます。固有の相違点は多少ありますが、設定はタッチ操作対応 UI とクラシック UI の両方に共通です。

コンポーネントの編集動作は、タイプcq:EditConfigのcq:editConfigノードを（タイプcq:Componentの）コンポーネントノードの下に追加し、特定のプロパティと子ノードを追加することで設定します。

ExtJS ウィジェットの使用と拡張

詳しくは、ExtJS ウィジェットの使用と拡張を参照してください。

ExtJS ウィジェットに xtype を使用

詳しくは、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 では Granite コンポーネントを使用します。
- クラシック UI では ExtJS ウィジェットを使用します。
メモ

クラシック UI 用に定義したダイアログは、タッチ操作対応 UI 内で動作します。

タッチ操作対応 UI 用に定義したダイアログは、クラシック UI 内では動作しません。

インスタンスと作成環境によっては、コンポーネント用に両方のタイプのダイアログを定義する必要が生じる場合があります。
新しいコンポーネントを表示するには、次のいずれかのノードが存在し、適切に初期化されている必要があります。
- cq:dialog — タッチ操作対応UI用ダイアログ
- dialog - クラシック UI 用ダイアログ
- cq:editConfig - 編集環境でのコンポーネントの動作（ドラッグ＆ドロップなど）
- design_dialog — デザインモード用ダイアログ（クラシックUIのみ）
次のどちらかの方法で、段落システムで新しいコンポーネントを利用できるようにします。
- CRXDE Liteを使用して、ノード/etc/designs/geometrixx/jcr:content/contentpage/parのプロパティコンポーネントに値<path-to-component>（例えば、/apps/geometrixx/components/myComponent）を追加します。
- 「段落システムへの新しいコンポーネントの追加」の手順を実行します。
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をダウンロードしてインストールする方法については、ドキュメントWe.Retail参照実装を参照してください。

既存の textimage コンポーネントの拡張

新しいコンポーネントを作成するには、標準のtextimageコンポーネントを基礎として使用し、変更します。ここでは、Geometrixx AEM WCM の例のアプリケーションに新しいコンポーネントを保存します。

ターゲットノード名としてtextimageを使用して、/libs/foundation/components/textimageからGeometrixxコンポーネントフォルダー/apps/geometrixx/componentsに標準のtextimageコンポーネントをコピーします。（コンポーネントに移動し、右クリックして「コピー」を選択し、ターゲットディレクトリに移動することでコンポーネントをコピーします）。
この例ではシンプルに保つために、コピーしたコンポーネントに移動し、新しい textimage ノードから、以下に示すサブノードを除く、すべてのサブノードを削除します。
- ダイアログ定義：textimage/dialog
- コンポーネントスクリプト：textimage/textimage.jsp
- 設定ノードを編集（アセットのドラッグ&ドロップを許可）:textimage/cq:editConfig
メモ
ダイアログの定義は、UI に依存します。
- タッチ操作対応UI:textimage/cq:dialog
- クラシック UI：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）：
  - xtype を cqinclude に変更します（標準コンポーネントから継承するため）。
  - それぞれ/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ノードに対して、次のプロパティ（タイプがString）を設定します。
    - name: ./imagePosition
    - xtype: selection
    - fieldLabel: Image Position
    - type: select
  - 画像配置の2つの選択肢を表すcq:WidgetCollection型のサブノードposition/optionsを追加し、その下にnt:unstructured型のo1とo2の2つのノードを作成します。
  - ノード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"><%

コンポーネントをリポジトリに保存します。コンポーネントをテストする準備ができました。

新しいコンポーネントの確認

コンポーネントを開発したら、段落システムに追加します。この操作により、ページの編集時に、作成者がコンポーネントを選択して使用できるようになります。コンポーネントをテストするには、以下の手順を実行します。

Geometrixx でページを開きます（例：English／Company）。
サイドキックで「デザイン」をクリックし、デザインモードに切り替えます。
ページの中央の段落システムで、「編集」をクリックし、段落システムのデザインを編集します。段落システムに配置できるコンポーネントの一覧が表示されます。一覧には、新しく開発した Text Image (Extended) コンポーネントも含まれます。コンポーネントを選択し、「OK」をクリックして、段落システムに対してコンポーネントをアクティブ化します。
編集モードに戻します。
Text Image (Extended) 段落を段落システムに追加し、サンプルコンテンツでテキストと画像を初期化します。変更内容を保存します。
テキストと画像の段落のダイアログを開き、「詳細」タブで画像の位置を「右」に変更し、「OK」をクリックして変更を保存します。
段落の右側に画像がレンダリングされます。
コンポーネントを使用する準備ができました。

コンポーネントには、Company ページの段落のコンテンツが格納されます。

画像コンポーネントのアップロード機能の無効化

この機能を無効にするには、標準の画像コンポーネントを基礎として使用し、変更します。 Geometrixx の例のアプリケーションに新しいコンポーネントを保存します。

ターゲットノード名としてimageを使用して、/libs/foundation/components/imageからGeometrixxコンポーネントフォルダー/apps/geometrixx/componentsに標準の画像コンポーネントをコピーします。
コンポーネントのメタデータを編集します。
- jcr:titleをImage (Extended)に設定します。
/apps/geometrixx/components/image/dialog/items/image に移動します。
新しいプロパティを追加します。
- 名前：allowUpload
- 型：String
- 値: false
「すべて保存」をクリックします。コンポーネントをテストする準備ができました。
Geometrixx でページを開きます（例：English／Company）。
デザインモードに切り替え、Image (Extended) をアクティブ化します。
編集モードに切り替え、画像を段落システムに追加します。次の画像で、元の画像コンポーネントと先ほど作成したコンポーネントの違いを確認できます。

元の画像コンポーネント：

新しい画像コンポーネント：
コンポーネントを使用する準備ができました。