« Mac版IEとinnerHTML | トップページ | Yahoo! Japanのディレクトリーに掲載されました »

2006/11/16

SafariとAjax文字化け



サポートが自慢の格安サーバ

Googleサジェスト--Safariで文字化け」という記事を書いたのは去年の三月でした。今は、この文字化けはGoogle側のプログラムにより修正されています。

しかし、本質的に、Safariが文字コードの認識能力に問題が起こることが多いのは事実です。特に問題になりやすいのは、メタタグを指定できず、またPHPやPerlなどによるHTTPヘッダーによる文字コード指定もできないファイルは文字化けしやすいです。具体的には、テキストファイルであり、Ajaxを使ってテキストファイルを読み込むときなどにこの問題が起こりやすいです。

たとえば、次のようなよくある「Ajax基本サンプル」を考えてみます。「IE7とAjax」でも取り上げたサンプルコードとほぼ同じです。sample.txt(UTF-8でエンコードされたファイル)を読み込みます。

この時、Safariでのみ、sample.txtの中の日本語が文字化けします。UTF-8の文字列なのに、ISO-8859-1としてとらえているかのような文字化け「あいうえお」(元の文字列は「あいうえお」)です。宇宙人の暗号かウルトラサインのような文字です。解決策はいくつかありますが、ここでは3つだけご紹介します。

1.解決策1: .htaccessを使います。
.htaccssを使って、
AddType "text/plain; charset=UTF-8" .txt

のようい書きます(参照:「ウェブマスターのための文字化け講座「メタタグによる文字コード指定の有効性」」)。.htaccessで拡張子ごとに文字コードを指定しておけば、WEBサーバの方で必要なHTTPヘッダーを出力してくれますので、Safariでも文字化けしません。

上の書き方だと、そのディレクトリー内の拡張子「.txt」のファイルは全てUTF-8と見なされるため問題がある場合もあるかもしれません。その場合は、Ajaxで読み込むファイルの拡張子は必ずしも「.txt」でなくてもいい場合も多いでしょうから、

AddType "text/plain; charset=UTF-8" .iso
のようにして、sample.isoを読み込ませる形にしてもいいでしょう。



2.解決策2:あらかじめファイルの中身(文字列)をURLエンコードしておく
あらかじめURLエンコードしておいたものをdecodeURIメソッドを使ってURLデコードすれば完ぺきである。sampletxt以外にsample_safari.txtを別に準備しておき、そのファイルの中の文字列はencodeURIメソッドなり、PHPを使うなどしてエンコードしておきます。もしくは、面倒であれば、下記のフォームを使ってみてください。

変換したい文字列を入力してください。

変換結果:

「あいうえお」なら上のフォームで変換すれば、「%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A」になるはずです。これをsample_safari.txtとして保存しておきます。

のように、ブラウザによって読み込むファイルを変えるといいでしょう。

3. 解決策3: String.fromCharCodeメソッドを使う
「2.」の方法は(decodeURIメソッドをサポートしていない大昔のブラウザを考慮するなら、)ファイルを二つ準備しなければならず、かなり面倒です(ただし、Ajaxが可能で、decodeURIメソッドをサポートしていないブラウザはWindows版IE5.0や5.01ぐらいかもしれません)。.htaccessによる解決が一番手軽ですが、それができない場合には、String.fromCharCodeメソッドを使って日本語なども全て数値化しておくといいでしょう。これはJavaSriptの難読化にもなります。

● JavaScript難読化処理のためのヒント「2.日本語メッセージを英数字だけの文字列に変換する」
http://www.broadband-xp.com/obfuscation/ascii.html

にありますフォームを使って変換しますと、「あいうえお」は「String.fromCharCode(12354,12356,12358,12360,12362);」に変換されます。ですから、sample.txtの中身を「String.fromCharCode(12354,12356,12358,12360,12362);」にしておき、HTMLファイル内のJavaScriptを下記のように書き換えれば、Safariでもその他のブラウザでも文字化けせずに動きます。

この方法を利用するときの注意点としては、sample.txtが動的に生成されるものである場合、思わぬセキュリティホール(クロスサイトスクリプティングの脆弱性など。)になりうるということです。

● (参照)ITmedia エンタープライズ:Ajaxが招く新たなセキュリティリスク (2/2)
http://www.itmedia.co.jp/enterprise/articles/0608/07/news004_2.html



【ウィルスチェック標準】NTTスマートコネクトのレンタルサーバ

|

« Mac版IEとinnerHTML | トップページ | Yahoo! Japanのディレクトリーに掲載されました »

コメント

コメントを書く



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


コメントは記事投稿者が公開するまで表示されません。



トラックバック

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

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

» 入門Ajax 増補改訂版 [Toss::Monologue]
入門Ajax 増補改訂版高橋登史朗 ソフトバンククリエイティブ 2006-10... [続きを読む]

受信: 2007/01/05 23:30

« Mac版IEとinnerHTML | トップページ | Yahoo! Japanのディレクトリーに掲載されました »