2012年1月23日

【iOS】Viewの開発・デバッグに役立つ色々

こんにちは、中川です。

最近はちょっとPHPから離れてMonacaを使ったiOSアプリの開発を行なっています。
Monacaでは基本的にHTML+CSS+JSでの開発となりますが、
今回開発中のものはObjective-Cを使ったネイティブの画面をカスタムで組み込んで利用したりしています。

HTML+CSSであれば画面を作るのは慣れていることもあり比較的簡単なのですが、
UIKitでのネイティブ画面となると微妙なズレの調整などで苦労する場面が多々ありました。
そんな時に役立ったTIPSなどをご紹介したいと思います。

■位置やサイズのログ出力

CGRect, CGSize, CGPoint など、NSStringFromXXXXXで簡単にログ出力することができます。


NSLog(@"frame: %@", NSStringFromCGRect(self.view.frame));
NSLog(@"size: %@", NSStringFromCGSize(self.view.frame.size));
NSLog(@"center: %@", NSStringFromCGPoint(self.view.center));

※出力結果


2012-01-23 15:51:51.125 Sample[23110:f803] frame: {{0, 0}, {320, 411}}
2012-01-23 15:51:51.127 Sample[23110:f803] size: {320, 411}
2012-01-23 15:51:51.128 Sample[23110:f803] center: {160, 205.5}

知ってる人には常識なことかもしれませんが、知るまでは size.width, size.heightなどと個別に出力してました。。。

■Viewのログ出力

UIVIewのframeなどは、上記のようにしなくとも、


NSLog(@"view: %@", view);

これで、


view: <UIView: 0x68aa750; frame = (0 0; 320 411); autoresize = W+H; layer = <CALayer: 0x68aa7d0>>

このように確認することもできます。

■Viewを再帰的にログ出力

指定したViewを再帰的にダンプすることができます。


NSLog(@"%@", [view performSelector:@selector(recursiveDescription)]);

※出力例


<UIView: 0x68ccc40; frame = (0 0; 320 411); autoresize = W+H; layer = <CALayer: 0x68cccc0>>
   | <UILabel: 0x68c3cc0; frame = (54 98; 212 43); text = 'First View'; clipsToBounds = YES; opaque = NO; autoresize = W+BM; userInteractionEnabled = NO; layer = <CALayer: 0x684d680>>
   | <UITextView: 0x68cce10; frame = (20 181; 280 88); text = 'first view...'; clipsToBounds = YES; opaque = NO; autoresize = W+BM; userInteractionEnabled = NO; layer = <CALayer: 0x68cc200>; contentOffset: {0, 0}>
   |    | <UITextSelectionView: 0x68cd230; frame = (0 0; 0 0); userInteractionEnabled = NO; layer = <CALayer: 0x68c47a0>>
   |    | <UIImageView: 0x68cdea0; frame = (273 54; 7 34); alpha = 0; opaque = NO; autoresize = LM; userInteractionEnabled = NO; layer = <CALayer: 0x68cdf10>> - (null)
   |    | <UIWebDocumentView: 0x718dc00; frame = (0 0; 280 34); text = 'first view...'; opaque = NO; userInteractionEnabled = NO; layer = <UIWebLayer: 0x68d15f0>>
   |    |    | <TileHostLayer: 0x68d1b00> (layer)
   |    | <UITextSelectionView: 0x68dbb80; frame = (0 0; 0 0); userInteractionEnabled = NO; layer = <CALayer: 0x68dbbe0>>

※スクショ：

■DCIntrospect

https://github.com/domesticcatsoftware/DCIntrospect

ちまちまログでやってられないって時に。
シミュレータ上でリアルタイムにビューの位置の確認、調整、ダンプ、カラーリング
などが行えます。これを知るまではViewの調整に非常に苦労しました・・・。

上記ページからダウンロードして「DCIntrospect」をプロジェクトに追加します。
DCIntrospect内で「QuartzCore.framework」を利用しているようですのでこちらも追加してください。
あとはAppDelegateなどで、以下のように組み込みます。


:
:
[window makeKeyAndDisplay]
// always call after makeKeyAndDisplay.
#if TARGET_IPHONE_SIMULATOR
    [[DCIntrospect sharedIntrospector] start];
#endif
:
:

これでシミュレータでアプリを起動してPCのキーボードのスペースを押すと
インスペクタが起動します。

Viewにボーダーや背景色を付けてデバッグしやすくしたり、Viewを矢印キーで移動させたりできます。
他にも画面上のViewを選択して「p」や「v」などで、ログ出力がアプリを起動しながら行えます。

「?」でヘルプ画面を表示できるという親切設計です。

■Stats

https://github.com/shu223/Stats
メモリ使用量やViewの数を表示しておくことができます。
使い方はいたって簡単で上記githubからダウンロードして、
AppDelegateなどに仕込んでやるだけと簡単です。


#import "Stats.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
:
:
  Stats *stats = [[[Stats alloc] initWithFrame:CGRectMake(10, 30, 100.0, 60.0)] autorelease];
  [self.window addSubview:stats];
:
:
  return YES;
}

これで以下のように常に画面に表示しておくことができます。

※参考: http://d.hatena.ne.jp/shu223/20110428/1303930059

■(おまけ) UIWebView内のデバッグ

あと、PhoneGapなどで開発していると、WebView内のHTML,JS,CSSをデバッグしたくなりますよね。
そんな時には以下のものが役に立ちました。
・weinre ( http://phonegap.github.com/weinre/ )
scriptタグをひとつ追加するだけで、WebkitのWebInspectorを使ったデバッグができるようになります！

・remoteデバッグ
シミュレータかつiOS5からとなりますが、以下の方法でもPCのSafariのWebInspectorを利用したデバッグが可能です。
こちらは、ブレークポイントも使えるJSのデバッグが可能になります。
AppDelegateなどで、


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
:
:
[NSClassFromString(@"WebView") performSelector:@selector(_enableRemoteInspector)];
:
:
}