JavaScript で出力した文字列が文字化け

　Web開発を行っていて困るものの1つに文字化けがある。おそらく日本人でWebの開発を行っているなら1度や2度は経験したことがあるだろう。

　今回もあるシステムを開発している時にこの文字化けに遭遇しました。今回はJavaScriptで出力した文字列が化けてしまったのですが、これが結構厄介で最終的には根本的な解決策が見つかりませんでした。下記にその状況を明記しておきます。

　今回、行っていたのはHTMLにJavaScriptのdocument.writeで文字を出力するものを作っていました。

　ローカル環境で作って、IE、FF、Chromeなどの各ブラウザで確認すると特に問題なく表示され、｢よし、よし｣と思いながら、では、Webサーバ上にアップし、確認しようとFTPでレンタルサーバにアップロードしました。ただ、まだ、非公開ということでBasic認証でブロックしていました。

　アップロードしたHTMLを各ブラウザで確認すると同じく問題なし。次に「スマートフォンではどうだろうか？｣ということで、愛用のAndroid端末のXperia(SO-01B)で確認すると、JavaScriptのdocument.writeで出力した文字列だけが完全に文字化け状態になってしまいました。各ファイルのエンコードはUTF-8にしてあり、metaタグのcharsetもUTF-8にしてあります。さらにJavaScriptタグに下記のような「charset」をセットしても同じでした。

<script src="hoge.js" type="text/javascript" charset="utf-8" />

　どうしてだろう？といろいろ調べたところ犯人はAndroidが原因のようです。Basic認証をかけたページをAndroid端末で表示し、さらにそのページで今回のようにJavaScriptで文字を出力すると文字化けが発生するようです。試しにBasic認証を外してみると、何事もなかったように文字化けは解消されます。おそらくAndroidのブラウザに問題があると思いますが、Basic認証を外す以外に根本的な対策は見つかりませんでした。

　もし、同じような経験でお困りの方はBasic認証を外してみてはいかがでしょう。また、根本的な対策を御存知の方は教えてください。ちなみにアンドロイドのバージョンは2.1でブラウザはデフォルトのブラウザです。