ページ内の文章を翻訳する

Google翻訳APIを利用するとページ内の文章を読み出して翻訳し再度、ページ内に表示させることができます。つまり、自動的に英語のページやフランス語のページに翻訳し表示することができます。日本向けのページと英語圏向けのページを用意するにはコストがかかりますし、そこまでできないが海外向けにはアピールしたい場合には便利かもしれません。特にどの言語に切り替えて表示するかを選択した後に翻訳し表示させることもできます。

また、全てを翻訳しなくてもページ内の重要な一部分だけを翻訳して表示させることもできます。サンプル02はページ内の特定の部分にある日本語を英語に翻訳し、日本語の下に平行して翻訳結果を表示するものです。また、サンプル03は日本語を残さずに完全に英語に置き換えてしまうサンプルです。

サンプル02の実行結果。日本語の文章と平行して翻訳結果が表示される

サンプル03の実行結果。日本語部分が英語に翻訳され完全に置き換わる

サンプル02

 <!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)に翻訳
            var text = document.getElementById("mainContents").innerHTML;
            google.language.translate(text, "ja", "en", function(result){
                // 翻訳結果を画面に表示
                document.getElementById("translate").innerHTML = result.translation;
            });
        });
    // --></script>
    </head>
    <body>
    <h1>翻訳サンプル</h1>
    <div id="mainContents">
    本日より新たなサービスを開始しました。<br>
    従来より大幅に機能を増やし、処理速度を向上させました。
    </div>
    <div id="translate"></div>
    </body>
 </html>

サンプル03

 <!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)に翻訳
            var text = document.getElementById("mainContents").innerHTML;
            google.language.translate(text, "ja", "en", function(result){
                // 翻訳結果を画面に表示
                document.getElementById("mainContents").innerHTML = result.translation;
            });
        });
    // --></script>
    </head>
    <body>
    <h1>翻訳サンプル</h1>
    <div id="mainContents">
    本日より新たなサービスを開始しました。<br>
    従来より大幅に機能を増やし、処理速度を向上させました。
    </div>
    </body>
 </html>