Web系のエンジニアであれば開発ツールとしてブラウザをハードに使っているのではないでしょうか。日々使うツールだからこそ、自分の好みにカスタマイズしたいという方も多いはず。

本記事では、最もブラウザでシェアを誇るGoogle Chromeの拡張機能についてまとめました。開発業務を効率化するためにも、便利な拡張機能は大いに利用していきましょう。

このニュースを読んだあなたにオススメ

Facebookをさらに便利に！オススメのChrome拡張機能12選
作業効率がアップ！オススメのChrome拡張機能20選
誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法

必携の拡張機能4つ

まずは、SEやディレクターなど、エンジニア向けの拡張機能からご紹介しましょう。

1. Tag Assistant

https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk

ホームページやウェブサービスの開発において、アクセス解析サービスのGoogleアナリティクス（Google Analytics）やインターネット広告サービスのGoogle AdWordsなど、複数のタグを使用することが多いです。

こういったタグの管理に使えるのが、Tag Assistantです。ページに埋め込まれているタグを確認したり、それぞれのタグが正常に動作しているのかを確認することができます。ホームページを立ち上げた時、トラブルの検証にも活躍してくれるでしょう。

2. YSlow

https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh

Yahoo!のパフォーマンスツールをベースにしている拡張機能で、ホームページの表示速度をはじめ、パフォーマンスのチェックができます。各項目に沿って、ページのグレードが計算・表示されます。

ページのパフォーマンスだけでなく、問題となっているポイント（ファイル）もリストアップしてくれるため、ページの改善にも活かしていきましょう。

3. EditThisCookie

https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=ja

ページに保存されているCookie（ページに一時的に保存されている情報のこと）が閲覧できる拡張機能です。ドメインや名称、値、有効期限などの詳細なCookie情報が確認できます。閲覧以外にも、追加や編集、削除、保護、ブロックなどの豊富な機能が使えます。

なおCookie情報は、JSON形式でエクスポート/インポートをしたり、検索することも可能です。

4. ColorPick Eyedropper

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

写真などの画像素材に使われている、カラーコードが調べられる拡張機能です。URLの横にあるアイコンをクリックし、カラーコードを調べたい要素にマウスオーバーすると、該当するカラーコードが表示されます。

エンジニア以外にもおすすめ！便利な拡張機能3つ

エンジニアやディレクターにオススメの拡張機能についてご紹介しましたが、ここからは非エンジニアにもオススメの拡張機能についてご紹介していきます。日ごろの業務を効率化できる優れものばかりのため、積極的に使っていきましょう。

5. Awesome Screenshot

https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja

表示しているページのキャプチャ（スクリーンショット）を撮るための拡張機能です。キャプチャは幅広い用途に使用できますし、Chromeを使っているのであれば、ぜひ活用したい拡張機能の一つです。個人用の記録として使ってもいいですし、インストラクションやブログ記事の作成にも活用できます。

フルページでのキャプチャが撮れることがAwesome Screenshotの特徴。スマホの登場によって縦長のWebページが増えているため、ページ全体のキャプチャが撮れるのは大きなメリットです。

また、撮影したキャプチャに注釈（図形や文字など）をつけたり、モザイク（ブラーエフェクト）をかけることも可能です。

6. Evernote Web Clipper

https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc?hl=ja

クラウドにメモを保存しておくことのできるサービスとして、メジャーなEvernote。メモ以外にもさまざまなファイルをストックしておくことができます。例えば、写真の保存、ToDoを保存してタスク管理として使うこともできます。

Evernote Web Clipperは、閲覧しているページをEvernoteにクリップすることができる拡張機能です。気になったページを、手軽にストックしておくことができます。

ブラウザのブックマーク機能を使ってもいいのですが、Evernoteを使う方が便利でしょう。クリップしたページを分類したり、タグ付け、キーワードでの検索もできます。

なおクリップする形式は、「ページ全体」と「選択した範囲」、「簡易版」の3種類から選ぶことができます。

7. OneTab

https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall?hl=ja

Chromeを使っていると、ついタブの数が増えてしまうことがありませんか。ブラウザはメモリを結構使ってしまうため、PCが重くなることもあります。かといって、一度タブを閉じると開いていたページがわからなくなることも。さらに、間違ってタブを閉じてしまうことだってあるでしょう。

OneTabは、そういった悩みを解決してくれる拡張機能です。複数のタブを一箇所にリストアップし、まとめておくことができます。タブはいったん閉じられるので、大幅にメモリが節約できます。

タブを閲覧したい場合は個別に開くか、一気に全タブを復元することも可能です。タブのインポート/エクスポート機能もついているので、開いていたタブのバックアップとしても使えます。

まとめ

それぞれの職種ごとにオススメの拡張機能をご紹介しました。

Chromeは単なるブラウザソフトではなく、いまや立派な開発ツールの一つです。ご紹介した拡張機能を活用して、快適な開発環境をつくっていきましょう。

このニュースを読んだあなたにオススメ

Facebookをさらに便利に！オススメのChrome拡張機能12選
作業効率がアップ！オススメのChrome拡張機能20選
誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法