はじめに

先月、Ionic4でアプリアイコンを設定する方法を記事にしました。
合わせて、スプラッシュ画像を設定する方法も記載しておきます。
※数日後に公開をしようとしていたらすっかり忘れて月をまたいでしまいました…。

前提

• 「Ionic4でアプリアイコンを設定する」が済んでいること
  
  

  ゆるtech。

  

  Ionic4でアプリアイコンを設定する

  https://shigu493.com/ionic%e3%81%a7%e3%82%a2%e3%83%97%e3%83%aa%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%82%92%e8%a8%ad%e5%ae%9a%e3%81%99%e3%82%8b/

  はじめにIonicで簡単なアプリを作っていて、アプリアイコンを設定してみたので設定方法を記録しておきます。前提Ionic CLIが使える状態Ionicプロジェクトが作成済み(adsbygoogle = window.adsbygoogle || ).push({});手順1.Ionicにアカウントを作成するにアクセスし...

手順

1. スプラッシュ画像を用意し、 resouces 配下にsplash.pngという名前で配置する

2. $ ionic cordova resources --splash を実行する

$ ionic cordova resources --splash
> cordova-res --type splash
[cordova-res] Generated 12 resources for android
[cordova-res] Generated 15 resources for ios
[cordova-res] Wrote to config.xml

ちなみに、 $ ionic cordova resources でsplashとiconを同時に生成できます。

3. スプラッシュがresouces/androidやios配下に作成される

作成されました！

4. ionic cordova build ios でビルドする

いつもどおり、プロジェクトをビルドすると作成したスプラッシュを利用することができます。

注意点

正方形のスプラッシュ画像を端末のアスペクト比によってリサイズして利用するため、
見切れてほしくないロゴなどは中央部に配置するようにします。

おわりに

端末によりアスペクト比が違う以上スプラッシュ画像のレイアウトは難しいですが、
アスペクト比によってたくさん画像を用意する必要がないのは非常に楽だと思います。
スプラッシュ画像はシンプルなものが比較的多いので、
中央にロゴやアイコンなどを配置するだけでよければ全く問題ないですね。