PhoneGapアプリでスプラッシュスクリーンを表示する
最近はPhoneGapを使ってクロスプラットフォームなスマートフォンアプリを開発している。
iOS / Androidアプリを起動すると、まず1枚の画像が表示される。これをスプラッシュスクリーンという。指定しないと真っ白、もしくはPhoneGapに添付される画像が表示されるのだが、これを独自のものに変える方法をメモっておく。
iOS / Xcode4
iOSの場合はPhoneGapにあまり関係ない。ネーミングルールに従ってファイルを配置するだけだ。
- Project navigatorの{app_name}/Resources/splashにpngファイルをドラッグ＆ドロップする
- ダイアログが出たら必要に応じてCopyをチェックし、OKを押してプロジェクトに追加する
FinderなどでCopyしただけでは追加されないので注意。
ファイル名と画像サイズは…
- iPhone : Default.png (320 x 480)
- iPhone(Retina) : Default@2x.png (640 x 960)
- iPad : Default~iPad.png (768 x 1024)
画像サイズが違ってもシミュレータでは普通に表示されるが、実機では表示されないので注意。
Android / Eclipse
こちらはPhoneGapの機能を使う。
- Package Explorerの{project_name}/res/drawable-hdpiにsplash.pngをドラッグ＆ドロップ
- ダイアログが出たら必要に応じてCopyをチェックし、OKを押してプロジェクトに追加する
- gen/{package_name}/R.javaにsplashという定数が追加されるのを確認
- src/{package_name}/Activity.java#onCreateにコードを追記する。
public void onCreate(Bundle savedInstance) {
super.onCreate(savedInstance) ;
// スプラッシュを表示するためのプロパティを設定
super.setIntegerProperty("splashscreen", R.drawable.splash) ;
// 第2引数に表示する時間をミリ秒で指定
super.loadUrl("file:///android_asset/index.html", 2000) ;
}まとめとLinks
「クロスプラットフォーム」というふざげた幻想をぶち壊しつつ、PhoneGapと戯れる日々を送っている。勉強会をしようという話もあるので、興味ある方は参加されたい。
PhoneGap Fan – PhoneGapの日本語コミュニティ
Assorted GARbage» Blog Archive » Adding a Splash Screen for Android using Phonegap
http://blog.assortedgarbage.com/2011/02/adding-a-splash-screen-for-android-using-phonegap/