Webデザインのための Firefox 3 アドオン

Category : Web

Webデザインのための Firefox 3 アドオン

Date 2008-06-24 2 Category Web Tags browser

6月18日，Firefox 3 がリリースされました。ぼくも早速ダウンロード。

Firefox の魅力はなんといっても豊富なアドオンにあります。便利な拡張機能がたくさんあって，自分にあったブラウジング環境が作れます。

Firefoxの拡張機能

今回のバージョンアップの目玉が高速化。実際に使ってみると確かに速い！　Firefox は便利なんだけど，ときとして非常に重たくなるのが難点でした。これで，アドオンをいろいろ入れても快適に使えそうです。

今回はぼくが Firefox 3 に入れている拡張機能をいくつか紹介してみます。
Love & Design のらぶさんが TB企画をしていますので，そちらにもトラックバックしておきましょう。

TB企画*これがないと困る！Firefox 3 のアドオンリスト :: Love & Design ::

快適なブラウジングのために

Tab Mix Plus

これはもう欠かせません。タブの開閉をコントロールする拡張機能です。ぼくの場合，ほとんどのリンクは新しいタブで開くようにしています。そして次に紹介する FireGestures でタブ間を移動したり，閉じたりしています。

FireGestures

ボタンをクリックしたり，メニューを選択しなくても，マウスをちょっと動かすだけでブラウジングできてしまう優れもの。たとえば，右にドラッグすると次のタブへ，左だと前のタブ，下に動かすとタブを閉じ，上にするとページの先頭に戻る，といった設定ができます。以前は All-in-One Gestures を使っていましたが，今回乗り換えました。

タブカタログ (Tab Catalog)

開いたタブをサムネイルで表示してくれます。サムネイル内でスクロールしたり，リンクをクリックすることもできます。広いディスプレイなら快適に使えます。

Google Toolbar for Firefox

Google のいろんなサービスがさらに使いやすくなります。

hatenabar

はてなユーザー御用達。

Greasemonkey

通称「グリモン」。痒いところに手が届くちょっと便利なスクリプトが追加できます。グリモンで使えるいろんなスクリプトが公開されています。

Webデザイン用

Firebug

このデバッグツールはもう手放せません。CSS や Javascript の問題を見つけたり，修正したりするときに使います。

Web Developer

アクセシビリティをよくしようというときには，いろんな条件でチェックするのが大事。CSS や Javascript を切ったり，画像を非表示にしたり，validator でチェックしたりというときに使っています。

Html Validator for Firefox and Mozilla

valid かどうかをステイタスバーに表示してくれます。エラーがあると一目瞭然。ソースを表示させると，エラー箇所をハイライト。これで見ていると valid なページというのは少ないですね。

Make Link

コピペするときにページの title要素やURLを取得して，HTMLタグを付け加えることができます。以前は Copy URL + を使っていたのですが，設定が簡単なのでこちらに乗り換えました。

ちょっとニッチな感じなもの

lori (Life-of-request info)

ステイタスバーに，最初の読み込みが始まるまでの時間，ページ全部を読み込むまでの時間，読み込んだファイルサイズ，リクエスト数を表示してくれます。「ん？　このページなんか遅いぞ」というときにチェック。もっと詳しく見たいときは Firebug の Net でチェックします。

Screengrab!

ページのスクリーンショットをとってくれます。スクロールしなければ出てこないページの下のほうも全部まとめてPNG画像に。選択した部分だけを画像にすることもできます。
この画像は，サムネイルの元画像として使ったり，紙ベースでデザインを見てもらったりするとき（印刷するとほとんどの場合デザインが変わってしまうので）に使います。

Link Widgets

ツールバーに追加したボタンに，link要素や a要素の rel属性のURLを取得してきます。今のところ rel属性のチェック用として使っています。Opera にもデフォルトで同じような機能があります。ブラウザが rel属性をUIに活用するようになってくると，制作側もそれにうまく対応していくのがよさそうですね。

Table2Clipboard

table部分をコピペするときに使います。通常のコピペだと，テキストが連続してしまって，セルの区切りがわかりづらくなります。行の区切りとセルの区切りに任意の文字列を挿入してペーストできます。
たとえば次のようにすると，table関連のタグが追加されます。

capture : Table2Clipboard

サイトリニューアルのときなど，前のサイトで使っていた表をまた使う，ということがよくあります。ソースをコピペしてもよいのですが，インデントがバラバラだったり，align，bgcolor，width といったオススメできない属性が入っていることも多く，表が大きいとこれを修正する手間もバカになりません。
文字列を変えることで，いろんな形式で書き出せます。