iOSアプリに必要なアイコンを一括でリサイズするスクリプトを作った

## はじめに

iOSアプリに必要なアイコンのサイズは非常に多く、GUIの画像編集ソフトを使って手動でリサイズするのは手間が掛かります。

そのため、何番煎じかはわかりませんが、一括でリサイズするスクリプトを実装しました。

## 環境

- OS：macOS Mojave 10.14.3
- FFmpeg：4.0.2

## 画像の前提条件

- アスペクト比：1:1  
iOSアプリのアイコンは全て1:1のため
- サイズ：1024x1024以上  
最も大きいアイコンのサイズが1024x1024のため
- すでにアイコンとして完成されている  
単純に画像をリサイズするだけのスクリプトのため
- FFmpegでサポートされているフォーマット

## FFmpegのインストール

コマンドラインで画像をリサイズするために使います。

インストール方法は[こちらの記事](https://qiita.com/uhooi/items/dacd8cb6eede97b0d1b0#ffmpeg%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)をご参照ください。

## 画像リサイズスクリプトの実装

必要なツールのインストールが完了したら、スクリプトを実装します。

```bash:resize_icon_for_ios.sh
#!/bin/bash

# ----------------------------------------
# 画像をiOSアプリのアイコン向けに一括でリサイズする
# 引数：画像ファイルパス(/path/to/*.*)
# 　　　ファイル名のみ(*.*)だと「{画像ファイル名}」のフォルダが作成されない
# 出力：iOSアプリのアイコンセット(/path/to/{画像ファイル名}/*.*)
# 備考：画像は1:1で1024x1024以上が望ましい
# ----------------------------------------

# 引数の保持
readonly IMAGE_PATH=$1

function main () {
  checkArgument
  createIcon

  exit
}

function createIcon () {
  local -r FILENAME_EXT=${IMAGE_PATH##*/}
  local -r FILENAME=${FILENAME_EXT%.*}
  local -r EXT=${FILENAME_EXT##*.}
  local -r FILE_PATH=${IMAGE_PATH%/*}
  local -r ICON_PATH="${FILE_PATH}/${FILENAME}/"

  # 「{画像ファイル名}」のフォルダを作成して移動する
  if [ ! -d ${ICON_PATH} ]; then
    mkdir ${ICON_PATH}
  fi
  cd ${ICON_PATH}

  # 画像をリサイズして保存する
  # ffmpeg -i {元画像ファイルパス} -vf scale={サイズ} {出力画像ファイルパス}
  ffmpeg -i ${IMAGE_PATH} -vf scale=1024:1024 "${FILENAME}_AppStore.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=120:120 "${FILENAME}_iPhone_App@2x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=180:180 "${FILENAME}_iPhone_App@3x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=80:80 "${FILENAME}_iPhone_Spotlight@2x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=120:120 "${FILENAME}_iPhone_Spotlight@3x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=58:58 "${FILENAME}_iPhone_Settings@2x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=87:87 "${FILENAME}_iPhone_Settings@3x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=40:40 "${FILENAME}_iPhone_Notifications@2x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=60:60 "${FILENAME}_iPhone_Notifications@3x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=76:76 "${FILENAME}_iPad_App.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=152:152 "${FILENAME}_iPad_App@2x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=167:167 "${FILENAME}_iPadPro_App@2x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=40:40 "${FILENAME}_iPad_Spotlight.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=80:80 "${FILENAME}_iPad_Spotlight@2x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=29:29 "${FILENAME}_iPad_Settings.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=58:58 "${FILENAME}_iPad_Settings@2x.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=20:20 "${FILENAME}_iPad_Notifications.${EXT}"
  ffmpeg -i ${IMAGE_PATH} -vf scale=40:40 "${FILENAME}_iPad_Notifications@2x.${EXT}"
}

function checkArgument () {
  # 画像が存在しない、またはファイルでない場合、終了する
  if [ ! -e ${IMAGE_PATH} ] || [ ! -f ${IMAGE_PATH} ]; then
    echo "画像ファイルが不正です。"
    exit
  fi
}

main
```

## アイコンの一括リサイズ

スクリプトの実装が完了したら、アイコンを一括でリサイズします。

スクリプトと画像ファイルはどこに置いてもいいですが、両方ともデスクトップに置くとやりやすいです。

今回は「logo.png」という画像ファイルを対象とします。

```bash
# bash resize_icon_for_ios.sh {画像ファイルパス}
$ bash resize_icon_for_ios.sh ~/Desktop/logo.png
```

処理が正常に完了すると、画像ファイルと同じ場所に画像ファイル名のフォルダが作成されます。

<img width="98" alt="スクリーンショット 2019-07-03 2.13.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/f909d795-6e89-648b-f333-ff20e34ecf97.png">

フォルダを開くとアイコンが一括で作成されています。

<img width="611" alt="スクリーンショット_2019-07-03_2_14_53.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/996214eb-bb9b-ae3f-b5ca-eb67af306fb0.jpeg">

あとはアイコンをXcodeプロジェクトのアセットにドラッグ&ドロップすれば完了です。

<img width="1054" alt="スクリーンショット 2019-07-03 1.44.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138245/ad94bcc6-bccd-4990-d51b-a0d7f84e59c2.png">

## おわりに

これでアプリをたくさん作ったり、アイコンを頻繁に差し替えたりすることがあっても楽に乗り切れます:muscle:

シンプルなスクリプトなので、必要に応じてカスタマイズなどしてみてください！

## 参考リンク

- [Scaling – FFmpeg](https://trac.ffmpeg.org/wiki/Scaling)