クラシック UI 用の AEM コンポーネント

検索
Experience Manager 6.2 Sites 開発ユーザーガイド

目次

対象アプリケーション: Experience Manager 6.2 Sites

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

現在表示中:

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

しかし、コンポーネントの要素の多くは両方の UI に共通なので、このページに書かれているクラシック UI の解説を読む前に、まずコンポーネント - 基本を読んでください。

注意：

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

現在では、HTL が AEM の推奨スクリプティング言語とされています。手法を比較するには、HTL およびタッチ操作向け UI 用のコンポーネントを参照してください。

構造

コンポーネントの基本構造については、AEM コンポーネント - 基本で説明しています。この節では、タッチ操作向け 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 リソースリゾルバーオブジェクト（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 ライブラリの使用を参照してください。

ダイアログ

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

詳しくは、ダイアログを参照してください。

編集動作の設定

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

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

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

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

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

詳しくは、xtype の使用を参照してください。

クラシック UI 用の新しいコンポーネントの開発

この節では、独自のコンポーネントを作成し、それを段落システムに追加する方法について説明します。

既存のコンポーネントをコピーし、必要な変更をおこなうことが、開発を始めるうえで最も簡単な方法です。

コンポーネントの開発方法の例について詳しくは、テキストコンポーネントと画像コンポーネントの拡張 - 例を参照してください。

新しいコンポーネントの開発（既存のコンポーネントの利用）

既存のコンポーネントをベースに新しい AEM コンポーネントを開発するには、既存のコンポーネントをコピーし、新しいコンポーネント用の JavaScript ファイルを作成して、AEM からアクセスできる場所に保存します（「コンポーネントおよびその他の要素のカスタマイズ」も参照してください）。

  1. CRXDE Lite を使用して、新しいコンポーネントフォルダーを以下の場所に作成します。

    /apps/<myProject>/components/<myComponent>

    libs 内にあるものと同じノード構造を再作成してから、テキストコンポーネントなどの既存のコンポーネントの定義をコピーします。例えば、テキストコンポーネントをカスタマイズするには、次のようにコピーします。

    • コピー元：/libs/foundation/components/text
    • コピー先：/apps/myProject/components/text

  2. jcr:title を変更して新しい名前を反映させます。

  3. 新しいコンポーネントフォルダーを開き、必要な変更をおこないます。また、フォルダー内にある不要な情報を削除します。

    例えば、次のような変更をおこなうことができます。

    • ダイアログボックスへの新しいフィールドの追加
      • cq:dialog - タッチ操作向け UI 用ダイアログ
      • dialog - クラシック UI 用ダイアログ
    • .jsp ファイルの置換（新しいコンポーネントの作成後に名前を付けます）
    • または、コンポーネント全体の作成し直し（必要な場合）

    例えば、標準テキストコンポーネントのコピーを作成した場合は、ダイアログボックスに追加フィールドを加えて、.jsp を更新し、そこで 追加された必要情報を処理します。

    注意：

    使用するコンポーネント：

    注意：

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

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

    インスタンスとオーサー環境によっては、コンポーネント用に両方のタイプのダイアログを定義する必要が生じる場合があります。

  4. 新しいコンポーネントを表示するには、次のいずれかのノードが存在し、適切に初期化されている必要があります。

    • cq:dialog - タッチ操作向け UI 用ダイアログ
    • dialog - クラシック UI 用ダイアログ
    • cq:editConfig - 編集環境でのコンポーネントの動作（ドラッグ＆ドロップなど）
    • design_dialog - デザインモード用ダイアログ（クラシック UI のみ）

  5. 次のどちらかの方法で、段落システムで新しいコンポーネントを利用できるようにします。

    • CRXDE Lite を使用して、ノード /etc/designs/geometrixx/jcr:content/contentpage/par の適切なコンポーネントに、値 <path-to-component>（/apps/geometrixx/components/myComponent など）を追加します。
    • 「段落システムへの新しいコンポーネントの追加」の手順を実行します。

  6. AEM WCM で、Web サイトのページを開き、作成した新しいタイプの段落を挿入してコンポーネントが正常に動作することを確認します。

注意：

ページ読み込みのタイミングの統計を確認するには、Ctrl+Shift+U を、URL で設定されている ?debugClientLibs=true と共に使用します。

段落システムへの新しいコンポーネントの追加（デザインモード）

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

  1. 段落システムを使用するオーサー環境でページにアクセスします。例：<contentPath>/Test.html。

  2. 次のどちらかの方法でデザインモードに切り替えます。

    • 次のように、?wcmmode=design を URL の最後に追加し、再度アクセスします。
      <contextPath>/ Test.html?wcmmode=design
    • サイドキックで「デザイン」をクリックします。

    デザインモードになり、段落システムを編集できるようになります。

  3. 「編集」をクリックします。

    その段落システムに所属するコンポーネントのリストが一覧表示されます。新しいコンポーネントも一覧に表示されます。

    これらのコンポーネントをアクティブ化または非アクティブ化することで、ページの編集時に作成者に提供するコンポーネントを決定できます。

  4. コンポーネントをアクティブ化したら、標準編集モードに戻り、利用可能かどうかを確認します。

テキストコンポーネントと画像コンポーネントの拡張 - 例

この節では、広く利用されているテキストと画像の標準コンポーネントを、設定可能な画像配置機能を使用して拡張する方法について説明します。

テキストコンポーネントと画像コンポーネントの拡張により、エディターは、コンポーネントのすべての既存機能を使用できるだけでなく、次のどちらかの方法で画像の配置を指定できる追加のオプションも利用できます。

  • テキストの左側（現在の動作および新しいデフォルト）
  • テキストの右側

このコンポーネントを拡張したら、コンポーネントのダイアログボックスを使用して画像の配置を設定できます。

この演習では、以下の方法を説明します。

  • 既存のコンポーネントノードのコピーとメタデータの変更
  • コンポーネントのダイアログの変更（親ダイアログボックスからのウィジェットの継承を含む）
  • 新機能を実装するためのコンポーネントのスクリプトの変更

注意：

この例は、クラシック UI を対象としています。

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

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

  1. 標準の textimage コンポーネントを /libs/foundation/components/textimage から Geometrixx のコンポーネントフォルダー（/apps/geometrixx/components）に、ターゲットノードの名前として textimage を使用してコピーします（コンポーネントに移動し、右クリックして「コピー」を選択し、ターゲットディレクトリに移動することでコンポーネントをコピーします）。

  2. この例ではシンプルに保つために、コピーしたコンポーネントに移動し、新しい textimage ノードから、以下に示すサブノードを除く、すべてのサブノードを削除します。

    • ダイアログ定義：textimage/dialog
    • コンポーネントスクリプト：textimage/textimage.jsp
    • 編集設定ノード（アセットのドラッグ＆ドロップを許可）：textimage/_cq_editConfig

    注意：

    ダイアログの定義は、UI に依存します。

    • タッチ操作向け UI：textimage/cq:dialog
    • クラシック UI：textimage/dialog

  3. コンポーネントのメタデータを編集します。

    • コンポーネント名
      • jcr:description を Text Image Component (Extended) に設定
      • jcr:title を Text Image (Extended) に設定
    • サイドキック内でコンポーネントが一覧表示されるグループ（修正しない）
      • componentGroup の設定を General のまま保持
    • 新しいコンポーネントの親コンポーネント（標準の textimage コンポーネント）
      • sling:resourceSuperType を foundation/components/textimage に設定

    この手順を終えると、コンポーネントのノードは以下のようになります。

     

  4. 画像の編集設定ノードの sling:resourceType プロパティ（プロパティ：textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType）を geometrixx/components/textimage に変更します。

    これで、画像がページ上のコンポーネントにドロップされると、拡張された textimage コンポーネントの sling:resourceType プロパティが geometrixx/components/textimage に設定されます。

  5. コンポーネントのダイアログボックスを変更して新しいオプションを含めます。新しいコンポーネントは元のコンポーネントと同じダイアログボックスのパーツを継承します。「詳細」タブを拡張するために、「左」と「右」のオプションのある「画像の位置」ドロップダウンリストだけを追加します。

     

    • textimage/dialog プロパティは変更しません。

    textimage/dialog/items に、textimage ダイアログボックスの 4 つのタブを表す 4 つのサブノード（tab1 から tab4）があることを確認します。

    • 最初の 2 つのタブ（tab1 および tab2）：
      • xtype を cqinclude に変更します（標準コンポーネントから継承するため）。
      • path プロパティの値をそれぞれ、/libs/foundation/components/textimage/dialog/items/tab1.infinity.json と /libs/foundation/components/textimage/dialog/items/tab2.infinity.json に設定して追加します。
      • その他のすべてのプロパティとサブネットを削除します。
    • tab3：
      • プロパティとサブノードは変更せずに保持します。
      • 新しいフィールドの定義として cq:Widget 型のノードの場所を tab3/items に追加します。
      • 新しい tab3/items/position ノードに次のプロパティ（String 型）を設定します。
        • name：./imagePosition
        • xtype：selection
        • fieldLabel：画像の位置
        • type：select
      • 画像の配置の選択肢を 2 つ表すために、cq:WidgetCollection 型のサブノード position/options を追加し、その下に、nt:unstructured 型の 2 つのノード、o1 および o2 を作成します。
      • ノード position/options/o1 では、プロパティ text を「左」に、プロパティ value を left に設定します。
      • ノード position/options/o2 では、プロパティ text を「右」に、プロパティ value を right に設定します。
    • tab4 を削除します。

    画像の位置は、textimage の段落を表すノードの imagePosition プロパティとしてコンテンツ内で保持されます。これらの手順を終えると、コンポーネントのダイアログボックスは以下のようになります。

     

  6. コンポーネントのスクリプト 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"><%

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

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

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

  1. Geometrixx でページを開きます。例：English / Company。

  2. サイドキックで「デザイン」をクリックし、デザインモードに切り替えます。

  3. ページの中央の段落システムで、「編集」をクリックし、段落システムのデザインを編集します。段落システムに配置できるコンポーネントの一覧が表示されます。一覧には、新しく開発した Text Image (Extended) コンポーネントも含まれます。コンポーネントを選択し、「OK」をクリックして、段落システムに対してコンポーネントをアクティブ化します。

  4. 編集モードに戻します。

  5. Text Image (Extended) 段落を段落システムに追加し、サンプルコンテンツでテキストと画像を初期化します。変更内容を保存します。

  6. テキストと画像の段落のダイアログを開き、「詳細」タブで画像の位置を「右」に変更し、「OK」をクリックして変更を保存します。

  7. 段落の右側に画像がレンダリングされます。

  8. コンポーネントを使用する準備ができました。

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

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

アップロード機能を無効にするには、標準の画像コンポーネントをベースとして使用し、それに変更を加えます。Geometrixx の例のアプリケーションに新しいコンポーネントを保存します。

  1. ターゲットノードの名前として画像を使用して、/libs/foundation/components/image から Geometrixx コンポーネントフォルダー（/apps/geometrixx/components）に標準の画像コンポーネントをコピーします。

  2. コンポーネントのメタデータを編集します。

    • jcr:title を Image (Extended) に設定

  3. /apps/geometrixx/components/image/dialog/items/image に移動します。

  4. 新しいプロパティを追加します。

    • 名前：allowUpload
    • タイプ：String
    • 値：false

  5. 「すべて保存」をクリックします。コンポーネントをテストする準備ができました。

  6. Geometrixx でページを開きます。例：English / Company。

  7. デザインモードに切り替え、Image (Extended) をアクティブ化します。

  8. 編集モードに切り替え、画像を段落システムに追加します。次の画像で、元の画像コンポーネントと先ほど作成したコンポーネントの違いを確認できます。

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

    新しい画像コンポーネント：

  9. コンポーネントを使用する準備ができました。