
このページは、外部サイト
ネットPR.JP の情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
完全な状態のオリジナル記事は 「
すべてのWeb担当者に使ってほしいFirefox アドオンをご紹介(一部Chrome対応版あり)」 からご覧ください。
アドオンの記事は星の数ほどありますが、今回は普段私が使用している、なくても問題ないけどあると便利でゆるーい効果のアドオンのご紹介です。
今回は Webエンジニアだけでなく、Web制作・マーケティングに携わるあらゆる方におススメしたいと思います。
コンセプト
- ワンタッチで使用できて設定も簡単!
- Web関連のお仕事に携わる方全般におすすめ!
本記事でご紹介するアドオンの一部は、インストールしてブラウザの再起動をかけた後、ツールバーをカスタマイズしてボタンを表示させる必要があります。詳しくは下記リンクをご覧ください。
ツールバーをカスタマイズする方法
また本記事で紹介するアドオンのうち、Google Chrome にも存在する場合は合わせてご紹介いたします。
ブラウザ上であっという間に採寸できる「MeasureIt」

まずご紹介するのはそこそこメジャーなこのアドオン。こちらはアイコンをクリックすると、ブラウザ上で四角形のメジャー付きのボックスを表示して余白などの幅と高さをpx単位で知ることができます。一度作った四角形はそのままの状態で移動させたり、縮小・拡大もできるので微調整が簡単にできます。
なくても全く問題ないアドオンですが、「何px離れてるか知りたいけどわざわざPhotoshop なんかを立ち上げるのはちょっと…」というときに便利です。

このアイコンが目印!
思い立った時にWebサイトのIPが確認できる「Flagfox」

続いてこのプラグインは、ロケーションバー(サイトのURLが表示されている場所)の右端にサーバーが置いてある国の旗が表示され、今アクセスしているWebサイトのサーバーがどこの国にあるか一目でわかります。
一見役に立ちそうもないアドオンですが、アイコンを右クリックして表示されるメニューでIP情報の取得やドメイン調査のWhois 機能が使えます。ひょんなことからIP情報が必要になってしまった時なんかに役に立つかと思います。

アイコンを右クリックメニューした場合
またアドオンのアイコンをクリックするとこんな情報も見ることができます。

Flashオブジェクトを無効化したい時に「Flash Killer」

こちらは開いているページのFlash オブジェクトをワンタッチで一時的に無効にしてくれるプラグインです。しかも無効にしても動画表示領域は保ってくれますのでレイアウトが変わることはありません。なおページをリロードすれば再度表示できます。
1ページにいくつもの動画が貼ってあるサイトを開いてしまい、ブラウザのパフォーマンスが著しく低下した際に無効化させる時なんかに便利です。
私は制作中、Flash オブジェクトがどうしてもジャマに感じることが多々あるため、ものすごく重宝してます。

ビフォー

このアイコンをクリック

アフター
ワンタッチで本番ページと開発ページを切り替えられる「Server Switcher」

そして今回ご紹介するアドオンの中で個人的に一番おススメなのがこちら!本番環境とテスト環境をワンタッチで切り替えることができます。都度URLをコピペするのはめんどくさい・・・というWeb担当者の方に特におススメいたします。
アドオン設定で最初にサイト名、本番URL、開発URLをワンセットで登録しておけばロケーションバー右端に下記のようなアイコンが表示されます。

このアイコンは本番環境

こっちはテスト環境
上記アイコンをクリックか、ショートカットのCtrl + Shift + X で簡単に切り替えることができます。めちゃくちゃおススメです!
上図の設定画面のように、通信プロトコルもそれぞれ設定でき、ディレクトリ階層も指定できます。
※テスト環境が2つ以上ある場合などは対応してませんのでご注意ください
このアドオンは設定ファイルのインポート/エクスポートはできないものの、設定ファイル本体を各PCにコピーすることで設定を共有することもできます。
設定ファイルは私の環境(Windows 7:Firefox)だと下記にあります。
C:\Users\(ユーザー名)\AppData\Roaming\Mozilla\Firefox\Profiles\(乱数).default\serverswitcher.sqlite
Firefox を終了した状態で serverswitcher.sqlite というファイルをコピー・上書きしてブラウザを立ち上げると反映されます。
※注意※Chrome の場合は安全に共有できるか不明なため、本記事でのご紹介は割愛いたします
いかがだったでしょうか。また何か面白いアドオンに出会えたら随時ご紹介したいと思います。