皆さんは普段WEBページを閲覧・制作する時に、どのブラウザを使用していますか？
現在、ブラウザの中で約60%以上のシェアを占めると言われるGoogle Chrome。
参考：Browser Market Share Worldwide
このブログをご覧の皆さんもchromeをメインブラウザとして使っている方が多いのではないでしょうか。
ブラウザを使用している方にとってはお馴染みの”Google chrome拡張機能”
今回はそのインストール方法とWEBを制作する上で重宝する便利な機能をいくつかご紹介したいと思います。
【目次】
1．Google chromeの拡張機能とは？
2．インストール方法
3．Clear Cache
4．CSS Peeper
5．Page Ruler
6．Web Maker
7．まとめ
1．Google chromeの拡張機能とは？
chrome拡張機能は追加することによってブラウザを自分好みにカスタマイズすることが出来ます。その機能は個人利用からビジネス利用まで幅広いシーンで役立つものが提供されています。
例えばプライベートで遊べるゲームであったり、仕事で使えるようなページの翻訳・メモ機能であったり、その多くがほとんど無償で提供されています。
便利な機能が無料で利用できるなら使わない手はありません！
ただし、注意点として拡張機能をインストールしすぎるとブラウザが重くなる可能性があるので、用途に合ったものを厳選して利用する必要があります。
2．インストール方法
Chromeの拡張機能は、「Chrome ウェブストア」で入手することが出来ます。
試しに翻訳機能を追加してみましょう。
左上の検索バーで、探したい拡張機能のキーワードを検索。
「chrome に追加」をクリック。
インストールが完了すると、右上に追加した拡張機能のアイコンが表示されます。
拡張機能の設定・オプション変更、削除などはアイコンを右クリックすると拡張機能に関するメニューが表示されますので、こちらから行えます。
拡張機能によっては、事前に設定が必要なものがありますので、こちらのメニューから設定を行って利用しましょう。
3．Clear Cache
Clear Cacheは名前の通り、キャッシュを削除する時に便利な拡張機能です。
webサイトのデザインを変更した際、毎回キャッシュの削除を行うのが面倒‥
そんな時にアイコンをワンクリックするだけでキャッシュの削除を行ってくれます。
キャッシュの削除方法については以前ブログでも紹介したのですが、ここで紹介したものと同様に簡単にキャッシュクリアが行えますので、合わせて活用してみて下さい！
初期設定では1時間以内に作成されたWebページのキャッシュを削除する仕様になっています。
Clear Cacheのアイコンを右クリックし「オプション」をクリックすると設定画面が開きますので、ここで設定を行いましょう。
①は「削除するデータ」についての設定です。
キャッシュだけでなく、アプリケーションのキャッシュ、Cookie、閲覧履歴、フォームのデータ等を同時に削除できるように設定することも可能です。
②は「期間」についての設定です。
１時間前のキャッシュから、すべての期間のキャッシュまで細かく設定することが出来ます。
4．CSS Peeper
続いては、CSS Peeper
素敵なデザインのサイトを見つけた時、
このフォントは何を使っているんだろう？
カラーコードは何だろう？
余白はどれくらいだろう？
これらを調べたくなることがあるかと思いますが、皆さんはどうしていますか？
デベロッパーツールを使っているという方が大半だと思いますが、CSS Peeperなら上記の事を簡単に調べることが出来ます。
解析したいwebページを開いた状態で、CSS Peeperのアイコンをクリックすると
このようにOGP画像（SNSでシェアされた時に表示されるサムネイル画像）やWebページのタイトル、そしてbodyに指定されているfont-familyなどがパネルで表示されます。
カメラマークのアイコンをクリックすればそのwebページで使われている画像が全て表示され、「Export All」で画像をまとめてダウロードすることが可能です。
しずくのマークのアイコンはサイトで使われているカラーコードの表示です。ワンクリックでコピペできるのでこちらも非常に便利です！
調べたい要素をクリックするとパネルに余白、クラス名、カラーコード、font-family、font-size等、詳細な情報を見ることも出来ます。
5．Page Ruler
続いてはPage Ruler
webページに表示されている画像やコンテンツの幅をピクセル単位で測ることが出来ます。
「 ElementsWidth」をクリックするとマウスの位置にある要素が自動選択され、高さや幅を表示してくれます。
コーディングの際に、要素の大きさをチェックするのに非常に便利です。
6．Web Maker
続いてはWeb Maker
アイコンをクリックすると新規タブが立ち上がり、「コードエディター」にしてくれます。
html、css、Javascriptを表示結果を確認しながら書くことが出来ます。
動きやデザインをテストとして確認したい時などに非常に便利です。
タブを閉じても以前書いたコードのデータは残ったままなので、ちょっとしたメモにも使えます！
7．まとめ
このように非常に便利な機能が揃っているGoogle chrome拡張機能。
仕事に使える機能も多数ありますので、お気に入りを探して業務効率化を目指して下さい！これまでchromeのブラウザを使ったことがないという方にも、これを機会にぜひ試して頂きたいです。
