4. Ionicでアイコン、スプラッシュスクリーン編 - 新年だし、ハイブリッドスマートフォンアプリ開発

Mac OSX環境で、スマートフォンアプリ開発初心者が、Cordova(PhoneGap)と、AngularJSベースのIonic Frameworkを使い、JavaScriptでiPhone/ Android両対応のネイティブ+HTML5 ハイブリッドモバイルアプリを開発し、iTunes App StoreおよびGoogle Playで公開するまでを何稿かに分けてカバーします。

1. Cordova(PhoneGap)準備、iOSエミュレータ起動まで
2. Ionic Framework準備、iOSエミュレータ起動まで
3. Ionic Creator Beta入門
4. Ionicでアイコン、スプラッシュスクリーン
5. IonicでAndroid開発準備
6. -随時追加予定-

アイコンとスプラッシュスクリーンを設定する

下記のポストに沿って進めます。最新(14年12月時点)のCordovaでの、アイコンとスプラッシュスクリーンの変更方法が解説されています。icon, splashタグの新設で手軽になったようです。

New Icons and Splash Screen Help for Cordova/PhoneGap Apps : Devgirl's Weblog : http://devgirl.org/2014/09/29/new-icons-and-splash-screen-help-for-cordovaphonegap/

####アイコンを設定する

img/フォルダ直下にicon.pngを準備します。

<preference>タグ直前に下記タグを挿入します。

config.xml

<icon src="img/icon.png" platform="ios”/>

####スプラッシュスクリーンを設定する

img/フォルダ直下にsplash.pngを準備します。

<preference>タグ直前に下記タグを挿入します。

config.xml

<platform name="ios">
  <splash src="img/splash.png" width="320" height="480"/>
</platform>

####ビルドし、動作を確認
下記コマンドでiPhone Emulatorを起動し、アイコンが差し替わったことを確認できます。

$ ionic build ios
$ ionic emulate ios

ただし、このタグではplatform/ios/<app name>/Resources/icons および /splashにファイルが生成される。しかし、splashはDefault-iphoneのみ生成され他は差し替わっていませんでした。

####様々な解像度の画像が必要

下記にある通り、画像はそれぞれ必要なサイズを準備する必要があります。
アプリ開発に必要な画像サイズ【iPhone6対応】 | Sawalog : http://www.sawadaru.com/blog/?p=1086

####楽に画像を準備する
AlexDisler氏が、アイコン、スプラッシュスクリーンそれぞれを、十分な解像度の画像から自動生成するnode.jsプラグインを提供しています。

• AlexDisler/cordova-icon : https://github.com/AlexDisler/cordova-icon
• AlexDisler/cordova-splash : https://github.com/AlexDisler/cordova-splash

#####インストール

$ sudo npm install cordova-icon -g
$ sudo npm install cordova-splash -g

#####実行

rootにicon.png, splash.png(2208 x 2208)を格納した上で下記を実行します。

$ cordova-icon
$ cordova-splash

実行結果イメージ

設定により、ビルド時の自動実行化も可能です。詳細は著者Githubを参照。

その他

Ionic公式ブログで下記記事が出ました。(1/6/2015)
Automating Icons and Splash Screens : http://ionicframework.com/blog/automating-icons-and-splash-screens/