ドキュメント中のrubyを一覧表示するbookmarklet

なんとなく作ってみた。たとえば、青空文庫あたりに使えると思う。

特におすすめなのは、夏目漱石 吾輩は猫であるだろう。javascript:alert(document.getElementsByTagName("ruby").length);、すると分かるが、9214個のrubyが使われている。壮観だ。

このBookmarkletでは、DOMを使って、全ruby要素の巡回と、文字列の結合と、innerHTMLを使ったドキュメントの動的な生成を行っているが、青空文庫の「吾輩は猫である」で試してみた所、体感で最も速いのは、Safari 4.0だった。ほぼ一瞬で表示される。次いで、Chrome 3.0.193.0が、許容範囲の早さだった。Opera 10 Beta 2とFirefox 3.5は、少々時間がかかるが、問題なく動いた。

IE8では動かない。開発ツール曰く、「構文エラーです」と。エラー内容が不親切すぎる。具体的にどこに構文エラーがあるのかさっぱり分からない。少なくとも、Firefox、Oper、Chrome、Safariでは、一切のエラーが表示されないコードだというのに。我々人類はWebの未来のためにもIEをボイコットすべきだ。

javascript:(function(){function read_rb(elem){var rb = new String() ;var size = elem.length ;for ( var i = 0 ; i != size ; ++i ){if ( (elem.item(i).nodeName.toLowerCase() !== "rt") && (elem.item(i).nodeName.toLowerCase() !== "rp") ){rb += elem.item(i).textContent ;}}return rb ;}function read_rt(elem){var rt = new String() ;var size = elem.length ;for ( var i = 0 ; i != size ; ++i ){rt += elem.item(i).textContent ;}return rt ;}function parse( elem ){var rb = read_rb(elem.childNodes) ;var rt = read_rt(elem.getElementsByTagName("rt")) ;return { first : rb, second : rt } ;}var rubys = document.getElementsByTagName("ruby") ;var index = new Array() ;var size = rubys.length ;for ( var i = 0 ; i != size ; ++i ){rubys.item(i).setAttribute("id", "ruby_id_unique" + i) ;var result = parse( rubys.item(i) ) ;index.push("<li><a href='#ruby_id_unique" + i + "'>" + result.first + "\u3000\uFF1A\u3000" + result.second + "</a></li>") ;}var list = document.createElement("div") ;list.innerHTML = "<ul>" + index.join("") + "</ul>" ;var body = document.getElementsByTagName("body").item(0) ;body.insertBefore(list, body.firstChild) ;})() ;

追記：ECMA-262にはconstはないと言われ、調べた所その通りだったので、修正した。規格を重んじる身として情けない。

昨日辺り、なぜ、わざわざ再帰的にDOMを巡回してすべてのTextノードの結合を自前で行わなければならないのか疑問に思ったので、DOM level 3のNodeインターフェースのtextContentを使うコードに変更した。しかし、これはIEでサポートされていないので、結局IEでは動かない。