JavaScriptと正規表現の質問です。

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

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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/03/01 00:46:30
  • 終了:2010/03/02 19:09:38

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922010/03/02 18:57:46

ポイント500pt

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

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


ファイル構成

全て同じ場所にいれる。

  • translator.js
  • translate2.shtml (メイン)
  • hoge2.shtml
  • en.png (国旗)
  • es.png
  • ja.png

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>
id:icta

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

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

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

2010/03/02 19:08:54
  • id:icta
    Google翻訳で提供している以下のツールはセレクトボックスを使用していてスペースを大きく取るため、小さな画像で同じように翻訳を行いたいと思います。
    ▼Google翻訳のツール
    http://translate.google.co.jp/translate_tools?hl=ja&layout=1&eotf=1&sl=ja&tl=en

    Google翻訳は翻訳したいURLの前に▼以下の翻訳URLを付けると上部にフレームが付き、下部で翻訳されます。※&hl=enはGoogle翻訳英語版
    翻訳URL:http://translate.google.com/translate?js=y&hl=en&ie=UTF-8&sl=ja&tl=en&u=★翻訳したいURL★

    ja:日本語
    en:英語
    es:スペイン語

    &sl=ja&tl=en 日本語から英語へ翻訳
    &hl=es Google翻訳スペイン語版
    &u=★翻訳したいURL★
    &ie=UTF-8 文字コード

    現在のページのURLをJavaScriptのlocation.hrefで取得し、以下のリンクを作り出します。

    <a href="翻訳URL(英語&hl=en)+現在のオリジナルページURL"><img srec="en.gif" alt="English" /></a><a href="翻訳URL(&hl=es)+現在のオリジナルページURL"><img srec="es.gif" alt="Spanish" /></a><a href="現在のオリジナルページURL" target="_top"><img srec="ja.gif" alt="Japanese" /></a>

    Google翻訳利用中にページ内のリンクをクリックするとすべてのリンクに翻訳URLが付けられます。
    そのため日本語ページに戻るために現在のページのURLを取得しても翻訳URLが付いたものになり、オリジナルのページに戻ることができません。
    そこで[現在のオリジナルページURL]を取得するために正規表現を使う必要があります。またフレームも解除しなければなりません。
    ▼以下のように考えたのですが、正規表現がどのように書けばよいかわからないためここから先に進めなくなってしまいました。

    if(現在のオリジナルページにtranslateが含まれる場合){
    "&u="以降のURL を取り出す
    }else{
    現在の取得ページURL
    }

    お知恵をお借りできれば幸いです。
  • id:Cherenkov
    はっきりいってそのような方法ではユーザが便利になるとは思えないです。
    -FirefoxからはGoogle翻訳を使った場合にJavaScriptを使って動的にリンクを書き換えることが出来ない。IEではできた。
    -動的に書き換えられない場合は以下のように<a href='javascript:~とするしかないが、ユーザが再び翻訳リンクをクリックした場合二重にフレームが表示される。それを回避するために無意味に複雑なコードになる。
    -ユーザがGoogle翻訳を使った状態で外部のページに飛んだ場合、こちらからオリジナルのページに戻るためのリンクは出せないのであまり意味がない。

    とにかく考え直した方がいいと思います。
    http://www.microsofttranslator.com/web/
    このページにある「Web サイト用翻訳ウィジェット」や「Web ページ翻訳ツール」を設置した方がマシだと思います。
  • id:Cherenkov
    http://cherenkov.hp.infoseek.co.jp/tmp/sample/translate2.shtml

    http://ryouchi.seesaa.net/article/28672470.htmlを参考にしながらサンプルを作ってみました。
    Google翻訳のリンクにtarget="_blank"で新しいウィンドウで開くようにすればユーザは戻る操作を必要としません。代わりに閉じる操作が生じます。
    例としてアメリカ国旗はtarget="_blank"で新しいウィンドウで開く、
    スペイン国旗はtarget="_self"でページ移動するようにしてます。
    日本国旗はGoogle翻訳されたページでクリックすると元のページを新しいウィンドウで開きます。私にはページ移動の方法はわかりません。
    いろいろやってみてやっぱりマイクロソフトの「Web サイト用翻訳ウィジェット」などを使ったほうがいいと思います。
    他にも同様なツールはいくつかあって、
    -http://www.excite.co.jp/world/blogparts/
    -もしWordPressならこれ http://blog.yz-design.com/global-translator/
  • id:icta
    Cherenkovさん、ご回答にお時間を割いていただきありがとうございます。
    上のコメントで参考として紹介した▼Google翻訳のツールにあるスニペットを使えば良い話なのですが、これだとデザイン的に大きすぎるのと検索ボックスと似ていて混同しやすいので、何とか質問の方法で行いたいと考えています。

    ▼Google翻訳のツール
    http://translate.google.co.jp/translate_tools?hl=ja&layout=1&eotf=1&sl=ja&tl=en
    ▼スニペット
    <div id="google_translate_element"></div><script>
    function googleTranslateElementInit() {
    new google.translate.TranslateElement({
    pageLanguage: 'ja'
    }, 'google_translate_element');
    }
    </script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

    便利かどうかの件につきましては見解の相違ということもあるので置いておくとして、作成していただいたコードはかなりイメージしていたものに近く感謝しております。
    ただページが動的に生成されるものでパラメーターに?、=、&を使っており、取得したUTF-8のURLをデコードしないと日本語のオリジナルページを開くことができない状態です。
    ▼こちらを読むとJavascriptでデコードができるように書かれているのですが、やり方が違うのかうまくデコードができずに悩んでいます。
    http://prog.coresv.net/javascript/html/3column/VVJM44Ko44Oz44Kz44O844OJ.e1.html
    こちらの方法で解決できればよいのですが、最悪以下の文字を置き換えればオリジナルページを開けるようなので、正規表現で置換することができれば解決するかもしれません。
    %253F -> ?
    %253D -> =
    %2526 -> &
    もしデコードまたは置換のうまい方法を何かご存知でしたらお力添えいただければうれしいです。
  • id:Cherenkov
    サンプルのオリジナルページへ戻るための日本国旗が正しく動いてなかったので修正しました。

    オリジナルページのアドレスを隠しiframeからではなく、window.document.baseURIで取得するようにしました。
    あと翻訳ページでのみ動作するようにif文の追加。

    URLをデコードするならdecodeURIComponentを使って
    decodeURIComponent(window.document.baseURI)
    こうすればいいのではないでしょうか。

    動くものがあるのならそれを提示していただくのが解決への近道。
    どこで困っているのかいまいちわからないので文字の置換の方法も書いておくと、
    %253Fを?に置換。
    例:"hoge2.shtml?key=kagi&pass=hoge"を得たい。
    var newAddress = "hoge2.shtml%253Fkey=kagi&pass=hoge".replace(/%253F/g,"?").replace(/%253D/g,"=").replace(/%2526/g,"&")
    alert(newAddress)
  • id:Cherenkov
    例の訂正。
    var newAddress = "hoge2.shtml%253Fkey%253Dkagi%2526pass%253Dhoge".replace(/%253F/g,"?").replace(/%253D/g,"=").replace(/%2526/g,"&")
    alert(newAddress)
  • id:Cherenkov
    前のコメントで「動的に書き換えられない」といったのは翻訳されると動的にhrefの値を変えることが出来なかったんですが、
    document.writeを使えばできました。それを組み合わせてtarget="_top"にすればフレームを外すことも可能でした。サンプルにも反映したのでよかったらご確認ください。
    http://cherenkov.hp.infoseek.co.jp/tmp/sample/translator.js
  • id:icta
    Cherenkovさん、ご回答いただきありがとうございます。まさに希望通りの動作となり大変感動しております。動的に生成されたURLもまったく問題ありません。
    短いスクリプトの挿入で間単に多言語化できるこのコードは非常に便利なものです。
    もし差し支えなければ同じ悩みを持つ今後の人のためにもコードを回答欄にご記載いただけませんでしょうか?
    この回答を持ってこの質問を終了したいと思います。
    回答がまったくないまま質問を終了させてしまうと、せっかくのコードが役立たせられず埋没してしまいとても残念です。
    もしご希望で回答欄に記載しない方を好まれる場合はコメント欄にその旨ご記載ください。質問を終了いたします。
    それではよろしくお願いいたします。
  • id:Cherenkov
    寛大な措置ありがとうございます。
    問題が解決したようで安心しました。
  • id:icta
    上記コードはIE6~8でエラーになるため、Cherenkovさんが新しく変更を加えたコードが▼以下のURLにあります。
    http://q.hatena.ne.jp/1271733319#c177066

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません