ブランディングのカスタマイズ

最終更新日： 2024年7月15日

作成対象：

  • ユーザー
  • 開発者

アプリケーションアイコン、アプリケーション名、起動画像およびログインページをカスタマイズすることで、AEM Forms アプリケーションに組織固有のユニークな外観を与えることができます。例えば、組織のロゴを使用するために画像を変更できます。AEM Forms アプリケーションは次のカスタマイズをサポートしています。

  • アプリケーションアイコンと起動画像のカスタマイズ
  • アプリケーション名のカスタマイズ
  • ログインページの画像のカスタマイズ
  • アプリケーションメニューのロゴのカスタマイズ

アイコンと起動画像のカスタマイズ

次の手順を実行して、AEM Forms アプリケーションのデフォルトのアプリケーションアイコンと起動画像をカスタマイズします。

NOTE
すべてのアイコンと起動画像で、ノンインターレースの PNG 形式を使用します。

アイコンと起動画像をカスタマイズするには

iOS の場合

  1. Xcode で Capture.xcodeproj プロジェクトを開きます。

  2. （アイコンのカスタマイズの場合）キャプチャのナビゲータービューで、キャプチャ／キャプチャ／サポートするファイル／Capture-info.plist に移動します。アイコンファイルの隣にあるドロップダウンをクリックします。アイコンファイル（.png）の名前を指定し、キャプチャ／キャプチャ／リソース／アイコン ​でファイルをアップロードします。現在サポートされているサイズは、29 x 29、50 x 50、58 x 58、72 x 72、100 x 100、144 x 144 です。

  3. （起動画像のカスタマイズの場合）画像のファイル名が次のいずれかであることを確認します。

    • 縦長の場合：Default-Portrait~ipad.png および Default-Portrait@2x~ipad.png
    • 横長の場合：Default-Landscape~ipad.png および Default-Landscape@2x~ipad.png

    これらのファイルをキャプチャプロジェクトにアップロードして、プロジェクトの既存のファイルと置き換えます。

    NOTE
    画像の名前と解像度が、プロジェクト内の置き換える画像と一致していることを確認します。

  4. iOS デバイスまたは iOS シミュレーター上で AEM Forms アプリケーションを構築して実行します。

Android の場合

  1. アプリケーションのアイコンファイルに次の名前を付けます。

    ic_launcher.png

  2. 対応するアイコンファイルを次のディレクトリに配置します。

    • [User_Home]/Projects/[your-project]/src/android/res/drawable-hdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-mdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-xhdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-xxhdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-xxxhdpi
    NOTE
    画像の名前と解像度が、プロジェクト内の置き換える画像と一致していることを確認します。

  3. AEM Forms アプリケーションを再構築します。

Windows の場合

  1. 次のパスにあるアイコンを置き換えます。

    %HOMEPATH%\adobe-lc-mobileworkspace-src-<version>\src\windows\MWSWindows\res\icons\windows

  2. 次のパスにある起動画像を置き換えます。

    %HOMEPATH%\adobe-lc-mobileworkspace-src-<version>\src\windows\MWSWindows\res\screens\windows

    NOTE
    画像の名前と解像度が、プロジェクト内の置き換える画像と一致していることを確認します。

  3. AEM Forms アプリケーションを再構築します。

アプリケーション名のカスタマイズ

iOS の場合

  1. Xcode で Capture.xcodeproj プロジェクトを開きます。

  2. Capture のナビゲータービューで、Capture／Capture／Supporting Files／InfoPlist.strings に移動します。

    CFBundleDisplayName 属性の値を、アプリに表示する名前に更新します。

  3. iOS デバイスまたは iOS シミュレーター上で AEM Forms アプリケーションを構築して実行します。

    iOS 向けアプリケーションの構築について詳しくは、Xcode プロジェクトの設定と iOS アプリケーションの構築を参照してください。

Android の場合

  1. テキストエディターまたは XML エディターで次の XML ファイルを開きます。

    [User_Home]/Projects/[your-project]/src/android/res/values/strings.xml and android/res/values-en/strings.xml

  2. app_name キーの値を更新します。

  3. AEM Forms アプリケーションを再構築します。

    Andriod のアプリケーション構築について詳しくは、Eclipse プロジェクトの設定と Android アプリケーションの構築を参照してください。

Windows の場合

  1. テキストエディターで次の XML ファイルを開きます。

    %HOMEPATH%\adobe-lc-mobileworkspace-src-<version>\src\windows\MWSWindows\config.xml

  2. <name>...</name> タグ内の値を更新します。

  3. AEM Forms アプリケーションを再構築します。

    Windows 上でのアプリケーションの構築について詳しくは、Visual Studio プロジェクトの設定と Windows アプリケーションの構築を参照してください。

ログインページの画像のカスタマイズ

AEM Forms アプリケーションのログインページには、ロゴと背景画像があります。ロゴはログインダイアログボックスの上に配置されており、背景の画像はログインダイアログボックスの下に配置されています。次の手順を実行して、ログインページのデフォルトの画像をカスタマイズします。

事前準備

次の画像があることを確認します。

説明サイズFilename
Logo（ロゴ）72 x 72 ピクセルLC-logo.png
背景画像（縦長）1280 x 989 ピクセルLanding_bg.jpeg

Xcode を使用してログインページの画像をカスタマイズするには

  1. Xcode で Capture.xcodeproj プロジェクトを開きます。

  2. www/wsmobile/images フォルダーに移動し、

  3. ロゴを変更するには、デフォルトの LC-logo.png ファイルをカスタムの LC-logo.png ファイルに置き換えます。

  4. 背景を変更するには、デフォルトの Landing_bg.jpeg ファイルをカスタムの Landing_bg.jpeg ファイルに置き換えます。

  5. iOS デバイスまたは iOS シミュレーター上で AEM Forms アプリケーションを構築して実行します。

Eclipse を使用してログインページの画像をカスタマイズするには

  1. Eclipse で Android プロジェクトを開きます。

  2. assets/www/wsmobile/images フォルダーに移動し、

  3. ロゴを変更するには、デフォルトの LC-logo.png ファイルをカスタムの LC-logo.png ファイルに置き換えます。

  4. 背景を変更するには、デフォルトの Landing_bg.jpeg ファイルをカスタムの Landing_bg.jpeg ファイルに置き換えます。

  5. Android デバイス上で AEM Forms アプリケーションを構築して実行します。

Visual Studio を使用してログインページの画像をカスタマイズするには

  1. Visual Studio で MWSWindows.sln プロジェクトを開きます。

  2. MWSWindows\www\wsmobile\images フォルダーに移動し、

  3. ロゴを変更するには、デフォルトの LC-logo.png ファイルをカスタムの LC-logo.png ファイルに置き換えます。

  4. 背景を変更するには、デフォルトの Landing_bg.jpeg ファイルをカスタムの Landing_bg.jpeg ファイルに置き換えます。

  5. Windows デバイス上で AEM Forms アプリケーションを構築して実行します。

アプリケーションメニューのロゴのカスタマイズ

AEM Forms アプリケーションにログインしてメニューボタンを選択すると、メニュー上にロゴが表示されます。次の手順を実行して、デフォルトのロゴをカスタマイズします。

事前準備

次の画像があることを確認します。

説明サイズFilename
Logo（ロゴ）72 x 72 ピクセルaem_icon.png

Xcode を使用してログインページの画像をカスタマイズするには

  1. Xcode で Capture.xcodeproj プロジェクトを開きます。

  2. www/wsmobile/images フォルダーに移動し、

  3. ロゴを変更するには、デフォルトの aem_icon.png ファイルをカスタムの aem_icon.png ファイルに置き換えます。

  4. iOS デバイスまたは iOS シミュレーター上で AEM Forms アプリケーションを構築して実行します。

Eclipse を使用してログインページの画像をカスタマイズするには

  1. Eclipse で Android プロジェクトを開きます。

  2. assets/www/wsmobile/images フォルダーに移動し、

  3. ロゴを変更するには、デフォルトの aem_icon.png ファイルをカスタムの aem_icon.png ファイルに置き換えます。

  4. Android デバイス上で AEM Forms アプリケーションを構築して実行します。

Visual Studio を使用してログインページの画像をカスタマイズするには

  1. Visual Studio で MWSWindows.sln プロジェクトを開きます。

  2. MWSWindows\www\wsmobile\images フォルダーに移動し、

  3. ロゴを変更するには、デフォルトの aem_icon.png ファイルをカスタムの aem_icon.png ファイルに置き換えます。

  4. Windows デバイス上で AEM Forms アプリケーションを構築して実行します。

Experience Manager