マウスオーバー辞書について考える
IE、ないしFxでGoogleツールバーを利用するとWebサイト内の英単語にマウスを当てたときに、その単語の意味をポップアップ表示してくれるようになる。ツールバー自体の機能はどうでもよいようなものばかり*1なのでツールバーを使いたい、とは思わないが、この機能だけはほしいと思っている。実現する方法として、最もスマートなのはエンタメLIFEHACKERS::mikye’s daily report - Sleipnirでマウスオーバー辞書を使う方法だと思う。ただし金はかかる。
お値段オンライン版でも3000円超えますが、結論からいうと「買ってよかった」と思ってます。 「Sleipnirでラクに英語を読むのにマウスオーバー辞書を使いたい」、これだけのために3000円払う価値は僕にはありましたね。
とあるし、Googleツールバーによるマウスオーバー辞書は語彙がそれほど良くないらしいので*2、よく英語サイトを見るなら選択肢としてありだと思う。
しかし、他のブラウザで無料で使えるなら無料で使えるブラウザを使うか、Sleipnirでも無料でできるようになってほしいと思うのが人情だろう。Browser.js ひとりごと13：OperaはGoogleツールバーがないのが致命的ですで述べられているような、スクリプトによる実装は技術的には可能だが、辞書データをどうするか、という問題がある。ぶっちゃけて言えば英辞郎に限らず翻訳サイトにいちいち照会しているようだと規約以前に実行速度の上でもモラルの面*3でもお話にならない。英辞郎は辞書データの販売も行ってるが、2000だすくらいなら前述のソフトの方が快適さの面で有利だと思うので、無料で使えるデータを前提にすることにする。一応、目星はつけているけど単語が3万をきりそうなのが心許ない。
話はそれるが辞書データのこと書いたらFenrirがどっかと提携してマウスオーバーしている単語の訳を表示できるステータスバーペインを開発、とかなら現実みがありそうな気がしてきた。表示すべき訳がないときは広告を出すとか。
話をもどして、スクリプトでマウスオーバー辞書を実現するには、
- 全テキストノードの英単語をspan要素でくくり、title属性に訳を設定する
- onousemoveでマウスの当たっている単語を割り出し、それが英単語だったらポップアップを表示する
が考えられると思うが、前者だとDOM再構築とかSeaHorseと相性がよろしくないとかあるからできればやりたくない。後者は実装が面倒そうだがなんとか目処はついた。
function getWord(e) { start_t = new Date(); var rng = document.body.createTextRange(); var text = ""; rng.move("character", 0); rng.moveEnd("character", 2); do { if (rng.boundingLeft > e.x && (rng.boundingTop + rng.boundingHeight) > e.y) { rng.moveStart("word", -1); text += rng.text + "\n"; break; } } while (rng.moveEnd("word") && rng.moveStart("word") && new Date() - start_t < 10000); if ((/[a-z]+/i).test(text)) { status = text; } }
こんな感じの関数をonmousemoveにアタッチすればいい。結構重めの処理なので実用の際にはマウスが一定以上留まった場合にだけ実行するような工夫が必須。このコードでは、取得した単語をそのままステータスバーに設定しているが、取得した単語をデータベースに照会して対応する訳語をポップアップさせればよい。手法としてはdiv要素の表示状態切替と移動で十分だろう。
