プラカンブログSTAFF BLOG

2018.05.28

WEB制作で使える便利なchromeアドオン

今月のプラカンブログは、私が普段の制作作業で使ってるchromeのアドオンを紹介しようと思います。
すでに有名で知ってるってアドオンもあるかもしれませんが、参考にしてみてください!
それではまず一つめはこれです!

Clear Cache

https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn

Clear Cache

このアドオンは、ブラウザのキャッシュをクリアしてくるアドオンです。

何度リロードしてもキャッシュ残ってちゃんとした表示が確認できない時などは、このClear Cacheで簡単にキャッシュクリアをすることができる優れものです!
使い方はClear Cacheのアイコンをワンクリックするだけ。
それだけでブラウザのキャッシュなどいろんなデータをクリアしてくれるのです。

クリアしてくれるデータの種類は『アプリケーションキャッシュ、キャッシュ、Cookie、ダウンロード、ファイルシステム、フォームデータ、履歴、インデックス付きDB、ローカルストレージ、プラグインデータ、パスワード、WebSQL』とさまざま。
何のデータをどれだけクリアしたいかは、アドオンのオプションページの必要な箇所にチェックを入れるだけの簡単な設定なのも助かります。

Alt & Meta viewer

https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl

このAlt & Meta viewerはchromeではブラウザ上で確認することができない画像のAltの内容をウェブページ上に表示させるアドオンです。

使い方は、Altの確認したいWEBページをchromeで開きAlt & Meta viewerのアイコンをクリックします。
すると下の画像の様にページ内にある画像のAltやメタ情報(title、画像サイズ、画像パス、console出力、Altなし一覧などが表示されます)

表示させたい情報についてはアドオンのオプションページから、何を表示させるか設定することができます。

ColorPick Eyedropper

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

このColorPick Eyedropperはブラウザに表示されてたウェブページ内の知りたいと思った色彩の値を取得することができるカラーピッカーです。

使い方は下の画像の様に、ColorPick Eyedropperアイコンをクリックすると、アイコンから小さなオーバーレイウインドウが出てきます。
あとは値の知りたい色の箇所にマウスを合わせると16進数、RGB、HSLの3種類での値が表示されます(下の画像はYahoo!のタイトルにマウスをあわせて色の値を表示させてみました)

Page Ruler

https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

このPage Rulerはウェブページ上で選択したエリアの大きさや位置の辺りを取得することができるアドオンになります。

使い方は、ブラウザのPage Rulerアイコンをクリックするとマウスポインターが十字型になりますので、大きさなど寸法を測りたい箇所に合わせてマウスをドラッグするだけ。
ページ上部に現れた青色のバーにwithd、height、選択したエリアの上下左右からの位置の値を表示してくれます。

QR-Code Tag Extension

https://chrome.google.com/webstore/detail/qr-code-tag-extension/bcfddoencoiedfjgepnlhcpfikgaogdg

このQR-Code Tag Extensionはブラウザに表示されているウェブページのURLをQRコードにしてくれるアドオンです。

スマホなどでページのチェックをする際にもいちいちURLを手打ちしなくても、このQR-Code Tag Extensionで生成されたQRコードを読み取れば簡単にウェブページへアクセスすることができるようになります。
オプションでは生成させるQRコードの大きさをSmall、Medium、Large、Extra Largeの4種類の中から選択することができます。

Awesome Screenshot

https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj

このAwesome Screenshotは名前の通りブラウザに表示されているウェブページのスクリーンショットを撮ってくれるアドオンになります。

ブラウザのウインドウサイズの大きさや、選択したエリア、ウェブページ全体、またデスクトップを撮ることができます。タイマーをつかった撮影にも対応していて、撮影したスクリーンショットに矩形や文字で注釈をつけることもできます。
保存形式はJPGとPNGの2種類。
保存の仕方はダウンロード、クリップボードにコピー、プリンターで印刷の3種類が選べます。
オプションでタイマーの長さやショートカットを設定することもできます。

Window Resizer

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

このアドオンがもしかしたらココ最近では一番使ってるかもしれないと思うWindow Resizerです。
名前の通りブラウザのウインドウサイズをリサイズしてくれるアドオンです。

使い方はこのWindow Resizerのアイコンをクリックすると、デフォルトで設定されてるウインドウサイズの一覧が表示されるので、リサイズしたいウインドウのサイズを選ぶだけです。
リサイズしたい数値は自分でも登録することができるので、私は上で紹介したブラウザのスクリーンショットを撮る際に自分の中のいい感じのサイズを決めて登録しています。
そしてスクリーンショットを撮る時には必ずこのアドオンでリサイズしてから撮ると、いつでも同じ大きさのスクリーンショットの画像を撮ることができるのでとても便利です。
またこのリストの一番したの緑のエリアでは、リサイズしたいブラウザの大きさの数値を入力することもできます。

他にもブラウザサイズではなくview pointでの設定にすることもできたりととても多機能なアドオンなのでいろいろ触ってみることをオススメします!

と、こんな感じでよく使ってるアドオンを紹介しました!
けれどもまだ他にも便利なアドオンがいくつかあるので、来月は後編「よく使ってる訳じゃないけど入れてると便利なアドオン」として、引き続き便利アドオンの紹介をしたいと思います。どうぞ楽しみに待っていてください。

+dc(な)

この記事は、NAGATOMI が書きました。