現在表示中:

警告:

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

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

  • クライアントライブラリ
    クライアントライブラリを使用すると、デフォルトの実装を拡張して新しい機能を実現しながら、標準の関数、オブジェクト、メソッドを再利用できます。カスタマイズする際に、独自のクライアントライブラリを /apps に作成できます。例えば、カスタムコンポーネントに必要なコードを保持できます。
  • オーバーレイ
    オーバーレイはノード定義に基づいており、(/libs にある)標準の機能に、(/apps にある)カスタマイズした独自機能を重ねることができます。Sling Resource Merger は継承を許可しているので、オーバーレイを作成するときに、オリジナルの 1 対 1 のコピーは必要ありません。

これらをさまざまな方法で使用して、AEM コンソールを拡張できます。一部については、以降で(大まかに)説明します。

注意:

詳しくは、次の節を参照してください。

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

警告:

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

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

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

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

例えば、/libs 構造内の次の場所をオーバーレイできます。

  • コンソール(Granite UI ページに基づくすべてのコンソール)。次に例を示します。
    • /libs/wcm/core/content
  • セカンダリ(内側)レール。次に例を示します。
    • /libs/wcm/core/content/search
  • ツールバー(サイトコンソールなど、コンソールによって異なります)。
    • デフォルト
      /libs/wcm/core/content/sites/jcr:content/body/content/header/items/default
    • 選択モード
      /libs/wcm/core/content/sites/jcr:content/body/content/header/items/selection
  • ヘルプメニューオプション(サイトコンソールなど、コンソールによって異なります)。
    • /libs/wcm/core/content/sites/jcr:content/body/help
  • カード表示に表示される情報(サイトコンソールなど、コンソールによって異なります)。
    • /libs/wcm/core/content/sites/jcr:content/body/content/content/items/childpages

注意:

ヒントおよびツールについて詳しくは、ナレッジベースの記事「Troubleshooting AEM TouchUI issues」を参照してください。

コードサンプル

Github では、各種パッケージを使用できます。パッケージには、このページで扱うタスクに関係するコードサンプルが含まれています。

aem-admin-extension-new-console

aem-admin-extension-new-console は、新しい AEM 6 コンソールを作成する方法を示すサンプルパッケージです。このパッケージは、ローンチを管理する UI を提供し、ナビゲーションにリンクを追加します。

GitHub のコード

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

aem-admin-extension-customize-sites

aem-admin-extension-customize-sites は、既存の AEM 6 管理コンソールをカスタマイズする方法を示すサンプルパッケージです。このパッケージは、サイト管理に対する更新を提供します。

GitHub のコード

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

カスタムコンソールを作成する

  1. ローンチなどの関連アクションを備えたカスタムコンソールをトップレベル(サイトの下)に作成できます。

    カスタムコンソールの作成では、

    • 新しいコンソールのルート空間定義を作成します。次に例を示します。
      • /apps/<yourProject>/admin/ext/launches
    • この定義には、(要件に応じて)次のものを含めることができます。
      • カスタムアクションに対応するクライアントライブラリおよび LESSCSS 定義
        • /apps/<yourProject>/admin/ext/launches/clientlibs
      • パンくず、データソース、ローンチなど、再定義や調整が必要なコンポーネント
        • /apps/<yourProject>/admin/ext/launches/components
      • Granite UI のページリソース
        • /apps/<yourProject>/admin/ext/launches/content/jcr:content
          property: sling:resourceType
      • コンソールのページ定義
        • /apps/<yourProject>/admin/ext/launches/content/jcr:content/head
        • /apps/<yourProject>/admin/ext/launches/content/jcr:content/body
    chlimage_1

    新しいコンソールを(例えばナビゲーション用レール内で)使用するには、明示的に参照するために ID を使用します。ID を使用して、コンソールとそのナビゲーション定義を関連付けます。ID は、ページの rail ノードで定義します。例えば、サイトコンソールの場合は次のようになります。

    • rail ノード:
      /libs/wcm/core/content/sites/jcr:content/body/rail
      • ここで currentId プロパティを定義します。
        currentId = cq-sites

    ローンチコンソールの例:

    • ノード:
      • /apps/<yourProject>/admin/ext/launches/content/jcr:content/body/rail
    • 次のようにプロパティを定義します。
      • currentId = cq-launches
      • sling:resourceType = granite/ui/components/endor/navcolumns
      • srcPath = cq/core/content/nav

コンソールのデフォルト表示のカスタマイズ

コンソールのデフォルト表示(列、カード、リスト)をカスタマイズできます。

  1. 次の場所で、必要なエントリをオーバーレイすることによって、表示の順序を変更できます。

    /libs/wcm/core/content/sites/jcr:content/views

    先頭のエントリがデフォルトになります。

    使用可能な次のノードは、レールの表示オプションと相関関係にあります。

    • column
    • card
    • list
  2. 例えば、リスト用のオーバーレイで、

    /apps/wcm/core/content/sites/jcr:content/views/list

    次のプロパティを定義します。

    • 名前sling:orderBefore
    • タイプstring
    • column

aem-admin-extension-customize-sites は、既存の AEM 6 管理コンソールをカスタマイズする方法を示すサンプルパッケージです。このパッケージは、サイト管理に対する更新を提供します。

GitHub のコード

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

新しいナビゲーションオプションをレールに追加

  1. ナビゲーションエントリをレールに追加できます(例えば、ローンチなどのカスタムコンソール)。

    追加するには、次のオーバーレイを作成します。

    /libs/cq/core/content/nav

    /apps オーバーレイに、

    /apps/cq/core/content/nav

    次の新しいノードとプロパティを作成します。

    chlimage_1
    • ナビゲーションを拡張:
      • /apps/cq/core/content/nav/launches
    • ツリー内の場所を指定:
      • プロパティ:sling:orderBefore
    • 関連付けを作成するには、id プロパティが適切なコンソールcurrentID プロパティを参照する(つまり同じ値を持つ)ようにします。
      • プロパティ:id
      • 値:コンソールの場合と同じ(cq-launches など)
        例えば、次のノードの currentId プロパティと同じ値です。
        /apps/<yourProject>/admin/ext/launches/content/jcr:content/body/rail

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

  1. 独自コンポーネントを作成し、カスタムアクション用のクライアントライブラリを含めることができます。例えば、次のファイルの Twitter に宣伝アクションなどです。

    /apps/wcm/core/clientlibs/sites/js/twitter.js

    このアクションを独自コンソールのツールバー項目に関連付けることができます。

    /apps/<yourProject>/admin/ext/launches

    選択モードの例:

    content/jcr:content/body/content/header/items/selection/items/twitter

ツールバーアクションを特定のグループに制限

  1. カスタムレンダリング条件を使用すると、標準のアクションをオーバーレイし、レンダリング前に満たさなければならない具体的な条件を課すことができます。

    例えば、グループに基づいてレンダリング条件を制御するためのコンポーネントを作成します。

    /apps/myapp/components/renderconditions/group

  2. これをサイトコンソールの「サイトを作成」アクションに適用するには、

    /libs/wcm/core/content/sites

    オーバーレイを作成します。

    /apps/wcm/core/content/sites

  3. このアクションのレンダリング条件を追加します。

    jcr:content/body/content/header/items/default/items/create/items/createsite/rendercondition

    このノードのプロパティを使用して、特定のアクションを実行できるグループadministrators など)を定義できます。

レールのナビゲーションオプションへのアクセス権を削除

  1. 次の場所の必要なエントリをオーバーレイすることによって、レールのナビゲーションエントリ名を変更できます。

    /libs/cq/core/content/nav

    使用可能な次のノードは、レールのナビゲーションオプションと相関関係にあります。

    • projects
    • sites
    • assets
    • apps
    • forms
    • screens
    • personalization
    • commerce
    • tools
    • communities
  2. 例えば、

    /apps/cq/core/content/nav/sites にあるオーバーレイに、

    次のプロパティを定義します。

    • 名前sling:hideResource
    • タイプstring
    • true

aem-admin-extension-customize-sites は、既存の AEM 6 管理コンソールをカスタマイズする方法を示すサンプルパッケージです。このパッケージは、サイト管理に対する更新を提供します。

GitHub のコード

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

レールのナビゲーションオプションへのアクセスを制限

ACL を使用して、ナビゲーションオプションへのアクセスを制限できます。

  1. ユーザー管理またはグループ管理を開き、アクセスを制限するユーザーまたはグループを選択します。

    注意:

    ユーザーごとに権限を割り当てたり、制限したりすることのないようにしてください。グループを使用することを推奨します

  2. /libs/cq/core/content/nav/sites の下の適切なノードに対するアクセス権限を削除します。次のノードは、レールのナビゲーションオプションと相関関係にあります。

    • projects
    • sites
    • assets
    • apps
    • forms
    • screens
    • personalization
    • commerce
    • tools
    • communities

リスト表示で列のカスタマイズ

注意:

この機能は、テキストフィールドの列に対して最適化されています。その他のデータタイプに対しては、/appscq/gui/components/siteadmin/admin/listview/columns/analyticscolumnrenderer をオーバーレイできます。

GitHub のコード

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

リスト表示で列をカスタマイズするには、次の手順を実行します。

  1. 使用可能な列のリストをオーバーレイします。

    • 次のノードで、
      /apps/wcm/core/content/common/availablecolumns
    • 新しい列を追加、または既存の列を削除します。

    詳しくは、オーバーレイ(および Sling Resource Merger)の使用を参照してください。

  2. 省略可能:

    • 追加データを挿入する場合は、pageInfoProviderType プロパティを持つ PageInforProvider を記述する必要があります。

    例として、(GitHub から)以下に添付するクラス/バンドルを参照してください。

  3. これで、リスト表示の列コンフィギュレーターで列を選択できるようになります。

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

コンソールを使用する際の一般的な使用例は、ユーザーがリソース(ページ、コンポーネント、アセットなど)から選択する必要がある場合です。これは、例えば、作成者が項目を選択する必要があるリストの形式で表示されます。

特定の用途に関連する内容を持つ妥当なサイズのリストにするには、カスタム述語の形式でフィルターを実装できます。詳しくは、この記事を参照してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー