GoogleChrome拡張機能は、ブラウザ上で手軽に追加できる便利なツールの一つとして多種多様な機能が存在し、あまりの多さに迷ってしまうほどです。
弊社エンジニアの間でもChrome拡張機能は活用されていますので、その中から実際に使っているオススメ拡張機能を厳選してご紹介します。

中には、エンジニアの方に限らず、Webサイトに携わる方であればインストールして欲しい拡張機能もありますので、ぜひ参考にしてみてください。

※執筆時(2015年9月24日)時点では、どれも無料で使用することができます。

エンジニアにオススメのChrome拡張機能まとめ

1.YSlow

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

Webサイトのパフォーマンス計測と問題点の発見を行うことができるChrome拡張機能です。
総合評価として、該当のWebサイトのグレードとスコアが分かり、項目別にA〜Fで評価をしてくれます。
グレードがAに、点数が100点に近ければ近いほど、パフォーマンスのよいWebサイトと評価されます。

各項目では、改善すべき内容や改善の対象となるファイルが表示されます。
どこにどれくらいの容量がかかっているのかの確認もできるので、サイトパフォーマンスの向上を考えている方にはオススメしたい拡張機能です。

2.JSONView

JSONView.png
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc

JSONデータを自動で整形してくれるChrome拡張機能です。
JSONViewを入れておくだけで、改行やスペースなどで読みにくくなっているJSONデータを自動で整形してくれます。
整形されたソースコードを見ると、該当部分はハイライトされ、分かりやすく表示されています。

3.Tag Asisstant

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

Google AnalyticsやAdWordsなどの計測タグの設置状況を調べることができるChrome拡張機能です。
インストール後にURLバーの横に表示されるアイコンをクリックすると、設置状況を確認することができます。
正常に動作している場合は「working」、正常に動作していない場合は「not working」と表示されます。
ここをクリックすると、詳細情報を確認することもできます。

オプション機能も充実しており、全ページ検証、検証レベルの設定などが可能です。
トラッキングコードや計測タグなどを設置した後やトラブルが起きた場合などにチェックする際に活用しましょう。

4.ADB plugin

ADB_plugin.png
https://chrome.google.com/webstore/detail/adb/dpngiggdglpdnjdoaefidgiigpemgage
パソコンのChrome上で、実機AndroidのリモートデバックができるChrome拡張機能です。
あらかじめ、パソコンとAndroid端末をUSB接続しておきます。
Android端末でChromeを起動して、設定画面から「USBウェブデバック」をONにしておきます。

パソコンでは、インストール後にURLバーの横に表示されるアイコンをクリックし、「Start ADB」をクリックすると、パソコン上でAndroid端末の動作状況を確認することが可能になります。

5.LGTM

LGTM.png
https://chrome.google.com/webstore/detail/lgtm/oeacdmeoegfagkmiecjjikpfgebmalof?hl=ja&gl=JP

LGTMとは「Looks Good To Me」の略語で、コードやデザインのレビューなどでFacebookでいう「いいね」の意味で使用されます。
このChrome拡張機能をインストールして、MarkDownが使用できるテキストボックスにフォーカスした状態で拡張ボタンをクリックすると、LGTMの画像を使用したい時にわざわざ自分で探さなくても表示してくれます。

LGTMは特に、エンジニアの方の間で「文化」として扱われています。

6.EditThisCookie

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

Google Chromeに保存されているクッキーを表示、編集することができるChrome拡張機能です。
該当のWebサイトで、インストールするとURLバーの横に表示されるチョコチップクッキーのアイコンをクリックすると、値、ドメイン、パス、有効期限といったクッキーの詳細情報が表示され、編集可能になります。

他にも、クッキーのインポートまたはエクスポート、検索、削除などを行うことができます。

7.Chat++ for Chatwork

Chat___for_Chatwork.png
https://chrome.google.com/webstore/detail/chat%20%20-for-chatwork/amhfnpimdfcdcpnchjionbddjjbmofnl

情報共有サービス「Chatwork」をより便利にしてくれるChrome拡張機能です。
FacebookやTwitter、Githubなどと同じようにToを送信することができます。

また、ショートカットが豊富に用意されているので、マウスを使用せずに操作することも可能です。
画像リンクの下には小さなサムネイルが表示されたり、コードがハイライトされたりするので、特にWebサイト制作に携わるエンジニアの方の情報共有ツールとして、オススメしたい拡張機能です。

8.Colorpick Eyedropper

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

カラーコードを手軽に調べることができるChrome拡張機能です。
インストール後にURLバーの横に表示されるアイコンをクリックすると、動作が開始します。
カラーコードが知りたい画像やロゴなどの上にマウスオンすると、カラーコードが表示されます。

Webサイトで表示されている色はラスタ形式のため、カラーコードがドット単位で構成されています。
そのため、なるべく色の濃い中心部分を調べると、正確なカラーコードを調べることができます。

9.MesureIt

MesureIt.png
https://chrome.google.com/webstore/detail/measureit/pokhcahijjfkdccinalifdifljglhclm?hl=ja

Webサイト上で画像やウィンドウのサイズを計測することができるChrome拡張機能です。
インストール後にURLバーの横に表示されるアイコンをクリックすると、Webサイトの画面に白っぽいマスクがかかります。
この状態で、サイズが知りたい場所を囲うと、縦幅と横幅がpx単位で表示されます。

手軽にサイズ計測を行うことができるので、エンジニアの方以外でもインストールをオススメしたい拡張機能です。

10.kimono

kimono.png
https://chrome.google.com/webstore/detail/kimono/deoaddaobnieaecelinfdllcgdehimih

Webサービスの中では、APIが提供されてないサービスがほとんどです。
そのようなサービスをAPI化し、サイトの情報を取得することができるようにしてくれる「kimono」というサービスがあります。
このサービスのChrome拡張版です。

この拡張機能を利用すると、プログラミングをする際に少しでも効率よく行うことが可能になります。

11.ウェブタイムマシン

ウェブタイムマシン.png
https://goo.gl/VIdbtV

現在閲覧しているWebサイトの過去のサイトデザインを閲覧することができるChrome拡張機能です。
インストール後に、該当するWebサイト上で右クリックをすると、ダイアログボックスに「過去ページ閲覧」というメニューが表示されます。
この項目をクリックすると、いつに戻るかを選択するカレンダーが表示されるので、閲覧したい日付を選択します。
すると指定した日付の日、Webサイトがどのようなサイトデザインだったのかを見ることができます。

時代の流れとともに、Webサイトのサイトデザインがどのような変化を遂げているのかを遡ることができる面白い拡張機能です。

12.Page Analytics

Page_Analytics.png
https://chrome.google.com/webstore/detail/page-analytics-by-google/fnbdnhhicmebfgdgglcdacdapkcihcoh

現在閲覧中のWebサイトのアクセス状況などを簡単に調べることができるChrome拡張機能です。
わざわざGoogle Analyticsを開かなくても調べられるので非常に便利です。
なお、あらかじめGoogle Analyticsにログインして該当のWebサイトを登録しておくことが必要です。

使い方は、調べたいWebサイトを閲覧している状態で、URLバーの横に表示されるアイコンをクリックすると、ページ上部に各指標やWebページ内のクリック分析が記載されたスコアカードが表示されます。
また、画面右上に表示されている、色のアイコンをクリックすると、ヒートマップのような表示に切り替えることも可能です。

エンジニアの方だけではなく、ディレクターの方やメディアを運営されている方にオススメの拡張機能です。

13.Full Page Screen Capture

Full_Page_Screen_Capture.png
https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl

Webページを丸ごとスクリーンショットすることができるChrome拡張機能です。
現在ブラウザ枠で見えている部分だけではなく、表示されていない部分まで撮影することができます。
インストール後にURLバーの横に表示されるカメラアイコンをクリックするだけで、撮影が可能です。
撮影後の画像はpngで保存されます。

まとめ

いかがだったでしょうか。
どれもかゆいところに手が届くような拡張機能ばかりで、インストールしておくと作業効率が格段にあがるものばかりです。
エンジニアの方に限らず、Webサイトに関わる方なら拡張機能のような便利ツールを最大限に活用すると作業効率もあがります。

今回ご紹介した拡張機能は、どれも弊社のエンジニア陣が自信を持ってオススメする珠玉の13選です。
ぜひ参考にしてみてください。

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

【ライター必見】記事を書くときに便利なクロームの拡張機能15選
ブラウザ上で簡単に競合調査ができるオススメのChrome拡張機能10選

このニュースに関連するカリキュラム

ホームページを強化するタグ貼り付けをマスターしよう

ホームページを強化するタグ貼り付けをマスターしよう

facebookのソーシャルボタン、Googleアナリティクスのトラッキングコード、AdWordsのコンバージョンタグ・・・など、Web担当者はいろいろなタグを貼り付けなくてはなりません。タグ管理が重要業務です。