はじめに

Cordova で Splash Screen を設定できる cordova-plugin-splashscreen についてまとめた。

TL;DR

  • cordova plugin add cordova-plugin-splashscreen でインストール
  • res/screen/ios などに画像ファイルを配置
  • config.xml に <splash src="res/screen/ios/xxxx.png" /> を追加
  • デフォルトは表示から3秒後にフェードアウト
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 基本的な使い方
      1. プラグインインストール
      2. 画像ファイルを配置
      3. config.xml 編集
    2. 細かい調整
      1. 自動フェードアウトの有無
      2. フェードアウトまでの時間
      3. フェードアウトの有無
      4. フェードアウトにかける時間
      5. スピナーの表示有無
      6. JavaScript
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
$ cordova --version
8.1.2 (cordova-lib@8.1.1)

$ cordova plugin ls
cordova-plugin-splashscreen 5.0.3 "Splashscreen"

詳細

基本的な使い方

デフォルトだと Splash Screen の表示から3秒後にフェードアウト。特に細かい設定が不要なら、そのままで良いと思う。

プラグインインストール

1
$ cordova plugin add cordova-plugin-splashscreen

画像ファイルを配置

res/screen/ios や res/screen/android に画像ファイルを配置

1
$ mkdir -p res/screen/{ios,android}

config.xml 編集

config.xml を編集して、<splash src="" /> を追加。

iOS は画像ファイルとサイズに合わせて width と height の値を適宜変更。
Android は解像度を l/m/h/xh/xxh で指定。縦画面は port-Xdpi、横画面は land-Xdpi で指定する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version='1.0' encoding='utf-8'?>
<widget id="app.example" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Example</name>
    ...
    <plugin name="cordova-plugin-splashscreen" spec="^5.0.3" />
    <platform name="ios">
        <splash src="res/screen/ios/320_480.png" width="320" height="480"/>
        <splash src="res/screen/ios/640_960.png" width="640" height="960"/>
        ...
    </platform>
    <platform name="android">
        <splash src="res/screen/android/port-ldpi.png" density="port-ldpi"/>
        <splash src="res/screen/android/port-mdpi.png" density="port-mdpi"/>
        <splash src="res/screen/android/land-ldpi.png" density="land-ldpi"/>
        <splash src="res/screen/android/land-mdpi.png" density="land-mdpi"/>
        ...
    </platform>
</widget>

細かい調整

自動フェードアウトの有無

AutoHideSplashScreen で、自動で Splash Screen をフェードアウトするかどうかを変更可能。デフォルトは true

1
<preference name="AutoHideSplashScreen" value="true" />

iOS で Splash Screen を消すタイミングを自分で制御したい場合は false に設定する必要がある。

フェードアウトまでの時間

SplashScreenDelay でフェードアウト 完了 までの時間を制御、単位はミリ秒。

1
<preference name="SplashScreenDelay" value="3000" />

フェードアウトの有無

フェードアウトを使うかどうか、だと思う。

1
<preference name="FadeSplashScreen" value="false"/>

フェードアウトにかける時間

FadeSplashScreenDuration でフェードアウトの所要時間を制御、単位はミリ秒。デフォルトは 500。

1
<preference name="FadeSplashScreenDuration" value="750"/>

スピナーの表示有無

ロード中に見かけるアレ(クルクル回ってるやつ)を表示するかどうか、デフォルトは true。

1
<preference name="ShowSplashScreenSpinner" value="false"/>

JavaScript

navigator.splashscreen.hide() で Splash Screen を隠せる。

iOS の場合は AutoHideSplashScreen を false に設定しておく必要がある。

1
2
3
setTimeout(function() {
    navigator.splashscreen.hide();
}, 2000);

まとめ

  • cordova plugin add cordova-plugin-splashscreen でインストール
  • res/screen/ios などに画像ファイルを配置
  • config.xml に <splash src="res/screen/ios/xxxx.png" /> を追加
  • デフォルトは表示から3秒後にフェードアウト

その他・メモ

Android だと SplashMaintainAspectRatio, SplashShowOnlyFirstTime, SplashScreenSpinnerColor とかもあるっぽい。

1
2
3
<preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />
<preference name="SplashScreenSpinnerColor" value="white" />

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list