AEM には、オーサーインスタンスのページオーサリング機能(およびコンソール)をカスタマイズできるさまざまな仕組みが用意されています(タッチ操作向け UI)。
- クライアントライブラリ
クライアントライブラリを使用すると、デフォルトの実装を拡張して新しい機能を実現しつつ、標準の関数、オブジェクト、メソッドを再利用できます。カスタマイズするときに、独自のクライアントライブラリを /apps に作成できます。新しいクライアントライブラリには以下の条件があります。- オーサリングクライアントライブラリ cq.authoring.editor.sites.page を使用する必要があります。
- 適切な cq.authoring.editor.sites.page.hook カテゴリに含める必要があります。
- オーバーレイ
オーバーレイはノード定義に基づいており、(/libs にある)標準の機能に、(/apps にある)カスタマイズした独自機能を重ねることができます。Sling Resource Merger は継承を許可しているので、オーバーレイを作成するときに、オリジナルの 1 対 1 のコピーは必要ありません。
注意:
詳しくは、JS ドキュメントを参照してください。
注意:
詳しくは、次の節を参照してください。
- クライアントライブラリの使用と作成
- オーバーレイの使用と作成
- Granite
- ページオーサリングに使用される構造について詳しくは、AEM タッチ操作向け UI の構造を参照してください。
このトピックについては、AEM Gems セッション - User interface customization for AEM 6.0 でも説明しています。
警告:
/libs パス内の設定は一切変更しないでください。
/libs のコンテンツは、インスタンスを次回アップグレードするとき(場合によってはホットフィックスまたは機能パックを適用したとき)に上書きされるからです。
設定およびその他の変更に推奨される方法は次のとおりです。
- 必要な項目(/libs 内に存在)を、/apps の下で再作成します。
- /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 にあります
- GitHub の aem-authoring-extension-assetfinder-flickr プロジェクトを開きます
- プロジェクトを ZIP ファイルとしてダウンロードします
GitHub のコード
このページのコードは GitHub にあります
- GitHub の aem-authoring-extension-toolbar-screenshot プロジェクトを開きます
- プロジェクトを ZIP ファイルとしてダウンロードします
-
エディターの追加の設定の詳細は、設定が含まれている 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
GitHub のコード
このページのコードは GitHub にあります
- GitHub の aem-authoring-extension-header-backtosites プロジェクトを開きます
- プロジェクトを ZIP ファイルとしてダウンロードします
ページをオーサリングする際、ユーザーは頻繁にリソース(ページ、コンポーネント、アセットなど)から選択する必要があります。これは、例えば、作成者が項目を選択する必要があるリストの形式で表示されます。
特定の用途に関連する内容を持つ妥当なサイズのリストにするには、カスタム述語の形式でフィルターを実装できます。例えば、パスブラウザー Granite コンポーネントを使用してユーザーが特定のリソースへのパスを選択できるようにするには、表示されるパスを次のようにフィルタリングできます。
- com.day.cq.commons.predicate.AbstractNodePredicate インターフェイスを実装してカスタム述語を実装します。
- 述語の名前を指定し、パスブラウザーを使用するときにその名前を参照します。
カスタム述語の作成について詳しくは、この記事を参照してください。
注意:
com.day.cq.commons.predicate.AbstractNodePredicate インターフェイスの実装によるカスタム述語の実装は、クラシック UI とタッチ UI の両方で動作します。
クラシック UI でカスタム述語を実装する例について詳しくは、このナレッジベースの記事を参照してください。