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

注意

このドキュメントでは、最新のタッチ操作対応 UI でのページオーサリングのカスタマイズ方法について説明します。クラシック UI には適用されません。

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

  • Clientlibs

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

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

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

メモ

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

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

メモ

詳しくは、次のセクションを参照してください。

このトピックについては、AEM Gems セッション - User interface customization for AEM 6.0 でも説明しています。

注意

/libs パス内の設定は​一切​変更しないでください。

/libs コンテンツは、インスタンスを次回アップグレードするとき(場合によってはホットフィックスまたは機能パックを適用したとき)に上書きされるからです。

設定およびその他の変更に推奨される方法は次のとおりです。

  1. /appsの下に必要な項目(例:/libsに存在する項目)を再作成します
  2. /apps 内で変更作業をおこないます。

追加新しい画層(モード)

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

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

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

実際に閲覧するには、Web.Retail言語コピーページ(または他のライブコピーページ)を編集し、ライブコピーステータス​モードを選択します。

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

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

コードサンプル

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

GitHub のコード

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

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

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

コードサンプル

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

GitHub のコード

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

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

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

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

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

メモ

com.day.cq.commons.predicate.AbstractNodePredicate インターフェイスの実装によるカスタム述語の実装は、クラシック UI でも機能します。

クラシック UI でカスタム述語を実装する例については、このナレッジベースの記事を参照してください。

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

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

コードサンプル

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

GitHub のコード

このページのコードは 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

        • property: editorType

          そのコンポーネントに対してインプレース編集がトリガーされたときに使用するインラインエディターのタイプを定義します。例えばtexttextimageimagetitle

  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 に表示されるので、オーサリングユーザーは違いを認識しません。

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

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

メモ

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

  1. 実装方法:

    • setUp
    • tearDown
  2. エディター(コンストラクターを含む)の登録:

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

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

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

GitHub のコード

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

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

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

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

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

コードサンプル

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

GitHub のコード

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

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

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

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

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

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

    メモ

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

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

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

  3. すべての関連ページに対して、 replicateアクションに対する権利をすべての適切なユーザーから削除します。を設定します。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now