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

Adobe Experience Manager(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

       • プロパティ：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 ファイルとしてダウンロードします

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

標準のワークフロー、アクティベーションのリクエスト：

• コンテンツ作成者が適切なレプリケーション権限​を持っていない​が DAM-Users および作成者のメンバーシップ​を持っている​場合、適切なメニューに自動的に表示されます 。

• レプリケーション権限が削除されているので、何も表示されません。

このようなアクティベーションで動作をカスタマイズするには、 アクティベーションのリクエスト ワークフロー：

1. /appsで Sites ウィザードをオーバーレイします。

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

   メモ

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

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

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

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

Business.Adobe.com リソース

Multichannel Communication Ecommerce Integrations Customer Communications Responsive Forms Document Generation Headless Cms