ここ10年でパソコンを触っている方のほとんどが「文字化け」というものに遭遇したことがあるのではないでしょうか。意味不明な感じの羅列になって文章が読めなくなるアレです。「文字化け」については、発生する原因と対応方法をしっかりと把握しておくことで、落ち着いて対応することができます。当記事では、基本的な文字化けが発生する理由と、回避のための確認するべき点をご紹介します。

文字化けが発生する理由

文字化けについては、回避策だけを知るよりも、なんで文字化けが起こっているのか？を少しだけ根本的なところから知っておく方がより理解できるはずです。本記事ではまず、なぜ文字化けが発生するのか、その基本&理由をざっくりと説明していきます。

文字コードの存在

日本で扱われているテキストのほとんどがASCII互換の文字コード（※1）、Shift_JIS, EUC-JP, UTF-8などという文字コードがよく使われています。PC上で文字を表現しているかというと、コンピュータで理解できる情報（バイト表現）を、人間が理解できる文字と対応させることで表しています。このバイト表現が文字コードであり、一例ですが、Shift_JIS文字コードでは、[ 82A0 ]が[ あ ]として表示されています。

文字コード（※1）
文字集合を定義し、その集合の各文字に対応するビット組み合わせを一意に定めたものを文字コードという。文字コード – wikipedia

文字化けは閲覧環境の解釈違いが原因

文字化けが発生する原因は、「HTMLファイル自体の文字コードと、ブラウザが解釈した文字コードが異なるとき」に発生します。例えば、Shift_JISで保存されたHTMLファイルを、ブラウザがUTF-8だと認識して、UTF-8で表示してしまうと文字化けが発生するということです。

通常Webブラウザは、サーバーへリクエストを送った後、サーバからHTMLを受け取り、レスポンスヘッダやHTMLを分析した上で、「文字コードはこれだろう」と解釈して、ページを表示します。正しくWebページが作られていれば、たいていはWebブラウザが正しく解釈してくれるので、文字化けが発生しません。しかし、制作する時に文字コードを指定することを忘れていた場合や、異なった文字コードを設定していた場合、Webブラウザによって誤って解釈される（または解釈させてしまう）ことがあるのです。

文字化け対策として気を付けなければならないことは、「正しく文字コードを指定し、正しくWebブラウザに文字コードを解釈してもらう」ということです。ここではこれ以上の説明は省略させていただきますが、もっと詳細の知識を学びたい方は知識を深めていくと面白い分野かもしれません。

前に少し触れましたが、日本語を使う前提ですと、現在は以下の文字コードが主流です。

Shift_JIS（シフトジフ）
Windows系のOSでよく使われる文字コード。0x5c（コード内にもよく使われるバックスラッシュ、「＼」「￥」）を含む文字変換があるため、問題を起こしやすい場合がある。
EUC-JP（イーユーシージェイピー）
UNIX系のOSでよく使われる文字コード。近年はUNIXでもUTF-8を使用したものが普及してきている。
UTF-8（ユーティーエフハチ・ユーティーエフエイト）
最近のホームページ制作では主流。現在、最もポピュラーな文字コードと思われる。

現在の文字コード選択はUTF-8一択

様々な文法チェッカーではUTF-8でない文書に対して警告を出していることもあったり、オーサリングツール（※2）も UTF-8 をデフォルトとする事を求めている背景がありますので、UTF-8に設定してそれで文字化けしないように確認をする。ということでよいでしょう。UTF-8を選択することでどの国の文字も表示することが可能です。あとはブラウザに実装されているフォントを指定している限り、大きな問題が起こることはないといえます。

オーサリングツール（※2）
オーサリングツールとは、デジタルコンテンツやマルチメディアデータなどを制作するために用いられるソフトウェアの総称。ウェブのオーサリングツールは、一般的に、HTMLの編集機能や、Webページのレイアウトを視覚的に調整できる機能、Webページのディレクトリ構造の管理、といった機能を提供する。主な製品の例としては「Adobe Dreamweaver」などがある。

UTF-8はBOMなしで保存でOK


BOM（Byte Order Mark）は、UTF-16, UTF-32でバイトの並び順を示すものです。つまり、本来はUTF-8においてはBOMなど必要がないはずのところ、現在は「UTF-8」であることを示すマークとして使われているようです。

BOM付きUTF-8は、ファイルの先頭に3バイト（「EF BB BF」）が付与されるのですが、ファイルの先頭にBOMが付くことを想定していないソフトウェアの場合、予期しない結果がおこることがあります。ホームページなどのWebサイト、Webシステムで使用されるファイルの場合は、UTF-8はBOMなしで保存する。ということで統一して問題ないと思います。もしUTF-8のBOMありで保存していて不具合が出ていた場合はBOMなしに変更して保存をしなおしてみましょう。※UTF-8BOMなしは、エディタによっては「UTF-8N」と表記されていることもあります。

Unicode, UTF-8, UTF-16の違いメモ
Unicodeは「符号化文字集合」という規格のこと
UTF-8, UTF-16はUnicodeを実装した「符号化方式」
UTF-8は8bit単位でASCII互換
UTF-16は16bit単位で、非ASCII互換
WEBでの使用はUTF-8（BOMなし）でOK

文字コードの指定方法

次に、WEBにまつわるところでよく使われるファイルへの文字コードの記載方法に触れておきます。

HTMLファイルのmeta指定を行う

HTMLファイル内では、文字コードを指定するタグを入れることで、閲覧されるブラウザにHTML内で使用している文字コードを伝えることができます。文字コードの指定は、metaタグにて行います。metaタグは、要素の中に記述します。UTF-8を指定する場合は、下記の通りです。charset=の後に、指定する文字コードを記述します。この文字コードが、HTMLファイル自体の文字コードと同じになっていれば、ブラウザが正しくHTMLの文字コードを解釈してくれます。

  • <head>
  •   <meta charset="UTF-8">
  • </head>

注意点として、htaccessファイルなどを用いたHTTPヘッダーによる指定の方が文書内でのmeta指定よりも優先度が高いため、ページ製作者は既にHTTPヘッダーで文字エンコーディングが指定されているかどうかについて常に頭の中に入れておきましょう。meteタグの変更で反映されないとなると疑うポイントになります。

CSSファイルで文字コードを指定する

  • @charset "UTF-8";

CSSにおいては、この規則はスタイルシートの最初の要素でなければならず、これより先に一切文字を記述してはいけません。

XMLファイルで文字コードを指定する

  • <?xml version="1.0" encoding="UTF-8" ?>

その他、気にすべき文字コードについて

ダウンロードしたファイルが文字化けしていたというように。ホームページ内のコンテンツだけでなく、WEBを介してやりとりをする可能性があるファイルについても文字化けの可能性はついてまわります。

ファイル名を名付ける時

OSに依存する部分であるがファイル名はASCII（アスキーコード：半角英数字のみ）が望ましいでしょう。

ダウンロードファイルの文字コード（ファイル名だけでなくコンテンツ内も）

HTTPヘッダのContent-Dispositionに影響を受けてしまいますので、ファイル名と同じくASCII（アスキーコード：半角英数字のみ）が望ましいでしょう。

公開後のホームページで文字化けが発生している

前出の項目については抜かりなく確認しているのに文字化けしている。ということがあります。その場合の原因は、サーバーにデータをアップするときのFTPソフトの設定にあることが多いようです。FTP転送時設定に改行コードを変更する指定にしてあることで、発生している事例が多いようです。

対策として、FTPで転送するときは「バイナリモード」に設定して転送することでこちらが原因の文字化けは対応可能です。
※それぞれのFTPソフトのマニュアルで変更方法についてはご確認ください。

まとめ

HTMLでの文字化けを防ぐためには、ブラウザに使用しているHTMLの文字コードを正しく伝えることが重要です。特に、旧来の運用ルールに影響を受けた「Shift_JIS」や「EUC-JP」といった日本語の文字コードを利用されている場合など、HTMLファイルの文字コードと、HTML内のmetaタグの文字コード指定を一致させるように気をつけましょう。

ファイル名なども含め、基本的には多言語コードunicodeの利用（半角英数字～unicodeに登録のある漢字）で統一することが好ましいと思います。多くのエディタでデフォルトで設定されているので、よほど特別な理由が無い限りunicodeを使っておけば、問題は起こりにくい…はずです。またどうしてもという場合を除いてASCII（アスキーコード：半角英数字のみ）で構成をしておく方が無難であるといえるでしょう。日本語で名付けられたファイルを取り扱うことがある場合は意識的に半角英数字に変更してサーバーへのアップを行うようにしましょう。トラブルの可能性は予め対応しておくことをおススメします。

文字化けが起こってしまった場合は、今回紹介した内容を思い出して、落ち着いて確認をしてみてください。複数人で管理をする社内案件などの場合はファイルの取り扱い、命名方法などから文字化けが起きないように、文字コードの設定にはルールを定めた運用を取り入れることも効果的だと思います。