【Cordova】アプリにスプラッシュスクリーンを追加する方法

先日の記事で、アプリの画面を iPhoneX に対応させる方法について紹介しましたが、その中で取り上げた「cordova-plugin-splashscreen」というプラグインについてしっかりとしたご紹介をしていなかったので、今回はそちらのプラグインについて。
名前のとおり、アプリにスプラッシュスクリーンを追加するためのプラグインです。
なお、スプラッシュスクリーンとは、アプリを起動した時に表示される画面のことです。
LINE を思い出してもらえれば分かりやすいかと思います。

GitHubのページはこちらから。

GitHub – apache/cordova-plugin-splashscreen: Apache Cordova Plugin splashscreen
https://github.com/apache/cordova-plugin-splashscreen

 

では、実装方法です。
まず、下記のコマンドを実行してインストールします。

cordova plugin add cordova-plugin-splashscreen

もしくは、下記でも可です。

cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git

インストール後は、/res/screen ディレクトリを作成し、その中に各プラットフォーム名のディレクトリを作成します。
例えば、Android、iOS であれば、/res/screen/android/res/screen/ios ディレクトリを作成します。
各プラットフォームのファイル内に、表示したいスプラッシュスクリーンの画像を置きます。

あとは、config.xml に下記のようにスプラッシュページの設定を追加します。
なお、ファイル名は適宜変更してください。

<platform name="android">
    <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>
<platform name="ios">
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
</platform>

以上で設定は終了です。
なお、Android は、下記の設定を追加することで、スプラッシュスクリーンの表示時間を変更することもできるとのこと。

<preference name="SplashScreenDelay" value="10000" />

こちらも config.xml に追加してください。
変更前のデフォルト値は 3000 です。
私はやった事がないのでわかりませんが…もし、表示時間を変更する必要がある場合はご活用ください。

 

以上、Cordova アプリにスプラッシュスクリーンを追加する方法でした。
スプラッシュスクリーンを追加すると、一気にアプリらしくなるのでおすすめです。
また、iPhoneX の画面レイアウトにも対応できるので、是非導入をご検討になってはいかがでしょうか。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG