【レビュー】

Googleからの贈り物 - Google AJAX Language APIでカンタンに翻訳サイトを

3 複雑なはずの翻訳作業を支える強力な2つのAPI

    白石俊平　 [2008/03/21]
    印刷

    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にもかかわらず、そのパワーは絶大だ。今回のサンプルをコピーして、まずは試してみることをおすすめする。

    関連サイト

    Google AJAX Language API
    関連したタグ

    EclipseLinkとその影響、OR競争に終止符か

    JavaScript統合開発環境へ、NetBeans 6.1

    新着記事

    理研、脳・脊髄形成に必要な神経板湾曲の仕組みを解明 [20:16 5/25]
    京大、「慢性閉塞性肺疾患」患者の労作時呼吸困難は鍼治療が有効と実証 [20:08 5/25]
    120Hz SHVカメラ用イメージセンサーを使った撮像装置 - SHVフルスペック化へ [18:10 5/25]
    京大、視覚による物体認知は前頭前野からのトップダウン信号が重要と確認 [17:45 5/25]
    製品数の拡大だけでなくBCPの展開なども含めた総合力で事業の強化を図るTI [17:25 5/25]

    特設サイトの情報

      求人情報

      人気記事

      一覧

      もっと見る

      イチオシ記事

      もっと見る

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう！

      Heroes File ～挑戦者たち～

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      ...もっと見る

      マイナビニュースマガジン

        ページトップ