JavaScriptを利用してリアルタイムに翻訳させる「jQuery Translator」

サイトは国境を超え、さまざまな人が閲覧します。
ただし、英語、フランス語、スペイン語と別にページを用意したらコストが膨大になります。
そこでjQuery Translatorの出番です。
Googleが提供するGoogle AJAX Language APIを簡単に利用して翻訳させることが可能です。

使用方法

jQuery Translatorからjquery.translator.jsをjQueryからjquery.jsをダウンロードします。

<script src="http://www.google.com/jsapi" type="text/javascript"></script>	
<script type='text/javascript'>                      
  google.load("language", "1");
</script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.translator.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#translation').translator({
		"origin": '#base',
		"origin_language": 'ja', //デフォルトの言語(jaは日本語)
		"result": '#result',
		"result_language": '#trans_to'
	});
});
</script>
上記を記述後、以下のように翻訳箇所を書いていきます。

<form action="" method="get" id="translation">
<fieldset>
	<label for="trans_to">Translate to</label>
	<select id="trans_to" name="trans_to">
	      <!-- ここから翻訳言語設定 -->
	      <!-- 言語一覧 -->
	      <option value="ja" selected="selected">日本語</option>
	      <option value="en">English</option>
	      <option value="es">Spanish</option>
	      <option value="fr">French</option>
	      <option value="ko">Korean</option>
	      <option value="ru">Rosian</option>
	</select>
</fieldset>
</form>
<p id="base">
	<!-- 翻訳前のテキスト -->
	あなたのお名前は? 
</p> 
<p id="result"></p> <!-- 結果表示 -->
ちょっと怪しい翻訳になったりしますが、あとはGoogleさんに期待しましょう。

サンプル

あなたのお名前は?私の名前は山田太郎です。ベンチャー会社に勤めていて、現在30歳です。


Javascriptサンプルページ一覧
skuare.net