APIを読み込ませる

翻訳を行うAPIはgoogle.language.translate()、言語を特定するAPIはgoogle.language.detect()です。まず、簡単なところで日本語から英語に翻訳を行ってみましょう。翻訳APIを使うには以下のように<script>タグを使ってライブラリを読み込ませます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

次に翻訳ライブラリのバージョンを指定して読み込ませます。現在、APIのバージョンは1なので以下のようにスクリプトを書きます。

google.load("language", "1");

ライブラリファイルの読み込みは非同期で行われるため、このメソッドの直後にすぐGoogle翻訳APIが使えるわけではありません。完全にライブラリファイルが読み込まれたら実行するようにしなければなりません。ライブラリが完全に読み込まれたら処理を行うにはgoogle.setOnLoadCallback()を使います。パラメータには読み込み完了後の処理を指定します。通常は関数を指定しておき、翻訳作業を開始するようにします。

実際の翻訳はgoogle.language.translate()のパラメータに翻訳する文字列、翻訳元の言語の種類、翻訳先の言語の種類、翻訳完了後の処理を指定します。言語の種類は言語コードで使われるもので日本語であればja、英語であればen、アラビア語であればarとなります。

サンプル01は「こんにちは」という日本語を英語に翻訳し画面に表示します。翻訳対象となる文字列や言語コードをいろいろ指定してみると、どのように翻訳されるかが分かります。

翻訳結果が画面に表示される。

サンプル01

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript"><!--
        google.load("language", "1");   // 翻訳ライブラリ ver 1を読み込む
        google.setOnLoadCallback(function(){
            // 日本語(ja)から英語(en)に翻訳
            google.language.translate("こんにちは", "ja", "en", function(result){
                // 翻訳結果を画面に表示
                document.getElementById("translate").innerHTML = result.translation;
            });
        });
    // --></script>
    </head>
    <body>
    <h1>翻訳サンプル</h1>
    <div id="translate"></div>
    </body>
 </html>