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

最終更新日: 2023-12-05

Adobe Experience Manager as a Cloud Serviceには、ページオーサリング機能 ( および コンソール) を作成します。

Clientlibs

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

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

  • オーサリング clientlib に依存 cq.authoring.editor.sites.page.
  • 適切な cq.authoring.editor.sites.page.hook カテゴリ。

詳しくは、 AEMでのクライアント側ライブラリの使用 (as a Cloud Service).

オーバーレイ

オーバーレイはノード定義に基づいており、 /libs のカスタマイズされた機能 /apps.

オーバーレイを作成する場合、元の 1 対 1 のコピーは不要です。 sling resource merger 継承を許可します。

詳しくは、 JS ドキュメントセット.

オーバーレイについて詳しくは、 Adobe Experience Manager as a Cloud Serviceのオーバーレイ.

新しいレイヤー(モード)の追加

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

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

標準のAEMインスタンスは MSM レイヤーを提供します。 これにより、 マルチサイト管理 レイヤでハイライト表示します。

実際に表示するには、 WKND サンプルコンテンツ をクリックし、 ライブコピーステータス モード。

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

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

コードサンプル

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

このページのコードは、 GitHub です。

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

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

コードサンプル

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

このページのコードは、 GitHub です。

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

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

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

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

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

通常、各コンポーネントには、そのコンポーネントで実行できる様々なアクションにアクセスできるツールバーがあります。

コードサンプル

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

このページのコードは、 GitHub です。

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

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

標準 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 です。

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

新しいページアクションをページツールバーに追加するには、次のようにします。 サイトに戻る (コンソール)アクションを使用します。

コードサンプル

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

このページのコードは、 GitHub です。

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

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

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

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

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

  1. In /apps オーバーレイ Sites ウィザード /libs/wcm/core/content/common/managepublicationwizard

    • これ自体は、の共通のインスタンスを上書きします。 /libs/cq/gui/content/common/managepublicationwizard.
  2. 必要に応じて、ワークフローモデルと関連する設定/スクリプトを更新します。

  3. の権限を削除します。 replicate すべての関連するページに対するすべての適切なユーザーからのアクション。 任意のユーザーがアクセスしたときにこのワークフローをデフォルトのアクションとしてトリガーするには、ページを公開(または複製)してみます。

このページ