こんにちは、よしたけです。
先日、弊社のリクルートサイトリニューアルのテストをしました。
そのテスト(主に表示崩れの確認)に「Responsive Viewer」を使ってみたところとても便利でした。
なので「Responsive Viewer」の使い方やよかったところをまとめてみました。

Responsive Viewerとは

1つのページを同時に複数の画面サイズで確認できるChrome拡張機能です。

・設定方法

以下のリンクをChromeで開いてインストールをクリックするだけです。
Chrome拡張版

※Firefoxで使う場合はこちら。
Firefoxアドオン版

・使い方

複数の画面サイズを確認したいサイトをChromeで開く
Responsive Viewerを開く(ツールバーの右側にある)

便利な機能

① 確認する画面サイズを追加する

右上の「＋」ボタンをクリックするとできる
WidthとHeightとUser Agentを指定できる
- UAはDefaultで「Chrome、Firefox、Edge、iPhone、iPad、Samsung Phone、Google Pixel」がある
- 任意で指定することも可能
画面サイズは以下のサイトが参考になる
- iPhone画面サイズ早見表（図付き）| TD3P
- 【iPhone/Android】スマホ解像度早見表 - 2019年度版（2008～2019年）

② スクロールを共通化する

左上の「Sync Scrolling」アイコンをクリックするとできる
どれか1つの画面をスクロールするとすべての画面が同じようにスクロールされる

③ 遷移を共通化する

左上の「Sync Clicks」アイコンをクリックするとできる
どれか1つの画面でリンクをクリックすると、すべての画面が同じリンクに遷移する
※ 画面上部のフォームにURLを入力しても同じことができます。

④ 特定の要素を探す

左上の「Inspect element」アイコンをクリックするとできる
Element名を入れるもよし、「Inspect by mouse」で要素をクリックするもよし
指定した要素部分が全部の画面で黄色く囲われる

⑤ 画面の向き(縦・横 / Portrait・Landscape)を切り替える

左下の「SCREEN DIRECTION」でできる

Tips

① 「新しいタブで開かれるリンク」はクリックしても遷移できない

「新しいタブで開かれるリンク(_blankが設定されているリンク)」はクリックしても遷移できないようになっているようです(2020/02/07現在)。
画面上部のフォームにURLを入力するとページを切り替えることができるので、この方法で回避することができます。
ですが、個人的には、リンクが正しい挙動をするのか確認は別のテストでやったほうが良いと思いました。

② Responsive Viewerでは表示が崩れているけど、検証機(実機)では崩れていないことがある

今回のテスト中は起きなかったのですが、画像のアスペクト比について。
Responsive Viewerでは表示が崩れているけど、検証機(実機)では崩れていないことがありました。
他のサービスをテストしているときに発見しました。

その後、同じ画面サイズの検証機で再現確認をしたところ、検証機では表示が崩れておらず、今のところ「検証機で表示が崩れているけどResponsive Viewerで表示が崩れていない」という事象を自分は確認していません。
なので「Responsive Viewerで確認し、表示が崩れていたら検証機(実機)で確認してみる」というアプローチが有効そうです。
※ 「Responsive Viwerで表示が崩れていると実機でも表示が崩れている」というのはもちろんありました。

③「Responsive Viewerで開いている画面数分」のアクセスがほぼ同時に発生する

開いている画面の数だけアクセスがほぼ同時に発生します。
もしライトな構成でテスト環境を構築している場合は注意したほうが良いと思います。

おわりに

Responsive Viwerで個人的に１番推せる機能は「マウスのスクロールとクリックを共通化できる」です。
これがとても実用的で、確認の時間を短くすることができました。
横に並べて見比べることができるし操作も共通化できるのは本当に便利ですね。
ありがたいツールなのでこれからも使っていく予定です。

最後に余談です。
今回テストした弊社リクルートサイトですが、無事テスト完了し現在公開中です。
エンジニア、コンサルタント、コーポレートスタッフ、デザイナー、そしてもちろんテストエンジニアも募集しているので、興味をもった方はぜひご応募ください。
※採用サイトへはページ下部のバナーからどうぞ。

Fusic Tech Blog

# 便利ツール

[Chrome拡張] 複数の画面サイズで表示を確認したいときは「Responsive Viewer」がとても便利