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

iOS グラフィックス Tips

Embed Size (px)

Citation preview

Page 1: iOS グラフィックス Tips

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

Page 2: iOS グラフィックス Tips

お題目

•簡単な自己紹介

•肥大化するアプリ

•まとめ

Page 3: iOS グラフィックス Tips

自己紹介

Page 4: iOS グラフィックス Tips

簡単な自己紹介

•個人開発者

•屋号: いります電算企画

• Twitter: irimasu

• Twitter: notoroid

Page 5: iOS グラフィックス Tips

自己紹介• iOSアプリ以前(2001~2008)

• Windows/Flash 開発者

• iPhoneのアプリ開発者 (2009~)

•頭わるいアプリ開発(Apple申請対策)

•アプリの企画提案(サービス/フレームワークの提案)

•喫茶作業者

Page 6: iOS グラフィックス Tips

北海道の楽しい100人 Facebook クラスタアプリ

最近リリースしたアプリ

無料

Page 7: iOS グラフィックス Tips

肥大化するアプリ

Page 8: iOS グラフィックス Tips

iOSアプリのサイズ増大

• iOS7から3G/LTE/4G で最大100MBのアプリをダウンロード可能に

• iOS6から2倍もの容量増加を達成(50MB)

• iOS7 のアクティブな端末数83%(5月現在)

Page 9: iOS グラフィックス Tips

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

Page 10: iOS グラフィックス Tips

アプリサイズに対する 苦悩は続く

•ユニバーサルバイナリ(プログラム本体)

• iOS7では32/64bit対応が求められる

•古いOSをサポートするほどバイナリは増加

•長すぎるダウンロード

•すぐ使いたい用途のアプリによっては命取り

Page 11: iOS グラフィックス Tips

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

Page 12: iOS グラフィックス Tips

アプリ内画像の存在

Page 13: iOS グラフィックス Tips

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

Page 14: iOS グラフィックス Tips

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

Page 15: iOS グラフィックス Tips

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

Page 16: iOS グラフィックス Tips

自力で描画する•描画用API群(CoreGraphic) を用いる

•豊富な描画機能

•全てプログラムコードで書く必要がある

•プログラマ以外が取り付くしまがない

Page 17: iOS グラフィックス Tips

自力で描画するデメリット

•プログラマへのデザイン上の負荷が増す

•画像を使うことでデザイナとの責任分担が実現できていたものが台無し

•複雑な描画をコードで書くのは時間を浪費する

Page 18: iOS グラフィックス Tips

画像を使う以外の選択肢

Page 19: iOS グラフィックス Tips
Page 20: iOS グラフィックス Tips

PaintCode2 を使用する• MacOS 用アプリ(MacOS Lion以降)

•ベクタードローアプリ

• AppStore で販売中

Mac/iOS の描画コード(Objective-C)を 出力する

¥8,500

Page 21: iOS グラフィックス Tips

描画機能

図形と文字列 ベジェ曲線 グラデーション

色バリエーション 領域調整

Page 22: iOS グラフィックス Tips

ライブラリ

コード

プロパティ

Page 23: iOS グラフィックス Tips

簡単な使い方@interface FooView

@end

@implement FooView

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

Page 24: iOS グラフィックス Tips

ボタンの場合•一旦画像化する必要あり

• UIGraphicsGetCurrentContext() を使って描画

•  UIGraphicsGetImageFromCurrentImageContext() を使ってUIImage を作成

• UIButton setImageメソッドで登録

Page 25: iOS グラフィックス Tips

github で公開中です。

https://github.com/notoroid/FigureRenderer

Page 26: iOS グラフィックス Tips

リファレンスとして

•描画コードの実装方法の参考にする。

• Macに入れる描画用の参考書思えばお得

Page 27: iOS グラフィックス Tips

デザイナとの共同作業• SVGやPSDのデータを取り込み可能

• PaintCode2から画像出力可能

• Android リソースを出力できる

•デザイナさんにPaintCode2編集を使ってもらう

Page 28: iOS グラフィックス Tips

PaintCode2新機能• StrokeKit

•描画色や描画オブジェクトをパッケージ化

• Variables & Expressions

•描画タイミングに値や式を渡すことができる

Page 29: iOS グラフィックス Tips

何がいいのか?

•ソースコードの形でxcode(IDE) に取り込できる

• UIのアニメーションの描画に利用できる

• CADsiplayLink と併用

Page 30: iOS グラフィックス Tips

まとめ

• UIに使っている画像サイズがアプリサイズを圧迫していないか検討しましょう

• PaintCode2 を使ってプロジェクトフォルダから画像を追放しましょう

Page 31: iOS グラフィックス Tips

宣伝

Page 32: iOS グラフィックス Tips

札幌iPhoneアプリ開発懇談会 DevSap(でぶさっぷ)

•札幌近郊にiOsアプリ開発者の懇談会

•奇数月ごと勉強会を開催

•開発からアプリ市場情報までざっくばらんに意見交換

Page 33: iOS グラフィックス Tips

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