アシアルの中の人が技術と思いのたけをつづるブログ

選択文字列を翻訳したり地図検索したりするブックマークレットを作ってみました

タグ [　 Tech　 JavaScript　 形態素解析　 GoogleMap　 翻訳　 ]
こんちわ。松田です。

つい最近、JavaScriptを使ってマウスカーソルの選択範囲の文字列を取得する方法を知りました。
これを使って遊んでたら楽しかったので、せっかくなのでブログのネタにしたいと思います。

参考URL:http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20Range%A4%CE%BB%C8%A4%A4%CA%FD

まずは選択範囲の文字列取得方法です。
ものすごーくはしょって説明すると、
  1. // IEの場合
  2. document.selection.createRange().text
  3.  
  4. // Mozilla系の場合
  5. window.getSelection()
で取得できます。意外と簡単。
重要な部分をかなり省いたので詳しくは上記URLを参考にしてください。


そしてこれを利用していろいろ作ってみました。
マウスカーソルで文字列をドラッグし、範囲選択した状態でボタンを押してみてください。
たぶん実用性はありません。
（でも時間が無かったのでIE用にしか作ってません。隙をみて作ります。。）



・選択範囲をリンクに変える

選択範囲の単語をWikipediaへのリンクにしてくれます。
ググったほうが早い！

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. document.getElementById('button1').onclick = function() {
  4.   try {
  5.     var text = null;
  6.     if (document.all) {
  7.       // IE
  8.       var range = document.selection.createRange();
  9.       text = range.text;
  10.       if (document.selection.type != 'Control') {
  11.         var container = document.createElement("div");  
  12.         var encap_node = document.createElement('a');
  13.         encap_node.href = 'http://ja.wikipedia.org/wiki/' + encodeURIComponent(text);
  14.         container.appendChild(encap_node);  
  15.         encap_node.innerHTML = text;  
  16.         range.pasteHTML(container.innerHTML); 
  17.       }
  18.     } else {
  19.       // Mozzilla
  20.       text = window.getSelection();
  21.     }
  22.   } catch(e) {
  23.   }
  24. };
  25. //]]>
  26. </script>






・選択範囲を翻訳する

英語だったら日本語に、日本語だったら英語に直してくれます。
辞書引くよりは早い！けどブラウザのプラグインで事足りそう

翻訳処理自体はmuumoo.jpさんの翻訳APIをお借りしてます。



  1. <script type="text/javascript">
  2. //<![CDATA[
  3. document.getElementById('button2').onclick = function() {
  4.   try {
  5.     if (document.all) {
  6.       // IE
  7.       var range = document.selection.createRange();
  8.       if (document.selection.type != 'Control') {
  9.         var params = 'text=' + encodeURIComponent(range.text);
  10.         // prototype.js使ってます
  11.         new Ajax.Request('/scripts/333/honyaku.php', {method: 'post', parameters: params, onComplete: function (request) {
  12.           var res = request.responseText;
  13.           range.text = res;
  14.         }});
  15.       }
  16.     } else {
  17.       // Mozilla
  18.     }
  19.   } catch(e) {
  20.   }
  21. };
  22. //]]>
  23. </script>
honyaku.php（サーバー側）



※追記：ブックマークレットから翻訳スクリプトを呼び出すと、このブログ以外のドメインでは動作しないバグがあったので作り直しました。
現在ブックマークレット版翻訳機能は下のスクリプトで動いています。
new Ajax()・・・部分をクロスドメイン可能な形式に変更し、honyaku.phpでは翻訳結果を「echo "showString({$result})";」で返すようにしました。
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. try {
  4.   if (document.all) {
  5.     // IE
  6.     var range = document.selection.createRange();
  7.     if (document.selection.type != 'Control') {
  8.       // このscriptが 「showString('翻訳結果');」を返す
  9.       var script = document.createElement('script');
  10.       script.type = 'text/javascript';
  11.       script.src = 'http://blog.asial.co.jp/scripts/333/honyaku2.php?text=' + encodeURIComponent(range.text);
  12.       document.body.appendChild(script);
  13.   } else {
  14.     // Mozilla
  15.   }
  16. } catch(e) {
  17.   alert('error ga okitappoi desu..');
  18. }
  19.  
  20. // ↑のscriptの結果によって呼び出される
  21. function showString(str) {
  22.   try {
  23.     if (document.all) {
  24.       // IE
  25.       var range = document.selection.createRange();
  26.       if (document.selection.type != 'Control') {
  27.         range.text = str;
  28.       }
  29.     } else {
  30.       // Mozilla
  31.     }
  32.   } catch(e) {
  33.   }
  34. }
  35. //]]>
  36. </script>







・選択範囲内にある地名をGoogleMapで表示させる

ネタが足りなかったのでオマケで作ろうとしたら、これに一番時間をとられました。
選択範囲の文字列をYahoo!形態素解析APIに渡して名詞部分だけをリスト化し、それをGoogleMapのGeocodingをつかって表示してます。
無理やりです。

名詞は全部地名としてGoogleMapにぶん投げちゃうので、予期せぬマーカーが立つかもしれません。
↓の文字列等で試してみてください。
[東京から新宿に向かってたはずなのに青梅についてました]

これ作ってて気付いたんですけど、「地名」って地名があるんですね。ややこしい。


  1. <script type="text/javascript">
  2. //<![CDATA[
  3. document.getElementById('button3').onclick = function() {
  4.   try {
  5.     if (document.all) {
  6.       // IE
  7.       var range = document.selection.createRange();
  8.       if (document.selection.type != 'Control') {
  9.         var div = document.createElement('div');
  10.         div.style.position = 'absolute';
  11.         div.style.left     = '10px';
  12.         div.style.top      = (document.documentElement.scrollTop || document.body.scrollTop + 10) + 'px';
  13.         div.style.width    = '300px';
  14.         div.style.height   = '300px';
  15.         div.style.border   = 'solid 1px black';
  16.         div.style.display  = 'block';
  17.         
  18.         var iframe = document.createElement('iframe');
  19.         iframe.src = 'http://blog.asial.co.jp/scripts/333/map.php?text=' + encodeURIComponent(range.text);
  20.         iframe.height = 300;
  21.         iframe.width  = 300;
  22.         div.appendChild(iframe);
  23.         document.body.appendChild(div);
  24.       }
  25.     } else {
  26.       // Mozilla
  27.     }
  28.   } catch(e) {
  29.   }
  30. };
  31. //]]>
  32. </script>
map.php（サーバー側）





で。
これだけだと役に立つも何もこのページでしか使えないので、お約束のブックマークレットにしてみました。
下のリンクをお気に入りに登録して、文字列を選択した状態でお気に入りをクリックして下さい。
これで好きなサイトで使いまくりです。
（これも現在IEのみ対応です。。。）

選択範囲をリンク
選択範囲を翻訳
選択範囲の地名を地図で表示

このブックマークレットで使用しているb_link.php, b_honyaku.php, b_map.phpは、それぞれ上のほうで紹介したスクリプトのtry{}内をechoしているだけなので省きます。

コメントフォーム

認証
captcha_key
 

トラックバック

トラックバックURI :

最近の記事