2008年1月24日

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

こんちわ。松田です。

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

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

まずは選択範囲の文字列取得方法です。
ものすごーくはしょって説明すると、


// IEの場合
document.selection.createRange().text
// Mozilla系の場合
window.getSelection()

で取得できます。意外と簡単。
重要な部分をかなり省いたので詳しくは上記URLを参考にしてください。

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

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

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


<script type="text/javascript">
//<![CDATA[
document.getElementById('button1').onclick = function() {
  try {
var text = null;
  if (document.all) {
    // IE
      var range = document.selection.createRange();
      text = range.text;
    if (document.selection.type != 'Control') {
    var container = document.createElement("div");  
    var encap_node = document.createElement('a');
    encap_node.href = 'http://ja.wikipedia.org/wiki/' + encodeURIComponent(text);
    container.appendChild(encap_node);  
    encap_node.innerHTML = text;  
    range.pasteHTML(container.innerHTML); 
    }
  } else {
// Mozzilla
text = window.getSelection();
  }
  } catch(e) {
  }
};
//]]>
</script>

・選択範囲を翻訳する

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

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


<script type="text/javascript">
//<![CDATA[
document.getElementById('button2').onclick = function() {
  try {
  if (document.all) {
// IE
    var range = document.selection.createRange();
    if (document.selection.type != 'Control') {
      var params = 'text=' + encodeURIComponent(range.text);
      // prototype.js使ってます
      new Ajax.Request('/scripts/333/honyaku.php', {method: 'post', parameters: params, onComplete: function (request) {
        var res = request.responseText;
        range.text = res;
      }});
    }
    } else {
// Mozilla
}
  } catch(e) {
  }
};
//]]>
</script>

honyaku.php（サーバー側）

※追記：ブックマークレットから翻訳スクリプトを呼び出すと、このブログ以外のドメインでは動作しないバグがあったので作り直しました。
現在ブックマークレット版翻訳機能は下のスクリプトで動いています。
new Ajax()・・・部分をクロスドメイン可能な形式に変更し、honyaku.phpでは翻訳結果を「echo "showString({$result})";」で返すようにしました。


<script type="text/javascript">
//<![CDATA[
try {
  if (document.all) {
    // IE
    var range = document.selection.createRange();
    if (document.selection.type != 'Control') {
      // このscriptが 「showString('翻訳結果');」を返す
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'http://blog.asial.co.jp/scripts/333/honyaku2.php?text=' + encodeURIComponent(range.text);
      document.body.appendChild(script);
  } else {
    // Mozilla
  }
} catch(e) {
  alert('error ga okitappoi desu..');
}
// ↑のscriptの結果によって呼び出される
function showString(str) {
  try {
    if (document.all) {
      // IE
      var range = document.selection.createRange();
      if (document.selection.type != 'Control') {
        range.text = str;
      }
    } else {
      // Mozilla
    }
  } catch(e) {
  }
}
//]]>
</script>

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

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

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

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


<script type="text/javascript">
//<![CDATA[
document.getElementById('button3').onclick = function() {
  try {
  if (document.all) {
// IE
    var range = document.selection.createRange();
    if (document.selection.type != 'Control') {
      var div = document.createElement('div');
      div.style.position = 'absolute';
      div.style.left     = '10px';
      div.style.top      = (document.documentElement.scrollTop || document.body.scrollTop + 10) + 'px';
      div.style.width    = '300px';
      div.style.height   = '300px';
      div.style.border   = 'solid 1px black';
      div.style.display  = 'block';
      
      var iframe = document.createElement('iframe');
      iframe.src = 'http://blog.asial.co.jp/scripts/333/map.php?text=' + encodeURIComponent(range.text);
      iframe.height = 300;
      iframe.width  = 300;
      div.appendChild(iframe);
      document.body.appendChild(div);
    }
    } else {
// Mozilla
}
  } catch(e) {
  }
};
//]]>
</script>