LIFULL Creators Blog

「株式会社LIFULL(ライフル)」の社員によるブログです。

iOSシミュレータを使ったデバッグ時に気を使ってもらいたいこと

株式会社ネクストでエンジニアをやっております サム と申します。


突然ですが、iOSアプリケーションを開発したことがある人は必ず iOSシミュレータ でテストを行っていると思います。
しかし、そのテストは動作確認だけやっておりませんか?

実は、後少しだけ確認することで、レンタリングの速度などを改善することができます。
これにより、アニメーションなども比較的効率良く実行することができます。

今回は、意外に知っていそうで知らない「iOSシミュレータのデバック」について記事を書きます。



iOSシミュレータのメニューに「デバッグ」という項目があります。
こちらに次の4つの項目があると思います。

  • ブレンドレイヤー(Color Blended Layers)
  • コピーイメージ(Color Copied Images)
  • 不揃いのイメージ(Color Misaligned Images)
  • オフスクリーンレンダリング(Color Off Screen Rendered)

今回は、よく使われる「ブレンドレイヤー」および「不揃いのイメージ」について説明します。


・ブレンドレイヤー
レイヤーが重なり合っている部分を色分けして表示してくれます。
f:id:nextdeveloper:20131112190731p:plain

複数のレイヤーが重なって描画されている部分は、赤の強調表示になります。
これを解消するには、対象となる部品の背景色を透明ではなく、背景色と同一色に変更することです。

f:id:nextdeveloper:20131112190746p:plain
赤い部分をなるべく削減することで、描画性能が大幅に向上します。


・不揃いのイメージ
ソースピクセルがデスティネーションピクセルに揃っていない画像上に、黄色をオーバーレイして表示します。

次のソースコードを実行してみると

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIImage *homesKunImage = [UIImage imageNamed:@"homes_kun"];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:homesKunImage];

    // 画像を画面中央に表示する
    imageView.center = self.view.center;

    [self.view addSubview:imageView];
}

f:id:nextdeveloper:20131112190828p:plain
iOSシミュレータ上では正しく表示されているように見えます。

けれども、ここでiOSシミュレータにある「不揃いのイメージ」にチェックを入れると、次のように見えます。
f:id:nextdeveloper:20131112190843p:plain
このように、見た目では正しく表示されているように見えても、実際には正しく表示されていないことがよくあります。

この原因をデバッグログから探ってみます。
まず UIImageView の center を設定したときの前後でイメージビューのフレームの変化を確認してみます。

NSLog(@"before: %@", NSStringFromCGRect(imageView.frame));
// 画像を画面中央に表示する
imageView.center = self.view.center;
NSLog(@"after: %@", NSStringFromCGRect(imageView.frame));

これを実行すると、次のようにログが出力されます。

before: {{0, 0}, {120.5, 141.5}}
after: {{99.75, 213.25}, {120.5, 141.5}}

最初のフレームの座標は {0,0} の整数に対して、中央表示後は {99.75, 213.25} と浮動小数点になっています。
こちらが原因なのです。

では、この浮動小数点を丸めれば解決しそうですので CGRectIntegral を使った、次のソースコードを実行してみます。

NSLog(@"before: %@", NSStringFromCGRect(imageView.frame));
// 画像を画面中央に表示する
imageView.center = self.view.center;
// フレームの値をまとめる
imageView.frame = CGRectIntegral(imageView.frame);
NSLog(@"after: %@", NSStringFromCGRect(imageView.frame));

f:id:nextdeveloper:20131112190907p:plain
このような問題は、画像サイズが奇数で作成されていることで発生します。

こちらのデバッグログは

before: {{0, 0}, {120.5, 141.5}}
after: {{99, 213}, {122, 142}}

画像フレームサイズも丸められております。
そのため、実際の画像サイズと表示されてる画像フレームが異なったため、黄色にオーバーレイされているのです。

そこで、フレームサイズを元の画像に合わせてあげます。

NSLog(@"before: %@", NSStringFromCGRect(imageView.frame));
// 画像を画面中央に表示する
imageView.center = self.view.center;
// フレームの値をまとめる
imageView.frame = CGRectIntegral(imageView.frame);
// フレームサイズを調整する
imageView.frame = CGRectMake(CGRectGetMinX(imageView.frame), CGRectGetMinY(imageView.frame), image.size.width, image.size.height);
NSLog(@"after: %@", NSStringFromCGRect(imageView.frame));

f:id:nextdeveloper:20131112190921p:plain
いままであったオーバーレイはすべてなくなりました。

こちらのデバッグログは

before: {{0, 0}, {120.5, 141.5}}
after: {{99, 213}, {120.5, 141.5}}

と、フレームの座標のみを設定したものになります。


このように、ほんの少し気を使うことで、アプリケーションはより快適に動作することでしょう。