通信作成 UI のカスタマイズ customize-create-correspondence-ui

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
Correspondence Management

作成対象：

User

CAUTION

AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。詳細は、技術サポート期間. サポートされているバージョンを見つけるここ.

概要 overview

Correspondence Management を使用すると、ソリューションテンプレートを再ブランディングして、より優れたブランド価値を実現し、組織のブランディング標準に準拠できます。ユーザーインターフェイスのリブランディングには、組織のロゴの変更が含まれます。ロゴは、通信を作成 UI の左上隅に表示されます。

通信を作成 UI のロゴを組織のロゴと共に変更できます。

通信作成 UI のカスタムアイコン
図： 通信を作成 UI のカスタムアイコン

通信を作成 UI でのロゴの変更 changing-the-logo-in-the-create-correspondence-ui

選択したロゴイメージを設定するには、次の手順を実行します。

CRX 内で適切なフォルダー構造を作成します。
CRX で作成したフォルダーに、新しいロゴファイルをアップロードします。
CRX 上に CSS をセットアップし、新しいロゴを参照します。
ブラウザーの履歴を消去し、通信作成 UI を更新します。

必要なフォルダー構造の作成 creatingfolderstructure

カスタムロゴ画像とスタイルシートをホストするためのフォルダー構造を、以下で説明するように作成します。ルートフォルダー/apps を持つ新しいフォルダー構造は、/libs フォルダーの構造に似ています。

カスタマイズの場合は、以下に説明するように、/apps ブランチに並列フォルダー構造を作成します。

/apps 分岐（フォルダー構造）により：

システムの更新時にそれらのファイルを安全に保ちます。アップグレード、機能パック、ホットフィックスを適用すると、/libs 分岐が更新されます。/libs 分岐に変更内容をホストしていると上書きされてしまいます。
現在のシステムやブランチを乱さないようにします。カスタムファイルの保存にデフォルトの場所を使用すると、誤って解決できる場合があります。
AEMでリソースを検索する際に、リソースの優先度を高めるのに役立ちます。 AEM では、リソースを検索する場合、最初に /apps 分岐を検索し、次に /libs 分岐を検索するように設定されています。このメカニズムにより、システムはオーバーレイ（および、そこに定義されたカスタマイズ内容）を使用します。

次の手順を実行して、必要なフォルダー構造を /apps 分岐に作成します。

https://[server]:[port]/[ContextPath]/crx/de にアクセスし、管理者としてログインします。

apps フォルダー内に、ccrui フォルダーにある css フォルダーと同様のパスと構造を持つ、css というフォルダーを作成します。

css フォルダーの作成手順：

次のパスにある css フォルダーを右クリックし、「ノードをオーバーレイ」を選択します。/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css

「ノードをオーバーレイ」ダイアログに次の値が表示されていることを確認します。

パス： /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css

オーバーレイの場所：/apps/

ノードタイプを一致させる： オン

オーバーレイノードのパス

note note
NOTE
/libs 分岐は変更しないでください。このブランチは、次の操作を行うたびに変更される可能性が高いので、加えた変更はすべて失われる可能性があります。
インスタンスでのアップグレードホットフィックスの適用機能パックのインストール

「OK」をクリックします。指定されたパスに css フォルダーが作成されます。

apps フォルダー内に、ccrui フォルダーにある imgs フォルダーと同様のパスと構造を持つ、imgs というフォルダーを作成します。

次のパスにある imgs フォルダーを右クリックし、「ノードをオーバーレイ」を選択します。/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
「ノードをオーバーレイ」ダイアログに次の値が表示されていることを確認します。

パス：/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs

オーバーレイの場所：/apps/

ノードタイプを一致させる：オン

「OK」をクリックします。

note note
NOTE
/apps フォルダーに手動でフォルダー構造を作成することもできます。

「すべて保存」をクリックして、サーバーに変更を保存します。

CRX に新しいロゴをアップロード uploadlogo

カスタムロゴファイルを CRX にアップロードします。ロゴの描画には、標準的な HTML 規則が適用されます。サポートしている画像ファイル形式は、AEM Forms へのアクセスに使用しているブラウザーによって異なります。すべてのブラウザーは、JPEG、GIF、PNG をサポートしています。詳しくは、サポートされる画像形式に関するブラウザー固有のドキュメントを参照してください。

ロゴ画像のデフォルトのサイズは 48 px &ast；です48 px。画像がこのサイズに近いか、48 px &ast；より大きいことを確認します。48 px。
ロゴ画像の高さが 50 px を超える場合、「通信を作成」のユーザーインターフェイスでは、ヘッダーの高さになるので、画像を最大高さ 50 px まで縮小表示します。画像を縮小しながら、通信を作成ユーザーインターフェイスで画像の縦横比が維持されます。
画像が小さい場合、通信作成用ユーザーインターフェイスでは拡大表示されません。そのため、ロゴ画像をきれいに表示するには、高さが少なくとも 48 ピクセルあり、幅も十分にあるファイルを使用することが大切です。

以下の手順を実行して、CRX にカスタムロゴファイルをアップロードします。

https://[server]:[port]/[contextpath]/crx/de にアクセスします。必要に応じて、管理者としてログインします。
CRXDE から、次のパスにある imgs フォルダーを右クリックし、「作成」／「ファイルを作成」を選択します。

/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/
「ファイルを作成」ダイアログで、ファイルの名前「CustomLogo.png」（またはロゴファイルの名前）を入力します。
「すべて保存」をクリックします。

作成した新しいファイル（ここでは「CustomLogo.png」）の下に、jcr:content プロパティが表示されます。
フォルダー構造で jcr:content をクリックします。

jcr:content のプロパティが表示されます。
jcr:data プロパティをダブルクリックします。

「Edit jcr:data」のダイアログが表示されます。

次に、newlogo.png フォルダーをクリックし、jcr:content（dim オプション）をダブルクリックし、タイプを nt:resource に設定します。プロパティが表示されていない場合は、まず、名前が「jcr:content」のプロパティを作成します。
「jcr:data の編集」ダイアログで「参照」をクリックし、ロゴとして使用する画像ファイルを選択します（ここでは、「CustomLogo.png」）。

サポートしている画像ファイル形式は、AEM Forms へのアクセスに使用しているブラウザーによって異なります。すべてのブラウザーは、JPEG、GIF、PNG をサポートしています。詳しくは、サポートされる画像形式に関するブラウザー固有のドキュメントを参照してください。

図： 例 — カスタムロゴとして使用する CustomLogo.png
「すべて保存」をクリックします。