にちにちほんやくを作った！ - Google AJAX Language APIを試してみた2

Google JavaScript

前に作ったサンプルを改造してみた。

日本語を入力していくと、英語に翻訳して、それを日本語に翻訳するだけ！
でも自動翻訳では楽しい文章が生成される。

例えば「お腹が減った。」と入力すると

  1. お腹が減った。
  2. Has dropped waistline.
  3. ウエストが減った。

　ウエストは減ってほしい･･･。

例えば「お酒が飲みたい。」と入力すると

  1. お酒が飲みたい。
  2. If you would like to drink alcohol.
  3. 希望される場合はアルコールを飲んでいます。

　飲まされる？

上とか下とか押しただけで、イベントが発生してしまうので、無駄なリクエストが飛びすぎる。
でも制御する方法がよくわからない･･･。Googleに怒られるかな。
ちゃんと動作させるのは結構大変そう。でもちょっと動かすのはとても簡単という感じ。

Google AJAX Language APIを試してみた - techlog

こういう場合は、onkeydownのイベントに直接実行したい関数を紐付けるのではなく、以下のtimerTranslateの方を紐付けておくと良い感じになります。

onkeydown等のイベントで重ための関数を実行するときのテクニック (でぃべろっぱーず・さいど)

chrisさんがトラックバックで、前回作ったサンプルを添削してくださった。
clearTimeout( timer_id )は、どこかに書いてあったが、使い方がさっぱりわからなかった。
こんな時に使えるのか。JavaScriptは初心者なので、とても助かった。
chrisさんありがとうございます。


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

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"></meta>
    <title>にちにちほんやく - GoogleAjaxLanguageAPISample - techlog</title>
    <style type="text/css">
    textarea { height: 100px; width: 400px }
    body {
      font-family:"ＭＳ ゴシック",Osaka,verdana,arial,sans-serif;
      font-size:90%;
      font-size-adjust:none;
      font-style:normal;
      font-variant:normal;
      font-weight:normal;
      line-height:1.2;
    }
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    
    // setTimeoutでの戻り値を受け取る変数
    var timer_id;
    
    function timerTranslate(){
      try{
        clearTimeout( timer_id )
      }catch(e){}
      timer_id = setTimeout("translate()",2000);
    }
    
    google.load("language", "1");
    
    function translate() {
      var source = document.getElementById("source").value;
      google.language.translate(source, "ja", "en", function(result) {
        if (result.error) {
          alert("Error:" + result.message);
          return;
        }
        document.getElementById("result").value = result.translation;
        translate2(result.translation);
      });
    }
    
    function translate2(source) {
      google.language.translate(source, "en", "ja", function(result) {
       if (result.error) {
          alert("Error:" + result.message);
          return;
        }
        document.getElementById("result2").value = result.translation;
      });
    }
    </script>
  </head>
  <body>
      <div><b>にちにちほんやく</b> - GoogleAjaxLanguageAPISample - <a href="http://d.hatena.ne.jp/j7400157/" target="_blank">techlog</a></div><br />
      <textarea id="source" onkeydown="timerTranslate()"></textarea><br />
      <textarea id="result"></textarea></br>
      <textarea id="result2"></textarea></br>
  </body>
</html>

入力した内容の言語自動判定ははずした。にちにちほんやくだから。
日本語→英語の結果を、英語→日本語でリクエストしているだけ。
2秒間入力がなければ、Googleにリクエストを投げるようにした。
コピペすれば動くけど、注意点は文字コードをUTF-8にすること。


自動翻訳は楽しい！

参考URL

関連エントリ