iOS グラフィックス Tips

iOS グラフィックスTips
Twitter: @notoroid
Twitter: @irimasu

お題目
• 簡単な自己紹介
• 肥大化するアプリ
• まとめ

簡単な自己紹介
• 個人開発者
• 屋号: いります電算企画
• Twitter: irimasu
• Twitter: notoroid

自己紹介
• iOSアプリ以前(2001∼2008)
• Windows/Flash 開発者
• iPhoneのアプリ開発者 (2009∼)
• 頭わるいアプリ開発(Apple申請対策)
• アプリの企画提案(サービス/フレームワークの提案)
• 喫茶作業者

北海道の楽しい100人
Facebook クラスタアプリ
最近リリースしたアプリ
無料

iOSアプリのサイズ増大
• iOS7から3G/LTE/4G で最大100MBのアプリを
ダウンロード可能に
• iOS6から2倍もの容量増加を達成(50MB)
• iOS7 のアクティブな端末数83%(5月現在)

ダウンロード緩和でアプリサ
イズを気にしなくてもいい？

アプリサイズに対する
苦悩は続く
• ユニバーサルバイナリ(プログラム本体)
• iOS7では32/64bit対応が求められる
• 古いOSをサポートするほどバイナリは増加
• 長すぎるダウンロード
• すぐ使いたい用途のアプリによっては命取り

アプリサイズ増大の
隠れたパラメータ

UIパーツを画像だけで作成す
るとアプリサイズが増大する

サイズを圧迫するUIパーツ用
画像使わない方法を考える

画像以外の方法で
UI用パーツをつくるには？

自力で描画する
• 描画用API群(CoreGraphic) を用いる
• 豊富な描画機能
• 全てプログラムコードで書く必要がある
• プログラマ以外が取り付くしまがない

自力で描画するデメリット
• プログラマへのデザイン上の負荷が増す
• 画像を使うことでデザイナとの責任分担が実
現できていたものが台無し
• 複雑な描画をコードで書くのは時間を浪費す
る

画像を使う以外の選択肢

PaintCode2 を使用する
• MacOS 用アプリ(MacOS Lion以降)
• ベクタードローアプリ
• AppStore で販売中
Mac/iOS の描画コード
(Objective-C)を
出力する
¥8,500

描画機能
図形と文字列ベジェ曲線グラデーション
色バリエーション領域調整

ライブラリ
コード
プロパティ

簡単な使い方
@interface FooView

@end

@implement FooView

-(void) draw:(CGRect)rect
{
[ここにPaintCodeのコードをCopy&Paste]
}
@end

ボタンの場合
• 一旦画像化する必要あり
• UIGraphicsGetCurrentContext() を使って描画
• UIGraphicsGetImageFromCurrentImageCont
ext() を使ってUIImage を作成
• UIButton setImageメソッドで登録

github で公開中です。
https://github.com/notoroid/
FigureRenderer

リファレンスとして
• 描画コードの実装方法の参考にする。
• Macに入れる描画用の参考書思えばお得

デザイナとの共同作業
• SVGやPSDのデータを取り込み可能
• PaintCode2から画像出力可能
• Android リソースを出力できる
• デザイナさんにPaintCode2編集を使ってもらう

PaintCode2新機能
• StrokeKit
• 描画色や描画オブジェクトをパッケージ化
• Variables & Expressions
• 描画タイミングに値や式を渡すことができ
る

何がいいのか？
• ソースコードの形でxcode(IDE) に取り込できる
• UIのアニメーションの描画に利用できる
• CADsiplayLink と併用

まとめ
• UIに使っている画像サイズがアプリサイズを
圧迫していないか検討しましょう
• PaintCode2 を使ってプロジェクトフォルダか
ら画像を追放しましょう

札幌iPhoneアプリ開発懇談会
DevSap(でぶさっぷ)
• 札幌近郊にiOsアプリ開発者
の懇談会
• 奇数月ごと勉強会を開催
• 開発からアプリ市場情報まで
ざっくばらんに意見交換

http://irimasu.com
Twitter: @notoroid
公式: @irimasu

Recommended