bricklife.weblog.*

Ajax で文字化けする条件を調査してみた

【Blog Hackers Conference 2005 補足エントリー その２】

発表時間が全然足りなくて一言もしゃべれなかった「Ajax で日本語文字化け」ネタの調査結果をエントリーしておきます。

Safari ユーザのみなさんは Ajax なページを見るときに「文字化けすぎで見れん！」という経験を一回はされていると思います。例えば「WEBプログラミング NOW!: Googleサジェスト--Safariで文字化け」で述べられているように Google サジェストが化け化けになったりして、枕を涙で濡らす日々を過ごしていることと思われます(v1.3 では動作すらしません(泣))。この文字化けは、どうもデータを XML ではなくテキスト形式で受け取っているときに起こるようです。詳しい原因は「WEBプログラミング NOW!: Googleサジェスト--Safariで文字化け」や「ヘチマ_BLOG : Safari の XMLHttpRequest」などをご覧下さい。毎度のことながら Safari はおばかなやつです…。

回避策としては、結論から言うと UTF-8 で書かれた XML データでやりとりさせれば Safari を含む大抵のブラウザで大丈夫なようです。とても詳しい調査が「JavaScript++かも日記: 【Ajax】responseされる文字コードの調査」にまとめられています。超必見。というわけで、テキストでやり取りしているサービスを作っている方は「mizzy.org - Mac SafariでのxmlHttpRequest文字化け」で述べられているようにデータの先頭に「<?xml version="1.0" encoding="euc-jp"?>」と書くだけで回避できますので(もちろんパースに影響が出るかもですが)、XML 化をご検討していただけると幸いです。

で、上記のサイトを見た後で出すのはアレなのですが、僕もちょっと調べてみたので、もったいないので公開しておきます。調査のポイントは「1. 呼び出し元(HTML)の文字コード」「2. 呼び出しデータの文字コード」「3. 呼び出し方法(フォーマット含む)」です。データを CGI 出力するかどうか(CGI 出力時は HTTP response header に charset を吐いている)も区別してみました。あとはついでに Ajax(XmlHttpRequest) だけでなく、外部 js ファイル include による document.write (script 要素で charset 属性の指定あり) も対象にしてみました。

• 対象ブラウザ： IE(win)、FireFox(win)、Safari(mac)、FireFox(mac)
• 呼び出し元 HTML の charset： UTF-8、EUC-JP、Shift_JIS
• 呼び出しデータの charset： UTF-8、EUC-JP、Shift_JIS
• データ表示方法： XmlHttpRequest(XML)、XmlHttpRequest(テキスト)、js include
• データ出力方法： 静的ファイル、CGI 出力

これらの組み合わせは「4×3×3×3×2」で 216 通り(泣)になるのですが、Javascript 日本語文字化けテストというページを作って、Mac と Virtual PC でがんばりました…。以下のプレゼン資料そのままな画像がその結果と調査の様子です。Web アプリ開発中は大抵こんな感じで動作確認をしていて、いつもどれがどのウィンドウだかわからなくなります(^^;) 元の Keynote ファイルやスライドの抜粋などはここにアップしてあります。

この方法できちんと検証できているかは自信がないのですが、このように CGI 出力して HTTP response header に「Content-Type: text/xml; charset=EUC-JP」などと吐いてあげれば、結構大丈夫みたいですねー。テキスト出力でも CGI 出力してあげれば Safari 1.3 以降なら文字化けを回避できます。Safari 2.0 だとどうなのかな…。あと、おまけの調査になりましたが、js include はまったく問題ないですね、やっぱり。ちなみに Opera は調査してないのであしからず(^^;

川o・-・）＜2nd life な人の情報によって、Safari でも「How To Use Unicode Strings in Rails」の下の方に書かれている方法で文字化けを回避できることがわかったのですが、これに関してはまたあとで追記する、かも。

こんな感じで Safari ユーザは Movable Type の Bookmarklet 以来苦しんでいるわけですが、僕はいつまでもこのバカなブラウザとつきあって行こうと思います。単に Apple プロダクトが好きなだけなんですけどね。というわけで、Safari での動作確認など承りますので、気軽に声かけて下さい。また、間違っているところや追加情報などありましたら教えて下さい。