Chromeブラウザの拡張機能を使っていますか？
とても便利でお勧めしたいChrome拡張を紹介します。
Web開発する場合にお役立ちのものやSEO対策用など10個の拡張機能をリストアップしてみました。
はてなブログを運用する方に便利なものも最後にご紹介します！
Hover Zoom+
まず最初にご紹介するお勧めのChrome拡張はHover Zoom+です。
これには随分とお世話になっています。
WEBサイトで表示されている画像にカーソルを当てることで拡大したものを見ることが可能になります。
小さくて見にくい画像もこの拡張機能のおかげで大助かり。 老眼の進んだ方には特にお勧めです。これでハズキルーペも不要に？
Roomy Bookmarks Toolbar
Roomy Bookmarks ToolbarはChrome拡張を小さなアイコンにしてツールバーに表示してくれる拡張機能です。
はるなぴのChromeブラウザのツールバーにはずらっとアイコンが並んでいます。どの拡張機能もすぐに使えるようにするためです。
これは便利ですよ。これから紹介していくChrome拡張もこれのおかげでいつでもすぐに使えるようになっています。
CSSViewer
CSSViewerは自分が見たWEBサイトのCSSを調べるときに大変便利なChrome拡張機能です。
CSSViewerをオンにして調べたい箇所にカーソルを当てるとその部分に適用されているCSSを表示してくれます。
使用されているCSSを調査する方法にはChromeブラウザのデベロッパーツールがよく紹介されていると思います。
しかしデベロッパーツールはいちいち開くのが大変。 CSSViewerなら簡単に使われているCSSを調べることが可能です。
WhatFont
WhatFontは使われているFontを簡単に表示してくれるChrome拡張です。
必ずしもうまく表示されるとは限りませんがCSSViewerと同じくカーソルを当てるだけで使用されているFontの情報を表示してくれます。
ColorZilla
ColorZillaは使われている色情報を簡単に教えてくれるChrome拡張です。
このChrome拡張は有名なので使っている方も多いかと思います。
どのような色の設定をしているのかなと思った時に非常に便利です。
ただし文字のように色を使っている部分の範囲が狭い場合には色情報を決めるのに難しい場合もあります。
HTML5 Outliner
HTML5 OutlinerはHTML文書のアウトライン構造を表示してくれる拡張機能です。
SEO効果をきちんと上げるためにもアウトライン構造がまともなものになっているかどうかを確認しましょう。
headingsMap
headingsMapはHTML5 Outliner同様にHTML文書のアウトライン構造とヘッダ（見出し）構造を表示してくれるChrome拡張です。
headingsMapではアウトライン構造だけでなくヘッダの構造も見ることができます。
HTML5 Outlinerで確認するときはいつも一緒に使っています。
HTMLエラーチェッカー
HTMLエラーチェッカーはHTML文法に違反した箇所がないかどうかチェックしてくれるツールです。
はるなぴは、はてなブログをマークダウン記法で書いて、そのマークダウンファイルをPandocを組み込んだ秀丸マクロでHTMLファイルに変換しています。
そのHTMLをそのままはてなブログの編集欄にコピペしていますので、エラーチェッカーがあると便利です。
Wappalyzer
WappalyzerはWEBサイトの情報を整理して表示してくれるChrome拡張です。
Webサイトで使用されているWeb ServerやSNS Wiget、更にはJavaScript Librariesのバージョンまで分かってしまいます。
はてなブログはNginxを使っているようですね。
Hatena Bookmark
Hatena Bookmarkは、はてなブックマークを簡単に使えるようにしてくれる拡張機能です。
これは、はてなブログ利用の方はほとんど入れていると思います。まだの方は是非この機会に入れてみて下さいね。
Google検索結果にもブックマーク数が表示され便利です。また簡単に、はてなブックマークを付けられるようになります。
はてなのお知らせ
はてなのお知らせは、はてなブログについた「はてなブックマーク」や「いいね」をリアルタイムにお知らせしてくれるChrome拡張です。
これはとても便利ですよ。
はるなぴがブログ記事を更新した後にブックマークをつけてくださった方がすぐに分かります。
まとめ
いかがでしたでしょうか。
まだ他にも便利なChrome拡張はありますので機会をみつけてまた紹介していきたいと思います。お楽しみに！
