先日の記事で、アプリの画面を 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 の画面レイアウトにも対応できるので、是非導入をご検討になってはいかがでしょうか。
