このドキュメントでは、最新のタッチ操作対応 UI でのページオーサリングのカスタマイズ方法について説明します。クラシック UI には適用されません。
AEM には、オーサーインスタンスのページオーサリング機能(およびコンソール)をカスタマイズできる様々な仕組みが用意されています。
Clientlibs
clientlibs を使用すると、デフォルトの実装を拡張して新しい機能を実現し、標準の関数、オブジェクト、メソッドを再利用できます。 カスタマイズする際、独自のクライアントライブラリを /apps.
新しい 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
コンテンツは、インスタンスを次回アップグレードするとき(場合によってはホットフィックスまたは機能パックを適用したとき)に上書きされるからです。
設定およびその他の変更に推奨される方法は次のとおりです。
/libs
) /apps
/apps
内で変更作業をおこないます。ページを編集するときに、さまざまなモードを使用できます。これらのモードは、レイヤーを使用して実装されます。これらにより、同じページコンテンツの異なるタイプの機能にアクセスできます。標準のレイヤーは、編集、プレビュー、注釈、開発者およびターゲット設定です。
標準 AEM インスタンスは、MSM レイヤーを提供します。これは、マルチサイト管理に関連するデータにアクセスし、レイヤーでハイライトします。
実行中に表示するには、次の項目を編集します。 We.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
インターフェイスを実装してカスタム述語を実装します。pathbrowser
.カスタム述語の作成について詳しくは、この記事を参照してください。
com.day.cq.commons.predicate.AbstractNodePredicate
インターフェイスの実装によるカスタム述語の実装は、クラシック UI でも機能します。
クラシック UI でカスタム述語を実装する例については、このナレッジベースの記事を参照してください。
各コンポーネントには、多くの場合、そのコンポーネントに対して実行できる様々なアクションを呼び出すためのツールバーがあります。
aem-authoring-extension-toolbar-screenshot
は、コンポーネントをレンダリングするカスタムツールバーアクションの作成方法を示すサンプルパッケージです。
GitHub のコード
このページのコードは GitHub にあります
標準 AEM インストールでは、
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
に、使用可能な各種エディターの定義が保持されています。
エディターと、エディターを使用できる各リソースタイプは、(コンポーネントと同様に)関連付けられています。
cq:inplaceEditing
次に例を示します。
/libs/foundation/components/text/cq:editConfig
/libs/foundation/components/image/cq:editConfig
property: editorType
そのコンポーネントに対してインプレース編集が呼び出されたときに使用されるインラインエディターの種類を定義します。例: text
, textimage
, image
, title
.
エディターの追加の設定の詳細は、設定が含まれている 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
実装方法:
setUp
tearDown
エディター(コンストラクターを含む)の登録:
editor.register
エディターと、エディターを使用できる各リソースタイプが(コンポーネントと同様に)関連付けられます。
aem-authoring-extension-inplace-editor
は、AEMで新しいインプレースエディターを作成する方法を示すサンプルパッケージです。
GitHub のコード
このページのコードは GitHub にあります
コンポーネントに複数のインプレースエディターを含めることができます。複数のインプレースエディターを設定すると、適切なコンテンツを選択して、適切なエディターを開くことができます。詳しくは、 複数のインプレースエディターの設定 ドキュメントを参照してください。
新しいページアクション(サイトに戻る(コンソール)アクションなど)をページツールバーに追加します。
aem-authoring-extension-header-backtosites
は、サイトコンソールに戻るカスタムヘッダーバーアクションを作成する方法を示すサンプルパッケージです。
GitHub のコード
このページのコードは GitHub にあります
既成のワークフローであるアクティベーションをリクエストは、コンテンツ作成者が適切な複製権限を持っていない場合に、自動的にトリガーされます。
このようなアクティベーションでの動作をカスタマイズするには、 アクティベーションのリクエスト ワークフロー:
In /apps
オーバーレイ サイト ウィザード:
/libs/wcm/core/content/common/managepublicationwizard
これ自体は、次の一般的なインスタンスを上書きします。
/libs/cq/gui/content/common/managepublicationwizard
を更新します。 ワークフローモデル および必要に応じて関連する設定/スクリプトを作成します。
の権限を削除します。 replicate
アクション すべての関連するページに対するすべての適切なユーザーから:任意のユーザーがページを公開(またはレプリケート)しようとしたときに、このワークフローをデフォルトのアクションとしてトリガーする場合。