Apache Cordova でスプラッシュ・スクリーンを表示するのは大変ややこしいです。

iOS アプリは素でスプラッシュ・スクリーンの機能を持っているため、それが使われているようです。細かいことを考えずに使うことができます。何も考えずに規定で有効になっています。

$ cordova create project1
$ cd project1
$ cordova platform add ios
$ cordova emulate

これだけで、スプラッシュ・スクリーンの表示がされます。(あくまで Apache Cordova 画像のスプラッシュ画像ですが...)

ややこしいのは Android アプリの場合です。規定では有効になっておらず、config.xml に 以下の設定を追加する必要があります。これを追加することで、iOS と同様に Apache Cordova 画像のスプラッシュ・スクリーンが表示されるようになります。

    <preference name="SplashScreen" value="screen" />

ですが、開発版ではこのスプラッシュ・スクリーンの機能が Cordova Plugin の方へ移されたようです。ですので、cordova-android@4.0.0 から cordova-plugin-splashscreen をインストールする必要があります。

$ cordova plugin add org.apache.cordova.splashscreen

しかし、もともと cordova-android に持っている機能が Cordova Plugin でも提供できるのは大変不思議な感じがします。ちょっと調べてみました。

cordova-plugin-splashscreen の該当コードを見ると、こんな感じになっていました。

    // Cordova 3.x.x has a copy of this plugin bundled with it (SplashScreenInternal.java).
    // Enable functionality only if running on 4.x.x.
    private static final boolean HAS_BUILT_IN_SPLASH_SCREEN = Integer.valueOf(CordovaWebView.CORDOVA_VERSION.split("\\.")[0]) < 4;

 @Override
    protected void pluginInitialize() {
        if (HAS_BUILT_IN_SPLASH_SCREEN || !firstShow) {
            return;
        }

cordova-android@4.0.0 より前が使われている場合はこのプラグインが無効化されるようになっています。

cordova-android のコードを見ると cordova-android@3.7.1 の時点で存在していた SplashScreenInternal.java が削除されていますので、cordova-android@4.0.0 以上のバージョンを利用する場合は cordova-plugin-splashscreen が必須になります。

cordova-android@4.0.0 はおそらく次の Apache Cordova 4.4.0 あたりで入ってくるのでしょうか? このバージョン以降を使う方、もしくは cordova platform update でプラットフォームをアップデートする際は要注意です。

もうひとつややこしいことがあります。

cordova-android や cordova-plugin-splashscreen はスプラッシュ・スクリーンの表示を行う機能を持っていますので、ちょこっと設定をいじるだけで Apache Cordova アイコンのスプラッシュ画像は表示できます。ですが、これらはあくまでスプラッシュ・スクリーンの表示を行う機能しかありません。カスタムのスプラッシュ画像を使う場合はさらに cordova-lib の助けが必要です。

実際にカスタム画像をスプラッシュ画像にする場合、以下のように config.xml を修正します。

<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
 
    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

このカスタム画像がアプリに組み込まれ表示される仕組みは大体以下のような感じです。

1. ビルド時に、cordova-lib が config.xml に書かれているスプラッシュ画像を platforms/android/res/drawable-* にコピーする
2. ビルド時に、アプリの中にスプラッシュ画像が埋め込まれる
3. アプリの起動時に cordova-android@4.0.0 より前、もしくは cordova-plugin-splashscreen　がスプラッシュ画像を表示する

このようになっていますので、cordova-lib が認識できない解像度のスプラッシュ画像は 1 でコピーされません。結果として、2 でアプリに埋め込まれません。

cordova-lib の該当コードを見るとこうなっていまして、cordova-lib が知っている解像度のものしかコピーされません。(知らないものが config.xml に書かれていても無視されます)

    var sizeToDensityMap = {
        36: 'ldpi',
        48: 'mdpi',
        72: 'hdpi',
        96: 'xhdpi',
        144: 'xxhdpi',
        192: 'xxxhdpi'
    };

つまり、古い cordova-lib を利用してビルドをすると、高解像度版のアイコンやスプラッシュ画像がアプリにうまく埋め込まれないわけです。通常、代替画像が使われますので、表示されないことはほとんど無いと思いますが、意図せずに解像度が合わないものが使われることになります。これは気が付きにくいんですよね...

しかも、cordova-lib は cordova create で作成されたプロジェクトの中にあるわけではなく、cordova コマンドの中にありますので、うっかり古い cordova コマンドでビルドを行うと...