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

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

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

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

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

メモ

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

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

iOS の場合

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

  2. アイコンのカスタマイズの場合)キャプチャのナビゲータービューで、キャプチャ/キャプチャ/サポートするファイル/Capture-info.plist に移動します。アイコンファイルの横のドロップダウンをクリックします。 アイコンファイル(.png)の名前を指定し、キャプチャ/キャプチャ/リソース/アイコン​でファイルをアップロードします。現在サポートされているディメンションは次のとおりです。29x29、50x50、58x58、72x72、100x100、144x144。

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

    • 縦向きの場合:Default-Portrait~ipad.pngDefault-Portrait@2x~ipad.png
    • 横置きの場合:Default-Landscape~ipad.pngDefault-Landscape@2x~ipad.png

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

    メモ

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

  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
    メモ

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

  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

    メモ

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

  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アプリのログインページには、ロゴと背景の画像が表示されます。 ロゴはログインダイアログボックスの上に配置されており、背景の画像はログインダイアログボックスの下に配置されています。次の手順を実行してログインページのデフォルトの画像をカスタマイズします。

事前準備

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

説明

サイズ

ファイル名

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 アプリケーションにログインしてメニューボタンをタップすると、メニュー上にロゴが表示されます。次の手順を実行してデフォルトのロゴをカスタマイズします。

事前準備

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

説明

サイズ

ファイル名

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 アプリケーションを構築して実行します。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now