にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:22:19.

合成するファイルを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を加えることもできます。

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時間近くかかったけど……。

コメント

UTF-8で保存する時は特に何も考えずに
BOM有りで保存していた私には目から鱗状態です。
非常に勉強になりました。ありがとうございました。

投稿者 す、すばらし! : 2014年01月20日 09:40

お役に立てたようで何よりです。
BOMを付けておくと確実にUnicodeだと判別させられるので、UTF-8であってもBOMは付けたくなるんですよね。^^;
でも、この合成時に発生する問題を知ってからは、特別の必要がない限りは付けないようになりました。^^;

HTMLの場合は、meta要素で文字コードを指定しておけばまず問題がないので、BOMを付ける必要性はありませんしね。

投稿者 にしし : 2014年01月22日 10:55

コメント数: 2件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

このリストは、次のエントリーを参照しています: 合成するファイルをUnicodeで記述する場合はBOMなしで作成する方が良い:

» WordPress & IEはBOMに要注意 from rest of the WorldPress
IEでサイト表示したら上の方に不自然なスペース(空白文字)が入ってヘッダーがずれていた。 FireFoxだと正常に表示されるのになぜ? さんざん悩んでいろいろ試...

トラックバック時刻: 2007年11月15日 01:25

--- 当サイト内を検索 ---