104
103

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

MacOSXシェルスクリプトだけでiOSアプリ用アイコン全サイズを作成する(iOS9, iPad Pro対応)

Last updated at Posted at 2014-08-19

##追記

  • 2015/12/26 :
    512x512でアイコンを生成したとき、そのままスクリプトを抜けてしまっていた不具合を修正。また、ドキュメントの方の情報ではなく、Xcode上の表記からスクリプト含めてまとめ直してみました。
  • 2015/10/24 :
    iOS9、iPad Proの解像度に対応しました。また、分かりやすいように出力するファイル名の規則を変えてみました。
  • 2015/04/05 :
    ご指摘があり、180サイズが正しくリサイズされていなかった箇所を修正しました。
  • 2015/03/18 :
    iPhone6 Plus相当(@3x)を追加しました。

※ちなみに、Androidもついでにまとめて出力したい、という方は以下の記事を参照ください。
MacOSXのシェルスクリプトだけで、iOS, Android両アプリアイコンの全サイズを生成する
http://qiita.com/hibara/items/c25054f336a95d58f591

1024x1024が全デバイスで必須になった。

iPhone 6 Plusや、iPad Proの登場で、さらにアイコンの解像度がカオス化しました。
さらに、iPhone6が出たときにiTunes用のアートワークとして使う1024x1024だけを「必須」としていましたが、今回からは全デバイスで「必須」となったようです。

このスクリプトでは、1024x1024がなくとも、512x512があれば動作するようになっていますが、512x512だけですと、単純に2倍、無理やり拡大して1024x1024を用意することになります。やはり可能なら、icon_1024x1024.pngを用意しておいた方が、各アイコンの仕上がりもキレイになります。

僕の経験上、一つのファイルからすべてをリサイズすると、特に小さくなったとき、キレイにならないんですよね。Windowsのアイコン仕様では、16x16まであるのですが、ここまで小さいと、ドット単位での修正は必須です。

なので、iOSアプリでも、理想は各サイズ毎に、多少の手直しは必要かな、と考えており、すでにあるファイルは処理せずスキップするようにしています。もしスクリプトで、再度一括で作り直したいときは、各サイズアイコンをいったん全削除してから行ってみてください。

ドキュメントとXcode上でつくるアイコンのアセット表記が異なる

そしてようやくスクリプトを書き始めるのですが、ふとドキュメントの表記と、Xcode上の表記がが異なっていて戸惑う。。。

公式のAppleドキュメントは以下にあります。↓
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html

よく見れば、カラム「Spotlight search results icon (recommended)」にあるiPadのサイズが、実際のXcode上でつくるアイコンアセットの表記と異なります。

AppIconList.png

そこで自分でも整理するため、Xcodeの方を見ながら表にまとめ直した

使用箇所 大きさ 倍率 サイズ ファイル名 優先度 デバイス1 デバイス2
iPhone Spotlight - iOS 5,6 / iPhone Settings iOS 5-9 29pt @1x 29x29 icon-small.png
@2x 58x58 icon-small@2x.png 推奨 iPhone 6s,iPhone 6, andiPhone 5(@2x) iPhone 4s(@2x)
@3x 87x87 icon-small@3x.png 推奨 iPhone 6sPlus andiPhone 6Plus (@3x)
iPhone Spotlight iOS 7-9 40pt @2x 80x80 icon-40@2x.png 推奨 iPhone 5(@2x) iPhone 4s(@2x)
@3x 120x120 icon-40@3x.png 推奨 iPhone 6s,iPhone 6(@2x)
iPhone App iOS 5,6 57pt @1x 57x57 icon.png
@2x 114x114 icon@2x.png
iPhone App iOS 7-9 60pt @2x 120x120 icon-60@2x.png 必須 iPhone 6s,iPhone 6, andiPhone 5(@2x) iPhone 4s(@2x)
@3x 180x180 icon-60@3x.png 必須 iPhone 6sPlus andiPhone 6Plus (@3x) Spotlight search results icon
iPad Settings iOS 5-9 29pt @1x 29x29 icon-small.png 推奨 iPad 2 andiPad mini(@1x)
@2x 58x58 icon-small@2x.png 推奨 iPad andiPad mini(@2x) iPad Pro(@2x)
iPad Spotlight iOS 7-9 40pt @1x 40x40 icon-40.png 推奨 iPad 2 andiPad mini(@1x) ※1
@2x 80x80 icon-40@2x.png 推奨 iPad andiPad mini(@2x) ※2 iPad Pro(@2x) ※3
iPad Spotlight iOS 5,6 50pt @1x 50x50 icon-50.png
@2x 100x100 icon-50@2x.png
iPad App iOS 5,6 72pt @1x 72x72 icon-72.png
@2x 144x144 icon-72@2x.png
iPad App iOS 7-9 76pt @1x 76x76 icon-76.png 必須 iPad 2 andiPad mini(@1x)
@2x 152x152 icon-76@2x.png 必須 iPad andiPad mini(@2x)
iPad Pro App iOS 9 83.5pt @2x 167x167 icon-83.5@2x.png 必須 iPad Pro(@2x)
Unassigned 60pt 60x60 icon_60x60.png
App icon for the App Store 1024pt 1024x1024 icon_1024x1024.png 必須 全デバイス
  • ※1. Spotlight アイコンサイズは、ドキュメントでは「120x120」となっており、iPhone 6s, iPhone 6, iPhone 5(@2x)と同等。
  • ※2 , ※3:Spotlight アイコンサイズは、ドキュメントでは「180x180」となっており、iPhone 6s Plus, iPhone 6 Plus (@3x)と同等。

どういったサイズのアイコンを用意するか

けっきょく公式ドキュメントではなく、実際に作業するXcode上の表記を参照することにしました。

揃え出したらキリがありませんが、基本的には「必須」項目にあるアイコンを生成すると良いでしょう。

スクリプトでは一応、全アイコンサイズを出力するようになっています。コメントアウトでどこで使用するアイコンかは書き込んでありますので、必要に応じて書き換えてください。

シェルスクリプトの「sips」コマンドを使う

とはいえ、これだけの量を全部手動でやるにも限界があります。

そこで調べてみると、MacOSXの標準コマンドだけで出来るということが判明。

ならば、と、一種類のサイズのPNGファイルから、リサイズし、Xcode用に必要なすべてのサイズに変換して、ファイルとして出力するスクリプトを書いてみました。

MacOSXではデフォルトで、「sips」という画像処理のコマンドが用意されています。
sipsとは、scriptable image processing system の略だそうです。1へぇ。
https://developer.apple.com/library/mac/documentation/Darwin/Reference/ManPages/man1/sips.1.html

ちなみに、使う前に、その書いたスクリプトファイルに実行権限を与えておくことを忘れずに。

$ chmod a+x /Users/mhibara/Desktop/create_ios_icons.command

ってな感じで。

なお、以下のソースファイルを含む、サンプルアイコンはGitHubに上げてあるので、ご自由にお試しください。
octcat.png https://github.com/hibara/create-ios-all-icons-shellscript

#!/bin/sh
#このシェルスクリプトを実行した場所をカレントディレクトリにする(お約束)
cd `dirname $0`

# 出力ディレクトリの生成
outdir="ios"
mkdir -p $outdir

#----------------------------------------------------------------------
# iTunes Artwork アイコン
#----------------------------------------------------------------------

# iPhone6, iPhone6 Plus登場以降、全デバイスで1024x1024が必須となりました。↓
# https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
# ですので、このスクリプトでは最低でも、512x512サイズのアイコン画像がないと処理を終了するように修正しました。

# App icon for the App Store (すべてのアプリで必須)
if [ -e "icon_1024x1024.png" ]; then
	if [ -e "icon_512x512.png" ]; then
		echo "icon_512x512.png はすでに存在しています。処理をスキップします。"
		BASE_FILE="icon_1024x1024.png"
	else
		sips -Z 512 icon_1024x1024.png --out icon_512x512.png
		BASE_FILE="icon_1024x1024.png"
	fi
fi

if [ -e "icon_512x512.png" ]; then
	if [ -e "icon_1024x1024.png" ]; then
		echo "icon_1024x1024.png はすでに存在しています。処理をスキップします。"
	else
		sips -Z 1024 icon_1024x1024.png --out icon_512x512.png
		BASE_FILE="icon_512x512.png"
	fi
else
	echo "iTunes Artworkに設定できる適当なサイズが見つかりません。\niPhone6, iPhone6 Plus登場以降から、1024x1024が必須となりました。"
	exit
fi

#----------------------------------------------------------------------
# アプリアイコン(ファイル名)
#----------------------------------------------------------------------

echo "BASE_ICON: "
echo ${BASE_FILE}

# iPhone Spotlight - iOS 5,6 推奨
#        Settings - iOS 5-9 推奨
if [ -e "${outdir}/icon-small.png" ]; then
	echo "icon-small.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 29 ${BASE_FILE} --out ${outdir}/icon-small.png
fi

# iPhone 6s,iPhone 6, and iPhone 5(@2x) 推奨
# iPhone 4s(@2x) 推奨
if [ -e "${outdir}/icon-small@2x.png" ]; then
	echo "icon-small@2x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 58 ${BASE_FILE} --out ${outdir}/icon-small@2x.png
fi

# iPhone 6s Plus and iPhone 6 Plus (@3x) 推奨
if [ -e "${outdir}/icon-small@3x.png" ]; then
	echo "icon-small@3x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 87 ${BASE_FILE} --out ${outdir}/icon-small@3x.png
fi

#----------------------------------------------------------------------
# iPhone Spotlight iOS 7-9

# iPhone 5(@2x) 推奨
# iPhone 4s(@2x) 推奨
if [ -e "${outdir}/icon-40@2x.png" ]; then
	echo "icon-40@2x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 80 ${BASE_FILE} --out ${outdir}/icon-40@2x.png
fi

# iPhone 6s, iPhone 6(@2x) 推奨
if [ -e "${outdir}/icon-40@3x.png" ]; then
	echo "icon-40@3x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 120 ${BASE_FILE} --out ${outdir}/icon-40@3x.png
fi

# iPhone App iOS 5,6
if [ -e "${outdir}/icon.png" ]; then
	echo "icon.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 57 ${BASE_FILE} --out ${outdir}/icon.png
fi

if [ -e "${outdir}/icon@2x.png" ]; then
	echo "icon@2x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 114 ${BASE_FILE} --out ${outdir}/icon@2x.png
fi

#----------------------------------------------------------------------
#iPhone App iOS 7-9

# iPhone 6s,iPhone 6, and iPhone 5(@2x) 必須
# iPhone 4s(@2x) 必須
if [ -e "${outdir}/icon-60@2x.png" ]; then
	echo "icon-60@2x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 120 ${BASE_FILE} --out ${outdir}/icon-60@2x.png
fi

# iPhone 6s Plus and iPhone 6 Plus (@3x) 必須
# iPhone 6s Plus and iPhone 6 Plus (@3x) Spotlight search results icon 推奨
if [ -e "${outdir}/icon-60@3x.png" ]; then
	echo "icon-60@3x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 180 ${BASE_FILE} --out ${outdir}/icon-60@3x.png
fi

#----------------------------------------------------------------------
# iPad Settings iOS 5-9

# iPad 2 and iPad mini(@1x) 推奨
if [ -e "${outdir}/icon-small.png" ]; then
	echo "icon-small.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 29 ${BASE_FILE} --out ${outdir}/icon-small.png
fi

# iPad and iPad mini(@2x) 推奨
# iPad Pro(@2x) 推奨
if [ -e "${outdir}/icon-small@2x.png" ]; then
	echo "icon-small@2x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 58 ${BASE_FILE} --out ${outdir}/icon-small@2x.png
fi

#----------------------------------------------------------------------
# iPad Spotlight iOS 7-9

# iPad 2 and iPad mini(@1x) 推奨 ※ただしドキュメントでは120x120サイズとなっている。
if [ -e "${outdir}/icon-40.png" ]; then
	echo "icon-40.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 40 ${BASE_FILE} --out ${outdir}/icon-40.png
fi

# iPad and iPad mini(@2x) 推奨 ※ただしドキュメントでは180x180サイズとなっている。
# iPad Pro(@2x) 推奨 ※ただしドキュメントでは180x180サイズとなっている。
if [ -e "${outdir}/icon-40@2x.png" ]; then
	echo "icon-40@2x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 80 ${BASE_FILE} --out ${outdir}/icon-40@2x.png
fi

#----------------------------------------------------------------------
# iPad Spotlight iOS 5,6

if [ -e "${outdir}/icon-50.png" ]; then
	echo "icon-50.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 50 ${BASE_FILE} --out ${outdir}/icon-50.png
fi

if [ -e "${outdir}/icon-50@2x.png" ]; then
	echo "icon-50@2x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 100 ${BASE_FILE} --out ${outdir}/icon-50.png
fi

#----------------------------------------------------------------------
# iPad App iOS 5,6

if [ -e "${outdir}/icon-72.png" ]; then
	echo "icon-72.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 72 ${BASE_FILE} --out ${outdir}/icon-72.png
fi

if [ -e "${outdir}/icon-72@2x.png" ]; then
	echo "icon-72@2x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 144 ${BASE_FILE} --out ${outdir}/icon-72@2x.png
fi

#----------------------------------------------------------------------
# iPad App iOS 7-9

# iPad 2 and iPad mini(@1x) 必須
if [ -e "${outdir}/icon-76.png" ]; then
	echo "icon-76.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 76 ${BASE_FILE} --out ${outdir}/icon-76.png
fi

# iPad and iPad mini(@2x) 必須
if [ -e "${outdir}/icon-76@2x.png" ]; then
	echo "icon-76@2x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 152 ${BASE_FILE} --out ${outdir}/icon-76@2x.png
fi

#----------------------------------------------------------------------
# iPad Pro App iOS 9

# iPad Pro(@2x) 必須
if [ -e "${outdir}/icon-83.5@2x.png" ]; then
	echo "icon-83.5@2x.png はすでに存在しています。処理をスキップします。"
else
	sips -Z 167 ${BASE_FILE} --out ${outdir}/icon-83.5@2x.png
fi

104
103
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
104
103

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?