Firefoxで文字化けするよくある理由

時々Firefoxでページが文字化けするサイトがあるけど、原因を調査すると95%くらいは Content-Type の設定が間違ってました。それもHTMLソースの方じゃなくて、HTTPヘッダーの方が。

普通、文字コードを指定するとしたらHTMLでこう書くと思うけど、

<!-- HTML5 -->
<meta charset="utf-8" />

<!-- HTML4 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTTPのレスポンスヘッダーでも文字コードは指定できます。

GET /foo.html HTTP/1.1
Host: www.example.com
Connection: close

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8  ←コレ!!

で、もしmetaタグとHTTPヘッダーの文字コード指定が異なる場合は、HTTPヘッダーの方を優先するようです。

HTTPヘッダーによる指定の方が文書内でのmeta指定よりも優先度が高い

https://www.w3.org/International/questions/qa-html-encoding-declarations.ja

WebブラウザがHTML文書の文字コードを判定する際には、このメディアタイプのcharsetパラメータを最優先に参照する

http://www.atmarkit.co.jp/ait/articles/0412/25/news006.html

文字化けに至るまでの、よくありがちな流れはこんな感じです。

  • 以前はShift_JISEUC-JPでHTMLを記述していた。
  • 最近になって新しいコンテンツはUTF-8で書くようにした。
  • サーバーの設定も変えて、charset=utf8 を付けるようにした。
  • 古いコンテンツが文字化けし始めたことに気づかない。

とにかくコンテンツを見れるようにする

閲覧者の方で文字コードを変更する方法ですが、この前Firefoxはメニューの配置を変えたので奥の方に移動されています。探すと「その他」の中に配置されてました。

→ その他 → テキストエンコーディングの中です。

f:id:itasuke:20171218214112p:plain

話は変わるけど、この記号 を「ハンバーガーメニュー」と呼ぶんだが、どう見てもハンバーガーには見えないし、マクドナルドと紛らわしいので、代わりに三つ引き(みつひき)と呼んだらいいと思う。