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

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

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

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

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

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

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

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

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

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

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

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

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

- (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];
}

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

けれども、ここでiOSシミュレータにある「不揃いのイメージ」にチェックを入れると、次のように見えます。

このように、見た目では正しく表示されているように見えても、実際には正しく表示されていないことがよくあります。

この原因をデバッグログから探ってみます。
まず 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));

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

こちらのデバッグログは

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));

いままであったオーバーレイはすべてなくなりました。

こちらのデバッグログは

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

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

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