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

Web/07 Sep 2015

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

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

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

1. Page Analytics (by Google)

Page Analytics (by Google)

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

Page Analytics

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

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

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

Google Analytics オプトアウト アドオン (by Google)

アナリティクス オプトアウト

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

3. Wappalyzer

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

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

Wappalyzer

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

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

4. HTML 5 Outliner

HTML 5 Outliner

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

HTML 5 Outliner

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

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

5. Social Analytics

Social Analytics

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

はてなブックマーク

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

6. PrettyPrint

Chrome ウェブストア: PrettyPrint

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

Pretty Print

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

7. Open SEO Stats

Open SEO Stats

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

Pretty Print

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


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

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