読者です 読者をやめる 読者になる 読者になる

PhoneGapのアイコン画像(デバイスx解像度別)をスクリプトで一括書き出し

ImageMagick PhoneGap ハイブリッドアプリ

久々に書きます。

趣味開発しているものがHTML5のMobileWebSiteなのですが、

流布させる為にハイブリッドアプリとしての実装を行なってます。(いまさら)

 

※ PhoneGap -> Cordova -> PhoneGapと、

 名前が転々としていることも最近になって知りました。

 

そんなPhoneGapでは

iOS, Androidでアイコンを解像度に応じて自由に設定できますが、

なんとも複数サイズの画像の書き出しって面倒。さしみたんぽぽ。

 

なので、ImageMagickを用いての一気書き出し用のコマンドを貼っておきます。

※同じサイズで名前が違うだけなのに、それぞれ変換かけてるジャーーン的なところも

ありますが、なんせ、開発環境で1発叩くだけのコマンドなのでそこはご愛嬌。

 

必要サイズ : 36, 48, 57, 72, 96, 114, 128, 144

 

cd {phonegap prjのルートディレクトリ}

convert -resize 36x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/android/icon-36-ldpi.png
convert -resize 48x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/android/icon-48-mdpi.png
convert -resize 72x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/android/icon-72-hdpi.png
convert -resize 96x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/android/icon-96-xhdpi.png
convert -resize 57x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/ios/icon-57.png
convert -resize 72x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/ios/icon-72.png
convert -resize 114x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/ios/icon-57-2x.png
convert -resize 144x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/ios/icon-72-2x.png
convert -resize 128x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/webos/icon-64.png
convert -resize 128x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/icon.png

※ 変換もとの画像は、144px x 144pxよりも大きいサイズにしてくださいね。

 

最終的にはビルド前のbatchコマンドとして登録すると幸せなんだろうなと思いつつ。

 

ちなみに、PhoneGap Build / Monacaあたりが、共にPhoneGapベースの

ハイブリッドアプリ開発支援ツールとしてメジャーぽいのですが、

Monacaは好きな開発環境でつくるには有償サービス使わないとで、

PhoneGap Buildも登録可能アプリ数に制限があったりだったので

PhoneGap Developerみたいなツールだけお借りして

単純にPhoneGapでローカルで実装しています。

多分、これが一番しがらみ無くて幸せ。

 

今回はここまで。