members

members

Webサイト検証で導入したい 作業の捗るChrome拡張機能

Tweet

皆さんはWebサイトを作るとき、作って「はい、終わり!」だなんて思っていませんか?
作った後には、本当に意図したサイトができているのか、検証する作業が残っています。
テキストは原稿通りか、画像の表示に誤りはないか、ブラウザ間で表示に違いがないかなどいくつもの検証項目があり、すべての検証をパスして初めて完成するのです。
とはいえ、すべての検証を手作業でやるのは非常に手間がかかるし、ミスが出てしまうのも怖いです。

そのような手間やミスを削減するためのツールはたくさんありますが、中でも手軽に導入できるものとして、Chrome拡張機能があります。
本記事では、数あるChrome拡張機能の中から、おすすめのものを5つ紹介したいと思います。

HTML Coding Checker

初めに紹介するのは、HTML Coding Checkerです。
非常に多機能で、リンク先の生存チェックや、META情報の一覧化、デザインと重ね合わせての差分チェックなど、検証の際にうれしい機能が盛りだくさんとなっています。
特に便利なのが画像ファイルの一覧化で、ページ内で使用している画像と詳細データをすべて一覧化する機能があります。
中でもALTは、Webアクセシビリティを向上させるために重要な項目で、付け忘れや誤字などのミスを検出するのに、一役買ってくれます。

ページ内のALTを一括チェックする様子のキャプチャ画像

HTML Coding Checker

Validity

2番目に紹介するのは、Validityです。
Validityはサイトに存在するエラーを検知できる拡張機能で、見つけたエラーをコンソールに一覧表示してくれます。
ちょっとしたタグのうち忘れなど、はっきりとした画面への影響がなく、見つけづらいものをまとめて発見できるため、ソースコードとにらめっこしなくともエラーを一掃することができます。

コンソール画面にエラーを一括表示する様子のキャプチャ

Validity

Awesome Screenshot

3番目に紹介するのは、Awesome Screenshotです。
Awesome Screenshotはサイトのキャプチャをとることができる拡張機能です。
キャプチャ系の拡張機能は他にもありますが、Awesome Screenshotの特筆すべきは、キャプチャにコメントを記入できることです。
ページ全体もしくは一部をキャプチャした後に、「ここを修正してほしい」などコメントを記入することで、手軽に修正依頼を出すことができます。

サイトをキャプチャしてコメントを記入する様子のキャプチャ

Awesome Screenshot

Pasty

4番目に紹介するのは、Pastyです。
検証対象が2,3ページならまだしも、時には何十ページも検証しなければならない場合があります。
そんなとき、1ページずつURLをコピペしたり、リンクをクリックしたりしてページを開くのは、とても面倒です。
Pastyを使うとURLの一覧をコピーする事で一度にまとめてページを開くことが出来ます。
URLに不要な文字が付いてしまっていても、自動で省いてくれることも便利な点です。

URL一覧からサイトを一括で開く様子のキャプチャ

Pasty

The QR Code Extension

5番目に紹介するのは、The QR Code Extensionです。
検証の際には、複数のブラウザやOSで検証し、それぞれに差異がないことを確認する必要があります。
スマホ端末でも検証するのですが、そんなときにThe QR Code Extensionが役立ちます。
開いているサイトのURLへリンクするためのQRコードを作成することができ、それをスマホで読み取ることで気軽にスマホでの検証を行うことができます。

サイトからQRコードを生成する様子のキャプチャ

The QR Code Extension

いかがでしょうか?
Chrome拡張機能は他にも便利なものがたくさんありますが、まずは紹介した5個をおさえておくと、普段のちょっとした作業が楽になるはずです。
「なんかこの作業面倒くさいな、なんとかならないかな?」と思うことがあれば、拡張機能を探し、自分なりの快適なChromeにカスタマイズしてみてください。

コラム執筆者

BU1-22
本澤孝至
主にコーディングを業務で行っています。文章を書くのは苦手ですが、なにかしら益になる情報を提供したいと思います。