2007年5月 3日(木) 23時55分26秒 [Web関連]

合成するファイルをUnicodeで記述する場合はBOMなしで作成する方が良い

WordPressのカスタマイズ中に遭遇した謎の現象。
Firefoxで見ると何もないんだけど、IEで見るとなぜか余計な半角スペースが加わったように見える現象に遭遇しました。ソースを見ると何もないのに、ブラウザ上（IE上）で見るとスペースが表示されちゃってます。その結果、スタイルシートでのレイアウトが崩れてしまいます。そのままでは困るので原因は何だろうか……といろいろ試行錯誤した結果、1時間くらいしてやっと判明。

BOMでした…。
UTF-16などのUnicodeファイルで必要とされる、ファイルの先頭に挿入するBOM（Byte Order Mark）です。

UTF-16では、ファイルの先頭に「BOM」と呼ばれる3バイトのコードが必要です。UTF-8では必要ないんだけど、Unicodeであることを識別する目的で、UTF-8にもBOMを加えることもできます。

私が愛用しているテキストエディタ「EmEditor」では、UTF-8で保存すると、デフォルトでBOMを加えてくれます。（なくすことも可能。） なので、とりあえず「BOM付き」でファイルを作成してたんです。それが原因でした…。

とはいえ、ファイルの先頭にBOMがある場合は、IEでももちろん何も問題ありません。Unicodeが読めるソフトウェアは当然BOMも適切に処理できるハズですから当然です。

しかーし。

落とし穴がありました。
「ファイルの合成」です。

WordPressのテンプレートは、PHPを使って複数のファイルを合成して1つのウェブページを生成します。その複数のファイルすべてをBOM付きのUTF-8コードで作成してたので、どうも、合成結果のウェブページ内に、複数のBOMが混入しちゃってたようです。

BOMというのは、ファイルの先頭に1回だけ登場するものです。ファイルの途中には出てきません。なのに、ファイルをそのまま合成してしまったがために、ウェブページ（ソース）の途中にもBOMが出現することになってしまったのですね。それを、IEはゴミとして（半角スペースのように）表示してしまったということでした。

しかし、ウェブページのソースを表示させてみると、何も存在しないかのように見えたわけですが。おそらく、ソースの表示に使っていた「EmEditor」は、ファイルの途中に出現するBOMコードを無視してくれたんでしょうね。もしかして、「メモ帳」とかで見てたら、途中に謎のコード（文字）が存在するのが見えたかも知れません。(^_^;;;

なんでFirefoxでは問題なかったのかとか、他のブラウザではどうだったのかとかは調べてないので分かりません。(^_^;)

とりあえず、他のファイルと合成される可能性のあるファイルをUnicodeで記述する場合は、BOMなしで保存しておく方が良さそうです。「何か謎の空白ができる」という現象だけからこの原因を突き止めるのは、なかなか容易でないと思います…。

いやあ、気づけて良かった……。(^_^;;;
解決までに1時間近くかかったけど……。