Language APIを知り尽くす - 少し高度なサンプル

Language APIの素晴らしいところは、APIが非常にシンプルなことだ。現在のバージョンのAPIには、メソッドがあともう1つ存在するだけである。

では、乗りかかった船と言うことでもう1つのメソッドも解説してしまおう。次に示すサンプルは、最初のページで画像を紹介したサンプル。もう一度画像を載せておこう。

最初のサンプルとは見た目が異なるが、そこは大きな問題ではない(一般的な翻訳サイトに近づけたかっただけ)。このサンプルのポイントは2つ。

  1. 左側に入力された文字列の言語は自動的に判定される
  2. どの言語に翻訳するのかは、複数の中から選択できる

ということだ。

では、ソースコードの方を見ていこう。多少長いが、こちらのソースコードもコピー＆ペーストすればすぐさま動かせるはずだ。是非試してみていただきたい。

    <html>
      <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"></meta>
        <style type="text/css">
        textarea { height: 200px }
        </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"></textarea>
          <select id="target-language"></select>
          <button onclick="translate()">翻訳</button>
          <textarea id="result"></textarea>
      </body>
    </html>

では、このコードに関する解説だ。google.language.translate()を用いて翻訳する部分は、先ほどのサンプルとほとんど変わらないので省略する。

(1) 画面の初期表示時、「何語に翻訳するか」を選択するための選択リストを作成する。Language APIで使用できる言語は、google.language.Languagesと言うオブジェクトに、「キー:値」の形で格納されている。同オブジェクトの内容は以下の通りだ(公式ドキュメントより引用)。

    var google.language.Languages = {
      'ENGLISH' : 'en',
      'CHINESE' : 'zh',
      'CHINESE_SIMPLIFIED' : 'zh-CN',
      'CHINESE_TRADITIONAL' : 'zh-TW',
      'ARABIC' : 'ar',
      'FRENCH' : 'fr',
      'GERMAN' : 'de',
      'ITALIAN' : 'it',
      'JAPANESE' : 'ja',
      'KOREAN' : 'ko',
      'PORTUGUESE' : 'pt-PT',
      'RUSSIAN' : 'ru',
      'SPANISH' : 'es',
      'DUTCH': 'nl',
      'UNKNOWN' : ''
    };

このオブジェクトを「for..in」でループ処理することで、選択リストを作成しているというわけだ。

(2) 文字列から言語を自動判定するには、google.language.detect()というメソッドを使用する。同メソッドは以下のようなシグネチャを持つ。

    google.language.detect(判定材料とする文字列、結果を受け取るコールバック)

自動判定が成功したかどうかは、結果オブジェクトのerrorプロパティを調べると判明する。結果オブジェクトが持つlanguageプロパティに、自動判定した結果の言語コードが含まれる。それを用いて、今度はgoogle.language.translate()を呼び出して翻訳するというわけだ。

まとめ

これで、Google AJAX Language APIについての説明は終わりとする。コールバック関数に渡される結果オブジェクトの細かい構造などに関しては、公式ドキュメントを参照していただきたい。

おわかりの通り、非常に扱いやすいAPIにもかかわらず、そのパワーは絶大だ。今回のサンプルをコピーして、まずは試してみることをおすすめする。