1. iOSアプリ作成におけるPaintCodeの利用

2. 背景（iOSデバイス解像度）
名称 解像度（ｐｘ） 備考
iPhone3G/3GS 320 * 480
iPod touch 1～3世代
iPhone4 / 4S 640 * 960 retina
iPod touch 4世代
iPhone5 640 * 1136 retina
iPod touch 5世代
iPad / iPad2 768 * 1024
iPad 第3世代 1,536 * 2048 retina
iPad mini 768 * 1024

3. 背景（アプリ構成画像リソース1）
種類 サイズ ファイル名 説明
アイコン 57 * 57 Icon.png 非retina用のiPhone,touch用
（必須）
114 * 114 Icon@2x.png retina用のiPhone,touch用
72 * 72 Icon-72.png 非retina用のiPad用
144 * 144 Icon-72@2x.png retina用のiPad用
App Store 512 * 512 iTunesArtwork 非retina用
アイコン
（必須） 1024 * 1024 iTunesArtwork@2x Retina用
Setting 29 * 29 Icon-Small.png 非retina用のiPhone,touch用
アイコン
58 * 58 Icon-Small@2x.png retina用のiPhone,touch用
50 * 50 Icon-Small-50.png 非retina用のiPad用
100 * 100 Icon-Small- retina用のiPad用
50@2x.png

4. 背景（アプリ構成画像リソース2）
種類 サイズ ファイル名 説明
起動画像 320 * 480 Default.png 非retina用のiPhone,touch用
640 * 960 Default@2x.png retina用のiPhone,touch用
640 * 1136 Default- iPhone5
568h@2x.png
768 * 1004 Default-Portrait.png 非retina用のiPad用（縦）
1536 * 2008 Default- retina用のiPad用（縦）
Portrait@2x.png
1024 * 748 Default- 非retina用のiPad用（横）
Landscape.png
2048 * 1496 Default- retina用のiPad用（横）
Landscape@2x.png

5. 背景（その他）
・wifi環境以外でのダウンロード容量制限は、５０ＭＢ（２０１２年３月まで
は２０ＭＢ）
・インストール時間が長いと起動率が落ちる

6. PaintCodeとは
・Mac用お絵かきソフト
・書いた絵がリアルタイムにObjectiv-Cのコードになり、iOSまたはOSX上で
実行でき表示できる
・Dynamic Shapes：複数サイズの画像を用意する必要がある場合、サイズ毎
にオブジェクトを描かなくても、 Objectiv-C上でサイズを指定することでダイ
ナミックにサイズ変更が可能。
・Dynamic colors：ベース色を定義し、そのベース色に対して効果を加えてい
くように描くことで、Objectiv-C上でベース色を変更すると、そのベース色を
使用しているオブジェクトがすべて自動的に更新される。

7. サンプル
背景にグラデーション画像を設置した
簡単な Ｈｅｌｌｏ ｗｏｒｌｄ

8. サンプル（普通に作る）
iPhone5用の判定が必要
これだけ画像が必要。

9. サンプル（PaintCodeで作る）
クラスを作って、
PaintCodeのソースを張る

10. サンプル（PaintCodeで作る）
クラスを作って、
PaintCodeのソースを張る

11. サンプル（比較）
画像アプリ PaintCodeアプリ
アプリ容量 101KB※１ 91KB
メモリ使用量※２ 4,071,424byte 4,026,368byte
処理時間 9ms 4ms
CPU使用率※３ 42% 64%
※１ 画像サイズは15ＫＢ
※２ iPhone5で測定
※３ iPhone5で測定。数回実行したがバラつきがある。
しかし、毎回おおよそ２０％くらいの開きがあった。

12. サンプル（考察）
画像アプリ PaintCodeアプリ
アプリ容量
メモリ使用量
処理時間
CPU使用率
上記の結果を見る限り、ＰａｉｎｔCodeはＣＰＵ使用率をのぞいて
優れていることがわかる。
ＣＰＵ使用率に関しては、画像アプリよりも２０％ほど多い値になっている
が、描画が終われば開放されるので問題ないと考える。

13. PaintCodeの利用シーン考察、デメリット
PaintCodeに向いてるアプリ
画像が多い
カラーコンフィグがある
ユニバーサルアプリ
デメリット
デザイナーさんがツールの使い方を覚える必要がある ※
高度なデザインはできない ※
Android版には対応してない
※ ＳＶＧファイルからのインポートに対応しているので、他の画像ツールを使い
その画像を取り込むことができる。

14. サンプル（カラーコンフィグ）
＋ボタンをクリックすると
カラー選択が開き
クリックすると背景色がかわります

15. サンプル（カラーコンフィグ）ーPaintCode
作る素材は３種類
タブメニューの背景
ベースカラーを定義して左側面にシャドウをかけ、
Frameを適用してダイナミックシェイプが出来るように
作る
タブ部分の背景
ベースカラーにハイライト効果をつけ、外側にシャドウ
をかける。サイズは固定
左コンテンツの背景
ベースカラーにハイライト効果をつけ、 Frameを適用

16. サンプル（カラーコンフィグ）ーXCode
３つの素材に対応するUIViewクラスを３つ作り、drawRectメソッドにコピーしていく
グローバルに定義しているカラーをセット
Frame適用したものについては、自分自身のサイズをセット
Github https://github.com/chobikko/PaintCodeSample

17. ぜひ使ってみてね☆
ダウンロードはこちら
http://bit.ly/VB14cy