SRIAエディターの若栁です。湿度が高いので、髪の毛がわんぱくになる毎日です。

久しぶりに、以前作ったスロットゲームを開いてみました。その時に使ったJavaScriptで、何か別のものを作れないかな、と思い操作していたのですが、当たりの画面が文字化けしていました。前に使った時は文字化けしていなかったのに・・・今回はこの原因を掘り下げて解決していこうと思います。

ブラウザによって表示が違う

手元にある3つのブラウザで対象ページを表示した時には、以下のような違いがありました。

今回文字化けしたのはSafari、前に使っていたのはGoogle Chromeなので、その違いもあるんだろうな、と思いつつ。見ているページが文字化けしている時は、ブラウザの文字コード設定を変える、という知識だけはあったので、Safariの文字コードを変えてみました。表示＞テキストエンコーディング、で、ここがデフォルトになっていたのでUTF-8へ指定したら正しく表示されました。

設定を変えれば表示されることはわかりましたが、公開されているwebサイトで「見る側が設定を変えないと、作り手の意図した表示がされない」のはなんか違うよなーと思い、該当ページのファイルと、もともとのスロット画面本体のページを比較してみることにしました。

ページソースに違いがあった

結論からお伝えすると、当たりページのHTLM自体に文字コードの設定が書かれていなかったことが直接の原因でした。不完全な記述だったため、Safariで文字コードを指定しないと表示されない状態でした。閲覧したブラウザの違いもありますが、どうやらこれが原因のようです。

ちゃんと文字コードが書かれている方のソースを抜粋しました。2行目にあるcharset=”UTF-8″が、ページの文字表示方法を決める文字コードです。文字の設定は”UTF-8″にしてね、の意味です。

ファイルを保存する時の文字コードもある

HTMLファイル内に文字コードが指定されていても、ファイル自体を保存する時の文字コードと一致しないと文字化けします。例えば、ファイルではUTF-8を指定、ファイルを保存する時にShift_JISを指定した場合などです。コンテンツ自体も大事だけど、文字化けして内容が伝わらなかったらもったいないですしね。今回のファイルは、UTF-8で保存されていましたので、この点はクリアです。

ブラウザも初期設定の文字コードがある

最初に確認した3つのブラウザで、どうしてSafariだけ文字化けしたのか、という疑問が残ります。
が、自分がやった操作を振り返ると、文字コードをデフォルトからUTF-8へ変えたら表示ができたので、デフォルトの文字コードがUTF-8ではないから・・・？と仮説を立てました。確認のために、Safariの環境設定 ＞ 詳細 ＞ デフォルトのエンコーディング、を見ると、日本語(Shift JIS)でした。だから文字化けしてたんですね。
Firefoxのデフォルト設定は、Unicode。「UTF-8じゃないじゃん！」と最初は思ったのですが、UTFは”Unicode Transformation Format”、Unicodeを変換した形式、だから正常に表示されたんですね。
Chromeに関しては、文字コードを設定するメニュー自体が存在しないので、デフォルト自体確認ができませんでした。以前はあったようなのですが、バージョン55以降メニューから消えたようです。

とはいえ、webサイトを見る環境は人それぞれ。文字化けしたページを、見る側がいちいち設定を変えて表示させるのも不親切ですし、自分が意図したように表示させるために、文字コードはファイル内でも必ず指定して、ファイル保存時にも確認しましょう。ブラウザやサーバーを使う上での世界標準になるルールを作っているW3C(World Wide Web Consortium)でも、文字コードは必ず指定しましょう、と言っていますし。

まとめ

• HTMLファイル内では、文字コード（charset）を必ず設定しましょう
• HTMLファイルを保存する時の文字コードは、ファイル内で設定したものと合わせましょう

以上今回は、HTMLファイルに書かれる文字コードについて調べてみました。

参考URL
HTMLの基本 -MDN MOZZILA DEVELOPER NETWO
文字符号化方式 -Wikipedia
HTMLで文字エンコーディングを指定する（日本語訳されたページ）-W3C
Declaring character encodings in HTML（上記ページの原文）-W3C