入力された日本語文字列を英語に変換するサンプル

まずご紹介するのは、テキストフィールドに入力された日本語文字列を英語に変換するサンプルだ。

さっそくソースを見ていこう。このコードはコピー&ペーストして保存すればすぐ動かせるはずなので、皆さんもぜひお試しいただきたい。

    <html>
      <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"></meta>
        <!-- (1) GoogleのAPIをロード
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
        // (2) Language APIをロード
        google.load("language", "1");
        // ボタンを押されたときに動作する関数
        function translate() {
          var source = document.getElementById("source").value;
          // (3) 日本語から英語への翻訳を行う
          google.language.translate(source, "ja", "en", function(result) {
            if (result.error) {
              alert("Error:" + result.message);
              return;
            }
            document.getElementById("result").innerHTML = result.translation;
          });
        }
        </script>
      </head>
      <body>
        <input type="text" id="source"/>
        <button onclick="translate()">英日翻訳</button><br/>
        <div id="result"></div>
      </body>
    </html>

たったこれだけである。実際にJavaScriptで処理を行っているのは、ほんの数行だ。では、以下にポイントを解説する。

  1. GoogleのJavaScript APIをロードする。
  2. google.load()メソッドを用いて、Language APIをロードする。第1引数はAPIの名称、第2引数はAPIのバージョン(現在は"1"しか存在しない)だ。
  3. テキストフィールドに入力された文字列を翻訳しているのがこの部分だ。翻訳を行うための関数はgoogle.language.translate()メソッドで、このメソッドは以下のような引数を取る。
    google.language.translate(
        翻訳対象の文字列、
        翻訳対象の言語、
        翻訳後の言語、
        結果を受け取るコールバック関数)

言語を指定する部分は"ja"や"en"と言った文字列を指定する(詳しくは後述)。

翻訳処理は非同期で行われるので、結果を受け取るためのコールバック関数が必要となる。コールバック関数の引数として翻訳結果が渡され、結果オブジェクトのtranslationプロパティに、翻訳後の文字列が格納されている。このサンプルでは、その文字列を画面に表示しているだけだ。

実質、google.language.translate()メソッドのみで言語の翻訳が行えてしまう。なんとパワフルなAPIだろうか。