1024x1024pxのPNG画像から各サイズのアイコン画像を作成し、一発でxcodeに登録する


デザイナーからアイコン画像の頻繁な修正→反映依頼があり、繰り返し作業が多くなってきたので作成しました。
最近のSketchやXDなどのツールは各サイズの画像を出力するところまでやってくれるようですが、ターミナルのみで画像をリサイズし一発で全てのアイコン画像をAssets.xcassetsに登録します。

##実行方法
下記スクリプトを任意のファイル名(拡張子は.shが無難だと思います)で保存し、同じディレクトリに1024x1024pxのPNG画像をファイル名をicon1024.pngとして配置します。


![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14605/5793224a-f7aa-ada7-9d92-a8465cca792e.png "image1.png")


```sh
sh makeAppIcon.sh
```

上記コマンドを実行するとAppIcon.appiconsetが生成されます。

　
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14605/13a999a8-874c-3287-f237-b6ba03f04215.png "image2.png")


AppIcon.appiconsetをフォルダごとxcodeのAssets.xcassetsにドラッグします。
(デフォルトで作成されるAppIconは削除しておきます)
これで、全てのアイコン画像が一発で設定できました。


##スクリプト
画像リサイズのスクリプトはこちらを参考にさせていただきました。
https://qiita.com/hibara/items/f5b0930dd64fbeb5be9c

```sh:makeAppIcon.sh

#/bin/sh

cd `dirname $0`

# output directory
outdir="AppIcon.appiconset"
mkdir -p $outdir

if [ -e "icon1024.png" ]; then
		BASE_FILE="icon1024.png"
else
	echo "Cannot find a  AppIcon file.\nYou will need an icon1024.png of 1024x1024px."
	exit
fi

echo "BASE_ICON: "
echo ${BASE_FILE}

#----------------------------------------------------------------------
# 20px

if [ -e "${outdir}/icon-20.png" ]; then
	echo "icon-20.png already exists. Skip the process."
else
	sips -Z 20 ${BASE_FILE} --out ${outdir}/icon-20.png
fi

if [ -e "${outdir}/icon-20@2x.png" ]; then
	echo "icon-20@2x.png already exists. Skip the process."
else
	sips -Z 40 ${BASE_FILE} --out ${outdir}/icon-20@2x.png
fi

if [ -e "${outdir}/icon-20@3x.png" ]; then
	echo "icon-20@3x.png already exists. Skip the process."
else
	sips -Z 60 ${BASE_FILE} --out ${outdir}/icon-20@3x.png
fi

#----------------------------------------------------------------------
# 29px

if [ -e "${outdir}/icon-29.png" ]; then
	echo "icon-29.png already exists. Skip the process."
else
	sips -Z 29 ${BASE_FILE} --out ${outdir}/icon-29.png
fi

if [ -e "${outdir}/icon-29@2x.png" ]; then
	echo "icon-29@2x.png already exists. Skip the process."
else
	sips -Z 58 ${BASE_FILE} --out ${outdir}/icon-29@2x.png
fi

if [ -e "${outdir}/icon-29@3x.png" ]; then
	echo "icon-29@3x.png already exists. Skip the process."
else
	sips -Z 87 ${BASE_FILE} --out ${outdir}/icon-29@3x.png
fi

#----------------------------------------------------------------------
# 40px

if [ -e "${outdir}/icon-40.png" ]; then
	echo "icon-40.png already exists. Skip the process."
else
	sips -Z 40 ${BASE_FILE} --out ${outdir}/icon-40.png
fi

if [ -e "${outdir}/icon-40@2x.png" ]; then
	echo "icon-40@2x.png already exists. Skip the process."
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 already exists. Skip the process."
else
	sips -Z 120 ${BASE_FILE} --out ${outdir}/icon-40@3x.png
fi

#----------------------------------------------------------------------
# 57px

if [ -e "${outdir}/icon-57.png" ]; then
	echo "icon-57.png already exists. Skip the process."
else
	sips -Z 57 ${BASE_FILE} --out ${outdir}/icon57.png
fi

if [ -e "${outdir}/icon57@2x.png" ]; then
	echo "icon57@2x.png already exists. Skip the process."
else
	sips -Z 114 ${BASE_FILE} --out ${outdir}/icon57@2x.png
fi

#----------------------------------------------------------------------
# 60px

if [ -e "${outdir}/icon-60@2x.png" ]; then
	echo "icon-60@2x.png already exists. Skip the process."
else
	sips -Z 120 ${BASE_FILE} --out ${outdir}/icon-60@2x.png
fi

if [ -e "${outdir}/icon-60@3x.png" ]; then
	echo "icon-60@3x.png already exists. Skip the process."
else
	sips -Z 180 ${BASE_FILE} --out ${outdir}/icon-60@3x.png
fi


#----------------------------------------------------------------------
# 76px

if [ -e "${outdir}/icon-76.png" ]; then
	echo "icon-76.png already exists. Skip the process."
else
	sips -Z 76 ${BASE_FILE} --out ${outdir}/icon-76.png
fi

if [ -e "${outdir}/icon-76@2x.png" ]; then
	echo "icon-76@2x.png already exists. Skip the process."
else
	sips -Z 152 ${BASE_FILE} --out ${outdir}/icon-76@2x.png
fi

#----------------------------------------------------------------------
# 83.5px

if [ -e "${outdir}/icon-83.5@2x.png" ]; then
	echo "icon-83.5@2x.png already exists. Skip the process."
else
	sips -Z 167 ${BASE_FILE} --out ${outdir}/icon-83.5@2x.png
fi


#----------------------------------------------------------------------
# Contents.json作成

cat <<- END_JSON > ${outdir}/Contents.json
{
  "images" : [
    {
      "filename" : "icon-20@2x.png",
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "20x20"
    },
    {
      "filename" : "icon-20@3x.png",
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "20x20"
    },
    {
      "filename" : "icon-29.png",
      "idiom" : "iphone",
      "scale" : "1x",
      "size" : "29x29"
    },
    {
      "filename" : "icon-29@2x.png",
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "29x29"
    },
    {
      "filename" : "icon-29@3x.png",
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "29x29"
    },
    {
      "filename" : "icon-40@2x.png",
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "40x40"
    },
    {
      "filename" : "icon-40@3x.png",
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "40x40"
    },
    {
      "filename" : "icon57.png",
      "idiom" : "iphone",
      "scale" : "1x",
      "size" : "57x57"
    },
    {
      "filename" : "icon57@2x.png",
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "57x57"
    },
    {
      "filename" : "icon-60@2x.png",
      "idiom" : "iphone",
      "scale" : "2x",
      "size" : "60x60"
    },
    {
      "filename" : "icon-60@3x.png",
      "idiom" : "iphone",
      "scale" : "3x",
      "size" : "60x60"
    },
    {
      "filename" : "icon-20.png",
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "20x20"
    },
    {
      "filename" : "icon-20@2x.png",
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "20x20"
    },
    {
      "filename" : "icon-29.png",
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "29x29"
    },
    {
      "filename" : "icon-29@2x.png",
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "29x29"
    },
    {
      "filename" : "icon-40.png",
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "40x40"
    },
    {
      "filename" : "icon-40@2x.png",
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "40x40"
    },
    {
      "filename" : "icon-76.png",
      "idiom" : "ipad",
      "scale" : "1x",
      "size" : "76x76"
    },
    {
      "filename" : "icon-76@2x.png",
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "76x76"
    },
    {
      "filename" : "icon-83.5@2x.png",
      "idiom" : "ipad",
      "scale" : "2x",
      "size" : "83.5x83.5"
    },
    {
      "filename" : "icon1024.png",
      "idiom" : "ios-marketing",
      "scale" : "1x",
      "size" : "1024x1024"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

END_JSON

cp icon1024.png ${outdir}/icon1024.png

```

　
スクリプトはこちらにも置いています。
https://github.com/maimaiworks/xcode-appicon

繰り返しの単純作業を減らして、生産性を上げていきたいですね。