クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonicの使い方を紹介していきます。
今回はアプリのアイコンとスプラッシュ（起動中に全面に表示される画像）の設定の仕方を紹介します。
なお、執筆時の環境はIonic CLI 3.4になります。
下準備
アイコンとスプラッシュの設定はIonic CLIのコマンドを使う事で簡単に行えます。そのための下準備をしておきます。
今回用いるコマンドはIonicのサーバーを利用するので、Ionicのアカウント（無料）を取得しログインする必要があります。そこでまずはこちらhttps://apps.ionic.io/signupからサインアップをしてください。
アカウントが取得できたら次のコマンドを実行し、EmailアドレスとPasswordを入力してログインしておきます。
1 | $ ionic login |
アイコン設定
アイコン画像を設定するには、まず設定したい画像をMyApp/resources以下にicon.pngという名前で配置します。
icon.pngは1024x1024px以上の解像度の画像を用意してください。
次のコマンドを実行します
1 2 | $ ionic cordova resources --icon android$ ionic cordova resources --icon ios |
MyApp/resources/android(ios)/icon以下に各種ディスプレイに対応した画像が生成され、MyApp/config.xmlの設定が更新されます。
スプラッシュ設定
スプラッシュ画像を設定するには、まず設定したい画像をMyApp/resources以下にsplash.pngという名前で配置します。
splash.pngは2732x2732px以上の解像度の画像を用意してください。
次のコマンドを実行します。
1 2 | $ ionic cordova resources --splash android$ ionic cordova resources --splash ios |
MyApp/resources/android(ios)/splash以下に各種ディスプレイに対応した画像が生成され、MyApp/config.xmlの設定が更新されます。
スプラッシュの表示パラメータ設定
画像の設定方法と合わせてスプラッシュのカスタマイズを紹介します。
MyApp/config.xmlに設定を書くことでスプラッシュをカスタマイズすることができます。
以下の記述はconfig.xml上になります。
AutoHideSplashScreen
1 | <preference name="AutoHideSplashScreen" value="true" /> |
スプラッシュを自動的に非表示にするかを設定します。trueの場合、後述のSplashScreenDelayに指定した時間が経つとスプラッシュが非表示になります。
SplashScreenDelay
1 | <preference name="SplashScreenDelay" value="30000"/> |
スプラッシュを表示しておく時間を指定します。単位はミリ秒です。
もしスプラッシュを無効にしたい場合はこのvalueに0を指定しましょう。
ios固有の設定
次の三つの項目はiosにのみ有効な設定です。
FadeSplashScreen
1 | <preference name="FadeSplashScreen" value="false"/> |
スプラッシュのフェードイン/アウトを有効にするか設定します。trueにした場合、次のFadeSplashScreenDurationの値に従ってフェードイン/アウトします。
FadeSplashScreenDuration
1 | <preference name="FadeSplashScreenDuration" value="100"/> |
スプラッシュのフェードイン/アウトにかかる時間を指定します。
ShowSplashScreenSpinner
1 | <preference name="ShowSplashScreenSpinner" value="false"/> |
スプラッシュ上にスピナーを表示するかどうかを指定します。
以上がスプラッシュのカスタマイズ方法です。
