Edited at

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

More than 3 years have passed since last update.

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プラグインを提供しています。


インストール

$ sudo npm install cordova-icon -g

$ sudo npm install cordova-splash -g


実行

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

$ cordova-icon

$ cordova-splash

実行結果イメージ

BB61EA82-5652-4654-8CDF-F61E8B504D75.png

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


その他

Ionic公式ブログで下記記事が出ました。(1/6/2015)

Automating Icons and Splash Screens : http://ionicframework.com/blog/automating-icons-and-splash-screens/