Corredor

ウェブ、プログラミングの勉強メモ。

IE 限定・ローカルにある UTF-8 の HTML ファイルから Shift-JIS 形式のファイルを文字化けさせずに読み込む方法

  • ローカルに HTML ファイルがある。エンコーディングは UTF-8 を指定している。
  • これとは別に、同じフォルダ内に Shift-JIS 形式の別の HTML ファイルがある。

この UTF-8 の HTML ファイルから、Shift-JIS のファイルを読み込んで、インラインに展開させたい。jQuery の load() みたいなことをしたい。

しかし、jQuery の ajax() やら get() やら load() やらは、いずれも UTF-8 のファイルを読み込むのがデフォルトになっているので、Shift-JIS のファイルを読もうとすると文字化けしてしまう。

そんなワケで、ローカルの HTML ファイルから他の HTML ファイルを読み込む jQuery のメソッドを試してみつつ、読み込む対象のファイルのエンコード指定と文字化けの関係を調べてみた。

  • 調査したブラウザ:
    • IE11
    • Firefox
    • Chrome
    • Edge
  • 呼び元の HTML ファイル:
    • ローカルにある UTF-8 のファイル
  • 読み込む HTML ファイル:
    • ローカルにある Shift-JIS のファイル (基本は文字化けするが、文字化けさせずに読み込みたいファイル)
    • ローカルにある UTF-8 のファイル (呼び元との組み合わせ的にも、基本的に文字化けしないファイル)
  • 読み込み方:
    • jQuery.load()
    • jQuery.ajax()
    • jQuery.get()
    • Scripting.FileSystemObject

長くなりそうなので先に結論を

呼び元が UTF-8 の HTML ファイルで、Shift-JIS の別ファイルを読み込みたい時は、Scripting.FileSystemObject を使って Shift-JIS のファイルを読み込み、ReadAll() などで拾った値を jQuery.html() の引数にでも与えてやれば、両ファイル間で文字コードが違っても文字化けせずに読み込める。

FileSystemObject が使えるのは ActiveXObject が使える IE11 だけで、かつローカルでしか使えないと思うので、「IE11 限定」「ローカルにある HTML ファイル限定」というワケ。

では、以下、順に試してみる。

呼び元の HTML ファイル

まずはテストするための、呼び元の HTML ファイルを作った。以下のような感じで、Shift-JIS の HTML と、UTF-8 の HTML とを、それぞれ4つの読み込み方で読み込もうとしている。

ローカルの HTML ファイルから他の HTML ファイルを読み込むテスト … IE は FileS …

既にコメントで色々記載しているが、ブラウザごとに色々引っかかったポイントがあった。

  • 当然だが、Scripting.FileSystemObject は ActiveXObject が使える IE11 でのみ使える。Firefox や Chrome は勿論だが、Edge も ActiveXObject に対応していない。
  • Firefox は jQuery の ajax()get() の引数で dataType を指定しないとエラーが出て読み込めない。
  • Chrome でローカルの HTML ファイルから ajax() などを動作させるには、--allow-file-access-from-files という引数を与えて Chrome を起動させる必要がある。
    Windows なら「ファイル名を指定して実行」で以下のように起動する。
    chrome –allow-file-access-from-files

結果の画面キャプチャ

順に表示結果を見てみる。

IE11

f:id:neos21:20160625025450p:plain

画面左下の「Shift-JIS」:「FileSystemObject」部分。UTF-8 の HTML ファイルであるにも関わらず、Shift-JIS の HTML ファイルを読み込んで文字化けせずに展開できている。それ以外の jQuery を使った方法では文字化けしてしまっている。

また、UTF-8 のファイルを FileSystemObject で読み込んでも文字化けしてしまうことから、有効なのは「UTF-8 の HTML ファイルで Shift-JIS の HTML ファイルを読み込む場合」のみ。また、FileSystemObject の性質上、サーバを介して使用することはないだろうから、ローカルの HTML ファイルでのみ使える技、ということになる。

Firefox

f:id:neos21:20160625025456p:plain

以降は同じソースを他のブラウザで見てみただけ。

Firefox でも Shift-JIS の HTML ファイルは文字化けしているほか、ActiveXObject が使えないので FileSystemObject も当然使えない。

Firefox は別の方法でローカルの HTML ファイルを読み書きできるみたいだけど、Components がもう使えない?らしく、うまくいかなかった。

Chrome

f:id:neos21:20160625025459p:plain

Chrome も Firefox と同様の表示。

Chrome でローカルファイルを操作するには File API が使えるらしい。試してない。

Edge

f:id:neos21:20160625025503p:plain

Windows10 にしたことだし、Edge でも見てみた。Edge は ActiveXObject がサポートされていない他、セキュリティ設定の問題か、ローカルで Ajax ができないみたい。

以上

未だに IE しか使わせてもらえないレガシープログラマにとって、JScript・FileSystemObject はまだまだ現役。……泣ける話や……。

それにしても、FileSystemObject で読み込むと文字化けしないのはなんで?