iOSアプリのアイコンをffmpegコマンドを使ってアルファチャンネルなしで各サイズを吐き出す

はじめに

iosアプリのアイコンでは異なるサイズの画像をたくさん作る必要があります。
でこれがめちゃくちゃめんどくさいので、そのためのツールが色々あるのでまずはこれらを試してみることをお勧めします。

一番簡単にWebアプリ上できるのがこちらで
appicon

Macのアプリでできるのがこちらです
Image2icon

遭遇した問題 〜 アルファチャンネルが追加されてしまう 〜

今回自分はillustratorでアイコンを描き画像としてでexportしました。
そして上記のツールでアイコンを作成して、App Store Connectにアップロードしようとすると、以下のようなエラーが出ました。

Error ITMS-90717: "Invalid App Store Icon. The App Store Icon in the asset catalog in 'YourApp.app' can't be transparent nor contain an alpha channel."

アルファチャンネルが含まれているから使えないよーとのことですね。
なるほど書き出したアイコンにアルファチャンネルが含まれているのねーということで確認してみると、含まれていません。

色々試してみたのですが、どのツールを使っても書き出し後の画像にはアルファチャンネルが含まれてしまいました。

解決法 〜 ffmpegでリサイズする 〜

事前に1024px x 1024pxの画像についてMacのプレビューアプリなど使ってアルファチャンネルを除去します。
ファイル > 書き出す でアルファチャンネルのチェックを外して保存します。

用意した画像にffmpegを使ったshell scriptを使い、異なるサイズの画像を一気に作成します。

multi_size_image_export.sh

# Export ios app icons by ffmpeg scale command
# usage: sh export_ios_icons.sh {path_to_your_img}
# example: sh export_ios_icons.sh ./app_icon.png

# sizes of images
# you can get other size images by editing thisarray
size=(20 40 60 29 58 87 80 120 180 76 152 167 1024)
for i in "${size[@]}"
do
   : 
    ffmpeg -i $1 -vf scale=$i:$i output_$ix$i.png
done

gist

作りたい画像サイズを配列で保持しておいて、
ここでリサイズした画像を生成します。

ffmpeg -i $1 -vf scale=$i:$i output_$ix$i.png
# ex) ffmpeg -i $1 -vf scale=1024:1024 output_1024x1024.png

実行時はこんな風にします。

sh multi_size_image_export.sh icon.png

実行すると以下のように各画像サイズのアイコンが出力され、アルファチャンネルがない状態も見事キープされていますね！

めでたしめでたし

(あとで気づいたがそもそもjpgでやれば、こんな問題全く起きなかったかも...)