ページオーサリングのカスタマイズ（タッチ操作向け UI）

検索
Experience Manager 6.2 Sites 開発ユーザーガイド
対象アプリケーション: Experience Manager 6.2 Sites

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

現在表示中:

AEM には、オーサーインスタンスのページオーサリング機能（およびコンソール）をカスタマイズできるさまざまな仕組みが用意されています（タッチ操作向け UI）。

  • クライアントライブラリ
    クライアントライブラリを使用すると、デフォルトの実装を拡張して新しい機能を実現しつつ、標準の関数、オブジェクト、メソッドを再利用できます。カスタマイズするときに、独自のクライアントライブラリを /apps に作成できます。新しいクライアントライブラリには以下の条件があります。
    • オーサリングクライアントライブラリ 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. 必要な項目（/libs 内に存在）を、/apps の下で再作成します。
  2. /apps 内で変更作業をおこないます。

新しいレイヤー（モード）の追加

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

コードサンプル

標準 AEM インスタンスが提供する MSM レイヤーは、MSM データにアクセスし、レイヤー内で強調表示します。

このレイヤーの動作を確認するには、Geometrixx Outdoors（またはその他のライブコピーページ）を使用して、ライブコピーステータスレイヤーを選択します。

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

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

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

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

コードサンプル

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

GitHub のコード

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

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

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

コードサンプル

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

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

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

注意：

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

  1. 実装方法：

    • setUp
    • tearDown

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

    • editor.register

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

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

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

コードサンプル

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

GitHub のコード

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

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

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

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

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

注意：

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

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