意外と知らない？ブラウザで作業するときに便利な拡張機能！

もしかしたら、WEB関係の仕事している方には知っていてとーぜん！なのかもしれませんが、今の会社に来るまで知らなかった、目からうろこのブラウザ拡張機能＆便利ページについて書いていきます！

ネットサーフィンをする中でも結構便利な機能もあるので、WEB関係の仕事してないよ、という方も必見です！
実際、私は初めて知った時、「社会人になった時点で知っていたら、もっと効率よく仕事できていたのに……！」と悔しく思いました……。

メインで使用しているブラウザがGoogleChromeとFirefoxなので、拡張機能についてはこの2つのブラウザのものについて書いていきます。SafariにもIEにも似た拡張機能はあるそうなのですが、いかんせん自分が使っていないので割愛。

ブラウザ拡張機能 マウスジェスチャー

マウスジェスチャーとは、わざわざ戻るボタン「←」や、進むボタン「→」を押さなくても、マウスのクリックと動きを合わせることで戻ったり進んだりすることができる機能のことです。
ページを閉じたり、ページの一番上や一番下まで移動したりすることも、マウスのクリックと動きだけで簡単にできてしまいます！

GoogleChrome

Gestures for Google Chrome™ - Chrome Web Store
※Macでは正常に動作しないこともあるそうです。

Windowsで使用していますが、さくさく快適です！
Chromeに追加したら、Chromeの右上にある三本線のアイコン（メニュー）をクリック。設定→拡張機能、と進んで、「Gestures for Google Chrome」のオプションをクリック。
詳細設定画面になるので、「Actions」のページで、マウスの動きとその動きによって起きるアクションを好きに組み合わせることができます。

Firefox

FireGestures :: Add-ons for Firefox

こちらもWindowsでは快適に動いています。
Firefoxに追加したら、Firefoxの右上にある三本線のアイコン（メニュー）をクリック。アドオン→拡張機能、と進んで、「FireGestures」の「設定」をクリック。
詳細設定画面になるので、一般画面でジャスチャを開始するために使用するボタンを選びます（私は右クリックを使っています）。マッピング画面で自分の使用したいナビゲーションをダブルクリックし、好きなジェスチャを登録してください。
元から登録されているジェスチャだけでなく、自分で登録することもできます。

これらのマウスジェスチャーを使って、例えば、
「右クリック+左にカーソルを動かす＝戻る」
「右クリック+右にカーソルを動かす＝進む」
「右クリック+上にカーソルを動かす＝ページ最上部へ」
「右クリック+下にカーソルを動かす＝ページ最下部へ」
など、設定しています。
最低限この4つ設定するだけでもさくさくネットサーフィンできるようになりますよ！

ブラウザ拡張機能 画面キャプチャ

モニターに映る画面すべてをキャプチャする機能（スクリーンショット）を使われている方は大勢いらっしゃるのではないでしょうか。
私も以前スクリーンショットを使っていたのですが、ブラウザに映っている画面だけキャプチャして画像にしたい！と思った時でもモニター内のすべてがキャプチャされてしまっていたので、わざわざ撮ったキャプチャをトリミングしていました。

いま思えばなんという二度手間！！！

こんな手間をかけずとも、ブラウザ画面だけキャプチャできる拡張機能があるんです。
しかもこれを使えば、WEBページまるまる全部上から下までキャプチャすることも可能です！

GoogleChrome

Awesome Screenshot: キャプチャーと注釈 - Chrome ウェブストア

Chromeに追加すればすぐに使えます！
ブラウザの右上にレンズのアイコンが出るので、それをクリックすると、ブラウザで見えている部分だけ画像にするか、見えていない部分も含めて1ページすべて画像にするか選べます。
また、この機能のすごいところは、キャプチャしたものをブラウザ上で編集できること！マーカーで線を引いたり、テキストを入力したり、図形を書き込んだり。さらにトリミングすることも可能なので、一部分だけを画像にすることも可能です！

Firefox

Pearl Crescent Page Saver screenshot tool :: Add-ons for Firefox

FirefoxでもChromeと同じ拡張機能があるので使うこともできるのですが、なぜかうまく動かないことがあったので、あえて使い分けています。
こちらもFirefoxに追加すればすぐに使えます。ブラウザの右上に灰色のカメラアイコンが出るで、その右側にある「▼」をクリックすると、「表示部分のみ」「ページ全体」など、画像として保存する範囲を選べます。

これらのキャプチャ機能は画面ごと保存しておきたいときに最適です！印刷するまでもないなあ、というページは画像で保存してみてはいかがでしょうか？
私はWEBデザインの参考にしたいサイトをストックするために現在多用しています！

まとめてみると意外と長くなってしまいました……！
マウスジェスチャーと画面キャプチャくらいしか拡張機能は活用できていませんが、きっとまだまだ役立つ機能はたくさんあるんだろうなあと思うので、これからまた役に立つものを見つけられたら紹介していきたいと思います！