ドキュメントAEM 6.4開発ガイド

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

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • Developer
CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.
CAUTION
このドキュメントでは、最新のタッチ操作対応 UI でページオーサリングをカスタマイズする方法について説明し、クラシック UI には適用されません。

AEMは、ページオーサリング機能 ( および コンソール) を作成します。

  • Clientlibs

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

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

  • オーバーレイ

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

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

これらは、AEMインスタンスでページオーサリング機能を拡張するための様々な方法で使用できます。 以下では、選択範囲について説明します（概要レベル）。

NOTE
詳しくは、次のセクションを参照してください。
このトピックについては、AEM Gems セッション - User interface customization for AEM 6.0 でも説明しています。
CAUTION
/libs パス内の設定は​ 一切 ​変更しないでください。
/libs コンテンツは、インスタンスを次回アップグレードするとき（場合によってはホットフィックスまたは機能パックを適用したとき）に上書きされるからです。
設定およびその他の変更に推奨される方法は次のとおりです。
  1. 必要な項目（/libs内に存在）を、/appsの下で再作成します。
  2. /apps 内で変更作業をおこないます。

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

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

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

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

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

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

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

コードサンプル code-sample

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

GitHub のコード

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

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

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

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

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

GitHub のコード

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

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

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

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

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

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

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

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

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

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

GitHub のコード

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

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

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

標準 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 ノードをさらに使用して設定できます。

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

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

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

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

NOTE
例として、次を参照してください。
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

  1. 実装方法：

    • setUp
    • tearDown

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

    • editor.register

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

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

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

GitHub のコード

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

複数のインプレースエディターの設定 configuring-multiple-in-place-editors

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

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

新しいページアクションをページツールバーに追加するには、次の手順を実行します。 サイトに戻る （コンソール）アクションを使用します。

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

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

GitHub のコード

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

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

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

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

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

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

    note note
    NOTE
    これ自体は、次の一般的なインスタンスを上書きします。
    /libs/cq/gui/content/common/managepublicationwizard

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

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

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e