【PR】 ADSL対応プロバイダ・キャンペーン情報
【PR】 DVDをお探しならamazon.co.jp
【PR】 スピードテストで速いプロバイダは？
【PR】 マジックリスニング・よくある質問
  

Javascriptの外部ファイル内でdocument.writeしたら文字化け（Mac IE 4.5編）



ロリポップ！なら初心者でも安心！
ホームページ簡単作成　「ホムペロリ！」、「woopa!」
CGI簡単設置　「CGI CANDYBOX!」が無料で使えます！！ ）

この文字化けはMac版IE4.5のみで起こる現象です。同じMac版IEでもIE5.0以上では起こりません。Mac版IE4.5では、Javascriptの外部ファイル内でdocument.writeをすると、日本語が文字化けすることがあります。左の画面キャプチャーは「あいうえお」と出力しています。この文字化けの仕方は半角カタカナが出没するわけでもなく、どのような理由で文字化けが発生しているかを推定するのは正直、困難だと思います。しかし、マイクロソフトがちゃんとサポートページに掲載してくれていました。

（参照）▼[M_IE45] JavaScript で出力した日本語文字列が不正
http://support.microsoft.com/default.aspx?scid=http://www.microsoft.com/japan/support/kb/articles/JP415/3/19.asp

これによると、Mac版IE4.5では、Javascriptの外部ファイルの文字コードが実際にはShift_JISであったとしても、全てUTF-8であると『思い込み』、本体のHTMLファイルとせ合体させてしまうというのです。

マイクロソフトが公開している『回避策』は「document.write にて日本語を利用する際には、外部の JavaScript ファイルをインクルードして利用せずに、HTML 内で記述するようにします。 」というものですが、外部ファイルにせざるをえない場合もあるでしょう。この回避策では満足できませんね。

//Mac版IE4.5の文字化け対策
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>Mac版IE4.5の文字化け対策</title>
</head>
<body bgcolor=#FFFFFF>
<table border=1 cellspacing=0 cellpadding=8 bgcolor=#FFFF99><tr><td>
<script language="Javascript">
<!--
   var Mac = navigator.userAgent.indexOf("Mac") != -1 ? true : false;
   if(Mac && navigator.userAgent.indexOf("MSIE 4.5") != -1){
//Javascript内で「</script>」とdocument.writeすると、Mac版IE4.5では終了タグが現れたと勘違いしますので、「</scr」と「ipt>」に分割してdocument.writeします。（このコメントさえも、Mac版IE4.5では終了タグと解釈し、正しく動作しないので、コピー&ペーストして使う場合はコメントを削除してください。）
      document.write("<script type=\"text/javascript\" src=\"js_utf8.js\"></scr" + "ipt>");
   } else {
      document.write("<script type=\"text/javascript\" src=\"js.js\"></scr" + "ipt>");
   }
//-->
</script>
<noscript>
Javascriptをoffにされているので表示できません。
</noscript>
</td></tr></table>
</body>
</html>
Mac版IE4.5では外部ファイルの文字コードはUTF-8だと思い込むのですから、解決策としては、Mac版IE4.5の場合は、UTF-8で保存した外部ファイルを読み込ませ、それ以外のブラウザは通常のShift_JISでエンコードした外部ファイルを読み込ませれば良いことになります。

ブラウザの判別は、左のサンプルコードのようにnavigator.userAgetntの値を見て判別します。そして、場合分けで外部ファイルの読み込みをさせます。この時、Javascriptの中で「<script src=〜</script>」をdocument.writeさせるのですが、この場合にMac版IE4.5では、document.writeの目的語とも言うべき「</script>」を終了タグであると思い込み、以下のJavascriptコードを下記のようにそのままブラウザに表示させてしまいます。

これは当然まずいので、さらに対策が必要です。「</script>」を分割して、「</scr」と「ipt>」にします。子供だましみたいな感じですが、これでうまくいきます。


余談になりますが、以前、Flashをある方に作成してもらったものをMac版IE4.5でテストしていて、以上のような分割法を適用しなければならないことを初めて知ったのでした。そのFlashには、Flashプラグインの判別を行うためのスクリプトが書かれていたのですが、Javascript内で『Windows版IE用のVBScriptによるプラグイン判別コード』がdocument.writeされていたため、Mac版IE4.5の場合、Javascriptコードがそのままブラウザに表示されてしたのでした。いろいろ調べて、上記のような分割法の存在を知ったという経験があります。

【広告】クリック報酬だけじゃ物足りない？⇒バリューコマースならセールス報酬も稼げる！

（現在、Windows版Flash MXを利用していますが、Flash MXのパブリッシュ機能では少なくとも、この不具合は修正されていて、「document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n');」と分割したコードが出力されています。）

（また、Mac版IE4.5のみならず、Google先生でも同じようにJavascript内でdocument.writeされている</script>を終了タグであると誤認してしまう不具合があります。本来、検索対象にならないはずのJavacriptコードが検索サマリーに出現するのはこういうわけです。この検索サマリーの不具合については、こちらを参照してください。）

さらに話が逸れますが、Mac版IE4.5はFlashの鬼門と呼ばれていて、非常に多くの不具合があります。

（参照）▼ Macromedia Flash : fl0139 - Macintosh Internet Explorer 4.5 でおこる不具合
http://www.macromedia.com/jp/support/flash/ts/documents/fl0139.html
マクロメディアのサポートページより。Flashプラグインの有無をJavascriptで取得できない不具合などの説明。たとえ、「</script>」を分割してdocument.writeしても、プラグインの有無にかかわらず、代替GIF画像が表示されます。プラグインの有無を調べてる場合は、Mac版IE4.5の場合は強制的にFlashを表示させ、その他のブラウザの場合はプラグインの有無を調べるなどの処理をする必要があります。

話を元に戻しますと、上記のようなコードを書くことで、Mac版IE4.5の場合のみ、UTF-8で保存された外部ファイルが読み込まれます（UTF-8で保存するには、秀丸エディタなどのテキストエディタで簡単にできます。）ので、文字化けは発生しません。

ここまで書いてきて、Mac版IE4.5だけの問題であれば、一層のこと、ページ本文の文字コードをEUC-JPにしてしまえば、外部ファイル（JSファイル）の文字コードもEUC-JPで統一できるではないかとお考えのかたもおられるでしょう。しかし、このやり方は、次のページで説明しますように、うまくいきません。Mac版IE4.5は外部ファイルの文字コードをUTF-8であると決め付けますが、Mac版ネットスケープ4.7はShift_JISと決め付けます。ですので、ページ本文をUTF-8にしても、結局は外部ファイルの読み込みをJavascriptで振り分ける作業は必要であり、UTF-8に対応していない古いブラウザの存在を考えると、ページ本体の文字コードをUTF-8にするのは問題があるでしょう。結局、ページ本体はShift_JISで作成し、Mac版IE4.5のみ異なる外部ファイルを読み込むようにするのが一番妥当でしょう。

もう一つの方法は、日本語を出力しようとするから文字化けするのですから、外部ファイル内でdocument.writeする場合は、日本語部分はエンコードし、それをデコードして出力する形であれば、外部ファイルを２つ用意することなく、文字化けを解消できます。ただ、この場合にエンコードする場合に単純にescape関数を用いると、トラブルになります。なぜかと言えば、escape関数はIEとネットスケープで挙動が違うからです。ネットスケープでは、いわゆるURLエンコードしてくれますが、IEではunicodeでエンコードしてしまうからです。そこで一工夫必要です。

（参照）▼ HTMLソースの隠し方：Javascriptのescape関数で判読を難しくする
http://www.broadband-xp.com/hidesource/escape.html
にIEでもネットスケープでも動くescape関数が紹介されています。また、

（参照）▼ HTMLソースの隠し方：ソースを外部ファイル化する（CGI編)
http://www.broadband-xp.com/hidesource/cgi.html
に、この自作escape関数を使った、Mac版IE4.5の文字化けた対策が紹介されています。外部ファイルをjsファイルではなく、CGIで作成し、Mac版IE4.5の場合のみUTF-8で出力（=print）するようにしています。

ちなみに、Mac版IE4.5では、「<script type="text/javascript" src="js.js" charset="Shift_JIS">」などとしても動きませんでした。

次のページでは、上述したMac版ネットスケープ4.7で発生する文字化けパターンを検証してみます。