Excite翻訳が簡単に作れた

Javascript

■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>