人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavaScriptと正規表現の質問です。
各国旗の画像をクリックするとGoogle翻訳で現在閲覧中のページを国旗に対応した言語に翻訳したいと考えています。
▼参考URL 国旗をクリックすると翻訳されたページが表示される
http://www.prestashop.com/en/showcase_liveshops/

Javascriptを使ってこれを実現しようと思ったのですが、力及ばず行き詰ってしまいました。
Javascriptの知識が浅いため、解決方法そのものを教えていただければうれしいです。
もしそのまま使える完全なコードややり方を回答していただいた回答者の方には500ポイントを差し上げます。よろしくお願いいたします。
※文字制限のため詳細はこの下にある「この質問・回答へのコメント」に記載いたします。

●質問者: icta
●カテゴリ:ウェブ制作
✍キーワード:Google翻訳 JavaScript URL クリック コメント
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●500ポイント ベストアンサー

この回答はコメント欄でのやり取りの後に書き込まれたものです。

translator.jsがミソです(大したことない)。


ファイル構成

全て同じ場所にいれる。

shtmlなのはこちらの都合なのでhtmlに変えて問題ありません。その際はリンクのhref部分も忘れずに書き換えて下さい。

htmlが雑なのはごめんなさい。metaのキャッシュ関連のやつはどうでもいいです。Google翻訳と比較するためにマイクロソフトの「Web サイト用翻訳ウィジェット」を挿入してありますが、URLの登録が必要なので再現しないと思います。登録は簡単にできます。


translator.jsで保存。

// target="_blank"で新しいウィンドウにGoogle翻訳を開く。
var u='http://www.google.co.jp/translate?hl=ja&sl=ja&tl=en&u=';
u += escape(location.href);
document.write('<a href="'+u+'" target="_blank" class="toEnglish"><img src="./en.png" style="border:0;" alt="Translate to English"></a> ');

// target="_self"でページ遷移してGoogle翻訳を開く。比較のためにtargetを変えてある。
var u='http://www.google.co.jp/translate?hl=ja&sl=ja&tl=es&u=';
u += escape(location.href);
document.write('<a href="'+u+'" target="_self" class="toEspanol"><img src="./es.png" style="border:0;" alt="Traduzca en Espanol"></a> ');

// Google翻訳のページから抜ける。
var orgAdrs = decodeURIComponent(window.document.baseURI);
document.write('<a href="' + orgAdrs + '" target="_top"><img src="./ja.png" style="border:0;" alt="日本語のページに戻る"></a> ');


translate2.shtmlで保存。

<html>
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
</head>
<body>
<br><br>
<div style="border:1px solid;">
<script type="text/javascript" src="./translator.js"></script>
</div>
<br><br>
<p>
<a href="./hoge2.shtml">他のページへ</a>
</p>
<p>
<a href="./hoge2.shtml?key=kagi&pass=hoge">?key=kagi&pass=hogeな他のページへ</a>
</p>
<br><br>
<div id="MicrosoftTranslatorWidget" style="width: 200px; min-height: 83px; border-color: #3A5770; background-color: #78ADD0;"><noscript><a href="http://www.microsofttranslator.com/bv.aspx?a=http%3a%2f%2fcherenkov.hp.infoseek.co.jp%2ftmp%2fsample%2ftranslate2.shtml">このページを翻訳します</a><br />提供: <a href="http://www.microsofttranslator.com">Microsoft? Translator</a></noscript></div> <script type="text/javascript"> /* <![CDATA[ */ setTimeout(function() { var s = document.createElement("script"); s.type = "text/javascript"; s.charset = "UTF-8"; s.src = "http://api.microsofttranslator.com/V1/Widget.svc/Embed?appId=xiV6T54MlYIYKnQrqsSHAdh03oWY6ikN&from=ja&layout=ts"; var p = document.getElementsByTagName('head')[0] || document.documentElement; p.insertBefore(s, p.firstChild); }, 0); /* ]]> */ </script> 
<br><br>
<div>
<p><b>ウィキペディア</b> (<b>Wikipedia</b>) は<a href="http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A3%E3%82%AD%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E8%B2%A1%E5%9B%A3" title="ウィキメディア財団">ウィキメディア財団</a>が運営する<a href="http://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3" title="オンライン">オンライン</a><a href="http://ja.wikipedia.org/wiki/%E7%99%BE%E7%A7%91%E4%BA%8B%E5%85%B8" title="百科事典">百科事典</a><a href="http://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%94%E3%83%BC%E3%83%AC%E3%83%95%E3%83%88" title="コピーレフト">コピーレフト</a><a href="http://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9#.E8.91.97.E4.BD.9C.E7.89.A9.E5.85.A8.E8.88.AC.E3.81.AE.E5.88.A9.E7.94.A8.E8.A8.B1.E8.AB.BE.E3.81.AE.E3.83.A9.E3.82.A4.E3.82.BB.E3.83.B3.E3.82.B9" title="ライセンス">ライセンス</a>の下、誰でもが無料で自由に<a href="http://ja.wikipedia.org/wiki/%E7%B7%A8%E9%9B%86" title="編集">編集</a>に参加できる。世界各国の<a href="http://ja.wikipedia.org/wiki/%E8%A8%80%E8%AA%9E" title="言語">言語</a>で展開されている。</p>
<p>ウィキペディアという語は、Wikipediaが使用している<a href="http://ja.wikipedia.org/wiki/MediaWiki" title="MediaWiki">MediaWiki</a>と呼ばれる<a href="http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A3%E3%82%AD" title="ウィキ">wiki</a><a href="http://ja.wikipedia.org/wiki/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2" title="ソフトウェア">ソフトウェア</a>の「Wiki」と、<a href="http://ja.wikipedia.org/wiki/%E8%8B%B1%E8%AA%9E" title="英語">英語</a>「encyclopedia」(<a href="http://ja.wikipedia.org/wiki/%E7%99%BE%E7%A7%91%E4%BA%8B%E5%85%B8" title="百科事典">百科事典</a>)との合成語である「Wikipedia」を日本語として表記したものである。</p>
</div>
</body>
</html>


hoge2.shtmlで保存。

<html>
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
</head>
<body>
<br><br>
<div style="border:1px solid;">
<script type="text/javascript" src="./translator.js"></script>
</div>
<br><br>
<p>
<a href="./translate2.shtml">ホームに戻る</a>
</p>
<br><br>
<div id="MicrosoftTranslatorWidget" style="width: 200px; min-height: 83px; border-color: #3A5770; background-color: #78ADD0;"><noscript><a href="http://www.microsofttranslator.com/bv.aspx?a=http%3a%2f%2fcherenkov.hp.infoseek.co.jp%2ftmp%2fsample%2ftranslate2.shtml">このページを翻訳します</a><br />提供: <a href="http://www.microsofttranslator.com">Microsoft? Translator</a></noscript></div> <script type="text/javascript"> /* <![CDATA[ */ setTimeout(function() { var s = document.createElement("script"); s.type = "text/javascript"; s.charset = "UTF-8"; s.src = "http://api.microsofttranslator.com/V1/Widget.svc/Embed?appId=xiV6T54MlYIYKnQrqsSHAdh03oWY6ikN&from=ja&layout=ts"; var p = document.getElementsByTagName('head')[0] || document.documentElement; p.insertBefore(s, p.firstChild); }, 0); /* ]]> */ </script> 
<br><br>
<p>ユーザビリティに類する日本語は、以下に挙げるような用語が、多数にわたって存在している。</p>
<dl>
<dt>使い勝手</dt>
<dd>使い勝手とは、使いやすさの程度を表す言葉であり、一般には「使い勝手がいい、悪い」という形で使われている。その意味合いはかなり広く、取り扱いが容易であること、操作が分かりやすいこと、便利な機能がついていること、などを意味している。その意味で、後述のBig UsabilityやNielsenのusefulnessに近い概念であり、したがって、またISO9241-11の定義におよそ対応すると言ってよい。ただし、ユーザの利用状況や達成目標に適合している、というニュアンスまでは表現しえていないため、現在はユーザビリティというカタカナ語が一般的に使われている。</dd>
<dt>使いやすさ</dt>
<dd>使いやすさ (ease of operation) とは、一般的には取り扱いが容易であることを意味している。前述のように使い勝手は使いやすさの程度をあらわす言葉であるが、使い勝手に比較すると使いやすさはその対象範囲が操作部位に限定される傾向がある。また時代的には、マンマシンインタフェースが研究対象とされていた時期によく使われていた。この意味で、操作性 (operability) とも近い概念である。</dd>
<dt>利用性</dt>
<dd>利用性は利用のしやすさをあらわす言葉であり、usabilityの訳語として利用することも可能ではあるが、特定の達成目標に依存した面があり、またあまり一般的ではない。</dd>
<dt>使用性</dt>
<dd>使用性はISO9241-11をJIS規格にする際にusabilityの訳語として用いられた。その意味ではユーザビリティと等価であるともいえるが、必ずしも一般的な用語ではないため、特別な技術的文脈でしか使われていない。</dd>
<dt>可用性</dt>
<dd>可用性はユーザビリティに近い概念であるが、厳密にいうとavailabilityの訳語であり、システムの壊れにくさを表すものである。</dd>
<dt>利用品質</dt>
<dd>利用品質はquality in useまたはquality of useの訳であり、英語においてもusabilityとほぼ等価な意味合いで用いられている。ただ、この用語が使われるのは、品質 (quality) という観点で議論を行う文脈である場合が多く、品質保証や品質管理などに近い分野で使われることが多い。</dd>
</dl>
</body>
</html>
◎質問者からの返答

短いスクリプトの挿入で労せず間単に多言語化できるこのコードは大変に素晴らしいものです。

デザインも自由自在です。

Cherenkovさん本当にありがとうございました。

検索で来る方のためにGoogle翻訳のパラメータの意味を記載しておきます。

●Google翻訳

翻訳したいURLの前に▼以下のURLを付けると上部にフレームが付き、下部で翻訳されます。

http://translate.google.com/translate?js=y&hl=en&ie=UTF-8&sl=ja&...★翻訳したいURL★

●言語

ja日本語

en英語

esスペイン語

●パラメーター

&sl=ja&tl=en 日本語から英語へ翻訳

&hl=es Google翻訳スペイン語版

&u=★翻訳したいURL★

&ie=UTF-8 文字コード

●Google翻訳参考URL

http://translate.google.co.jp/translate_tools?hl=ja&layout=1&eot...

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ