« 「単語の修行」携帯版 | トップページ | 作った人の責任 »

2006/10/02

prototype.jsのAjaxでSafariが文字化け

つい最近、やっとAjaxを利用したサイトを作ってみようという気になってきました。

書籍はずいぶん前から数冊ほど買っていたのですが、どれを読んでもなかなか重い腰を上げる事ができないまま、ただ時間だけが過ぎる毎日でした。しかし、「単語の修行」では一般向けに公開している事からも、利便性を追求するために多少の工夫をした方が良いだろうという判断から、ついにAjaxに手を出す機会を見つける事ができたのです。

「まずは基本から」ということでXMLHttpRequestを試してみて、他のファイルから動的に情報を取得してみる。
上手く行ったので、今度はPHPでデータベースの情報を動的に抜き出してみる。
これも問題なく動作したので、一安心。

色々やってみて、一通り機能は理解したつもりになったから、別のブラウザで動作の確認をしてみると...だめじゃん。Safariで文字化けしてるし、IEでは全然機能しない。
その後、IE版を作ってみてきちんど動作することを確認してみるものの、Safariの文字化けはどうしても直せない...

だんだん面倒になってきたので、フリーで公開されているprototype.jsを使って、面倒な所を簡単に処理してしまおうと考え、今度はprototype.js用にコードを書き換えて、上手く動作することを確認。上手く行ったので、今度はIEで動作の確認をしてみるとこちらもOK。

...でもやっぱりSafariの文字化けはだめなのね。

仕方が無いのでWebで情報を検索してみると一発で答えが見つかってしまいました。「Safari の responseText で UTF-8 コード文字化け回避」というサイトを参考に、XMLHttpRequestを使ったバージョンを変更してみると無事に動作することを確認。

なんだ、「最初から調べれば良かった」と思いつつもprototype.jsの便利さを知ったのはそれはそれで収穫かな。でも、うまく動いたのはXMLHttpRequestを使った方なので、ページの非同期通信は自作の関数を使って、その他をprototype.jsで処理するということになるのですが、それはなんか美しく無い。

ということで、prototype.jsを改造してSafariでもきちんと動作するように改造してみることにしました。

前置きが長くなってしまいましたが、修正した部分のコードは下記となります。

765行目から、
 updateContent: function() {
  var receiver = this.responseIsSuccess() ?
   this.containers.success : this.containers.failure;
   var response = this.transport.responseText;
   
   //Safari文字化け対策
   if(navigator.appVersion.indexOf( "KHTML" ) > -1){
    var esc = escape(response);
    response = (esc.indexOf("%u") < 0 && esc.indexOf("%") > -1) ?
     decodeURIComponent(esc) : response;
   }

   
  ...以下略

で、赤い部分が修正箇所です。

もし、他にも困っている人がいるかもしれないので、修正版をダウンロードできるようにしておきます。必要な人は下記リンクからダウンロードしてみて下さい。

prototype.js 1.4.0 Safariの文字化け対応版

とりあえず、これでまた「単語の修行 韓国語篇」が少し使いやすくなりました。

|

« 「単語の修行」携帯版 | トップページ | 作った人の責任 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/79953/12133091

この記事へのトラックバック一覧です: prototype.jsのAjaxでSafariが文字化け:

« 「単語の修行」携帯版 | トップページ | 作った人の責任 »