ImageMagickを使ったアプリアイコンの一括出力が便利すぎた件

なんちゅー便利なシェルスクリプトを作っているお方がおるのだ。

手順はこちらのリンクを踏めばわかるのだけれどもImageMagickをインストールしていなくてconvertコマンドが見つからなかった。その手順も備忘録として残しておく。

iOSアプリ申請時に必要なアプリアイコン一覧

種別 サイズ ファイル名
iPhoneアプリアイコン@2x 120 x 120 Icon-60@2x.png
iPhoneアプリアイコン@3x 180 x 180 Icon-60@3x.png
iPadアプリアイコン 76 x 76 Icon-76.png
iPadアプリアイコン@2x 152 x 152 Icon-76@2x.png
iPad Proアプリアイコン@2x 167 x 167 Icon-83.5@2x.png
iPad設定アイコン 29 x 29 Icon-Small.png
iPhone&iPad設定アイコン@2x 58 x 58 Icon-Small@2x.png
iPhone設定アイコン@3x 87 x 87 Icon-Small@3x.png
iPadスポットライトアイコン 40 x 40 Icon-Small-40.png
iPhone&iPadスポットライトアイコン@2x 80 x 80 Icon-Small-40@2x.png
iPhoneスポットライトアイコン@3x 120 x 120 Icon-Small-40@3x.png
iPadAppStoreアイコン 512 x 512 iTunesArtwork
iPadAppStoreアイコン@2x 1024 x 1024 iTunesArtwork@2x
iPhone通知アイコン (iOS 10以降) 40 x 40 iPhone-20@2x.png
iPhone通知アイコン (iOS 10以降) 60 x 60 iPhone-20@3x.png
iPad通知アイコン (iOS 10以降) 20 x 20 iPad-20@1x.png
iPad通知アイコン (iOS 10以降) 40 x 40 iPad-20@2x.png

ちなみにアプリアイコンは角丸で書き出す必要がない。アプリ側で勝手に角丸にしてくれる。

iOSアプリアイコンを一括で書き出すには?

アプリアイコンを一括で書き出すためにスクリプトを使う。一番大きいサイズである1024×1024のサイズを用意しておけば簡単にリサイズしてくれる。

ImageMagickをインストール

まずはスクリプトを叩くためにImageMagickをインストールする必要がある。コマンドラインを立ち上げて以下のコマンドを叩く。ちなみに環境はMacです。

brew install imagemagick

続いてスクリプトファイルを作成する

iosappicon-gen.sh

mkdir appiconset

convert $1 -resize 40x40 appiconset/iPhone-Notifications-7-10-20pt@2x.png
convert $1 -resize 60x60 appiconset/iPhone-Notifications-7-10-20pt@3x.png
convert $1 -resize 29x29 appiconset/iPhone-Settings-5-10-29pt.png
convert $1 -resize 58x58 appiconset/iPhone-Settings-5-10-29pt@2x.png
convert $1 -resize 87x87 appiconset/iPhone-Settings-5-10-29pt@3x.png
convert $1 -resize 80x80 appiconset/iPhone-Spotlight-7-10-40pt@2x.png
convert $1 -resize 120x120 appiconset/iPhone-Spotlight-7-10-40pt@3x.png
convert $1 -resize 120x120 appiconset/iPhone-App-7-10-60pt@2x.png
convert $1 -resize 180x180 appiconset/iPhone-App-7-10-60pt@3x.png
convert $1 -resize 20x20 appiconset/iPad-Notifications-7-10-20pt.png
convert $1 -resize 40x40 appiconset/iPad-Notifications-7-10-20pt@2x.png
convert $1 -resize 29x29 appiconset/iPad-Settings-5-10-29pt.png
convert $1 -resize 58x58 appiconset/iPad-Settings-5-10-29pt@2x.png
convert $1 -resize 40x40 appiconset/iPad-Spotlight-7-10-40pt.png
convert $1 -resize 80x80 appiconset/iPad-Spotlight-7-10-40pt@2x.png
convert $1 -resize 76x76 appiconset/iPad-App-7-10-76pt.png
convert $1 -resize 152x152 appiconset/iPad-App-7-10-76pt@2x.png
convert $1 -resize 167x167 appiconset/iPad-Pro-App-9-10-835pt@2x.png

どうも書き出しサイズがサイトによってバラバラだったりするのでXcode内の表を見つつ書き出す。watch用とかCarPlay用とかもあるっぽいけど今回は割愛。

実行権限を付与して実行する

$ chmod u+x iosappicon-gen.sh
$ ./iosappicon-gen.sh hoge(1024×1024のファイル).png

アイコンの名前の統一規格ってあるのかな、、、

こちらのブログのお方の情報が結構新しいのでこの名前とサイズでの書き出し用のファイルも用意しておく。

mkdir appiconset

convert $1 -resize 120x120 appiconset/Icon-60@2x.png
convert $1 -resize 180x180 appiconset/Icon-60@3x.png
convert $1 -resize 76x76 appiconset/Icon-76@1x.png
convert $1 -resize 152x152 appiconset/Icon-76@2x.png
convert $1 -resize 167x167 appiconset/Icon-83.5@2x.png
convert $1 -resize 29x29 appiconset/Icon-29@1x.png
convert $1 -resize 58x58 appiconset/Icon-29@2x.png
convert $1 -resize 87x87 appiconset/Icon-29@3x.png
convert $1 -resize 40x40 appiconset/Icon-Small-40@1x.png
convert $1 -resize 80x80 appiconset/Icon-Small-40@2x.png
convert $1 -resize 120x120 appiconset/Icon-Small-40@3x.png
convert $1 -resize 40x40 appiconset/iPhone-20@2x.png
convert $1 -resize 60x60 appiconset/iPhone-20@3x.png
convert $1 -resize 20x20 appiconset/iPad-20@1x.png
convert $1 -resize 40x40 appiconset/iPad-20@2x.png

Contents.jsonファイル

{
"images" : [
{
"size" : "20x20",
"idiom" : "iphone",
"filename" : "iPhone-20@2x.png",
"scale" : "2x"
},
{
"size" : "20x20",
"idiom" : "iphone",
"filename" : "iPhone-20@3x.png",
"scale" : "3x"
},
{
"size" : "29x29",
"idiom" : "iphone",
"filename" : "Icon-29@2x.png",
"scale" : "2x"
},
{
"size" : "29x29",
"idiom" : "iphone",
"filename" : "Icon-29@3x.png",
"scale" : "3x"
},
{
"size" : "40x40",
"idiom" : "iphone",
"filename" : "Icon-Small-40@2x.png",
"scale" : "2x"
},
{
"size" : "40x40",
"idiom" : "iphone",
"filename" : "Icon-Small-40@3x.png",
"scale" : "3x"
},
{
"size" : "60x60",
"idiom" : "iphone",
"filename" : "Icon-60@2x.png",
"scale" : "2x"
},
{
"size" : "60x60",
"idiom" : "iphone",
"filename" : "Icon-60@3x.png",
"scale" : "3x"
},
{
"size" : "20x20",
"idiom" : "ipad",
"filename" : "iPad-20@1x.png",
"scale" : "1x"
},
{
"size" : "20x20",
"idiom" : "ipad",
"filename" : "iPad-20@2x.png",
"scale" : "2x"
},
{
"size" : "29x29",
"idiom" : "ipad",
"filename" : "Icon-29@1x.png",
"scale" : "1x"
},
{
"size" : "29x29",
"idiom" : "ipad",
"filename" : "Icon-29@2x.png",
"scale" : "2x"
},
{
"size" : "40x40",
"idiom" : "ipad",
"filename" : "Icon-Small-40@1x.png",
"scale" : "1x"
},
{
"size" : "40x40",
"idiom" : "ipad",
"filename" : "Icon-Small-40@2x.png",
"scale" : "2x"
},
{
"size" : "76x76",
"idiom" : "ipad",
"filename" : "Icon-76@1x.png",
"scale" : "1x"
},
{
"size" : "76x76",
"idiom" : "ipad",
"filename" : "Icon-76@2x.png",
"scale" : "2x"
},
{
"size" : "83.5x83.5",
"idiom" : "ipad",
"filename" : "Icon-83.5@2x.png",
"scale" : "2x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

この記事が気に入ったら
いいね ! しよう