【NTTレゾナント】「gooラボ」、スマホサイトの 自動レイアウトチェックサービスを公開

2017年5月9日



NTTレゾナント株式会社



「gooラボ」、スマホサイトの自動レイアウトチェックサービスを公開

～サイトをパーツごとに比較し、レイアウト崩れを自動検知～

https://labs.goo.ne.jp/autolayoutchecker/



　NTTレゾナント株式会社(本社：東京都港区、代表取締役社長：若井 昌宏、以下、NTTレゾナント)は、日本電信電話株式会社(以下、NTT)のソフトウェアイノベーションセンタ(*1)が開発したUIレイアウトテスト技術とNTTレゾナントが提供するクラウド型検証サービス「Remote TestKit(リモートテストキット)」(*2) (以下、Remote TestKit)を組み合わせたスマートフォンサイトの自動レイアウトチェックサービス「AutoLayoutChecker(オートレイアウトチェッカー)」のβサービスを本日より、「gooラボ」にて公開します。



１．【背景】スマホの機種やOSに依存するレイアウト崩れのチェックにかかる労力は膨大

　ウェブサイトでは、スマホの機種やOSの違いによりレイアウトの崩れが発生します。この問題に対し、これまでサイト提供者は、サイトを公開する前に、目視による検証やツールによる検証を行っていました。しかし、目視による検証は、確認作業に多くの時間がかかり、また誤り箇所を見逃してしまう課題がありました。また、ツールによる検証方法は、既存のツールでは、サイト全体を一つの大きな画像として崩れの確認を行うため、例えば「サイト内の一部の画像が欠落すると、サイト全体が崩れている」と過剰に検知してしまい、具体的な崩れ箇所がわかりづらいという問題がありました。



２．【サービス概要】パーツ単位で比較することでレイアウト崩れの箇所を明確化

　これらの課題を踏まえ、今回、NTTレゾナントが提供する「AutoLayoutChecker」では、NTTの開発したUIレイアウトテスト技術を用いることにより、サイトをパーツごとに比較し、パーツ単位での崩れを検出することを可能にしました。これにより、

1.　画像・文字列単位での変化を、パーツ毎の特性に応じて、それぞれに最適な比較手法を用いることができる

2.　他のパーツの変更などによる影響を受けずに差異を比較できる

3.　差異をピンポイントで指摘することができる

といったメリットが得られ、目視や既存ツールによる検証に比べ、短時間かつ高精度なレイアウトチェックを可能としています。



・レイアウトチェックの具体例

■領域の抜け、パーツ単位の移動

(a) 広告が消失し、全体が上にずれている

(b) アイコンがなくなった



■文字列単位での変化

(c) 文字列が変わった



　また、画像認識でパーツごとに区切り、そのパーツ単位で比較を行うため、移動やパーツの追加・消失に対応が可能です。



　さらに、「AutoLayoutChecker」では、「Remote TestKit」を用いて、クラウド上のスマートフォン実機でサイトのキャプチャーを行います。これにより、エミュレーターでは再現できない、実際に起こっているレイアウト崩れや差異を検知することができます。



・利用方法

https://labs.goo.ne.jp/autolayoutchecker/

ご利用にあたっては、ユーザー登録等の必要はありません。βサービス提供のため、検証用の端末は9機種となります。



(1)　 端末を選択

　比較する端末を2台選択してください。

(2)　 URLを入力

　検証したいサイトのURLを入力し、「確認画面へ」ボタンを押下すると、確認用のモーダルウィンドウが表示されます。画面内の「検証開始」ボタンを押下すると、選択した端末の画面のキャプチャーが実行され、キャプチャー完了後に画面同士の差異の解析が行われます。

(3)　 解析結果確認

　解析が終わり、「解析結果を確認する」を選択すると、選択した2つの端末の画面が表示されます。差異は赤くハイライトされるため、崩れがひとめでわかります。



３．【今後について】ソフトウェアテストにおける課題を、新技術を用いた自動化で解決

　NTTレゾナントではこれまでも、「Remote TestKit」の提供などを通じて、ソフトウェアの開発・テストを支援して参りました。今後はさらにテスト自動化分野を強化し、引き続きNTTと連携して新たなテスト技術の開発を進めて参ります。また、UIレイアウトテスト技術と「Remote TestKit」を組み合わせた、ソフトウェアテストにおける課題解決を目指したサービスの提供や、テスト自動化コンサルティングについても行っていく予定です。



【補足】

(*1) 「NTTソフトウェアイノベーションセンタ」(http://www.sic.ecl.ntt.co.jp/index.html)

(*2) 「Remote TestKit」(https://appkitbox.com/testkit/)

「Remote TestKit」は、スマホアプリやスマホ用Webサイトをクラウド上で検証することができる開発者支援サービスです。利用者は実機を購入する必要がなく、クラウド上で500機種以上のスマホ・タブレット端末の動作検証をすることができます。また、複数の端末に自動でテストシナリオを実施する「自動テスト」機能など、開発者を支援するさまざまな機能があり、検証を担当する皆さまの負担を軽減します。



※ 記載されている会社名、サービス名および商品名は、各社の登録商標または商標です。

以上