Xcode 6で利用可能になった
ベクター画像リソースを
深掘り (2014/10/05 @ iOS 8/Swift エンジニア勉強会)

1. Xcode 6で利用可能になった
ベクター画像リソースを
深掘り
2014/10/05 @ iOS 8/Swift エンジニア勉強会 LT

2. 自己紹介
• Twitter: @_mono, Facebook: mono0926
• 写真整理・共有アプリSceneのiOS版作ってます
• http://scn.jp
• LINEクリエイターズスタンプ作って販売中
• ラヴさんスタンプ
• 6月のWWDCでのSwift発表直後から継続的に、
Swift・Xcode6で開発してました

3. ベクター画像指定のやり方概要

4. ベクター画像指定のやり方概要
PDF書き出しサイズが重要

5. PDFをプレビューで開くと
• PDFはサイズ情報を持つ
• images.xcassetsはそのサ
イズ情報をアプリの画像
リソースのサイズと解釈
する
• SVGファイルはサイズ情
報という概念が無いので、
この理由でPDFが採用さ
れた？

6. iPhone 6 Plusで実行
PDF書き出しサイズより
画面パーツのサイズが大きいと
ぼやける

7. OSXで実行
ぼやけない！

8. PDFの扱い
• iOS
• ビルド時に@1-3xのPNG画像にラスタライズされる
• パフォーマンス考慮
• OSX
• 実行時にベクター画像(PDF)をレンダリング
• マシンパワーが高めだから？
WWDC 2014 Session 411 “What’s New in Interface Builder”より

9. PDFファイル書き出しは
Sketch 3が便利

10. アプリのバイナリサイズ比較
• @1-3xのPNGファイルを自前で用意
• +13.0 KB
• PDFファイルを用いてビルド時にラスタライズ
• +26.6 KB
30x30ポイントのこの画像で実験
(@1xで2KB)
なぜかPDFの方では約倍のサイズになるが
大抵のケースでは問題にならないレベル？

11. ラスタライズされてアプリパッケージに
入っているPNGファイルを見てみたい
• images.xcassetsはコンパイルされて
アプリ名.app配下のassets.carとして配置される
• しかし簡単に中身の見れないファイル形式
(zipなどではない)
• ちなみにOSXだと本当にラスタライズされずにPDFがそのまま
入っていました

12. がんばってassets.carからPNG
ファイルを取り出す
• https://github.com/steventroughtonsmith/cartool
• CUICatalogクラスのプライベートメソッドを使ってごにょごにょ
• これをビルドして出来る成果物cartoolで取り出せる
• ./cartool Assets.car output_dir
• 本当に、@x対応がされたPNGファイルが入っていました
• https://github.com/mono0926/cartool でforkして@3x対応をトライするも成功せず…。

13. 実利用にあたっての注意は？
• PNGをそのまま表示するだけなのでパフォーマンスなどは気にする必要無し
• その代償として、iOSアプリの場合は、例えば「iPadでは少し大きめに表示
したい」などというケースでは別途そのサイズにあったサイズで書き出す必
要がある
• 実利用していて、まだ特に困った点無いので、どんどん使って良いと思います
• Xcode 6でビルドすればiOS7の端末での実行も可能です
iOS 6もいけそうだけど、未対応という記事があったりして不明…
• もし、どうしても困ったケースが出てきたら局所的にPNG画像使う予定

14. その他 参考リンク
• Xcode 6 allows VECTOR image assets… any idea
how to use them?
• USING VECTOR IMAGES IN XCODE 6
• [Xcode 6] Asset Catalog でベクターが扱えるようにな
りました！
• Xcode6でベクター画像を利用する。
• iOSの@3x対応：Vector画像とImageAssets