PhoneGap BuildでAndroidアプリにSplash Screenを表示する”正しい”方法

ただ単にスプラッシュスクリーンを表示するためだけに一日は無駄に費やしたので、今後のためと同じように試行錯誤中の方のためにメモします(-_-;)

0.公式ドキュメント通りでうまくいくのか不明

基本は「config.xml」を編集すればいいだけなのですが、ググって出てくる参考サイトがあまりにもいろいろな方法を説明してくれるので、なにが正しくて何が間違っているのかもう訳が分からなくなりました。最終的に公式ドキュメントの通りにやってもうまくいかなかったので、最短回答を紹介します。

1.プラグインの導入

オフィシャルドキュメントでは、プラグインなんて紹介せずにデフォルトでスプラッシュスクリーンが表示されるかのような記述になっていますが、一向に表示される気配はありませんでした。

迷わずcordovaプラグインを導入しましょう。
普通に定番の「cordova-plugin-splashscreen」です。

config.xmlの記述

<plugin name="cordova-plugin-splashscreen" />

※spec属性などは省いています。最新版が導入されますのが、とりあえずこれでOKです。
※<gap:plugin>という記述は古い書き方です。こちらでOKです。

2.設定

スプラッシュスクリーンを表示すための設定をこちらも「config.xml」に記述します。この書き方も参考サイトによって違い混乱しました。とりあえず必要最低限の書き方です。

config.xmlの記述

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="2000" />
<platform name="android">
  <splash src="res/パス/ファイル名.png" density="ldpi" />
  <splash src="res/パス/ファイル名.png" density="mdpi" />
  <splash src="res/パス/ファイル名.png" density="hdpi" />
  <splash src="res/パス/ファイル名.png" density="xhdpi" />
  <splash src="res/パス/ファイル名.png" density="xxhdpi" />
  <splash src="res/パス/ファイル名.png" density="xxxhdpi" />
</platform>

スプラッシュスクリーン用の画像ですが、「res」フォルダ内にpngファイルで用意すればOKです。9patchファイルでもそうでなくてもOKです。

公式ドキュメントや参考サイトでは、density属性だったりqualifier属性だったり、<splash>タグだったり<gap:splash>タグだったりとなにがなんだかわかりませんが、プラグインを使った時点でプラグインの公式ドキュメントの書き方を参考にすればいいだけでした。

また、density属性に「density=”land-hdpi”」や「density=”port-hdpi”」のように記述するようプラグインの公式ドキュメントでは紹介されていますが、どちらもきちんと用意しないと表示されないようなので、landやportを抜いた「density=”hdpi”」と記述すると一発です。(これで半日はつぶしました(>_<))

また、src属性ですがこのプラグインは「src=”/res/….”」という記述を理解できないようで「src=”res/…”」としなければなりません。パスの記述方法的にはルートから辿る「src=”/res/…”」でもいいような気がしますが、resの前に/(スラッシュ)を付けてはいけません
※パスの記述に関して自分の認識違いであればすみません

3.結論

以下の記述がconfig.xmlにあり、画像ファイルがresフォルダの中にあればOKです。

<plugin name="cordova-plugin-splashscreen" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="2000" />
<platform name="android">
  <splash src="res/パス/ファイル名.png" density="ldpi" />
  <splash src="res/パス/ファイル名.png" density="mdpi" />
  <splash src="res/パス/ファイル名.png" density="hdpi" />
  <splash src="res/パス/ファイル名.png" density="xhdpi" />
  <splash src="res/パス/ファイル名.png" density="xxhdpi" />
  <splash src="res/パス/ファイル名.png" density="xxxhdpi" />
</platform>

記述する場所は<widget>タグの中であればどこでもOKで、<platform>タグの中に<icon>などの他の記述が混じっていてももちろん大丈夫です。

SplashScreenプラグインの公式ドキュメントで紹介されているその他の<preference>の記述は表示がうまくいくのを確認してから適宜追加してください。