Web制作に関わっているならおすすめのChromeの拡張機能7選

Chrome extension

Google Chromeの利用率は世界規模で見ると1位で、このサイトでも48%程度あります。自分も長年使い続けていますが、9月に最新版のバージョン45になって、タブをたくさん開くと消費メモリーが多くなる問題がやや改善された気がします。

ただ、1点解決できないことがあり、フォーム内のテキストをショートカットコマンドでコピーもしくはカットすると、カーソルがくるくる回り続け5秒くらい待たされます。最新版で少しはマシになりましたが、誰に聞いても、検索しても、これといった解決方法がわかりません。知っている人がいたら教えて欲しい…。

いきなり話がずれましたが、今回は自分がWeb制作でよく使うChromeの拡張機能の紹介。個人の偏りが幾分かあるので、参考程度ですが。

1. Page Analytics (by Google)

Chrome ウェブストア: Page Analytics (by Google)

Google提供の拡張機能で、アナリティクスをざっくり見たい時に重宝します。名前の通り、ページごとのアクセス状況を閲覧するためのもので、ON/OFFの切り替えも楽に行えます。

Page Analytics

リアルタイムの値も掲載してくれているので、更新したばかりの記事の閲覧状況などを随時確認できます。自分の場合はお客様にこの拡張機能を入れてもらいます。

というのも、アナリティクスのどこをどう見たら良いかわからないという人でも、ページ単位なら理解しやすいからです。
なので、Webが少し苦手という方にはPage Analyticsとアナリティクスのスマホアプリから慣れてもらうようにしています。項目数がPC版よりも少ないからという理由もありますね。

2. Google アナリティクス オプトアウト

Chrome ウェブストア: アナリティクス オプトアウト
アナリティクス オプトアウト

アナリティクスにデータを取得させないための拡張機能です。
アナリティクスの設定でフィルタかけて、自分のアクセスが集計されないようにしていると思いますが、お客様環境だとそれができない場合があるので、その際は、この機能を追加するようにしています。

Chromeだけでなく、Firefox、IE、Safariでも使えるようですね。( Google アナリティクス オプトアウト アドオン)

3. Wappalyzer

Chrome ウェブストア: Wappalyzer

Wappalyzerは別記事でもちょっとだけ触れたのですが、閲覧しているサイトがどんな言語や仕組みで構築されているかがわかる拡張機能です。

過去の記事: 必要な分だけの構成。CSSフレームワークは軽量でミニマルなものが良い。

Wappalyzer

インストール後にアイコンがアドレスバーの右端に表示されるので、クリックすると中身が表示されます。上図はローカルサーバ上で見た、このサイトの中身です。middlemanというRuby製の静的サイトジェネレータなるもので構築しているので「Ruby」が表示されています。

これを入れておけば、閲覧したサイトがどんなCSSやJSのフレームワークやライブラリを使っているのか、Wordpressで構築したサイトかどうかといった判定が簡単にできます。かなりの優れもので愛用しています。

4. HTML 5 Outliner

Chrome ウェブストア: HTML 5 Outliner

HTMLの構成を表示してくれる機能です。HTML5用なのでセクショニングタグとh要素を読みとって階層化したリストを返してくれます。

HTML 5 Outliner

普通にマークアップしていれば、階層化リストが汚くなったり、乱れたりすることはないと思います。ただ、追加や修正が多くなり複雑になってくると、h要素の入れ方やタグ付けが曖昧になる場合があるので、アウトライナーを使って確認することもアリかと。

これも前に記事書いてました。: 内的SEO対策をするなら、アウトラインを意識したHTMLマークアップも行おう

5. Social Analytics

Chrome ウェブストア: Social Analytics

自分が苦手とするソーシャル運用を可視化する機能です。今現在どれだけシェアされているのかを確認することができます。ただ、これだと、はてブの数がわからないので、追加ではてなブックマーク公式の拡張機能をつけると良いです。

はてなブックマーク

はてブの場合は、気になる記事を「後で見る」しておいて、移動中とか隙間時間にスマホで見るのがちょうど良いのですが、自分の場合はどうしてもWeb系の内容になりがちです。

6. PrettyPrint

Chrome ウェブストア: PrettyPrint

ミニファイ化で圧縮されたCSSやJSを読みやすいように整形してくれる拡張機能です。

Pretty Print

ChromeのDeveloper Toolの機能が上がって来ているので、使う機会が減ってきましたが、コード内を検索する時や参考にしたいサイトのコードがミニファイ化されている時などに使えるはず。

7. Open SEO Stats

Chrome ウェブストア: Open SEO Stats

サイトの現状を教えてくれる拡張機能です。

Pretty Print

インデックス数やサイトの情報、ページスピード、タイトルやディスクリプションの文字数、リンク数などを教えてくれます。


最後は若干駆け足感ありますが、Web制作やっている人が入れると良いものに厳選してみました。自分は制作絡みでいろんなサイトを見る機会が多いので、特にWappalyzerの使用頻度が高いです。

こうやって見ると拡張機能を入れればChromeでできることはかなり多いです。使ってないけど、拡張機能でChromeをテキストエディタ化するのもあったような…。

関連記事