WEBOPIXEL

jQueryでGoogle AJAX Language APIを使用してWebサイトのコンテンツを翻訳する

Posted: 2011.01.10 / Category: javascript / Tag: ,

Googleの翻訳API(Google AJAX Language API)を使えばWebサイトの英文を日本語にしたり、またその逆ももちろんできます。
比較的簡単に扱えるjQueryで試してみます。

Sponsored Link

コンテンツのテキストを取得して翻訳する。

「id=text」というp要素のテキストを取得して、翻訳した内容を追加して表示します。

html

		<p id="text">こんにちは。今日は良い天気ですね。</p>
	

javascript

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
		google.load("language", "1");	//ライブラリ読み込み
		$(function(){
			var text = $('p#text').text();
			google.language.translate(text, "ja", "en", function(result) {
				if (!result.error) {
					$('p#text').append("("+result.translation+")");
				}
			});
		});
		</script>
	
1~4行目
ライブラリの読み込みです。
7行目
言語の指定です。英語から日本語だったら「"en", "ja"」
日本語から英語だったら「"ja", "en"」です。

textareaに入力した情報を翻訳する。

翻訳サイトにありそうな、textareaに自由にテキストを入力して翻訳した内容を表示するということをしてみます。

html

		<div>
			<h3>原文</h3>
			<textarea id="text-in" rows="5" cols="40"></textarea>
		</div>
		<button id="english-btn">日→英</button>
		<button id="japanese-btn">英→日</button>
		<div>
			<h3>訳文</h3>
			<textarea id="text-out" rows="5" cols="40"></textarea>
		</div>
	

javascript

	google.load("language", "1");	//ライブラリ読み込み
	$(function(){
		//日本語→英語ボタン
		$("#english-btn").click(function() {
			var text = $("#text-in").val();
			translation(text, "ja", "en");
		});
		//英語→日本語ボタン
		$("#japanese-btn").click(function() {
			var text = $("#text-in").val();
			translation(text, "en", "ja");
		});
	});
	
	function translation(text, langIn, langOut) {
		google.language.translate(text, langIn, langOut, function(result) {
			if (!result.error) {
				$("#text-out").val(result.translation);
			}
		});
	}
	

textarea内のテキストは「val()」で取得したりセットしたりできるので、「text-in」で取得したテキストを翻訳して「text-out」にセットするだけですね。

参考サイト: 翻訳API – Google AJAX Language API プログラミング解説