2010-02-08

改めて作り手としてFirefox周りの道具を整理してみる

Feb 08, 2010

今回の記事は自分のためでもあるけどこれから始める人向けの意味もある。もちろん漏れもあるし、単純に自分が知らないものもあるので、これどうよ？ってのがあったら教えてくれると嬉しいデス。

※ 以下のリストには Fx 3.6 じゃないと動かないものがあるかと思えば 3.6 では動かないものもあるので、もう少し静観した方がいいかも。

機械的に正しさをチェック

エラーコンソール

JavaScript と CSS のエラーをチェックできる。Firefox 標準添付。これがあるだけでもずいぶん違う。メニューの [ ツール ] → [ エラーコンソール ] で表示できる。

「エラー」と「警告」のタブだけ見ていればたいていの問題には対応できる。開きっぱなしにしていると IE 用の記述を含むサイトで警告だらけになって「お互いに大変だね」と思える。

Firebug

制作途中では HTML の「調査」に使うことが多いが、これも「コンソール」でエラーの様子を確認できるし、表示するエラーの種類を選択できる。（例えば CSS は無視して JavaScript のエラーだけを表示することができる。）

その他、リアルタイムにいろいろなものを確認できる。もちろん JavaScript の開発時には手放せない。

Web Developer

Firebug が現れるまでは Web 開発者必携と言われたものだが、今はあまりそこまで言われない。しかし Firebug にはできないことも多く、入っていないと困る。今も開発が続いているのはとても有り難い。

具体的には

キャッシュを off に
JavaScript を off に
任意のレベルの CSS や画像を off に
form の情報を表示する
非推奨要素のハイライト
table, ブロックレベル要素をハイライト
問題のある画像を探す
特定のウィンドウサイズへ変更

といったことに利用できる。

Html Validator for Firefox and Mozilla

tidy という HTML の文法チェックと修正を行えるツールを内蔵しているもの¹で、公開していない HTML のチェックを offline で行える。

Firefox extension の形で提供される HTML validator は

onlinde でないと使えない
- 結局 online の validator サービスを利用しているから
公開されている URL を持ってないと使えない
- validator がアクセスしてこれないから

という制約のあるものがほとんどなので、これはとても重宝する。個人的にはいつもコマンドラインで tidy を利用しているが、同じことがブラウザから利用できて問題の箇所も確認しやすい。動的に生成された HTML に対してのチェックは明らかに tidy オリジナルよりこちらの方が楽。euc-jp のページでも shift_jis, utf-8 のページでも問題なく動作する。

※ このツールは Firefox 標準の View Source を上書きしてしまう。これをインストールしていると従来の形のソースを表示するウィンドウは使えない。

チェックツールの利用に際して

原則的には完璧を目指す。つまりエラーも警告もない状態。これは

エラーや警告が大量にあると本当に直すべき致命的な問題の特定が難しくなるから
- せっかくチェックを自動化して目視の負担を減らしている意味がない
単純にエラーがないと気持ちいいし、ゼロになると達成感があるから

ただし、IE 対応などのためにどうしても正しくない記述にせざるを得ない場合もある。それは仕方ない。

以前はよく Another HTML-lint で 100点を目指すことに意味なんかないよという指摘が散見されたが、それは

Another HTML-lint の宗教的なチェックを有効にしている
ブラウザがお粗末

といったことが主な理由であって、本来エラーはあってはならない。というかエラーを含んだままでは「変更」のときに泣く。エラーのある状態でたまたま再現された見た目を頼りにしていると、ある日突然同じ見た目を再現できなくなる。未だにこのレベルの Web 制作／開発会社が後を絶たない。²

目視支援

alt 属性をバージョン 8 までの IE のようにツールチップ表示させる。

この挙動は本来 Web 的には正しいものではなく、IE 9 からは他のブラウザと同じように、alt に書かれたものは「画像が表示できないときにだけ表示される」ように変更される予定。

Top - FireMobileSimulator.org

ケータイの画面で概ねどのように見えるか確認する。基本的には画面のだいたいの大きさと絵文字の確認ができる程度と考えておくべき。特に古めのケータイは HTML の解釈の仕方やレンダリングにクセの強いものがあって、それはさすがに再現できない。

Firefox だけで特別なシミュレータがなくてもある程度作業できる、と割り切って使うと幸せになれる。（特に Mac には他にフリーのシミュレータはない。）

Dafizilla ViewSourceWith :: Add-ons for Firefox

HTML ソースを Firefox 標準のウィンドウではなく指定のエディタで開くことができる。

個人的には textarea 内の長文の編集に利用している。Thunderbird にも利用できるのでメールを書く際にも重宝する。

※ 以前は It'a All Text ! ( Firefox ) と External Editor ( Thunderbird ) を利用していたが、いずれも Fx 3, Tb 3 の移行のタイミングで芳しくない挙動をしまくったので常用から外れてしまった。

View Source Chart :: Add-ons for Firefox

HTML のソース上の文法ハイライトではなく構造の図示を行ってくれる。作っている最中のサイトではなく初めて見るサイトの HTML の構造を確認するのにたぶん便利。Web Developer でもある程度同じことができるけどこっちの方が見やすい。

個人的には使ってないけど、デザイン、HTMLコーディングの初学者に向いている印象。

HeadingsMap :: Add-ons for Firefox

HTML の見出しの構造だけをサイドバーに抜き出す。構造の確認と長文の閲覧に便利。

※ 以前は DocumentMap を使っていたが、更新が止まったっぽいので乗り換えた。

その他

ColorZilla :: Add-ons for Firefox

ブラウザウィンドウ内の各所の色を確認できる。そのまま色見の調整もできるので、すでに出来上がってるサイトを参考にしやすい。

YSlow :: Add-ons for Firefox

CSS はページの先頭で、JavaScript はページの末尾で読み込むようにすると速くなる、など表示速度を項目別にチェックしてくれる。Firebug の [ 接続 ] タブの方が詳細に確認できるが、YSlow はどのようにすれば速くなるのかを手ほどきしてくれる。

※ Google Pagespeed も入れてあるし試してみたけど、なぜか YSlow を使っている。なんでかは忘れちゃった。Pagespeed は名前がよくないよね。ノウハウの検索が不可能に近い。

作業支援

Pearl Crescent Page Saver

長いページのスクリーンショットをそのまま撮れる。Windows 用ならもっと高機能なものがあるけど、これで十分な気がする。

QuickNote :: Add-ons for Firefox

以前と違ってデスクトップ付箋アプリはほとんど使わなくなったが、それでもさっと開いて何かを書き留めておけるのは便利。無限に増やせるわけではないのもメモの散乱を防いでくれる適度な制約として活きる。

Dafizilla Table2Clipboard :: Add-ons for Firefox

IE + Office で可能な table の構造ごとコピーを可能にする add-on

Greasemonkey :: Add-ons for Firefox

迷ったけど。Greasemonkey というか実際には bookmarklet でもいいんだけど、ちょこっとしたツールを作って活用すると細かい省力化がはかれるのでやはり入れておくことにした。

自分で作って使っているのは以下のような感じ。ただし再利用できる形で公開はしてない。しようしようと思いつつ放置になっていたり、あまりに環境依存で公開できなかったりしている。

basename( script_name ) 相当をページ最下部に表示
- ウィンドウを小さくしてケータイ向けの作業をしていたりするとアドレスバーが全然見えなくなってたりする。そんなときこれがあると便利。
title と location.href を各種フォーマットで吐き出してくれるもの（対応フォーマットは PukiWiki, Hiki, Markdown, FSWiki, Hatena, TracWiki, Plain HTML）
svn の DAV URL と Trac の Browser の URL を toggle させるもの
- Trac で確認していって、toggle させてすぐ checkout、みたいに使う。

開発向け

Live HTTP Headers :: Add-ons for Firefox

目視だけなら実は Web Developer, Firebug でも HTTP header の確認は可能なのだが、LiveHTTPHeaders は

リアルタイムのモニタリングに適している
任意のフィルタを適用できる
ログをファイルに保存できる

といったメリットがある。個人的にはよく Mechanize の処理を記述する際にそのひな形、比較対象として使っている。

ほかに SGML Parser を利用したチェックも行える ↩
というか仮にも「開発」できると名乗るのならエラーはあっちゃダメでしょ。そんなんじゃバックエンドも容易に惨状が想像つくよ。 ↩

About

例によって個人のなんちゃらです