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

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

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

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

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

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

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

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

   メモ

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

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

事前準備

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

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

事前準備

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

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

Business.Adobe.com リソース

Automated Onboarding Style System Asset Collections Embedded Charts Theme Editor Managed Cloud