こんにちは。品質管理部の弓削です。
あっという間に Fenrir Advent Calendar 2016 も16日目です。
きらびやかなイルミネーションが目にも心にも刺さってきますが、この時期になると後輩から「クリスマスは悲しみしか連れてこない」と言われたのを思い出します。
と、先にわたしの中で殿堂入り済みのグッとくるセリフを紹介してしまいましたが、今回はレイアウト検証時に起きる問題と、それを劇的に解消してくれ、2016 年最もグッときたレイアウトデバッグツール「Peek」をご紹介いたします。
レイアウト指摘はむずかしい
デザイン・レイアウトに関するテストは、担当デザイナーが行うデザインテストという工程が設けられています。では、わたしたち品質管理部が行うテスト工程ではレイアウトをまったく見ないのか？というと、そんなことはありません。
むしろ見ています。めちゃくちゃ見ています。
ほかに形容しようのないくらいに、それはもう。
レイアウトの指摘をするとき、わたしがとっている手順はおおよそ以下の形です。
- 画面キャプチャを取得 -> マージン(サイズ)を測る -> (DesignSpec と一致してなかったら)指摘
- 画面キャプチャを取得 -> カラーピッカーでカラーコードを取得 -> (DesignSpec と一致してなかったら)指摘
- なんか変だよ見ておいて！
正しい修正は、正しい指摘から。
ですが、どんなにがんばってマージンや色を測ったとしても、それが目視で確認できるギリギリのずれの場合は正確な値を取れないことがほとんど。この場合、不具合かどうか曖昧な状態でエンジニアに指摘を投げることになります。
しっかりレイアウト指摘をしようとすると時間がかかって、その他のテストが遅れていく…これはよくない。なんとかしたい。
かといって、なんか変だよ！ばかりの指摘では、エンジニアの負担がふくれていく…これはよくない。なんとかしたい。
あああ、モヤモヤする！と、ここでようやく Peek の登場です。
デザイナーもエンジニアもテスターも。モヤモヤを一気に解消してくれる Peek!
公式サイト Peek
Peek とは、アプリに組み込むことで使える iOS アプリ向けのレイアウトデバッグツールで、 Obejective-C と Swift に対応したオープンソースのライブラリです。 DesignSpec どおりにレイアウト実装されているかを、実機上で確認できます！画期的！
Peek ではざっくり以下のことを確認できます。
- View のサイズ
- View 間のマージン
- Font Type
- Font Color
- Font Size
- Background Color
- 配置されたリソースのサイズ
などなど
アプリを起動し、シェイクジェスチャ or 音量キーで Peek を起動したらあとは確認したい要素を選択します。
この状態で見えている数字が、親の View に対する 子の View とのマージンです。さらにこの状態でダブルタップすると…
選択した View 内のレイアウト実装がどうなっているのか、詳細情報を閲覧できます。
Peek を使うと指示の誤りなのか実装の誤りなのかを判別しやすくなったり、Peek を起動した状態でキャプチャを撮ればそのまま指摘にも使える。これで起票速度も指摘の正確さもアップします！んー画期的！（2回目）
さらに Peek が優秀なのは、担当デザイナーやレイアウト指摘に長けたテスターじゃなくても、わずかな違いにも気づけること。
だれにでも 1pixel のこだわりを可能にする Peek にグググっ!
みなさんも使ってみてはいかがでしょう！と言いたいけれど…
Peek ライブラリは Swift 3 には未対応。そしてなんと、依存ライブラリのバージョンアップに伴い利用できなくなっています。
悩みが解消された！と喜んでいた矢先の悲報に、涙が止まりません。
紹介しておいて使えないのかよ！と誰かが直接心に語りかけてきているようです。えぇ、全くそのとおりです。 でも、2016 年にグッときてしまったので仕方ありません。
いまはただ、『お願い、がんばって中のひと……！』と叫ぶことしかできませんが、
どうかどうか遠くロンドンまで、この悲鳴にも似た声がとどきますように……。
最後に
『メンテしてるひとたちの存在を忘れるぐらい、当たり前に提供する。それが当たり前を作ってるひとたちの目指してることだって思うから。』
―日本テレビ 「地味にスゴイ！校閲ガール・河野悦子」より
わたしたちにとって、「こんなの気づくのどうかしてる」「あなたがさわると何か起きる」「おまえの目はどうなっているんだ…」は最高の褒めことば。
たかが 1pixel されど 1pixel。このこだわりこそが当たり前を作っているのだと信じて、精進しつづけたいと思います！
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
