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

Presented by Nishishi via Movable Type. Last Updated: 2017/06/21. 12:27:41.

合成するファイルを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は書けません。(書くと投稿が拒否されますのでご注意下さい。)

※ご投稿頂いた内容は、掲載前に管理者が確認する設定にしている場合があります。たいていは数日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連する記事など

※下記には、本サイト内外の関連記事などが8本くらい自動で表示されています。

にししふぁくとりー Sakura scope内限定での主要なカテゴリ

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