ビューデバッガー「Reveal」の基礎

iOS開発者のためのパワフルなランタイムビューデバッガー「Reveal」。59ドルの有償アプリで、14日間試用することができるトライアル版が公開されています。

Revealは、iOSアプリのビューの階層を3Dで分かりやすく表示し、複雑なビューの構造を確認したり、ビューの属性をリアルタイムに変更することができるアプリです。

アプリ開発時にビューがうまく表示できない場合、実際にどのような構造になっているのか即座に確認できるので開発スピードを大幅に向上させることができます。

以下使用法を説明します。

まずは動作確認

Reveal.appを起動し「File > New Window」を選ぶと以下のような画面が表示されます。

右下の「Inspect out Sample App」を選択しましょう。

iOSシミュレーターが起動し、Revealがサンプルにアプリに接続します。Reveal内のアプリ表示は左右にドラッグすることで回転させることができます。平面では確認しずらいビューの重なりや大きさがわかりやすくなります。

右側にあるインスペクタには個別のビューの情報が詳細に表示されます。サイズや位置、レイアウト、バックグラウンドの色、テキストの色やフォントなど、さまざまな情報が表示されていて、変更することもできます。

左側のペインにはビューの階層がツリー形式で表示されています。

雰囲気がつかめたら自作アプリへ組み込んでみます。いくつかの方法がGetting Startedで説明されていますが、CocoaPodsを使う方法が簡単です。

Podfileに以下を追加します。

target 'YourMainAppTargetName' do
    pod 'Reveal-SDK', :configurations => ['Debug']
end

「pod install」を実行します。

プロジェクトをXcodeで通常通りにデバッグし、Revealの上部のアドレスバーをクリックして、デモプロジェクトに接続してみましょう。

上の画面のようにRevealにシミュレーターの画面が表示されれば成功です。

Revealを使用すればGUIのデバッグやデザインを高速化することができます。またiOSの標準コンポーネントの設定をインスペクタで確認できるのも便利です(フォントやサイズなど)。

有料ですがそれだけの価値はある開発者向けツールといえると思います。