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

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

使用方法
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さんに期待しましょう。

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

sponsors

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

記事作成:
記事URL:

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