自作自演

自作自演 : Mozilla 24 に行ってきた。 の補足。

作業開始の時点で既にちょっと眠たかったので、色々うろ覚えです。
間違いもあるかもしれません。





TouchUpスクリプトの作り方(大雑把に)。

問題のあるページを探す。
Mozilla Reporter のページで
Problem Type: に Appearance wrong を指定し、Language に ja を指定して検索します。
これで、検索結果には、見た目のおかしい日本語のページが出てくるはず、です。
JavaScript ががんがん書けるなら Behavior wrong を指定するのも良いかもしません。
私は無理ですが。
結果には問題なさそうなページも出てくるのでそれはスルーします。

IE でどう見えるかを見る。
見た目のおかしいページを見つけたら、とりあえず IE で見ます。
大抵まともに見えるので、それを目標にどう修正するか考えます。
IE でもおかしければスルーします。

DOM Inspector と Stylish で CSS を書く。
ほとんどの場合見た目の問題は CSS なので、その場合の話。
最終的に書くのは Greasemonkey スクリプトなのですが、まず私は Stylish で CSS を書きます。
DOM Ispector の Copy Selector はいくつかセレクタの候補が出るので便利です。
あと、「この要素とあの要素はどこが違うんだ？」と思ってどうしてもわからない時は
Computed Style の一覧を比べていくと違いがわかります。

書いた CSS を JavaScript に。
id 属性が指定された要素は JavaScript でいじりやすいのですが、
そうでない場合はループを回して必要な要素を取得しています。
もっと効率の良いやり方もあるかも、と思いつつ。
Firefox でさえ動けば良いので、普通のページを作る時より気楽ではあります。
Element.style.hoge = fuga って感じでいろいろ指定します。
float は JavaScript の予約語なので cssFloat になります。
「あれー、float が見当たらないなぁ」と思ったらそういうカラクリだったようです。

うまくいかないときは。
alert で地道にデバッグします。
あと、いっぺんに全部書ききるのではなく、確実に動きそうなところだけ、とか
分けて試していきます。



誰かと一緒にコードを書く、ということはほとんどしたことがなかったので
TouchUpマラソンは私にとっては新鮮な経験でした。