遊ぶブログ＋ Javaスクリプト小技集

ブログ
リンク
フリーエリア
動画･音楽
楽天

ブログ

Entries

テキスト翻訳

ジャンル : ブログ
スレッドテーマ : ブログパーツ

久しぶりの新作です。

Google AJAX Language APIというなにやら便利そうなAPIが公開されていたので、マウスで選択したテキストを翻訳するプラグインを作成してみました。

サンプルは、このブログに組み込んでありますので、記事の文書を適当にドラッグして選択状態にしてみてください。

<div id="main">
  <select name="langpair" id="langpair">
    <option value="ar|en" >アラビア語→英語</option>
    <option value="zh|en">中国語→英語</option>
    <option value="zh-CN|zh-TW">中国語(簡体→繁体)</option>
    <option value="zh-TW|zh-CN">中国語(繁体→簡体)</option>
    <option value="nl|en">オランダ語→英語</option>
    <option value="en|ar">英語→アラビア語</option>
    <option value="en|zh-CN">英語→中国語(簡体)</option>
    <option value="en|zh-TW">英語→中国語(繁体)</option>
    <option value="en|nl">英語→オランダ語</option>
    <option value="en|fr">英語→フランス語</option>
    <option value="en|de">英語→ドイツ語</option>
    <option value="en|it">英語→イタリア語</option>
    <option value="en|ja">英語→日本語</option>
    <option value="en|ko">英語→韓国語</option>
    <option value="en|pt-PT">英語→ポルトガル語</option>
    <option value="en|ru">英語→ロシア語</option>
    <option value="en|es" >英語→スペイン語</option>
    <option value="fr|en">フランス語→英語</option>
    <option value="fr|de">フランス語→ドイツ語</option>
    <option value="de|en">ドイツ語→英語</option>
    <option value="de|fr">ドイツ語→フランス語</option>
    <option value="it|en">イタリア語→英語</option>
    <option value="ja|en" selected="" >日本語→英語</option>
    <option value="ko|en">韓国語→英語</option>
    <option value="pt|en">ポルトガル語→英語</option>
    <option value="ru|en">ロシア語→英語</option>
  </select>
</div>
<span style="font-size:8px;">developed by <a href="http://blogsquare256.blog85.fc2.com/" target="_blank">遊ぶブログ</a><br></span>
<div id="results">
	<div d="results_title" class="hd">翻訳結果:</div>
	<div id="results_body" class="bd"></div>
</div>

var X,Y;
	YAHOO.namespace("translate.container");

function init() {
		YAHOO.translate.container.results = new YAHOO.widget.Panel("results", { width:"300px", visible:false, constraintoviewport:true } );
		YAHOO.translate.container.results.render();
		YAHOO.util.Event.addListener("show1", "click", YAHOO.translate.container.results.show, YAHOO.translate.container.results, true);
		YAHOO.util.Event.addListener("hide1", "click", YAHOO.translate.container.results.hide, YAHOO.translate.container.results, true);
	}

YAHOO.util.Event.addListener(window, "load", init);

google.load("language", "1");

function submitChange(e) {

var value = (document.all) ? document.selection.createRange().text : window.getSelection();

X = YAHOO.util.Event.getPageX(e);
      Y = YAHOO.util.Event.getPageY(e);

var langpair = document.getElementById('langpair');
      var pair = langpair.options[langpair.selectedIndex].value.split('|');
      var src = pair[0];
      var dest = pair[1];
　　　if (value!=""){
	      google.language.translate(value, src, dest, translateResult);
     	}
      return false;
    }

function translateResult(result) {
      var resultBody = document.getElementById("results_body");
      if (result.translation) {
        resultBody.innerHTML = result.translation;
      } else {
        resultBody.innerHTML = '<span style="color:red">Error Translating</span>';
      }

YAHOO.translate.container.results.cfg.setProperty("x", X);
	YAHOO.translate.container.results.cfg.setProperty("y", Y);
	YAHOO.translate.container.results.show();

}

YAHOO.util.Event.addListener(document,"mouseup" , submitChange)

</script>