Coding Methodology

コーディングのセルフチェックに大活躍!Chrome拡張機能5選

2022 / 03 / 31

今回は、コーディング作業中やセルフチェックの際によく使用しているChromeの拡張機能を5つご紹介します。
いずれも必要充分なシンプルな拡張機能で、使い方の工夫次第でいろんな場面で役に立つので、ぜひ導入を検討してみてください。

コーディングのセルフチェックに大活躍!Chrome拡張機能5選

PerfectPixel by WellDoneCode (pixel perfect)

https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

コーディング中のブラウザ画面に、デザイン画像を重ねて検証できます。
JPG・PNGなどの画像形式で書き出したページデザインを重ねて、崩れがないか直接画面で確認できるので便利です。UIから、重ねる画像の透過度を「50%」、階調を「反転」に設定すれば、ぴったり重なった時には相殺されてグレーになるので、ボタンなどパーツの色の違いも細かく検証できます。

デザインに忠実なコーディングのほか、ワイヤーフレームや原稿を画像化したものや、スクリーンショットなどを読み込むことにより、文言チェックや要素の抜け漏れの確認にも使えます。

画像URLやクリップボードから画像を貼り付けられる機能もあり、サクッと確認したい時にも重宝しています。

ウェブページ全体をスクリーンショット – FireShot

https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg

新しいサイトテンプレートへの移行など、パーツのデザインは変わるけれど全体的なレイアウトはそこまで変更がなかったり、文言や画像は現行を流用する移行作業の際は、移行前のページのスクリーンショットを撮っておき、先に紹介したPerfectPixelで新規ページに重ねて適当にずらしたりしながら見比べることで、ざっくりと文言や画像などの正誤・抜け漏れの確認ができます。

この方法でざっと全体を確認してから改めてきちんとページ内検索機能で文言チェックをしたり、alt属性・リンクなどの目に見えない情報のチェックに入ることで、人力でのチェック作業をある程度効率化できます。

また、デザインやワイヤーがなく、いわゆる「よしなに」で制作したページを軽くプレビューしたいときにも、ページ全体のスクリーンショットは便利です。この拡張機能でページ全体のスクリーンショットを撮ったあと、確認画面で画像をクリップボードにコピーしてSlackなどのメッセージツールにペーストして共有すれば、自分のハードディスクに余計なデータを残さずに済みます。

WhatFont

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

ページ内で実際に反映されているフォント周りのCSSプロパティと値を、ブラウザの画面上でチェックできます。
デザインデータや指示書での指定と照らし合わせて、数値レベルで指示通りに実装できているかを、デベロッパーツールを開かなくても簡単に確認できます。

Open Multiple URLs

https://chrome.google.com/webstore/detail/open-multiple-urls/oifijhaokejakekmnjmphonojcfkpbbh

URLのリストを貼ると、そのページを一気に開ける拡張機能です。
ヘッダー・フッターなどの共通箇所や、同じテンプレートでできているページを並列で俯瞰して確認したい時に便利です。

最もよく使うのは移行案件の制作・セルフチェック時です。旧サイトと新サイトのページURL対応表があれば、拡張機能内でリストに成形して交互に表示させられるので、ある程度まとまったページ数を一気に俯瞰して見ることができます。

  1. 新旧ページURLの対応表を準備
  2. 丸ごとコピー
  3. 拡張機能を起動し、そのままペーストして「Extract URLs from text」をクリック
  4. リストに整形されるので「Open URLs」をクリックして表示

The QR Code Extension

https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb

Chromeで表示中のWebページのQRコードを生成します。
コーディングしたページの実機確認はもちろんのこと、参考サイトの実機確認にも使用できます。
レスポンシブ対応が当然になってきた今、理想の実装を実現している参考サイトを発見した場合、スマートフォンでの動作をその時点で確認しておくことで、より効率的にプロジェクトを進めることができます。

一覧に戻る

CODING FACTORYのWebサイトにご訪問いただき、ありがとうございます!サイトの改善や情報発信に活かすために、個人情報保護方針に基づいたCookieの取得と利用のご同意をお願いいたします!
個人情報保護方針の詳細