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

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

• Clientlibs

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

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

• オーバーレイ

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

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

新しい画層を追加（モード）

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

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

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

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

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

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

コードサンプル

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

GitHub のコード

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

• GitHubのaem-authoring-new-layer-modeプロジェクトを開きます
• プロジェクトを ZIP ファイルとしてダウンロードします

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

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

コードサンプル

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

GitHub のコード

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

• GitHubのaem-authoring-extension-assetfinder-flickrプロジェクトを開きます
• プロジェクトを ZIP ファイルとしてダウンロードします

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

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

特定の用途に関連する内容を持つ妥当なサイズのリストにするには、カスタム述語の形式でフィルターを実装できます。例えば、 pathbrowser Graniteコンポーネントを使用してユーザーが特定のリソースへのパスを選択できる場合、表示されるパスを次の方法でフィルタリングできます。

• com.day.cq.commons.predicate.AbstractNodePredicate インターフェイスを実装してカスタム述語を実装します。
• 述語の名前を指定し、pathbrowserを使用する際にその名前を参照します。

カスタム述語の作成について詳しくは、この記事を参照してください。

新しいアクションをコンポーネントツールバーに追加

各コンポーネントには、多くの場合、そのコンポーネントに対して実行できる様々なアクションを呼び出すためのツールバーがあります。

コードサンプル

aem-authoring-extension-toolbar-screenshot は、コンポーネントをレンダリングするカスタムツールバーアクションの作成方法を示すサンプルパッケージです。

GitHub のコード

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

• GitHubのaem-authoring-extension-toolbar-screenshotプロジェクトを開きます
• プロジェクトを ZIP ファイルとしてダウンロードします

新しいインプレースエディターの追加

標準インプレースエディター

標準 AEM インストールでは、

1. /libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

   に、使用可能な各種エディターの定義が保持されています。

2. エディターと、エディターを使用できる各リソースタイプは、（コンポーネントと同様に）関連付けられています。

   • cq:inplaceEditing

     次に例を示します。

     • /libs/foundation/components/text/cq:editConfig

     • /libs/foundation/components/image/cq:editConfig

       • property: editorType

         そのコンポーネントに対してインプレース編集が呼び出されたときに使用されるインラインエディターのタイプを定義します。例：text、textimage、image、title。

3. エディターの追加の設定の詳細は、設定が含まれている config ノード、および必要なプラグイン設定の詳細が含まれている plugin ノードをさらに使用して設定できます。

   画像コンポーネントの画像切り抜きプラグインの縦横比を定義する例を次に示します。画面サイズが非常に制限されている場合があるので、切り抜きの縦横比はフルスクリーンエディターに移動され、そこでのみ表示できます。

   <cq:inplaceEditing
           jcr:primaryType="cq:InplaceEditingConfig"
           active="{Boolean}true"
           editorType="image">
           <config jcr:primaryType="nt:unstructured">
               <plugins jcr:primaryType="nt:unstructured">
                   <crop jcr:primaryType="nt:unstructured">
                       <aspectRatios jcr:primaryType="nt:unstructured">
                           <_x0031_6-10
                               jcr:primaryType="nt:unstructured"
                               name="16 : 10"
                               ratio="0.625"/>
                       </aspectRatios>
                   </crop>
               </plugins>
           </config>
   </cq:inplaceEditing>
   

   注意

   AEM では、切り抜き比率は ratio プロパティで設定し、高さ／幅​として定義します。これは、通常の高さ／幅の定義とは異なり、レガシー互換性のための設定です。name プロパティを明確に定義していれば、UI に表示されるので、オーサリングユーザーは違いを認識しません。

新しいインプレースエディターの作成

新しいインプレースエディターを（クライアントライブラリ内に）実装するには、次のようにします。

1. 実装方法：

   • setUp
   • tearDown

2. エディター（コンストラクターを含む）の登録：

   • editor.register

3. エディターと、エディターを使用できる各リソースタイプが（コンポーネントと同様に）関連付けられます。

新しいインプレースエディターを作成するためのコードサンプル

aem-authoring-extension-inplace-editor は、AEMで新しいインプレースエディターを作成する方法を示すサンプルパッケージです。

GitHub のコード

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

• GitHubのaem-authoring-extension-inplace-editorプロジェクトを開きます
• プロジェクトを ZIP ファイルとしてダウンロードします

複数のインプレースエディターの設定

コンポーネントに複数のインプレースエディターを含めることができます。複数のインプレースエディターを設定すると、適切なコンテンツを選択して、適切なエディターを開くことができます。詳しくは、 複数のインプレースエディターの設定のドキュメントを参照してください。

新しいページアクションの追加

新しいページアクション（サイトに戻る（コンソール）アクションなど）をページツールバーに追加します。

コードサンプル

aem-authoring-extension-header-backtosites は、サイトコンソールに戻るカスタムヘッダーバーアクションを作成する方法を示すサンプルパッケージです。

GitHub のコード

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

• GitHubのaem-authoring-extension-header-backtositesプロジェクトを開きます
• プロジェクトを ZIP ファイルとしてダウンロードします

アクティベーションをリクエストワークフローのカスタマイズ

既成のワークフローである​アクティベーションをリクエスト​は、コンテンツ作成者が適切な複製権限を持っていない場合に、自動的にトリガーされます。

このようなアクティベーションの動作をカスタマイズするには、アクティベーションのリクエスト​ワークフローをオーバーレイします。

1. /appsで、サイト​ウィザードをオーバーレイします。

   /libs/wcm/core/content/common/managepublicationwizard

   メモ

   これ自体は、次の一般的なインスタンスを上書きします。

   /libs/cq/gui/content/common/managepublicationwizard

2. 必要に応じて、ワークフローモデルと関連する設定/スクリプトを更新します。

3. replicateアクションに対する権限を、関連するすべてのページのすべての適切なユーザーから削除します。：任意のユーザーがページを公開（またはレプリケート）しようとしたときに、このワークフローをデフォルトのアクションとしてトリガーする場合。