ページオーサリングのカスタマイズ

最終更新日： 2024年8月20日

作成対象：

  • 開発者
CAUTION
このドキュメントでは、最新のタッチ操作対応 UI でのページオーサリングのカスタマイズ方法について説明します。クラシック UI には適用されません。

Adobe Experience Manager（AEM）には、オーサーインスタンスのページオーサリング機能（およびコンソール）をカスタマイズできる様々なメカニズムが用意されています。

  • クライアントライブラリ

    クライアントライブラリを使用すると、デフォルトの実装を拡張して新しい機能を実現しながら、標準の関数、オブジェクト、メソッドを再利用できます。カスタマイズする際に、独自のクライアントライブラリを /apps. に作成できます。新しいクライアントライブラリには次の条件があります。

    • オーサリングクライアントライブラリ cq.authoring.editor.sites.page を使用する必要があります。
    • 適切な cq.authoring.editor.sites.page.hook カテゴリに含める必要があります。

  • オーバーレイ

    オーバーレイはノード定義に基づいており、標準の機能（/libs）にカスタマイズした独自機能（/apps）をオーバーレイすることができます。Sling Resource Merger は継承を許可しているので、オーバーレイを作成するときに、オリジナルの 1 対 1 のコピーは必要ありません。

NOTE
詳しくは、JS ドキュメントを参照してください。

これらをさまざまな方法で使用して、AEM インスタンスのページオーサリング機能を拡張できます。一部については、以降で（大まかに）説明します。

NOTE
詳しくは、以下のトピックを参照してください。
CAUTION
/libs パス内は一切変更し​ ない ​でください。
次回インスタンスをアップグレードするときに /libs の内容が上書きされるためです（また、ホットフィックスまたは機能パックを適用するときに上書きされる可能性もあります）。
設定およびその他の変更に推奨される方法は次のとおりです。
  1. 必要な項目（/libs 内に存在）を、/apps の下で再作成します。
  2. /apps 内で必要な変更を加えます

新しいレイヤー（モード）の追加

ページを編集するときに、さまざまなモードを使用できます。これらのモードは、レイヤーを使用して実装されます。これらにより、同じページコンテンツの異なるタイプの機能にアクセスできます。標準のレイヤーは、編集、プレビュー、注釈、デベロッパーおよびターゲティングです。

レイヤーの例：ライブコピーステータス

標準の AEM インスタンスは MSM レイヤーを提供します。これは、マルチサイト管理に関連するデータにアクセスし、レイヤーでハイライトします。

実行中に確認するには、任意の We.Retail 言語コピーページ（または他のライブコピーページ）を編集して、ライブコピーステータス ​モードを選択します。

MSM レイヤーの定義（参照用）は、次のファイルにあります。

/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js

コードサンプル

これは、MSM 表示用の新規レイヤー（モード）の作成方法を示す、サンプルパッケージです。

GitHub のコード

このページのコードは GitHub にあります

アセットブラウザーに新規選択カテゴリを追加

アセットブラウザーには、様々なタイプまたはカテゴリのアセット（画像、ドキュメントなど）が表示されます。このようなアセットカテゴリを使用して、アセットをフィルターすることもできます。

コードサンプル

aem-authoring-extension-assetfinder-flickr は、新しいグループをアセットファインダーに追加する方法を示すサンプルパッケージです。このサンプルは、Flickr の公開ストリームに接続し、サイドパネルに表示します。

GitHub のコード

このページのコードは GitHub にあります

リソースのフィルタリング

ページをオーサリングする際、ユーザーは頻繁にリソース（ページ、コンポーネント、アセットなど）から選択する必要があります。これは、作成者が項目を選択する必要があるリストの形式などで表示されます。

リストを適切なサイズに保ち、使用事例にも関連するように、フィルターをカスタム述語の形式で実装できます。例えば、pathbrowser Granite コンポーネントを使用してユーザーが特定のリソースへのパスを選択できるようにするには、表示されるパスを次のようにフィルタリングできます。

カスタム述語の作成について詳しくは、Query Builder 用のカスタム述語エバリュエーターの実装を参照してください。

NOTE
com.day.cq.commons.predicate.AbstractNodePredicate インターフェイスの実装によるカスタム述語の実装は、クラシック UI でも機能します。
クラシック UI でカスタム述語を実装する例については、このナレッジベースの記事を参照してください。