WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： トレンド >TIPS

Webサイト制作を行う上で欠かせないのが、制作後の納品前チェックです。不備がなく制作したつもりでも、第三者から見た際に見つかる不具合もあります。

今回は、そんなチェック作業時に便利に使用できるChromeの拡張機能をご紹介します。

Copy All URLs

Copy All URLs

こちらの拡張機能は、現在同一ウィンドウ内に開いているタブのURLを一括でまとめてコピーできるというものです。

複数タブのURLを一度にコピー

このようにタブを複数開いている状態で、この拡張機能のアイコンであるパラソルのアイコンをクリックします。

出てきたメニューの中から「Copy」を選択します。すると、クリップボードに全てのタブのURLがコピーされます。

テキストエディタに貼り付けてみると、上記のように全てのタブのURLが1行ごとに貼り付けられます。

複数URLを一度に開くことも可能

先ほどの逆で、URLのリストをクリップボードにコピーしておき、それらのURLを一度にまとめて開くことも可能です。

複数のURLをコピーした状態で、「Paste」をクリックすると、一度に複数URLのページを開くことができます。

モバイルシミュレーター – レスポンシブテストツール

モバイルシミュレーター – レスポンシブテストツール

こちらの拡張機能は、Chrome上で、様々なスマートフォンやタブレットの環境下での表示をシミュレートすることができるものです。

表示を確認したいページを開いた状態で、拡張機能のボタンをクリックします。

すると、スマートフォンでの表示を確認することができます。

様々な解像度の端末表示の確認が可能

右側にある赤枠で囲んだ部分のボタンをクリックすると、様々な端末が表示されますので、任意の端末をクリックすると、その端末での表示をシミュレートできます。

「PRO」の表記があるものは無料で使用することはできませんが、それでも十分な数の端末ラインナップとなっています。

フレーム付きのスクリーンショットが取得できる

右側にあるカメラのマークをクリックするとスクリーンショットを取得することができます。
その際に、スマートフォンのフレームを含めたスクリーンショットを取得することができます。

フレームを付けてスクリーンショットを撮影することで、スマートフォンでの見た目であることがわかりやすくなるため、プレゼン資料などへの組み込みに重宝します。

QR Code Generator

QR Code Generator

こちらの拡張機能は、現在開いているWebサイトにアクセスするためのQRコードをワンタッチで作成できます。

拡張機能をインストールした後、ボタンをクリックすると現在のページのQRコードが表示されますので、スマホで撮影すればすぐにスマートフォン実機でアクセスすることができます。

このように表示されたQRコードをスマートフォンで撮影すれば、すぐにそのWebページの実機での表示確認を行うことができるので、非常に便利です。

まとめ

今回はChromeで使用できるWebサイトのチェックに重宝する拡張機能を3つご紹介しました。

様々な拡張機能が存在していますが、これらの機能を使用することで時間がかかるチェック作業も効率化することが可能ですので、ぜひ一度取り入れてみてください。