Web制作をするなら入れておきたいChrome拡張厳選4つ!

皆さんブラウザは何をお使いですか?
Safari, IE, Chrome, FirefoxなどなどWeb制作を悩ませるブラウザの種類ですが、実際にWeb制作をされる方はなにを使っているんでしょう?

一般的なブラウザシェア

  • IE = 40%前後
  • Chrome = 35%前後
  • Firefox = 15%前後

(参考:StatCounter Global Stats

となっております。
Web制作者は、FirefoxやChromeあたりが多そうだなーと個人的には思います。

拡張機能が豊富!!

FirefoxでいえばAdd-On、Chromeでいえばエクステンション(拡張)が非常に便利過ぎて困るレベルなので、オススメをまとめたいと思います。

私がChromeなので今回Chromeでしか確認していないですが、おそらくFirefoxにも同じプラグイン or 同様の機能をもつプラグインがあることと思いますので、是非教えて下さい。

拡張機能って何?

Google Chromeを使いやすくするためのプラグインのようなもので、いろんなデベロッパーが開発をしています。
大きく分けて、

  • 特定のページで実行されるもの
  • 特定のサービスに連携するもの
  • その他

の3種類があります。

特定のページで実行されるもの

こちらはドメインなどで判断したサイトの特定の要素を変更するなどの拡張ができます。
例えば、
HD for YouTube™ – Chrome ウェブストア

これなんかは、YouTube™の動画ページをHDで自動再生するというエクステンションです。

特定のサービスに連携するもの

こちらはEvernoteにクリップする機能や、ページをはてなブックマークに登録する機能などがあります。

その他

エクステンション単体でも簡単な処理はできるため、URLとタイトルを特定の形式でコピーするなどの機能があります。

Web制作をするならYOUいれときなよ4選!

Awesome Screenshot

Awesome Screenshot App – Chrome ウェブストア

超簡単スクリーンショットです。Webページってスクロールしますよね。でも全体を縦長の画像としてスクリーンショットとりたいときがあります。
簡単です。
「Capture Entire Page」を押すだけです。

Copy URL+

Copy URL+ – Chrome ウェブストア

これ、かなり重宝してます。
ブログに掲載するときって、紹介するサイトのURLとタイトルつけたりしますよね。でもタイトルってコピーするのめんどくさいんですよね。更にWordPressにはショートコードという便利なものがあって、URL指定するとアイキャッチ用のスクリーンショットをとってくれるものがあります。(browser-shotで検索してみてください)

となると、サイトを紹介するためにURLをとったり、ショートコードの中に埋め込んだり、タイトルを取得したり…となって以下のような情報が中身になってます。

[Copy URL+ - Chrome ウェブストア](https://chrome.google.com/webstore/detail/copy-url%2B/capojgaalppngkaagaobmigigcgnidmn?hl=ja)

そう、こういうのが一発で取れる拡張機能です。
Markdown形式でブログを書いているので、上記のような記述になるのですが、どういう形式でコピーするかをまず作って、

[${title}](${URL})

こんな感じにするわけですね。

そして目的のページにいって「右クリック→Copy URL+」これであとはペーストするだけです!

Appspector

Appspector – Chrome ウェブストア

これは便利というわけではないんですが、そのページがなにで作られているかを判別してくれます。例えばWordPressであるとか、CakePHPであるとか、特定のファイル構成や記述内容を見て判断してくれます。ちなみにjqueryやapacheのバージョンまでバレちゃうことも。

「こんな素敵なサイトだけど、何で作ってあるのかしら?」

そんな風にソースを覗いちゃうクセのあるあなたにオススメ。

Clear Cache

Clear Cache – Chrome ウェブストア

名前の通りですね。キャッシュをワンボタンでクリアします。
キャッシュのせいかなー…とわざわざ設定画面からクリアする必要もなし!


いかがでしたか?
Chromeをお使いじゃない方にはあまり有用な情報じゃなかったかもしれませんが、これを機にChromeに…!?
Chromeのオススメポイントは拡張機能だけでなく、デベロッパーツールにあります。
次回はChromeデベロッパーツールの活用術をまとめたいと思います。

フォローして続編をチェック

@universionsをフォロー