通信作成 UI のカスタマイズ

最終更新日: 2023-12-19

概要

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

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

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

通信作成用 UI に表示されたカスタムアイコン

通信作成 UI のロゴの変更

ロゴ画像を設定するには、次の手順を実行します。

  1. CRX 内で適切なフォルダー構造を作成します。

  2. CRX で作成したフォルダーに、新しいロゴファイルをアップロードします。

  3. CRX 上に CSS をセットアップし、新しいロゴを参照します。

  4. ブラウザーの履歴を消去し、通信作成 UI を更新します。

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

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

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

/apps ブランチ(フォルダー構造):

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

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

  1. https://'[server]:[port]'/[ContextPath]/crx/de に移動して、管理者としてログインします。

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

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

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

      ノードをオーバーレイ

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

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

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

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

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

      メモ

      /libs ブランチは変更しないでください。このブランチは、以下の場合に変更がおこなわれる可能性が高いので、加えた変更はすべて失われる可能性があります。

      * インスタンスをアップグレード
      * ホットフィックスの適用
      * 機能パックをインストール
      
    3. OK」をクリックします。指定したパスに css フォルダーが作成されます。

  3. apps フォルダーに、 imgs 次のようなパス/構造を持つ imgs フォルダー(ccrui フォルダー内)に保存します。

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

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

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

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

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

    3. OK」をクリックします。

      メモ

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

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

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

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

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

  1. https://'[server]:[port]'/[contextpath]/crx/de にアクセスします。必要に応じて、管理者としてログインします。

  2. CRXDE から、次のパスにある imgs フォルダーを右クリックし、「作成」/「ファイルを作成」を選択します。

    /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/

    imgs フォルダ内に新しいノードを作成する

  3. 「ファイルを作成」ダイアログで、ファイルの名前「CustomLogo.png」(またはロゴファイルの名前)を入力します。

    新規ノードとしての CustomLogo.png

  4. すべて保存」をクリックします。

    作成した新しいファイル(ここでは CustomLogo.png)の下に、jcr:content プロパティが表示されます。

  5. フォルダー構造内で jcr:content をクリックします。

    jcr:content のプロパティが表示されます。

    jcrcontentproperties

  6. jcr:data プロパティをダブルクリックします。

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

    次に、newlogo.png フォルダーをクリックし、jcr:content(dim オプション)をダブルクリックして、タイプ nt:resource を設定します。プロパティが表示されていない場合は、まず、名前が「jcr:content」のプロパティを作成します。

  7. 「jcr:data の編集」ダイアログで「参照」をクリックし、ロゴとして使用する画像ファイルを選択します(ここでは、「CustomLogo.png」)。

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

    カスタムロゴファイルのサンプル

    例:CustomLogo.png をカスタムロゴとして使用する

  8. すべて保存」をクリックします。

UI でロゴをレンダリングするための CSS を作成

カスタムロゴ画像では、コンテンツコンテキストで追加のスタイルシートを読み込む必要があります。

UI でロゴをレンダリングするためのスタイルシートを作成するには、次の手順を実行します。

  1. https://'[server]:[port]'/[contextpath]/crx/de にアクセスします。必要に応じて、管理者としてログインします。

  2. 次の場所に、customcss.css というファイルを作成します。異なるファイル名は使用できません。

    /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/

    customcss.css ファイルの作成手順:

    1. css フォルダーを右クリックし、作成/ファイルを作成​を選択します。

    2. 新規ファイルダイアログボックスで、CSS の名前を「customcss.css」として指定し、「OK」をクリックします。異なるファイル名は使用できません。

    3. 次のコードを、新しく作成した css ファイルに追加します。コードの content:url で、CRXDE の imgs フォルダーにアップロードした画像名を指定します。

      .logo, .logo:after {
      content:url("../imgs/CustomLogo.png");
      }
      
    4. すべて保存」をクリックします。

通信作成 UI を更新してカスタムロゴを表示

ブラウザーキャッシュをクリアし、ブラウザーで通信作成 UI インスタンスを開いて、カスタムロゴを表示します。

カスタムロゴを用いて、通信作成用ユーザーインターフェイスを構築する

通信作成用 UI に表示されたカスタムアイコン

このページ