potatotips　#18

1. UIViewにまつわるあれこれ
株式会社BizReach
プロダクトマーケティング本部
山下大輔

2. 自己紹介
・山下大輔（やました だいすけ）
・2015年１月よりビズリーチのiOSエンジニア
https://itunes.apple.com/jp/app/haikurasu-ren-cainokyaria/id972002786?mt=8

3. 開発初期段階でよくある風景
デザイナ
エンジニア
プロトタイプ レイアウト指示書
デザイン反映
比較
配布
テスター
（チームメンバ）
フィードバック

4. ポテトチップスについて
レイアウト指示書 実際の実装（テスト配布アプリ）
比較
60 60
8
こういう状況で問題点をみつけないといけない
14pt #000000
8
ポテトチップスはしお味よりものりしお味
を選ぶ傾向にあります。コンソメ味も捨て
がたいですがのりしお味が食べたい。
ポテトチップスについて
ポテトチップスはしお味よりものりしお味
を選ぶ傾向にあります。コンソメ味も捨て
がたいですがのりしお味が食べたい。
13pt #0000008
背景 #FFFFFF
位置がズレてる？サイズ合ってる？フォント合ってる？

5. 課題
デザイナさんが作成したレイアウト指示書を参考に
目視で確認
->テスターのセンスに依存
->微妙なレイアウト崩れを発見しにくい
->色の違いなどあっているか不安
->フィードバックの質の低下

6. テスト配布したアプリからでも
各View要素の詳細が確認できるようにしたい
という野望

7. ・Debug view Hierarchy from Xcode 6
view構造っぽいやつがでる
viewの位置情報
Xcodeを使う

8. コード上から
view.recursiveDescription()
objective-cのprivate method(recursiveDescription)を叩く
ログを表示させる

9. コード上から
view.recursiveDescription()
objective-cのprivate method(recursiveDescription)を叩く
ログを表示させる
<UILayoutContainerView: 0x7f8cf0d6a720; frame = (0 0; 375 667); autoresize = W+H; layer = <CALayer: 0x7f8cf0d41da0>>
¦ <UITransitionView: 0x7f8cf0d6bff0; frame = (0 0; 375 667); clipsToBounds = YES; autoresize = W+H; layer = <CALayer: 0x7f8cf0d2a780>>
¦ ¦ <UIViewControllerWrapperView: 0x7f8cf0d6f6e0; frame = (0 0; 375 667); autoresize = W+H; layer = <CALayer: 0x7f8cf0d6c550>>
¦ ¦ ¦ <UIView: 0x7f8cf0d70060; frame = (0 0; 375 667); autoresize = W+H; layer = <CALayer: 0x7f8cf0d6f100>>
¦ ¦ ¦ ¦ <UIImageView: 0x7f8cf0d703b0; frame = (16 20; 290 200); autoresize = RM+BM; userInteractionEnabled = NO; layer = <CALayer: 0x7f8cf0d6f0b0>>
¦ ¦ ¦ ¦ <UIButton: 0x7f8cf0d70e50; frame = (21 228; 46 30); opaque = NO; autoresize = RM+BM; layer = <CALayer: 0x7f8cf0d6f6c0>>
¦ ¦ ¦ ¦ ¦ <UIButtonLabel: 0x7f8cf0f70160; frame = (0 6; 46 18); text = 'Button'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7f8cf0f70320>>
¦ ¦ ¦ ¦ <UIButton: 0x7f8cf0d72020; frame = (21 266; 324 113); opaque = NO; autoresize = RM+BM; layer = <CALayer: 0x7f8cf0d72240>>
¦ ¦ ¦ ¦ ¦ <UIButtonLabel: 0x7f8cf0f6e750; frame = (139 47.5; 46 18); text = 'Button'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7f8cf0f6e910>>
¦ ¦ ¦ ¦ <UIButton: 0x7f8cf0d70170; frame = (21 258; 46 30); opaque = NO; autoresize = RM+BM; layer = <CALayer: 0x7f8cf0d70390>>
¦ ¦ ¦ ¦ ¦ <UIButtonLabel: 0x7f8cf0f6bed0; frame = (0 6; 46 18); text = 'Button'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7f8cf0f6c210>>
¦ ¦ ¦ ¦ <UIView: 0x7f8cf0d6a980; frame = (314 20; 51 143); autoresize = RM+BM; layer = <CALayer: 0x7f8cf0d70a90>>
¦ ¦ ¦ ¦ <_UILayoutGuide: 0x7f8cf0d64380; frame = (0 0; 0 20); hidden = YES; layer = <CALayer: 0x7f8cf0d64530>>
¦ ¦ ¦ ¦ <_UILayoutGuide: 0x7f8cf0d71070; frame = (0 618; 0 49); hidden = YES; layer = <CALayer: 0x7f8cf0d6c570>>
¦ <UITabBar: 0x7f8cf0c35b10; frame = (0 618; 375 49); autoresize = W+TM; layer = <CALayer: 0x7f8cf0c31ae0>>
¦ ¦ <_UITabBarBackgroundView: 0x7f8cf0f77590; frame = (0 0; 375 49); autoresize = W; userInteractionEnabled = NO; layer = <CALayer: 0x7f8cf0f77910>>
¦ ¦ ¦ <_UIBackdropView: 0x7f8cf0f77d90; frame = (0 0; 375 49); opaque = NO; autoresize = W+H; userInteractionEnabled = NO; layer = <_UIBackdropViewLayer:
0x7f8cf0d74a60>>
¦ ¦ ¦ ¦ <_UIBackdropEffectView: 0x7f8cf0d75c50; frame = (0 0; 375 49); clipsToBounds = YES; opaque = NO; autoresize = W+H; userInteractionEnabled = NO; animations =
{ filters.colorMatrix.inputColorMatrix=<CABasicAnimation: 0x7f8cf0c02ed0>; }; layer = <CABackdropLayer: 0x7f8cf0d76390>>
¦ ¦ ¦ ¦ <UIView: 0x7f8cf0d77200; frame = (0 0; 375 49); hidden = YES; opaque = NO; autoresize = W+H; userInteractionEnabled = NO; layer = <CALayer: 0x7f8cf0d77310>>
¦ ¦ <UITabBarButton: 0x7f8cf0f48890; frame = (2 1; 184 48); opaque = NO; layer = <CALayer: 0x7f8cf0f579a0>>
¦ ¦ ¦ <UITabBarButtonLabel: 0x7f8cf0f4cc70; frame = (77 35; 29.5 12); text = 'Item 1'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7f8cf0f47ef0>>
¦ ¦ <UITabBarButton: 0x7f8cf0d620d0; frame = (190 1; 183 48); opaque = NO; layer = <CALayer: 0x7f8cf0d61e50>>
¦ ¦ ¦ <UITabBarButtonLabel: 0x7f8cf0d623c0; frame = (76.5 35; 29.5 12); text = 'Item 2'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7f8cf0d57560>>
¦ ¦ <UIImageView: 0x7f8cf0d788d0; frame = (0 -0.5; 375 0.5); autoresize = W; userInteractionEnabled = NO; layer = <CALayer: 0x7f8cf0d78380>>

10. ライブラリとして作ってみる
方針
let window = UIApplication.sharedApplication().keyWindow
rootView = window?.rootViewController?.view
・表示中のアプリのrootViewを取得
・取得したviewから再帰的に子viewを取得していく
let childViews = view.subviews
・viewが取得できればあとは表示するだけ！

11. DEMO

13. view表示時に
スイッチを追加

14. 観測できるview
にマーカーが付く

15. ポチポチすると
viewの詳細が観れる！！

16. func application(application: UIApplication, didFinishLaunchingWithOptions
launchOptions: [NSObject: AnyObject]?) -> Bool {
ViewMonitor.start()
return true
}
使い方

17. まとめ
・できるようになったこと
感覚による確認 数値による確認

18. おわりに
・以下で公開してますので気軽にご意見お願いします。スターほしい
ViewMonitor
https://github.com/daisuke0131/ViewMonitor
・勉強会主催してたりするのでご興味あったらご参加ください
http://d-cube.connpass.com/
daisuke0131