ImageMagickとAutomator を使ってPNGのアルファチャネルを一括除去する方法

What?

このnoteではImageMagickというコマンドライン向け画像加工ツールと、AutomatorというMac向けオートメーションツールを組み合わせて、png画像からアルファチャネル（png画像内のピクセルの透明度を司るレイヤーのようなもの）を取り除く方法を紹介します

Why?

iOSアプリをApp Storeに提出する際に、Images can't contain alpha channel or transparency  というエラーで怒られるケースがあります。これは「画像にアルファチャネルとか透明が入ってたらあきまへんで。」という意味です。iOSでは、アイコン画像が透けている状態を確実に防ぐために、審査の手前の段階でそういったアプリが提出されないように機械的にチェックを行なっています。
普通にFigmaなどのツールでアイコンを書き出すと、当たり前のようにアルファチャネルがついていて、書き出し時にそれをなくすオプションも特に用意されていません。
一番簡単な除去方法はMacの「プレビュー」というツールで画像を複製し、保存時に「アルファ」のオプションを外すことです。

別名で保存するときにアルファのチェックを外すとアルファチャンネルが消え、App Store提出時のエラーを回避することができる

しかし、特にiOSアプリのアイコンは何種類も異なる解像度のアセットを大量に用意しないといけないということもあり、それらを全部開いて別名で保存するのは大変ですし、やり忘れやミスも起こりやすいです。

そこで、コマンドラインで画像を加工できるツールImageMagickを使って複数の画像からアルファチャネルを取り除く方法を紹介します。

How?

下記の記事に従い、ImageMagickをインストール

https://tektektech.com/mac-imagemagick-install/

Automatorを開き、新規「クイックアクション」を作成

Automator を下記のように設定

• 「ワークフローが受け取る現在の項目」に「イメージファイル」、「検索対象」に「すべてのアプリケーション」を設定。

• 「シェルスクリプトを実行」のアクションを追加し、入力の引き渡し方法に「引数として」を設定。

• シェルは/bin/zshを選択。
  下記のシェルスクリプトを記入。

/usr/local/bin/mogrify -alpha off "$@"

ざっくりとした意味としては、「引数として受け取った画像を全て（"$@"の部分）アルファチャネルをオフにして、同じ名前で上書き保存」といったところになります。

mogrifyはImageMagickインストール後に使えるコマンドで、画像を書き換える時に使います。画像を書き換えずに別名で保存する場合は、convertというオプションを使いますが、動作確認はしていないので、各自改造して使ってみてください。
Convertは画像を1枚ずつ加工して別名で保存しますが、mogrifyは引数として複数の画像を受け取り、一括で変換する事ができます。

うまくやるコツとしては、いきなりAutomatorで実行せずに、下記のようなコマンドをTerminalで実行して、動作を確認しながら最終的にAutomatorで実行するのがおすすめです。

上書きする場合

mogrify app_icon.png -alpha off

別名で保存する場合。

convert app_icon.png -alpha off output.png

動作確認ができたら、先ほどのAutomatorを保存します。

そうすると、画像を右クリックした際にクイックアクションとして、先ほどのオートメーションが表示されます。

もしうまく動作していれば、Finder上で複数の画像ファイルを選択して一気にアルファチャネルを除去することができます。

プレビューアプリで別名保存する際に「アルファ」の選択肢がなくなっていれば成功です。

是非お試しください。