MonacaでAndroid用のスプラッシュ画面を表示したい!!

      2016/03/09

スプラッシュ画面とは?

アプリを起動するときに企業名やアプリ名、ロゴが一瞬表示されることがありますが、その画面はスプラッシュ画面と呼ばれています。

アートボード 1

プログレスバーの様に起動にかかる待ち時間の体感速度を速めてくれたり、企業名・アプリ名の宣伝にもつながります。
iOSアプリではリリースに必須となっておりますが、Android端末では基本的にスプラッシュ画面と言う概念はありません。
もちろん、設定次第によってはAndroidでもスプラッシュ画面を表示させることが出来ますし、Monacaのアプリ設定では元から表示させる設定となっています。

 

MonacaでのAndroidスプラッシュ画面設定

そこでMonaca(クラウド)のAndroidアプリ設定を見てみます。

monaca-android-splash

2016年2月現在では、ldpi~xxxhdpiまでの解像度に合わせ、計6サイズのファイルをアップするようになってます。
上記の画像はデフォルトでセットされているものです。 一般的なサイズは以下のような感じ。

  • ldpi・・・240x320px
  • mdpi・・・360×640px
  • hdpi・・・540x920px
  • xhdpi・・・720x1280px
  • xxhdpi・・・1080x1920px
  • xxxhdpi・・・1440x2560px

しかし!Monacaがデフォルトで用意している画像は横長で小さいのはなんで? という疑問が。。。
それは9-patch形式のPNG(*.9.png)を設定しているからです。Androidの開発をしていない私には馴染みのない画像形式ですが、これが便利なんです!

9-patch形式のPNGって何??

iOS端末は数えられる程度なので、その端末の画面サイズに合わせて画像を用意すればいいのですが、Androidに関しては同じ解像度のものであっても沢山の端末・画面サイズがあります。
そのため、解像度ごとで一つの画像を用意しても、画面サイズによってアスペクト比が変更されてしまい、変に引き伸ばされたものが表示されてしまいます。

アートボード 2

そこで便利なのが9-patch!
普通のPNG画像と何が違うかと言うと…Monacaでデフォルトで用意している画像を見てみましょう。

アートボード 3

右側の拡大画像を見ていただくと分かりますが、上下左右に黒い点(線)が入っています。
この黒い点で画像を引き伸ばす範囲を指定しているのです。ちなみに白い枠線になっている所は透過です。つまり、普通のPNG画像に上下左右1pxずつ透過余白を作り黒点(線)を描いているだけのことです。

もちろんPhotoshopでもIllustratorでも9-patchは作ることが出来ます。
(PNGを書き出した後に拡張子を[*.9.png]に変更してください。)

9-patch形式のPNGを作ってみよう!!

と言うわけで下記サイトを参考に9-patchを作ってみようと思いました。

http://dev.classmethod.jp/smartphone/android/android-ui-design-9-patch/

が。。。
結構複雑だし。。。
Android Studioとか使い慣れてないし。。。
ただロゴを表示出来ればいいだけなのに。。。
ってことで、楽する方向へチェンジ! Monacaのデフォルトで入っているスプラッシュ画像を元に、スプラッシュ画像作成用のPSDを作りました!

psd

良かったらダウンロードして使ってみてください。

  • 現在sampleスマートオブジェクトが配置してある場所に自作ロゴを配置し直してください。
  • ロゴ背景には柄やグラデーションは使わない方がいいです。
  • アートボードでpng書き出しをして、拡張子を[*.9.png]にすれば完成です。 
  • 簡単なつくりなので、不具合あるかもです。参考までにご使用ください。
  • アートボードを使用しているのでPhotoshopバージョンはCCでないと使えません。

ちなみにMonacaデバッガーではAndroidのスプラッシュ画面は表示されないので、デバッグビルドにて実機もしくはエミュレーターでご確認ください。
とは言ってもAndroidアプリを作るからには、ハイブリッドアプリとは言えどもAndroid Studioの簡単な使い方くらい学んで行こうかと思います!!

 - monaca, アプリ開発 , ,