AEM には、オーサーインスタンスのコンソール(およびページオーサリング機能)をカスタマイズできるさまざまな仕組みが用意されています(タッチ操作向け UI)。
- クライアントライブラリ
クライアントライブラリを使用すると、デフォルトの実装を拡張して新しい機能を実現しつつ、標準の関数、オブジェクト、メソッドを再利用できます。カスタマイズするときに、独自のクライアントライブラリを /apps に作成して、カスタムコンポーネントに必要なコードを保持することなどができます。 - オーバーレイ
オーバーレイはノード定義に基づいており、(/libs にある)標準の機能に、(/apps にある)カスタマイズした独自機能を重ねることができます。Sling Resource Merger は継承を許可しているので、オーバーレイを作成するときに、オリジナルの 1 対 1 のコピーは必要ありません。
注意:
詳しくは、次の節を参照してください。
- クライアントライブラリの使用と作成
- オーバーレイの使用と作成
- Granite
このトピックについては、AEM Gems セッション - User interface customization for AEM 6.0 でも説明しています。
警告:
/libs パス内の設定は一切変更しないでください。
/libs のコンテンツは、インスタンスを次回アップグレードするとき(場合によってはホットフィックスまたは機能パックを適用したとき)に上書きされるからです。
設定およびその他の変更に推奨される方法は次のとおりです。
- 必要な項目(/libs 内に存在)を、/apps の下で再作成します。
- /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」を参照してください。
aem-admin-extension-new-console は、新しい AEM 6 コンソールを作成する方法を示すサンプルパッケージです。このパッケージは、ローンチを管理する UI を提供し、ナビゲーションにリンクを追加します。
GitHub のコード
このページのコードは GitHub にあります
- GitHub の aem-admin-extension-new-console プロジェクトを開きます
- プロジェクトを ZIP ファイルとしてダウンロードします
aem-admin-extension-customize-sites は、既存の AEM 6 管理コンソールをカスタマイズする方法を示すサンプルパッケージです。このパッケージは、サイト管理に対する更新を提供します。
GitHub のコード
このページのコードは GitHub にあります
- GitHub の aem-admin-extension-customize-sites プロジェクトを開きます
- プロジェクトを ZIP ファイルとしてダウンロードします
-
カスタムコンソールの作成では、
- 新しいコンソールのルート空間定義を作成します。次に例を示します。
- /apps/<yourProject>/admin/ext/launches
- この定義には、(要件に応じて)次のものを含めることができます。
- カスタムアクションに対応するクライアントライブラリおよび LESS/CSS 定義
- /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
- コンソールのページ定義
- /apps/<yourProject>/admin/ext/launches/content/jcr:content/head
- /apps/<yourProject>/admin/ext/launches/content/jcr:content/body
- カスタムアクションに対応するクライアントライブラリおよび LESS/CSS 定義
新しいコンソールを(例えばナビゲーション用レール内で)使用するには、明示的に参照するために ID を使用します。ID を使用して、コンソールとそのナビゲーション定義を関連付けます。ID は、ページの rail ノードで定義します。例えば、サイトコンソールの場合は次のようになります。
- rail ノード:
/libs/wcm/core/content/sites/jcr:content/body/rail- ここで currentId プロパティを定義します。
currentId = cq-sites
- ここで currentId プロパティを定義します。
ローンチコンソールの例:
- ノード:
- /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
- 新しいコンソールのルート空間定義を作成します。次に例を示します。
aem-admin-extension-customize-sites は、既存の AEM 6 管理コンソールをカスタマイズする方法を示すサンプルパッケージです。このパッケージは、サイト管理に対する更新を提供します。
GitHub のコード
このページのコードは GitHub にあります
- GitHub の aem-admin-extension-customize-sites プロジェクトを開きます
- プロジェクトを ZIP ファイルとしてダウンロードします
-
ナビゲーションエントリをレールに追加できます(例えば、ローンチなどのカスタムコンソール)。
追加するには、次のオーバーレイを作成します。
/libs/cq/core/content/nav
/apps オーバーレイに、
/apps/cq/core/content/nav
次の新しいノードとプロパティを作成します。
- ナビゲーションを拡張:
- /apps/cq/core/content/nav/launches
- ツリー内の場所を指定:
- プロパティ:sling:orderBefore
- 関連付けを作成するには、id プロパティが適切なコンソールの currentID プロパティを参照する(つまり同じ値を持つ)ようにします。
- プロパティ:id
- 値:コンソールの場合と同じ(cq-launches など)
例えば、次のノードの currentId プロパティと同じ値です。
/apps/<yourProject>/admin/ext/launches/content/jcr:content/body/rail
- ナビゲーションを拡張:
aem-admin-extension-customize-sites は、既存の AEM 6 管理コンソールをカスタマイズする方法を示すサンプルパッケージです。このパッケージは、サイト管理に対する更新を提供します。
GitHub のコード
このページのコードは GitHub にあります
- GitHub の aem-admin-extension-new-console プロジェクトを開きます
- プロジェクトを ZIP ファイルとしてダウンロードします
-
ユーザー管理またはグループ管理を開き、アクセスを制限するユーザーまたはグループを選択します。
注意:
ユーザーごとに権限を割り当てたり、制限したりすることのないようにしてください。グループを使用することを推奨します。
-
/libs/cq/core/content/nav/sites の下の適切なノードに対するアクセス権限を削除します。次のノードは、レールのナビゲーションオプションと相関関係にあります。
- projects
- sites
- assets
- apps
- forms
- screens
- personalization
- commerce
- tools
- communities
注意:
この機能は、テキストフィールドの列に対して最適化されています。その他のデータタイプに対しては、/apps の cq/gui/components/siteadmin/admin/listview/columns/analyticscolumnrenderer をオーバーレイできます。
GitHub のコード
このページのコードは GitHub にあります
- GitHub の aem-sites-extension-listview-columns プロジェクトを開きます
- プロジェクトを ZIP ファイルとしてダウンロードします
-
使用可能な列のリストをオーバーレイします。
- 次のノードで、
/apps/wcm/core/content/common/availablecolumns - 新しい列を追加、または既存の列を削除します。
詳しくは、オーバーレイ(および Sling Resource Merger)の使用を参照してください。
- 次のノードで、
-
省略可能:
- 追加データを挿入する場合は、pageInfoProviderType プロパティを持つ PageInforProvider を記述する必要があります。
例として、(GitHub から)以下に添付するクラス/バンドルを参照してください。
- 追加データを挿入する場合は、pageInfoProviderType プロパティを持つ PageInforProvider を記述する必要があります。
コンソールを使用する際の一般的な使用例は、ユーザーがリソース(ページ、コンポーネント、アセットなど)から選択する必要がある場合です。これは、例えば、作成者が項目を選択する必要があるリストの形式で表示されます。
特定の用途に関連する内容を持つ妥当なサイズのリストにするには、カスタム述語の形式でフィルターを実装できます。詳しくは、この記事を参照してください。