効率的なスクリーンショット作りを試行錯誤する その3:Icon編
今月のアクセスログを見ていたら、意外にスクリーンショット系の記事を読んでいる方が多くてびっくりな氷川です。それならば続きを、と書こうと思った矢先に以前のエントリで言及しなかったものを思い出しました。アプリのアイコンです。スクリーンショットとは微妙にカテゴリが違う気もしますが、同じ系統のものとして取り扱ってもまあ、間違いではないと思いますので取りあげてみようと思います。
iPhone Magazine
最近はiOSも(Mac) OS XもHiDPI（いわゆるRetinaディスプレイ）が浸透してきたので、高解像度のアイコンデータを持つようになり、最大1024ピクセル四方という一昔前のVGAディスプレイだとそもそもはみ出るくらい大きなグラフィックスを持っていますので、印刷時にもドットが目立たず美しいアイコンが表示されるようになりました。
OS Xアプリケーションのファイル構造
アップルはMac OS Xになってから積極的に「パッケージ」と呼ばれるファイル管理手法を取り入れてきています。実態はフォルダ（ディレクトリ）なのですが、拡張子を与えることでユーザ側からは単一のファイルに見えるようにシステムは振る舞います。その代表的なものとして、インストーラなどで使われる「パッケージ (.pkg)」、プラグインなどを格納する「バンドル(.bundle)」、そしてアプリケーションであることを示す「アプリケーション(.app)」などがあります。
これらのファイルは右クリック（もしくはControl+クリック）でコンテクストメニューから、「パッケージの内容を表示」を選択すると中身を覗くことが出来ます。.appファイルの場合、その中には「Contents」フォルダ以下にアプリケーションを構成するファイルが格納されています。
この中から（すべてのファイルが興味深いのですが）今回は「Resources」を見てみましょう。ここにはローカライズのための.stringsファイルだけでなく、アプリケーションで使われている各種のグラフィックファイルなども格納されており、アプリケーション自身のアイコンも格納されています。ほとんどの場合、ファイルタイプはApple アイコンイメージ（.icns）形式かと思いますが、最近はPDF（.pdf）形式などもアイコンデータとして使えるようになっています。
iOS アプリケーションのファイル構造
このファイル管理形式はiOSも同様で、「iOS App（.ipa）」もパッケージ形式です。が、ちょっとだけ工夫する必要があります。.ipa形式のファイルはコンテクストメニューに「パッケージの内容を表示」が出てきません。
実は、.ipa形式のファイルはZIP互換のアーカイブファイル形式を採用しているため、そのままでは開けません。そこで、一度拡張子をipaから.zipに変更した後にダブルクリックするなりして解凍することで、中身を覗くことが出来るようになっています。
「Payload」フォルダの中にあるアプリケーション本体の「パッケージの内容を表示」させれば、今まで見たことがある世界がそこに広がっているでしょう。アイコンファイルはほとんどの場合PNG（.png）形式で、同じ名前でファイル名の末尾に「@2x」が付いているものはRetina Displayで使用される高解像度用のファイルです。
Apple アイコンイメージの中を見る
Apple アイコンイメージ形式のファイルはマルチデータを格納することができる（コンテナとも呼ばれる）仕様になっています。これはiOSと異なりOS Xでは、ユーザが主にFinder上で表示するアイコンサイズを変更できるからです。
実際にプレビュー.appなどの対応アプリケーションでファイルを開くと、16、32、64、128、256、512ピクセル（HiDPIに対応したアイコンはこれらに加えて@2xのファイルが加わるため1024ピクセルまで）のスケーリングの基準となるグラフィックが格納されているのがわかります。
この中から自分の好きな解像度のデータを取り出せば良いと思います。プレビュー.appであれば、サムネール表示からアイコンをドラッグ&ドロップするだけで任意の解像度データを取り出せるのでとても便利です。また、Keynoteのようにグラフィックス処理をシステム標準で扱っているネイティブアプリケーションはそのまま.icnsが使えるので、直接ファイルを扱うことすら可能です。
アイコンをもう少し手軽に取り出す
基本的な流れはこれでOKですが、原稿用にアイコンを取り出すのに、この作業を延々と繰り返すのはひと苦労です。とくにアイコン名は「ICON.icns」などの一定のルールを設ける必要がなく、開発者が任意に指定できます。また、.icns形式はアプリケーションアイコンだけでなく、アプリケーション固有のファイルアイコンなどのFinderのための付加情報用のデータにも用意されているため複数用意されている可能性もあります。これはアイコンデータ取得の自動化が難しいことを意味します。
効率的にグラフィックを取得するためにも何か他の方法で回避できれば、ということでFinderに頼ってみます。Finderにある「ファイル＞情報を見る（キーボードショートカットは⌘+I）」を選ぶと表示されるインスペクタウインドウは、さまざまな情報を表示しますが、最上部にあるアイコングラフィックも選択可能でコピーできます。
クリップボードにコピーされたこのデータを、たとえばプレビュー.appの「ファイル＞クリップボードから新規」で展開すると、.icns形式のファイルがそのまま取得できているのがわかります（ファイルも「名称未設定」なことから新規ファイルであることがわかるでしょう）。
iOSアプリのアイコンを取り出す
ではiOSの場合はどうでしょう。一番簡単なのは、iTunesの「アートワーク」ウインドウからアイコンをドラッグ&ドロップで取得する方法でPNG形式のファイルを理想的な状態で取得できましたが、iTunes 11ではこの機能が失われてしまっています（機能の復活を望みたいところですが、新レイアウトのコンセプトを考えると、ユーザにとっての存在意義がなく厳しいところです）。
すでに11になってしまった以上は仕方ありません。他の方法を考えましょう。まずFinder上ではアイコンが表示されず、Genericなアプリケーションアイコンに置換されてしまうため、前述のテクニックが使えません。他にすぐに表示されているものとして思いつくのは、iTunes プレビュー（itunes.apple.com）のページにあるアイコンです。
このアイコンは通常175（HiDPIでブラウズした場合は300）ピクセルの画像で表示されていますが、実は512ピクセルのフルサイズデータも同じmzstatic.comに格納されています。命名規則もシンプルで、
aX.mzstatic.com/us/r1000/XX/Purple/XX/XX/XX/mzl.lXX.175x175-75.jpg
のような形で記述されています。このパスの中にある「175x175」という文字列を「512x512」に置き換えるだけでフルサイズのデータが手に入ります。これである程度の自動化の目処が立ちました。JavaScriptを使ってアプリのアイコンイメージが配置されているURLを取得し、文字列の一部を書き換えて開くブックマークレットを作成してみました。下記のものをブックマークバーにドラッグ&ドロップで登録して、このあたりで試してみましょう。
Open Large App Icon ◀これをブックマークバーへ。
トレビアン。アイコンが512ピクセルで表示されたはずです。OS Xアプリケーションに比べれば少し不便ではありますが、これで任意のイメージを少しだけ楽に取得できるようになります。
余談。
iOSのアイコンデータですが、もとの「Contents」フォルダ直下でも、ウェブからのイメージにせよ四隅が角丸でないことに気付くはずです。なんということでしょう…角丸のマスキング処理はInDesign側で行なわないといけないなんて…。
でも実はこれ、間違いではありません。アプリアイコンの角丸処理はiOS側で行なうので、元データは512四方のデータになるのが望ましいとされています。また、上半分がガラスのような反射エフェクトがつくのもiOS側の処理です（こちらは選択式になっておりマットなものも選べます）。
仕様なのでしょうがないのですが、でもこれもiTunes 10まではちゃんと角が丸い整形済みのデータが取れたんですよね。嗚呼…実に恨めしい…。
悲しいことだけでなく、嬉しいことも。OS Xのシステムデータの中を探っていくと、「/System/Library/CoreServices」の中にあるCoreTypes.bundleというファイルを見つけることができますが、これがシステムアイコンリソースの宝庫です。
iOSデバイスやPowerPC系の古いMacのアイコンまであったりとかなり至れり尽くせりな内容です。中の人に「CoreTypes.bundleはシステムリソースの中心だ」という話を聞いたことがあったので、もしやと思って掘ってみたところ大当たりでした。行ってみるもんですね、WWDCも。
