Excite翻訳が簡単に作れた
■googleからの贈り物
ここで紹介されているように、googleからGoogle AJAX Language APIなるものがリリースされたようです。
ということで、勉強がてらExcite翻訳似のサイトを作ってみました。
ちなみに本物のExcite翻訳では以下のようになります。どちらの英語がより正しいのかは判断できませんが、個人的にはExciteの英語の方が読みやすいです。
以下はソース。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> function $(id) { return document.getElementById(id); } var lang = {en_to_ja:["en", "ja"], ja_to_en:["ja", "en"]}; google.load("language", "1"); function translate() { var s = $("l").options[$("l").selectedIndex].value; google.language.translate($("source").value, lang[s][0], lang[s][1], function(result) { $("result").value = result.translation; }); } </script> </head> <body> <div style="margin-left: auto; margin-right: auto; width: 750px;"> <div style="width: 325px; height: 315px; background: #a0b8c8; float:left; padding-left: 4px; padding-top: 4px;"> <textarea id="source" rows="15" cols="36"></textarea> </div> <div style="float: left; width: 70px; margin: 10px;"> <select multiple="multiple" style="margin-top: 50px;" id="l"> <option value="en_to_ja" selected="">英→日</option> <option value="ja_to_en">日→英</option> </select> <div style="background: #ff9900; width: 50px; height:25px; margin-top: 20px;"> <button onclick="translate();" style="margin-top: 1px; margin-left:1px;">翻訳</button> </div> </div> <div style="width: 325px; height: 315px; background: #a0b8c8; float:left; padding-left: 4px; padding-top: 4px;"> <textarea id="result" rows="15" cols="36"></textarea> </div> </div> </body> </html>