Googlechromeには様々な拡張機能があり、ちょっとしたものから知っていると知らないとでは効率性が大きく変わるものまで、色々な拡張機能があります。
今回はコーディング作業において経験上これはあった方がいいと感じた拡張機能を紹介していきます。
PerfectPixel by WellDoneCode (pixel perfect)
~ピクセルパーフェクトのお供~
https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi
チェックしたいページのデザイン画像を入力すると、ブラウザ画面上に重なるように表示され、透明度などを操作することができます。
これによりデザインと実際コーディングしたページがどれ位ピッタリとあっているか、一目瞭然になります。
これを使用しながらchromeの検証機能でマージンなどを調整すれば、効率的にピクセルパーフェクトに近づけられます。
ピクセルパーフェクトが必要な案件にはマストなツールだと思います。
HeadingsMap
~ページ内の見出しを一覧にしてチェック~
https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
ページ内の見出し(h1~h6タグの内容)を一覧にして内容を確認します。
h1~h6タグの順番が変だったり抜けがあるとその部分が赤く表示されます。
チェック時に役立つツールの１つです。
Alt & Meta viewer
~ページ内のmetaとaltが一目でわかる~
https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl
ページ内のmetaとaltの内容が一目でわかるようになります。
altは対象の画像の上に表示されるのでわかりやすです。
こちらもチェックの際によく使用します。
HTMLエラーチェッカー
~簡易なhtmlチェッカー~
https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja
ボタン一つでそのページのhtmlソースをチェックしてくれます。
最終チェックとしてはこころもとないですが、作業中の閉じタグ忘れや構文エラーを見つけて修正するのに役立ちます。
FireShot
~ウェブページ全体をスクリーンショット~
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg
スクリーンショットの拡張機能で、pcのものとは違いwebページ全体を撮影できるところが案件によっては助かります。
HTML差分(diff)チェックツール
~テスト環境と本番環境のdiffチェックがワンボタンで~
https://chrome.google.com/webstore/detail/html-diff-check-tool/fjbonpakihikkocmockbkndhooihpijo
ワンボタンで２つのサイトのソースコードの差分チェックができます。
チェックしたいテスト環境と本番環境のURLを登録すれば、ワンボタンで 本番アップ時のdiffチェックが可能になります。
昔に私が100ページ程の更新案件を担当した際に、1ページごとにいちいち本番環境のソースとテスト環境のソースをdiffチェックサイトに貼り付けて泣きながら作業していたところを、先輩にこれを教えてもらって大助かりした経験があります。
今回は一旦以上になります。ツール一つで作業効率が大幅に変わる可能性があるので、常にこういった情報にはアンテナを貼っておきたいと思っております。
少しでもお役に立てられれば幸いです！ 今回紹介した以外でおすすめの拡張機能があれば教えていただけると助かります。