Google AJAX Language APIを試してみた

Google JavaScript

マイコミジャーナルに載っていたサンプルをちょっとだけ変えてみたら、なんだか楽しくなった。
dankogaiも試しているし、僕もちょっとだけ試してみた。


マイコミのサンプルではボタンを押して翻訳していたが、それをonkeydownに変えてみた。
細かい問題はたくさんあるけど、日本語を入力していくと、勝手に英語に翻訳してくれる。
なんだか自分が英語を書いているような気分になれるｗ
# 翻訳する言語を選べば、英語→日本語もできる。

一気に入力していくと、最後のほうで入力したものが翻訳されない。
そんなときは一文字打つか、↑とか↓とか押せば再度イベントが発生して翻訳される。
非同期通信の動作は全然調べていないので･･･。
上とか下とか押しただけで、イベントが発生してしまうので、無駄なリクエストが飛びすぎる。
でも制御する方法がよくわからない･･･。Googleに怒られるかな。
ちゃんと動作させるのは結構大変そう。でもちょっと動かすのはとても簡単という感じ。


ソースはこちら。動作確認はこちらでも。

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"></meta>
    <style type="text/css">
    textarea { height: 200px; width: 400px }
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("language", "1");
    // 画面初期化時に言語選択ボックスを作成する
    function init() {
      var langList = document.getElementById("target-language");
      // (1) Language APIで使える言語をループしてリストに表示
      for (var lang in google.language.Languages) {
        var langOpt = new Option(lang, google.language.Languages[lang]);
        langList.options[langList.options.length] = langOpt;
      }
    }
    // body.onload時にinit()が呼ばれるようにする
    google.setOnLoadCallback(init);

    function translate() {
      var source = document.getElementById("source").value;
      // (2) 入力された文字列から、言語を自動的に判別する
      google.language.detect(source, function(detectResult) {
        if (detectResult.error) {
          //alert("Error:" + error.message);
          return;
        }
        // 選択されている言語を取得
        var langList = document.getElementById("target-language");
        targetLang = langList.options[langList.selectedIndex].value;
        // 翻訳
        google.language.translate(
          source,
          detectResult.language,
          targetLang,
          function(result) {
            if (result.error) {
              //alert("Error:" + result.message);
              return;
            }
            document.getElementById("result").value = result.translation;
          });
      });
    }
    </script>
  </head>
  <body>
      <textarea id="source" onkeydown="translate()"></textarea><br />
      <select id="target-language"></select><br />
      <textarea id="result"></textarea></br>
  </body>
</html>

マイコミのサンプルから変更したのは、onkeydownイベントを使ったこと、ボタンを消したこと、エラー処理をはずしたこと(ｵｨ)、レイアウトを変えたこと、くらいだったと思う。
コピペすれば動くけど、注意点は文字コードをUTF-8にすること。
あと、こういう技術系サイトで公開されているサンプルコードのライセンスや著作権って、どうなるんだろうといつも悩む。
でもとりあえず気にしないことにする。

参考URL