Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Xcode 6で利用可能になった 
ベクター画像リソースを 
深掘り 
2014/10/05 @ iOS 8/Swift エンジニア勉強会 LT
自己紹介 
• Twitter: @_mono, Facebook: mono0926 
• 写真整理・共有アプリSceneのiOS版作ってます 
• http://scn.jp 
• LINEクリエイターズスタンプ作って販売中 
• ラヴさん...
ベクター画像指定のやり方概要
ベクター画像指定のやり方概要 
PDF書き出しサイズが重要
PDFをプレビューで開くと 
• PDFはサイズ情報を持つ 
• images.xcassetsはそのサ 
イズ情報をアプリの画像 
リソースのサイズと解釈 
する 
• SVGファイルはサイズ情 
報という概念が無いので、 
この理由でPDF...
iPhone 6 Plusで実行 
PDF書き出しサイズより 
画面パーツのサイズが大きいと 
ぼやける
OSXで実行 
ぼやけない!
PDFの扱い 
• iOS 
• ビルド時に@1-3xのPNG画像にラスタライズされる 
• パフォーマンス考慮 
• OSX 
• 実行時にベクター画像(PDF)をレンダリング 
• マシンパワーが高めだから? 
WWDC 2014 Sess...
PDFファイル書き出しは 
Sketch 3が便利
アプリのバイナリサイズ比較 
• @1-3xのPNGファイルを自前で用意 
• +13.0 KB 
• PDFファイルを用いてビルド時にラスタライズ 
• +26.6 KB 
30x30ポイントのこの画像で実験 
(@1xで2KB) 
なぜかP...
ラスタライズされてアプリパッケージに 
入っているPNGファイルを見てみたい 
• images.xcassetsはコンパイルされて 
アプリ名.app配下のassets.carとして配置される 
• しかし簡単に中身の見れないファイル形式 
...
がんばってassets.carからPNG 
ファイルを取り出す 
• https://github.com/steventroughtonsmith/cartool 
• CUICatalogクラスのプライベートメソッドを使ってごにょごにょ 
...
実利用にあたっての注意は? 
• PNGをそのまま表示するだけなのでパフォーマンスなどは気にする必要無し 
• その代償として、iOSアプリの場合は、例えば「iPadでは少し大きめに表示 
したい」などというケースでは別途そのサイズにあったサイ...
その他 参考リンク 
• Xcode 6 allows VECTOR image assets… any idea 
how to use them? 
• USING VECTOR IMAGES IN XCODE 6 
• [Xcode 6]...
Upcoming SlideShare
Loading in …5
×

Xcode 6で利用可能になった
ベクター画像リソースを
深掘り

9,109 views

Published on

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

Published in: Software

Xcode 6で利用可能になった
ベクター画像リソースを
深掘り

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

×