ありがちな文字化けの罠

■ はじめに

インターネットで色々なホームページを見てまわっていると、下のページのように 訳のわからない文字が羅列されたページがたまに出る事があるかと思います。 が、別にこれはウィルスに改ざんされたわけでも、わざとこういう文字で ホームページを作ったわけでもありません。(たぶん)

文字化けの例
【文字化けの例】

ホームページを作成する場合、自分ではちゃんと作ったつもりでも いざブラウザで確認すると文字化けしていたり、 自分のパソコンでは正常に見えているのに、 友達のパソコンで見てもらうと文字化けしていた。 なんてことが結構あります。

今回は、何故このような文字化けが起こるのか。 また、どうすれば文字化けを起こさずにすむかについて書き綴っていきます。

■ 文字コードのお話

文字化けの話の前に、『画面に表示される文字』と『コンピュータ内で扱われるデータ』 の関係について軽く説明しておきます。

パソコンで文字を入力するときにシンプルなソフトとしてテキストエディタを よく使うかと思います。Windowsなら「メモ帳」、Macintoshなら「SimpleText」などがありますね。 このテキストエディタを開いて"a"と打ち込めば、画面に"a"と表示されます。 ところがこれをファイルに保存した場合、コンピュータは"a"という文字を保存するのではなく 0と1の数字の羅列を保存します。"a"に限らず全ての文字が決まった数字の羅列に置き換えられます。 そしてこのファイルをテキストエディタで再び開くときに、ファイルから0と1の羅列を 取り出してそれに対応する文字に変換して画面に表示するわけです。 正確には、テキストエディタに文字を打ち込んだ時点から、コンピュータの内部では 0と1の羅列で扱われ、画面に表示するときにそれに対応する文字として表示されますから、 「内部では01」「表示のときに文字に置き換え」というイメージでいいと思います。

表示文字と内部データの関係イメージ
【表示文字と内部データの関係イメージ】

さて、上の図の様に「文字」を「01の羅列」に(またはその逆に)変換するルールを 文字コードと呼び、"a"に対しては"01100001"、"b"に対しては"01100010" というように、1対1で変換されるようになっています。今回のキーになるのが この文字コードですので、ここのところはしっかりと理解しておいてください。

■ 文字コードの種類

「文字」と「01の羅列」の変換のルールである文字コードですが、 実はこのルールは1種類ではありません。WindowsやMacintoshではShift-JIS、 UNIXなどではEUCという文字コードが使われています。 つまりOSによって変換するルールが違うわけですね。ここでピンときた人もいるかと思いますが、 この文字コードが複数種あるということが文字化けを引き起こす原因になっています。

■ 文字化けの仕組み

では、実際にどうやって文字化けが起こるのかを具体的にみていきます。 まずWindowsやMacintoshでテキストエディタを開き、そこに「あいうえお」と打ち込みます。 画面にはそのまま「あいうえお」と表示されますが。コンピュータの内部では 「01の羅列」に既に変換されています。このときの文字コードはShift-JISが使われています。 そしてデータを保存したファイルをUNIX上で見ようとすると、コンピュータは UNIXの文字コードであるEUCを使ってこのファイルのデータを変換しようとするのですが、 元々Shift-JISで変換されているデータなので元の「あいうえお」には戻らず、 わけのわからない文字になってしまうわけです。別の例えをするなら、Aにxを乗算しそれに対し xで除算してやれば元のAに戻るのですが、yで除算してしまったため元に戻らなくなってしまった。 という感じです。

文字化けまでの遷移イメージ
【文字化けまでの遷移イメージ】

■ FFFTPを用いて文字化け対策

ようやく本題の文字化け対策の話です。ここでは具体的な文字化けを起こしてしまうパターンを元に それを回避する方法を記していきます。

皆さんがホームページを作るときは、まず自分のPCでファイルを作成して それを「FTPソフト」を用いてネットワークサーバにアップする、という手段がほとんどだと思います。 このときのファイルの文字コードがどうなっているかを見ていくと… まず、手元のPCのOSがWindowsかMacintoshだとすると、自分のPCでファイルを保存した段階で (特に指定しない限り)Shift-JISで保存されます。このファイルを直接IEなどのブラウザで見ると、 まず文字化けしていることはありません。なぜなら、『ファイルの文字コード』と 『ファイル開いているOSの文字コード』が同じShift-JISだからです。

次にFTPソフトでファイルをサーバにアップします。アップされたファイルはShift-JISのままです。 このファイルをブラウザで見るとどうなるでしょうか? ファイルをアップしたネットワークサーバのOSの文字コードが、Shift-JISなら文字化けはしません。 しかし、Shift-JIS以外の文字コードを扱うOSの場合は文字化けを起こす可能性があります。

では、ネットワークサーバのOSの文字コードがShift-JISでは無い場合、どうすればよいのでしょうか? さすがにネットワークサーバのOSをShift-JISを扱うものに変更することは出来ません。 となると、アップするファイルの文字コードをサーバの文字コードに合わせる必要があります。 この『ネットワークサーバのOSの文字コード』は、その契約元に問い合わせれば知ることができますが、 いちいち聞くのも面倒くさい!という人の為にサーバにアップするときに、自動で そのサーバに適した文字コードに変換してくれる機能を紹介します。 といっても何のことはありません、大抵のFTPソフトに付属で付いている機能です。 ただ、その存在を知らない人が結構多いのですが・・・

利便性が良く、尚且つ無料であることからとても広い範囲で使われている有名なFTPソフトとして 『FFFTP』というソフトがあります。下はそのFFFTPの画面の一部です。 赤い線で囲った部分を見てください、左から『A』、『B』、『AB』というボタンがあります。 これはファイルをアップするときのモードを切り替えるボタンで、それぞれ『アスキーモード』、 『バイナリモード』、『自動判別モード』を意味します。先ほどの話から「なるほど、この 『自動判別モード』とやらを使えばいいんだな」と思った人、残念でした間違いです。 まぁあながち間違いでもないのですが、正確には『アスキーモード』がアップ先のOSに合わせて 文字コードを変換してくれるモードです。ちなみに『バイナリモード』は一切の変換を行わず そのままアップするモード、『自動判別モード』はアスキーモードでアップするファイルと バイナリモードでアップするファイルを自動で判別して、ファイルごとにモードを切り替えてくれるモードです。

FFFTPの実行画面
【FFFTPの実行画面】

この『アスキーモード』でファイルをアップすれば、文字化けの心配はまず無いのですが、 全てのファイルを『アスキーモード』でアップしてよいわけでもありません。 例えば画像ファイルを『アスキーモード』でアップしてしまうと、ファイルの中身が不必要に変換され 画像ファイルが壊れてしまいます。画像ファイルは『バイナリモード』でアップしなければいけません。 で、これを「いちいち切り替えるのが面倒だ」という人の為にあるのが『自動判別モード』です。 デフォルトの設定では『htmlファイル』はアスキーで、『gifやjpegファイル』はバイナリでアップするように 設定されています。

■ サーバの文字コードをチェック

『アスキーモード』を用いればネットワークサーバで使われる文字コードは特に知る必要はないのですが、 やはり知っておいた方が何かと融通が利くときが多いです。そんなわけで、自分のホームページを設置する ネットワークサーバで用いられる文字コードを、手軽に判別する方法を紹介します。 使用するものは、『簡単なHTMLファイル』、『FFFTPソフト』、『ブラウザ(今回はIE5)』です。

まず、手元のPCで簡単なHTMLファイルを作成します。このときに『ホームページ作成ツール』などは 使わない方が無難です。後述しますが、余分な設定が自動で組み込まれる可能性があり、 そのせいで正確な検証が出来なくなってしまうかもしれないからです。 今回は以下のようなHTMLソースを作成し保存します。ファイル名は何であっても構いません。

サンプルコード
<html>
<body>
文字化けテスト
</body>
</html>

次にこのファイルを『FFFTP』の『アスキーモード』でじぶんのホームページスペースへ アップします。ファイルのデータが、ネットワークサーバが使っている文字コードに変換されて アップされます。あっぷしたらブラウザでそのページを開いてみてください。 間違って自分のPCに保存したファイルを開かないように! サーバへアップしたインターネット上のファイルを開いてくださいね。 さて、どうでしょう?ちゃんと「文字化けテスト」という文字が表示されていますか? おそらく、この段階で文字化けしている人は居ないと思います。仮に文字化けしていても たいした問題ではありません。落ち着いてください。

文字化けしているしていないに関わらず、ここで今、ブラウザがどの文字コードを使って このファイルの中身を表示しているかをチェックします。話がそれますが、 最近のブラウザはネットワークサーバの種類に依存することなく、ブラウザ独自で 使用する文字コードを選ぶことが出来るようになっています。で、話を戻しますが 現在ブラウザが使用している文字コードのチェック方法です。IE5の場合、上のメニューから 『表示』→『エンコード』と進んでください。すると『日本語(シフト JIS)』、 『日本語(EUC)』などが書かれたリストが出てくると思います。 ここのリストで「●」のチェックが付いているものが、現在ブラウザが使用している 文字コードです。『日本語(自動選択)』にチェックが入っている場合は、 ファイルの中身を解析して、適した文字コードが自動で選択されるようになっています。

さて、ここからサーバの文字コードの検証に入ります。先ほどのリストの中から 『日本語(シフト JIS)』を選択して下さい。最初っから選択されている人はそのままでもいいです。 このときに表示されている文字が文字化けした場合、このサーバが使っている文字コードは シフトJIS(Shift-JIS)ではないということです。逆に全く文字化けが起こらなかった場合は、 このサーバが使っている文字コードはシフトJIS(Shift-JIS)だということです。 同じように『日本語(EUC)』に設定して文字化けするかどうかをチェックしてみてください。 必ずどちらかの文字コードで文字化けが起こるはずで、文字化けを起こさなかった文字コードが そのサーバで使われている文字コードということになります。 もじ、どの文字コードに設定しても文字化けが起こってしまうという場合は、アップロードの際に ファイルが破損してしまった可能性があるので、FFFTPを用いたアップロードからやり直してみてください。 ちなみに、私のホームページを置いているサーバでの検証では、 以下のようにShit-JISが使われていることが判明しました。

Shift-JIS
【Shift-JIS選択時】
EUC
【EUC選択時】

■ HTMLファイル内で文字コードを指定する

先ほど少し述べましたが、最近のブラウザはサーバのOS(の文字コード)に依存せず 独自で使用する文字コードが選択可能です。が、最初にどの文字コードを使うかは ブラウザの初期設定に依存することになり、ページを表示する初っ端に 文字化けする場合があります。そこで、ファイルの中身に「このファイルは『xxxx』という 文字コードを使って書いています」という一文を加えることで、ブラウザに どの文字コードを使って表示するべきかを教えてやることが可能です。 下のサンプルで赤文字で記した部分がそうです。最後の方に『SHIFT-JIS』と 書いてある部分が確認できると思います。ここで、「このファイルは『SHIFT-JIS』で書いてあります。 だから画面に表示するときは『SHIT-JIS』で変換して表示してください。」と宣言しているのです。

サンプルコード
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=shift-jis">
</head>



</html>

ここで、日本語変換の為に使われる代表的な文字コードと、その宣言方法をまとめておきます。

サンプルコード
Shift-JIS(WindowsやMacintoshでよく使われます)
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=shift-jis">

サンプルコード
EUC(UNIX系OSでよく使われます)
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=euc-jp">

サンプルコード
JIS(日本工業規格です。コンピュータ以外の分野では主流です)
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-2022-jp">

指定する文字コードの種類は、先ほどの方法でサーバの文字コードを調べて その文字コードを記入してください。また、『ホームページ作成ソフト』を用いて ホームページを作成した場合、この『<meta...』の部分が自動で記述される場合があります。 自動で書いてくれるだけならいいのですが、文字コードの設定を誤って記述することもあります。 つまり、ファイルは『Shift-JIS』で記述されているのに、『<meta...』の部分に『EUC』を設定してしまうと、 Shift-JISのファイルをEUCで表示してしまい文字化けになります。もし『ホームページ作成ソフト』を 使っているときに文字化けが起こったら、この部分をチェックしてみるといいと思います。

■ おわりに

さて、長々と述べてまいりました『ありがちな文字化けの罠』もこれで終了です。 初回ということで、かなり細かい部分まで説明してみました。おそらく経験者の方がみると 「ここまで書く必要はないだろう」というところまで書いてあります。さらに言えば 初心者にとっては「なんじゃこりゃー!」と引いてしまうような量になってしまいました(あかんやん)。 まぁ、初回ということでそこは勘弁してください。よろしければ、わかりにくかった点や参考になった点、 意見質問などがありましたら、掲示板、メールにてご意見いただけるとありがたいです。 それでは、次回も宜しくお願いします。

2002/12/31 森ノ内 緑