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

アプリケーションアイコン、アプリケーション名、起動画像およびログインページをカスタマイズして、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アプリをリビルドします。

   Android 向けアプリの構築について詳しくは、 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 アプリケーションを構築して実行します。