Adobe Experience Manager（AEM）コンポーネント（クラシック UI）の開発 developing-aem-components-classic-ui

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

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

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

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

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

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

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

• ダイアログボックスへのフィールドの追加

  • cq:dialog - タッチ操作対応 UI 用ダイアログ
  • dialog - クラシック UI 用ダイアログ

• .jsp ファイルの置換（新しいコンポーネントの作成後に名前を付けます）

• または、コンポーネント全体の作成し直し（必要な場合）

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

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

• 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 サイトのページを開き、作成した新しいタイプの段落を挿入してコンポーネントが正常に動作することを確認します。

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

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

• 以下の例のように、URL の最後に ?wcmmode=design を追加し、再度アクセスします。

  <contextPath>/ Test.html?wcmmode=design

• サイドキックで「デザイン」をクリックします。

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

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

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

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

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

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

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

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

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

• コンポーネント名

  • 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 の場合：

  • プロパティとサブノードは変更せずにそのままにします。

  • タイプ cq:Widget のノードの場所 tab3/items にフィールドの定義を追加します。

  • 新しい tab3/items/position ノードに以下のプロパティ（String タイプ）を設定します。

    • 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 を削除します。

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

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

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

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

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

• jcr:title を Image (Extended) に設定します。

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

プロパティを追加します。

• 名前：allowUpload
• 型：String
• 値：false

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

英語／会社などの Geometrixx でページを開きます。

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

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

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

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

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