tDiary: クマープラグインを改良

　クマープラグインを改良し、表示の崩れや変換漏れをなくした。もはやオリジナルの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でなくてもいいが)

　ていうか、意外とクマーボタン好評だな…。