ページオーサリングのカスタマイズ customizing-page-authoring

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

Clientlibs clientlibs

クライアントライブラリを使用すると、デフォルトの実装を拡張して新しい機能を有効にしながら、標準の関数、オブジェクト、メソッドを再利用できます。

カスタマイズする際に、独自のクライアントライブラリを /apps. に作成できます。新しいクライアントライブラリには次の条件があります。

AEM as a Cloud Service でのクライアントサイドライブラリの使用を参照してください。

オーバーレイ overlays

オーバーレイオーバーレイはノード定義に基づいており、/libs にある標準の機能に、/apps にあるカスタマイズした独自機能を重ねることができます。

Sling Resource Merger は継承を許可しているので、オーバーレイを作成するときに、オリジナルの 1 対 1 のコピーは必要ありません。

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

オーバーレイについて詳しくは、Adobe Experience Manager as a Cloud Service のオーバーレイを参照してください。

新しいレイヤー（モード）の追加 add-new-layer-mode

ページを編集するときに、さまざまなモードを使用できます。これらのモードは、レイヤーを使用して実装されます。これらにより、同じページコンテンツの異なるタイプの機能にアクセスできます。標準の AEM モードには、編集、レイアウト、開発者、タイムワープ、ライブコピーのステータス、およびターゲティングが含まれます。

レイヤーの例：ライブコピーステータス layer-example-live-copy-status

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

実行中に確認するには、WKND サンプルコンテンツの任意の言語コピーを編集し、ライブコピーステータス ​モードを選択します。

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

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

コードサンプル code-sample

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

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

新しい選択カテゴリをアセットブラウザに追加 add-new-selection-category-to-asset-browser

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

コードサンプル code-sample-1

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

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

リソースのフィルタリング filtering-resources

ページをオーサリングする際に、多くの場合、ユーザーはリスト内のリソースから選択する必要があります。

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

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

新しいアクションをコンポーネントツールバーに追加 add-new-action-to-a-component-toolbar

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

コードサンプル code-sample-2

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

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

新しいインプレースエディターを追加する add-new-in-place-editor

標準インプレースエディター standard-in-place-editor

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

画像コンポーネントの画像切り抜きプラグインの縦横比を定義する例を次に示します。

   <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>

新しいインプレースエディターの作成 creating-a-new-in-place-editor

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

新しいインプレースエディターを作成するためのコードサンプル code-sample-for-creating-a-new-in-place-editor

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

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

新しいページアクションを追加する add-a-new-page-action

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

コードサンプル code-sample-3

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

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

アクティベーションをリクエストワークフローのカスタマイズ customizing-the-request-for-activation-workflow

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

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