iOS グラフィックス Tips

iOS グラフィックスTipsTwitter: @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() を使って描画

•  UIGraphicsGetImageFromCurrentImageContext() を使って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