2006年09月23日

グーグル翻訳を自分のサイトに設置する方法

グーグルの翻訳機能を利用して自分のサイトにテキスト翻訳とURL翻訳を設置する方法

いざと言う時には便利なグーグルの URL 翻訳やテキスト翻訳ですが Google へ送信できる文字コードは UTF-8 のみで他の文字コードを送信すると文字化けを起こしてしまいます。
設置するページが UTF-8 ならまったく問題はないのですが、ブログツールを使っていたりすると1ページだけ異なる文字コードのページを作る事は困難な場合もあります。
しかたが無いので JavaScript を使い以前に 複数の文字コードをformからCGIへ送信する方法 で記述した方法を使う事としました。

この方法で文字コードを整合させる場合の欠点は戻るボタンをクリックした時に元のページが文字化けを起こしてしまいますので同一ページに結果を表示できない事です。
取り合えず一度開いたページの上に上書きして行きますので次々と新しいページを開く様な事にはなりませんが…

参考ページ:
グーグル翻訳
テキストとウェブ検索結果の翻訳


基本形は下記のようになります。

テキスト翻訳


ウェブページを翻訳する

から

上記ソース JavaScript

<script language="JavaScript" type="text/javascript">
function trans(fo) {
org=document.charset;
document.charset='UTF-8';
 swin=window.open("","swin","");
 fo.target="swin";
 fo.submit(); swin.focus();
document.charset=org;
}
</script>


テキスト翻訳のフォーム

<form name="f_txt" action="http://translate.google.com/translate_t" method="post" onSubmit="return false;" accept-charset="UTF-8">
テキスト翻訳
<br />
<textarea name="text" rows="5" cols="45" wrap="PHYSICAL" dir="ltr"></textarea>
<br />
<select name="langpair">
<option value="en|de">英語からドイツ語へ</option>
<option value="en|es">英語からスペイン語へ</option>
<option value="en|fr">英語からフランス語へ</option>
<option value="en|it">英語からイタリア語へ</option>
<option value="en|pt">英語からポルトガル語へ</option>
<option value="en|ar">英語からアラビア語へ BETA</option>
<option value="en|ja" selected>英語から日本語へ BETA</option>
<option value="en|ko">英語から韓国語へ BETA</option>
<option value="en|zh-CN">英語から中国語(簡体)へ BETA</option>
<option value="de|en">ドイツ語から英語へ</option>
<option value="de|fr">ドイツ語からフランス語へ</option>
<option value="es|en">スペイン語から英語へ</option>
<option value="fr|en">フランス語から英語へ</option>
<option value="fr|de">フランス語からドイツ語へ</option>
<option value="it|en">イタリア語から英語へ</option>
<option value="pt|en">ポルトガル語から英語へ</option>
<option value="ar|en">アラビア語から英語へ BETA</option>
<option value="ja|en">日本語から英語へ BETA</option>
<option value="ko|en">韓国語から英語へ BETA</option>
<option value="zh-CN|en">中国語(簡体)から英語へ BETA</option>
</select>
<input type="hidden" name="hl" value="ja" />
<input type="hidden" name="ie" value="UTF8" />
<input type="submit" value="翻訳" onClick="trans(f_txt);" />
</form>


URL翻訳のフォーム

<form name="f_url" action="http://translate.google.com/translate" method="get" onSubmit="return false;" accept-charset="UTF-8"> ウェブページを翻訳する
<br />
<input type="text" name="u" value="http://" size="55" dir="ltr" />
<br />から
<select name="langpair">
<option value="en|de">英語からドイツ語へ</option>
<option value="en|es">英語からスペイン語へ</option>
<option value="en|fr">英語からフランス語へ</option>
<option value="en|it">英語からイタリア語へ</option>
<option value="en|pt">英語からポルトガル語へ</option>
<option value="en|ar">英語からアラビア語へ BETA</option>
<option value="en|ja" selected>英語から日本語へ BETA</option>
<option value="en|ko">英語から韓国語へ BETA</option>
<option value="en|zh-CN">英語から中国語(簡体)へ BETA</option>
<option value="de|en">ドイツ語から英語へ</option>
<option value="de|fr">ドイツ語からフランス語へ</option>
<option value="es|en">スペイン語から英語へ</option>
<option value="fr|en">フランス語から英語へ</option>
<option value="fr|de">フランス語からドイツ語へ</option>
<option value="it|en">イタリア語から英語へ</option>
<option value="pt|en">ポルトガル語から英語へ</option>
<option value="ar|en">アラビア語から英語へ BETA</option>
<option value="ja|en">日本語から英語へ BETA</option>
<option value="ko|en">韓国語から英語へ BETA</option>
<option value="zh-CN|en">中国語(簡体)から英語へ BETA</option>
</select>
<input type="hidden" name="hl" value="ja" />
<input type="hidden" name="ie" value="UTF8" />
<input type="submit" value="翻訳" onClick="trans(f_url);" />
</form>

各種検索窓設置方法

posted by Nea at 17:32 | Comment(0) | 検索窓設置方法
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: