xcode 6で利用可能になったベクター画像リソースを深掘り
DESCRIPTION
Xcode 6で利用可能になった ベクター画像リソースを 深掘り (2014/10/05 @ iOS 8/Swift エンジニア勉強会)TRANSCRIPT
Xcode 6で利用可能になったベクター画像リソースを
深掘り
2014/10/05 @ iOS 8/Swift エンジニア勉強会 LT
自己紹介• Twitter: @_mono, Facebook: mono0926
• 写真整理・共有アプリSceneのiOS版作ってます
• http://scn.jp
• LINEクリエイターズスタンプ作って販売中
• ラヴさんスタンプ
• 6月のWWDCでのSwift発表直後から継続的に、Swift・Xcode6で開発してました
ベクター画像指定のやり方概要
ベクター画像指定のやり方概要
PDF書き出しサイズが重要
PDFをプレビューで開くと• PDFはサイズ情報を持つ
• images.xcassetsはそのサイズ情報をアプリの画像リソースのサイズと解釈する
• SVGファイルはサイズ情報という概念が無いので、この理由でPDFが採用された？
iPhone 6 Plusで実行
PDF書き出しサイズより 画面パーツのサイズが大きいと
ぼやける
OSXで実行
ぼやけない！
PDFの扱い• iOS
• ビルド時に@1-3xのPNG画像にラスタライズされる
• パフォーマンス考慮
• OSX
• 実行時にベクター画像(PDF)をレンダリング
• マシンパワーが高めだから？
WWDC 2014 Session 411 “What’s New in Interface Builder”より
アプリのバイナリサイズ比較
• @1-3xのPNGファイルを自前で用意
• +13.0 KB
• PDFファイルを用いてビルド時にラスタライズ
• +26.6 KB
30x30ポイントのこの画像で実験 (@1xで2KB)
なぜかPDFの方では約倍のサイズになるが大抵のケースでは問題にならないレベル？
ラスタライズされてアプリパッケージに入っているPNGファイルを見てみたい
• images.xcassetsはコンパイルされてアプリ名.app配下のassets.carとして配置される
• しかし簡単に中身の見れないファイル形式(zipなどではない)
• ちなみにOSXだと本当にラスタライズされずにPDFがそのまま入っていました
がんばってassets.carからPNGファイルを取り出す
• https://github.com/steventroughtonsmith/cartool
• CUICatalogクラスのプライベートメソッドを使ってごにょごにょ
• これをビルドして出来る成果物cartoolで取り出せる
• ./cartool Assets.car output_dir
• 本当に、@x対応がされたPNGファイルが入っていました
• https://github.com/mono0926/cartool でforkして@3x対応をトライするも成功せず…。
実利用にあたっての注意は？• PNGをそのまま表示するだけなのでパフォーマンスなどは気にする必要無し
• その代償として、iOSアプリの場合は、例えば「iPadでは少し大きめに表示したい」などというケースでは別途そのサイズにあったサイズで書き出す必要がある
• 実利用していて、まだ特に困った点無いので、どんどん使って良いと思います
• Xcode 6でビルドすればiOS7の端末での実行も可能ですiOS 6もいけそうだけど、未対応という記事があったりして不明…
• もし、どうしても困ったケースが出てきたら局所的にPNG画像使う予定
その他 参考リンク• 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