主にWeb技術ネタ ブログ

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

<script type="text/javascript">

//Google Lanauge APIの準備

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



// デフォルト翻訳言語

var translang = "en";



// 翻訳実行関数

// tagname = 翻訳するタグ

// lang = 翻訳言語。

function Translate(id, lang) {

  if (lang != '') {

    // 翻訳言語設定

    translang = lang;

  }



  // 指定したIdからノードを取得

  var node = document.getElementById(id);



  // 次のノード

  var nextnode = node.nextSibling;



  for ( var n = node; n;) {

    if (n == nextnode) {

        // 事前に取得していた次のノードに来たら終了

        break;

    }



      if (n.nodeType == 1 && n.getAttribute('id') == 'TranslateOptions') {

        // 言語選択は翻訳しない

        n = n.nextSibling;

        continue;

      }



      if (n.nodeType == 3) {

        // nodeTypeが3の場合テキストなので、翻訳処理を行う

        var text = trim(n.nodeValue);

        if (text.length > 0 && text.length < 5000) {

          // APIの規約に従い5000文字を超えないように



          // 翻訳処理へ

          trans(n, text);

        }

      }



      // 要素がどんどん掘り下げていく

      if (n.firstChild) {

        n = n.firstChild;

        continue;

      }

      do

        if (n.nextSibling) {

          n = n.nextSibling;

          break;

        }

      while (n = n.parentNode);

    }

}



// 翻訳処理実行

function trans(elem, text) {

  // 元の言語をチェック

  google.language.detect(text, function(result) {

    if (!result.error && result.language) {

      // APIで元の言語から、指定した言語に翻訳

      google.language.translate(

          text, result.language, translang, function(result) {

            if (result.translation) {

              // 翻訳が成功したら、文字を置き換える

              elem.nodeValue = htmlspecialchars_decode(result.translation);

            }

          });

    }

  });

}



// トリミング

function trim(str) {

  return str.replace(/(^￥s+)|(￥s+$)/g, '');

}



// 特殊なHTMLエンティティを文字に戻す

function htmlspecialchars_decode(str) {

  str = str.replace(/&lt;/g, '<');

  str = str.replace(/&gt;/g, '>');

  str = str.replace(/&quot;/g, '"');

  str = str.replace(/&amp;/g, '&');

  str = str.replace(/&#39;/g, '￥'');

  return str;

}

</script>

<div id="TransField">
</div>

<select id="TranslateOptions" onchange="Translate('TransField', this[this.selectedIndex].value);">
<option>翻訳する(Translate)</option>
<option value="en">ENGLISH</option>
<option value="zh">CHINESE</option>
<option value="fr">FRENCH</option>
<option value="de">GERMAN</option>
<option value="it">ITALIAN</option>
<option value="ja">JAPANESE</option>
<option value="ko">KOREAN</option>
<option value="pt-PT">PORTUGUESE</option>
<option value="es">SPANISH</option>
</select>