Meteor モバイルアプリ(iOS/Android)のスプラッシュ画像(起動画面画像)を変更する方法

Meteor モバイルアプリのスプラッシュ画像を変更する

Meteor のモバイルアプリ(iOS/Android)起動時に表示されるスプラッシュ画像を変更するには、Meteor プロジェクトディレクトリ直下にある mobile-config.js に以下の記述を追加します。

mobile-config.js

App.launchScreens({
  // iOS
  'iphone'            : 'resources/splash/splash-320x480.png',
  'iphone_2x'         : 'resources/splash/[e-mail]',  // 640x960
  'iphone5'           : 'resources/splash/[e-mail]',  // 640x1136
  'iphone6'           : 'resources/splash/[e-mail]',  // 750x1334
  'iphone6p_portrait' : 'resources/splash/[e-mail]',  // 1242x2208
  'iphone6p_landscape': 'resources/splash/[e-mail]',  // 2208x1242
  'ipad_portrait'     : 'resources/splash/splash-768x1024.png',  
  'ipad_portrait_2x'  : 'resources/splash/[e-mail]', // 1536x2048
  'ipad_landscape'    : 'resources/splash/splash-1024x768.png',
  'ipad_landscape_2x' : 'resources/splash/[e-mail]', // 2048x1536

  // Android (9-patch PNG)
  'android_ldpi_portrait'  : 'resources/splash/splash-200x320.9.png',
  'android_ldpi_landscape' : 'resources/splash/splash-320x200.9.png',
  'android_mdpi_portrait'  : 'resources/splash/splash-320x480.9.png',
  'android_mdpi_landscape' : 'resources/splash/splash-480x320.9.png',
  'android_hdpi_portrait'  : 'resources/splash/splash-480x800.9.png',
  'android_hdpi_landscape' : 'resources/splash/splash-800x480.9.png',
  'android_xhdpi_portrait' : 'resources/splash/splash-720x1280.9.png',
  'android_xhdpi_landscape': 'resources/splash/splash-1280x720.9.png'
});

Android のスプラッシュ画像は 9-patch PNG(*.9.png) という特殊な PNG 画像になっています。
9-patch PNG の詳細については以下のサイトを参考にしてください。

• Draw 9-patch | Android Developers
  http://developer.android.com/tools/help/draw9patch.html
• [Android アプリの UI デザイン] 9-patch の作りかたのまとめと Tips ｜ Developers.IO
  http://dev.classmethod.jp/smartphone/android/android-ui-design-9-patch/

参考

• App Splash Screen Sizes · phonegap/phonegap Wiki
  https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
• Mobile Config File | Documentation - Meteor
  http://docs.meteor.com/#/full/mobileconfigjs
• App.launchScreens | Documentation - Meteor
  http://docs.meteor.com/#/full/App-launchScreens