私がWebサイトのテストで気を付けていること：第５回

SATO

お久しぶりです！しばらく更新が滞っておりましたが、第５回でございます。

前回までのおさらい

Webサイトの改修に伴う「表示テスト」を行うにあたり、高い顧客要求を満たすために「（改修前後のページに対して）スクショを撮影して重ね合わせる」という手間のかかる作業を行っていたところに、救世主が現れた！

科学の力による改善の是非について

今回触れる「救世主」とは、とある社内ツールのこと。まさしく「科学の力」と「人力」の合わせ技です。それはもちろん、土台となるソフトウェアやプログラミング環境と、その上でコードを組むエンジニアリングのことを指し、ネットでよく話題になっている、「作業をExcelのマクロで自動化したら上司に怒られた」というのと、根本は変わりません。幸い、弊社はIT企業ですし、こういう効率化に否定的な人間はいません。こういった風潮が、もっと広がればいいですよね。それでは、本題に入りましょう。

人海戦術と光明

Webサイトの表示比較テストにおいて、時間が掛かっていたポイントとしては「複数あるページのスクリーンショット撮影」と、それを「画像処理ソフトで重ね合わせて表示のズレがないかを確認する」という２つの作業でした。正直申し上げて、人力で行う作業ですから、効率化には限界がありました。そこで、一人寂しく残っていた私を見かねて、エンジニアの一人がとっても便利なツールを作ってくれたのです。

機能と効能

ツールとしてはシンプルで、「URLを入れるとスクリーンショットを撮ってくれる（奇跡のベーシック認証対応！）」「指定した２つの画像に対しその同一性を確認し、不一致部分があればそこを着色してアラート表示を行い、おまけで画像間の一致率が表示される」という２つの機能を有するものでした。とはいえこのツールを用いる事により、時間のかかっていたスクリーンショットの撮影がワンタッチに、そして何より時間のかかっていた比較作業が、ほぼ自動化されたのです。もちろん、ツールによる比較後には着色された不一致部分に対し、見つかった場合にはそれが修正対象となる「表示崩れ」なのか、修正不要の「改修や記事の追加に伴う変化」なのかを判断せねばならず、それは相変わらず人力による作業でしたが、作業工数の削減効果は絶大で、約半分の時間で済むようになりました。その他にも、一番危険なポイントである「数ピクセル単位の微細なズレの見落とし」がなくなり、速度だけでなく確認作業の精度も向上しました。

一歩前へ、ていうかもっと前へ

さて、弊社ホームページをご覧になった方なら目に留まった方もいるのではないでしょうか。これってなんぞや？　と思ったかと思います。宣伝文句としては「このサービスは主に開発会社様向けのサービスです。高い精度で表示崩れを起こさないことを求められるプロジェクトの表示確認に力を発揮します。」と書いてありますが、具体的に何をどうしてくれるのか、については触れていません。実はこれ、今回ご紹介した「Webサイトの表示検証用社内ツール」を発展させ、Webサービス化したものなんです。まだ開発中のβ段階ですが、根本的な機能は同じです。「WordPressから静的サイトを吐き出したけど狙い通りのレイアウトになっているかな？」、「サイトに機能追加を行ったけど、レイアウトは維持されているかな？」というような、同一性が求められる二者間の比較に効果を発揮する、とても簡単で強力なツールです。正式サービス開始のその日まで、皆様どうぞお待ちくださいませ。