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
http://www.phonegap.com/

PhoneGap Fan – PhoneGapの日本語コミュニティ
http://phonegap-fan.com/

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/

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です