Spicata自分がやったお仕事原稿のフォローアップなどを掲載していきます。この広告は、90日以上更新していないブログに表示しています。Mac今月のアクセスログを見ていたら、意外にスクリーンショット系の記事を読んでいる方が多くてびっくりな氷川です。それならば続きを、と書こうと思った矢先に以前のエントリで言及しなかったものを思い出しました。アプリのアイコンです。スクリーンショットとは微妙にカテゴリが違う気もしますが、同じ系統のものとして取り扱ってもまあ、間違いではないと思いますので取りあげてみようと思います。アプリのレビュー記事を作成をする際に必要になるのは図版だけでなく、アイコンを掲載します。これはどこの雑誌や書籍、ブログなどでもやっていると思いますが、なるべく高解像度のデータが必要となります。XもHiDPI(いわゆるRetinaディスプレイ)が浸透してきたので、高解像度のアイコンデータを持つようになり、最大1024ピクセル四方という一昔前のVGAディスプレイだとそもそもはみ出るくらい大きなグラフィックスを持っていますので、印刷時にもドットが目立たず美しいアイコンが表示されるようになりました。Xになってから積極的に「パッケージ」と呼ばれるファイル管理手法を取り入れてきています。実態はフォルダ(ディレクトリ)なのですが、拡張子を与えることでユーザ側からは単一のファイルに見えるようにシステムは振る舞います。(.pkg)」、プラグインなどを格納する「バンドル(.bundle)」、そしてアプリケーションであることを示す「アプリケーション(.app)」などがあります。これらのファイルは右クリック(もしくはControl+クリック)でコンテクストメニューから、「パッケージの内容を表示」を選択すると中身を覗くことが出来ます。.appファイルの場合、その中には「Contents」フォルダ以下にアプリケーションを構成するファイルが格納されています。この中から(すべてのファイルが興味深いのですが)今回は「Resources」を見てみましょう。ここにはローカライズのための.stringsファイルだけでなく、アプリケーションで使われている各種のグラフィックファイルなども格納されており、アプリケーション自身のアイコンも格納されています。アイコンイメージ(.icns)形式かと思いますが、最近はPDF(.pdf)形式などもアイコンデータとして使えるようになっています。App(.ipa)」もパッケージ形式です。工夫する必要があります。.ipa形式のファイルはコンテクストメニューに「パッケージの内容を表示」が出てきません。実は、.ipa形式のファイルはZIP互換のアーカイブファイル形式を採用しているため、そのままでは開けません。そこで、一度拡張子をipaから.zipに変更した後にダブルクリックするなりして解凍することで、中身を覗くことが出来るようになっています。「Payload」フォルダの中にあるアプリケーション本体の「パッケージの内容を表示」させれば、今まで見たことがある世界がそこに広がっているでしょう。Displayで使用される高解像度用のファイルです。アイコンイメージ形式のファイルはマルチデータを格納することができる(コンテナとも呼ばれる)仕様になっています。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の場合はどうでしょう。11ではこの機能が失われてしまっています(機能の復活を望みたいところですが、新レイアウトのコンセプトを考えると、ユーザにとっての存在意義がなく厳しいところです)。11になってしまった以上は仕方ありません。他の方法を考えましょう。Finder上ではアイコンが表示されず、Genericなアプリケーションアイコンに置換されてしまうため、前述のテクニックが使えません。プレビュー(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を取得し、文字列の一部を書き換えて開くブックマークレットを作成してみました。下記のものをブックマークバーにドラッグ&ドロップで登録して、このあたりで試してみましょう。◀これをブックマークバーへ。アイコンが512ピクセルで表示されたはずです。Xアプリケーションに比べれば少し不便ではありますが、これで任意のイメージを少しだけ楽に取得できるようになります。iOSのアイコンデータですが、もとの「Contents」フォルダ直下でも、ウェブからのイメージにせよ四隅が角丸でないことに気付くはずです。なんということでしょう...角丸のマスキング処理はInDesign側で行なわないといけないなんて...。実はこれ、間違いではありません。アプリアイコンの角丸処理はiOS側で行なうので、元データは512四方のデータになるのが望ましいとされています。上半分がガラスのような反射エフェクトがつくのもiOS側の処理です(こちらは選択式になっておりマットなものも選べます)。10まではちゃんと角が丸い整形済みのデータが取れたんですよね。嗚呼...実に恨めしい...。悲しいことだけでなく、嬉しいことも。Xのシステムデータの中を探っていくと、「/System/Library/CoreServices」の中にあるCoreTypes.bundleというファイルを見つけることができますが、これがシステムアイコンリソースの宝庫です。iOSデバイスやPowerPC系の古いMacのアイコンまであったりとかなり至れり尽くせりな内容です。中の人に「CoreTypes.bundleはシステムリソースの中心だ」という話を聞いたことがあったので、もしやと思って掘ってみたところ大当たりでした。行ってみるもんですね、WWDCも。»プロフィールid:risonah自分がやったお仕事原稿のフォローアップなどを掲載していきます。@risonahはてなブログをはじめよう!risonahさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。