Cordova アプリ起動時のスプラッシュスクリーンを操作する cordova-plugin-splashscreen と自前スプラッシュスクリーンの作り方

Cordova アプリを起動すると、デフォルトの Cordova のスプラッシュスクリーンが表示され、その後一度真っ白な画面が表示されてから、index.html が読み込まれて画面表示される。

途中に入る真っ白な画面の表示がチラついて鬱陶しいので、cordova-plugin-splashscreen というプラグインを使って改善してみた。

これから紹介する手順を踏むと、デフォルトの Cordova のスプラッシュスクリーンを出さず真っ暗な画面を表示し、真っ白な画面を挟むことなくアプリを表示させられるようになる。

プラグインのインストール

まずはスプラッシュスクリーンを操作できるプラグインを導入する。

$ cordova plugin add cordova-plugin-splashscreen

スプラッシュスクリーンを自動的に非表示にしない設定を入れる

次に、スプラッシュスクリーンを自動的に非表示にする設定を無効化し、こちらから「スプラッシュスクリーンを非表示にして！」と指示するまでスプラッシュスクリーンを表示したままにする。

config.xml に以下を追加すると、スプラッシュスクリーンを表示しっぱなしにできる。

<preference name="AutoHideSplashScreen" value="false" />

アプリ側でスプラッシュスクリーンを非表示にする

これだけでは、アプリ起動後もスプラッシュスクリーンが表示されたままになってしまう。

index.html で最初に読み込む JavaScript の中で、以下のように指定することで、スプラッシュスクリーンを非表示にすることができる。

document.addEventListener('deviceready', () => {
  navigator.splashscreen.hide();
}, false);

deviceready イベントは DOMContentLoaded より後で、onload より手前ぐらいのタイミングで発火する。

これで、ホーム画面からアプリを起動してから index.html の初期表示の準備が整うまで、スプラッシュスクリーンを表示しっぱなしにできた。

真っ黒なカスタムスプラッシュスクリーンを用意する

最後に、スプラッシュスクリーンを Cordova のロゴのモノから、独自のスプラッシュスクリーンにする。ここではスプラッシュスクリーンとして真っ黒な画像を用意しておくことで、ロゴの類を一切表示させずにいきなりアプリが起動するかのように見せようと思う。

どうもデバイスごとにサイズの違う画像ファイルを用意してやらないといけなくて、そのサイズを調べるのが大変だった。iOS のうち、iPhone7Plus で動作環境したので、以下のような設定になった。

<platform name="ios">
  <allow-intent href="itms:*" />
  <allow-intent href="itms-apps:*" />
  <!-- 以下2行を追加 -->
  <splash height="2208" src="res/screen/ios/Default-736h.png" width="1242" />
  <splash height="1242" src="res/screen/ios/Default-Landscape-736h.png" width="2208" />
</platform>

画像は以下の2つを用意した。両方とも、中身は黒1色の PNG ファイルだ。

これでビルドすれば、指定の画像ファイルをスプラッシュスクリーンとして使用してくれた。

解像度が異なる別のデバイスで使う場合は、恐らくまたそのデバイスのサイズに合わせた画像を用意する必要があると思われる。

• 参考 : Phonegap - Fixed white screen flash after launch - I'm Knight

これでできあがり。Cordova アプリでスプラッシュスクリーン周りの挙動が気になる場合は試してみてほしい。