クマープラグインを改良し、表示の崩れや変換漏れをなくした。もはやオリジナルのbookmarkletの原形をとどめていないが、これでほぼ完璧かな。ここ数日の日記に関してはいい感じでクマってくれるね。
しかし、奇妙な現象や厄介な問題もいろいろあった。
-
document.body.innerHTML
で取れる文字列は、元の生のHTMLとは異なり、ブラウザによって微妙に整形されている。たとえば、タグ名が大文字になっていたり、タグの属性値を括る引用符が除去されていたり、テキストの途中に適当に改行が挿入されていたりする。正規表現マッチではそれらもケアする必要があるので面倒だ。たとえば、
/<div class="main">/
ではなく/<div class="?main"?>/i
、/<strong>(.*?)<\/strong>/
ではなく/<strong>((?:.|\n)*?)<\/strong>/i
、のように。 - Mozillaは、長大なテキストのマッチングに問題があるようだ。
正規表現パターンが長大な文字列にマッチしないよう、「*」や「+」はそれぞれ「{0,100}」や「{1,100}」と長さを制限する、あるいは適当な長さで切り前半部分にマッチしたら残りを
RegExp.rightContext
に対してマッチさせる、のような小細工で回避する必要がある。 - JavaScriptの無名関数は、それが置かれたコンテクストにおけるローカル変数にアクセスできない。
JavaScriptでも
str.replace(/(re)(ge)(xp)/g, function ($0, $1, $2, $3) { return $1 + $2.toUpperCase() + $3; })
のように置換文字列を動的に設定できるようになったのはいいが、この無名関数の中から外のローカル変数を参照できないのが痛い。仕方がないので、グローバル変数(トップレベルで宣言された変数)を介してやりとりするよりほかない。 - 所構わずdiv要素を挿入するとレイアウトが乱れる。
クマーAAのようにブロックレベルで挿入したいからといって、何も考えずにdiv要素を使うのはまずい。なぜなら、HTMLにおいてはdiv要素を置ける場所が限定されているからだ。たとえば、p要素中にdivを入れるのは文法違反なので、div以降の内容についてのスタイルの設定が無効になったりするが、文句は言えない。
これを避けるのは簡単で、比較的どこにでも置けるspanタグを使い、
<span style="display:block;">〜</span>
で挿入すればOKだ。(別にspanでなくてもいいが)
ていうか、意外とクマーボタン好評だな…。
ボタンを押すと画面全部「クマー」になっちゃうんですねー。思わず探しまくってしまいました。
ログで確認しましたが Mozilla 1.0.2 ですか!Debian woodyかな?
てことは Netscape 7.0 (たしか Mozilla 1.0.1 ベース)でもだめそうですね。
手元では 1.7.1 と 1.8a2 で確認しただけです。_|‾|○
Mozilla 1.4/Netscape 7.1 ではどうだろう。
あとでテストしてみますクマー…
新しいMozillaに入れ換えた方がよさげですねぇ。
お家の古い赤帽でも試してみますー。楽しいから:-)
ああ、画面全部ってそういう意味か。そうです。ボタンのある日の分だけではなくて、全体がクマるのが意図した動作です。手元でも Mozilla 1.0.2 で試してうまく行きました。
その日だけ変換するようにもできますが、全部クマった方が楽しいですよね。