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

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

「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」にセットするだけですね。