Hatena::ブログ(Diary)

techlog RSSフィード

理解というものは、つねに誤解の総体に過ぎない
 「スプートニクの恋人」とか「かえるくん、東京を救う 」より

こちらになりました → http://sadah.hatenablog.com/

2008-03-22

[][]Google AJAX Language APIを試してみた

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

dankogaiも試しているし、僕もちょっとだけ試してみた。


マイコミのサンプルではボタンを押して翻訳していたが、それをonkeydownに変えてみた。

細かい問題はたくさんあるけど、日本語を入力していくと、勝手に英語に翻訳してくれる。

なんだか自分が英語を書いているような気分になれるw

# 翻訳する言語を選べば、英語→日本語もできる。

一気に入力していくと、最後のほうで入力したものが翻訳されない。

そんなときは一文字打つか、↑とか↓とか押せば再度イベントが発生して翻訳される。

非同期通信の動作は全然調べていないので・・・。

上とか下とか押しただけで、イベントが発生してしまうので、無駄なリクエストが飛びすぎる。

でも制御する方法がよくわからない・・・。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

xvx0xvxxvx0xvx 2008/10/05 22:06 はじめまして。最近始めたTumblrに使わせていただきました。使いやすくて気に入りました。ソースを公開していただいてありがとうございます。

j7400157j7400157 2008/10/06 23:11 こちらこそ使っていただいてありがとうございます。
ただこのエントリのスクリプトでは、がんがんリクエストが発生してしまうので、以下のエントリにある clearTimeout( timer_id ) を組み合わせると、使いやすくなるし、相手先への負荷も減るので、よかったら試してください。
http://d.hatena.ne.jp/j7400157/20080324/1206365545
よくわからない、ということであればまたコメントをください。

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証