2012年11月30日金曜日

iOSの起動画面とかスクリーンショットをImageMagickでトリミングする

起動画面 - iOS 6まで

起動画面にアプリのスクリーンショットを使う場合、iPadは仕様によりステータスバーの部分を取り除かなければならない。トリミングは-chopを使って次のようにすればできる。

$ convert -chop 0x20 Default-Landscape.png out/Default-Landscape.png
$ convert -chop 0x20 Default-Portrait.png out/Default-Portrait.png

Retina Displayの場合。

$ convert -chop 0x40 Default-Landscape@2x.png out/Default-Landscape@2x.png
$ convert -chop 0x40 Default-Portrait@2x.png out/Default-Portrait@2x.png

iPhone/iPod touch用の画像はステータスバーを含んでいてもよく、起動時にデバイスのステータスバーで上書きされるので表示されることもない。でも何となく気持ち悪いので、自分は黒で塗りつぶすことにしている。スマートなやり方がわからなかったのだけど、-chop-spliceを組み合わせて次のようにすればできる。

$ convert -chop 0x20 -background black -splice 0x20 Default.png out/Default.png
$ convert -chop 0x40 -background black -splice 0x40 Default@2x.png out/Default@2x.png
$ convert -chop 0x40 -background black -splice 0x40 Default-568h@2x.png out/Default-568h@2x.png

起動画面 - iOS 7

(追記)iOS 7以降ではステータスバーの領域を含んだ画像が必要だけど、本物のステータスバーは半透明なので適当な色で塗りつぶしておく必要がある。

$ convert -chop 0x40 -background "rgb(248,248,248)" -splice 0x40 Default-iOS7@2x.png out/Default-iOS7@2x.png
$ convert -chop 0x40 -background "rgb(248,248,248)" -splice 0x40 Default-iOS7-568h@2x.png out/Default-iOS7-568h@2x.png
$ convert -chop 0x20 -background "rgb(248,248,248)" -splice 0x20 Default-iOS7-Portrait.png out/Default-iOS7-Portrait.png
$ convert -chop 0x40 -background "rgb(248,248,248)" -splice 0x40 Default-iOS7-Portrait@2x.png out/Default-iOS7-Portrait@2x.png

(追記)iPadでUISplitViewControllerを使っている場合、Landscapeのときはボーダーを残す必要があるので-drawを使い座標を指定して塗りつぶした。

$ convert -fill "rgb(248,248,248)" -draw "rectangle 0,0,319,63; rectangle 321,0,1023,63" Default-iOS7-Landscape.png out/Default-iOS7-Landscape.png
$ convert -fill "rgb(248,248,248)" -draw "rectangle 0,0,639,127; rectangle 642,0,2047,127" Default-iOS7-Landscape@2x.png out/Default-iOS7-Landscape@2x.png

起動画面 - iOS 8以降

(追記)iPhone 6とiPhone 6 Plus。

$ convert -chop 0x40 -background "rgb(248,248,248)" -splice 0x40 -strip Default-667h\@2x.png out/Default-667h\@2x.png
$ convert -chop 0x60 -background "rgb(248,248,248)" -splice 0x60 -strip Default-736h\@3x.png out/Default-736h\@3x.png

(追記)iOS 8ではUISplitViewControllerのボーダーが1ピクセルになっている。

$ convert -fill "rgb(248,248,248)" -draw "rectangle 0,0,639,127; rectangle 641,0,2047,127" Default-iOS7-Landscape@2x.png out/Default-iOS7-Landscape\@2x.png

AppStoreのスクリーンショット

AppStoreで表示されるスクリーンショットは、ステータスバーを含んでも含まなくてもどちらでもいい。自分はシミュレータでスクリーンショットを撮っているのだけど、ユーザからするとシミュレータのステータスバーは不自然なので取り除くことにしている。ユニバーサルアプリで英語にも対応すると数が多くなってしまうためRubyで処理している。

(追記)iPhone 6とiPhone 6 Plusではステータスバーを含む必要がある。

require "open3"

options = {}
["768x1024", "1024x768"].each do |size|
  options[size] = ["-chop", "0x20"]
end
["1536x2048", "2048x1536", "640x960", "960x640", "640x1136", "1136x640"].each do |size|
  options[size] = ["-chop", "0x40"]
end
["750x1334", "1334x750"].each do |size|
  options[size] = []
end
["1242x2208", "2208x1242"].each do |size|
  options[size] = []
end

Dir.mkdir("out")
Dir["*.png"].each do |input|
  output = File.join("out", File.basename(input, File.extname(input)) + ".jpg")
  size = Open3.capture2("identify", "-format", "%wx%h", input)[0]
  system("convert", *options.fetch(size), "-strip", "-quality", "70", input, output)
end

カレントディレクトリにあるPNGファイルに対して、サイズを自動的に判断してトリミングし、outという名前のサブディレクトリに保存する。ディレクトリがすでに存在していたら何もしない。画質はある程度落としてもサイズを減らしたいので、-quality 70を指定してJPEGに変換している。