文字コードについておさらいすれば文字化けも解消できる

文字コードについておさらいすれば文字化けも解消できる

文字コードについておさらいすれば文字化けも解消できる

通信時は文字がそのまま送受信されるのではなく、付与された番号で通信がされます。

文字コードごとに付与番号のルールが変わるので、それを揃えないと文字化けします。

文字化けが起こるのは日本語部分のみ。htmlソースの半角英数字はASCII文字のため文字化けしません。

文字コードの事を知ろう

プログラムの世界には様々な文字コードが存在しますが、今WEBサイトで一般的に使われるのは「UTF-8(utf8)」です。

昔はShift_JIS(sjis)が使われていましたが、今はUTF-8が世界標準になってきています。

WEBサイトに限らず様々なソフトウェアにおいて、文字コードに対する知識は必要です。

仕組みを知れば、文字化けが起きても落ち着いて対処できるはずなので、ここでおさらいしておきましょう。

文字コードが影響するのは日本語部分のみ

ここでの「文字」とは半角の数字や記号ではなく、日本語の文字部分を指します。

文字コードが影響するのは日本語の文字部分のみで、コード部分は影響を受けません。

コードはASCII文字

半角の英数時や記号はASCII文字であり、どのコンピュータやスマホも同じように解読できます。

そのためHTMLやCSSのコードは、ASCII文字で記述されます。

なので仮にWEBページがASCII文字だけで作られているのであれば、文字化けはしません。

以下からはコード部分ではなく日本語部分に焦点をおいて解説します。

文字コードとは何か

文字コードとは簡単に言うと、文字一つ一つに付与する「番号ルール」を意味します。

文字情報に番号が付与されている

全ての文字情報には、常に特定のルールに基づいた「番号」が付与されています。

コンピュータは常にこの番号形式で情報通信しており、逆にそれ以外の方法ではできません。

あなたが今見ているこの文章も、通信時は番号だけの情報になる訳ですね。

ひらがな文字「あ」の通信

例えばWEBページで「あ」の文字を表示する場合、ひらがなをそのまま通信しているのではありません。

「あ」に対して指定文字コードにより付与された、特定の番号があります。

例えば「あ」なら「82A0」などになります。

WEBページを表示させる際にサーバーとコンピュータ間でデータ通信が行われますよね。

通信時にはこの番号「82A0」が読み込みされ、画面上でひらがな「あ」に変換されるという訳です。

文字化けする理由

文字コードを変更すると、文字の形自体が変化しそうですがそのような事はありません。

文字のデザインが変わるのではなく、データ通信時に付与される番号形態が変わるのです。

文字コードが変わると

例えば文字コードがutf8に変わると、「あ」に付与される番号が「0xe38182」などに変わります。

同じ「あ」を表示するだけなのですが、付与番号のルールが変わるのです。

各文字コードごとに付与される番号ルールは大きく違っていて、それらに互換性はありません。

ひらがなの「あ」…utf8なら「0xe38182」
ひらがなの「あ」…sjisなら「82A0」

文字化けは異なる文字コード間で起きる

例えば文字コードが「sjis」で、ひらがな「あ」に番号「82A0」が付与されたとします。

この情報が文字コード「utf8」のページに送信された場合どうなるでしょう。

utf8上では、「あ」を表現する番号は「0xe38182」という固有ルールがあります。

文字コードutf8のWEBページ上に「82A0」を持ってくると、utf8で「82A0」に相当する文字を表示しようとする訳です。

結果「あ」とは映らず変な文字になりますね。これが文字化けです。

82A0の「あ」はutf上では別の文字になる

ここで82A0が0xe38182に変換されたりはしないのです。

文字コードを合わせる

重要なのは到達先のデータ上でも「82A0」が「あ」になる様に共通の文字コードにする事ですね。

これは「エンコーディングの種類をあわせる」とも言います。

半角英数字は文字コードによる番号付与がないためそのまま通信されます。

そのため文字コードが違っていても文字化けする事はありません。

WEBページの主な文字コード

WEBページで日本語を表現する文字コードとして有名なのは、以下の3種類です。

・UTF-8
・Shift_JIS
・EUC-JP

今は使われる文字コードは、世界基準となるutf8がメインになっていると思います。

UTF-8(utf8)とは

文字範囲が広くどの国の文字も文字化けを起こさないコードです。どのようなPC環境でも初期状態で表示させる事ができます。

utf8は日本語一文字を表示するのに3バイト使うので、通信時はShift_JISやEUC-JPの約1.5倍の容量が必要になります。

昔のガラケーの様な携帯電話はutf8に対応していないので、utf8のWEBページをガラケーで確認すると文字化けします。

スマホならどの機種でも表示されますので問題は無いでしょう。

Shift_JIS(sjis)とは

昔のガラケーでも読める文字コードで、1文字当たりの消費バイト数も比較的少なくて済みます。

ただ文字の種類は9000文字程度で、それほど多くはありません。

エンコードデータに制御文字を含む場合が多いので、それを想定してない環境では文字化けする事があります。

EUC-JP(euc)とは

sjis同様に消費バイト数は少ないですが、sjisよりは多少多くなります。

昔はphpがサポートしていましたが、今はutf8に置き換わっている事もあり、あまり使う事は無いと思います。

今選ぶならutf8

日本国内の主流としてはutf8かsjisですが、世界基準を考慮してutf8を選択した方が良いでしょう。

スマホはutf8がきちんと表示されますし、ガラケーを意識しなくてもいい時代ですからね。

WEBサイトで文字化けが起きやすいケース

WEBページ制作時に文字化けが起こりやすいのは以下の時ではないでしょうか。

・お問い合わせフォーム等のデータ通信時
・テキストエディタの操作時

お問い合わせフォームのデータ通信

このケースはよく出くわしますね。

例えばお問い合わせの入力フォームページの文字コードが、sjisとなっているとします。

次に入力内容を確認するページを出力する際の文字コードが、utf8になっている場合ですね。

sjisの文字をutf8へ送信した状態

sjisのページに入力されたデータは全て、sjisの文字表示番号で送信されます。

これをutf8で構成された確認ページに表示する訳ですから、当然文字化けしてしまいますね。

対処方法

主な対処方法としては、以下のどちらかをおこなう事になります。

・お問い合わせ入力ページ自体の文字コードをutf8にする
・内容確認ページの文字コードをsjisにする

どちらかをどちらかに合わせれば良いのですが、ほとんどの場合「前者」を選ぶでしょう。

内容確認ページはcgiかphpなどのプログラムで構成されている事が多いでしょうから、簡単に文字コードをsjisにできないかも知れません。

ですのでお問い合わせ入力ページ側をutf8にした方が早い訳ですね。

WEBページ単位で文字コードが変わってもOK

お問い合わせページの文字コードがsjisになっているという事は、他のページもsjisになっているはずです。

今回の様にお問い合わせページだけをutf8にして良いのか?と思うでしょう。

ページを表示するだけなら通信時の番号付与ルールが変わるだけなので、全く問題はありません。

テキストエディタの操作時

もう一つ起こりやすいのが、テキストエディタを使っている時です。

メモ帳などのエディタソフトでHTMLコードを書いている時も、もちろん文字コードルールは敷かれています。

HTMLソースを表示する文字コードと、htmlファイル自体(テキストファイル)の文字コードを一致させる必要があるのです。

文字化けが起こるケース

・charsetがutf8で、htmlファイルの文字コードがsjisの場合
・charsetがsjisで、htmlファイルの文字コードがutf8の場合

上記2つのケースでPC上でHTMLファイルを表示すると、いずれも文字化けを起こします。

ネット通信だけでなく、PC内でも各々の文字コードルールが働いている証ですね。

sjisの文字をutf8へ送信した状態

「HTMLファイル自体の文字コード」=「htmlファイルの文字コード」
「htmlを表現するソースの文字コード」=「タグのcharset」
それぞれ別々なので、両者を揃える必要があります。

※文字化けの起こし方(書いてある文字列の状態)は違ってきます。

文字コードを揃える方法

例えばsjisで書かれたHTMLソースを、utf8に変更するにはどうすればよいのでしょう。

ソースはsjisなのにHTMLファイル自体の文字コードがutf8だと、文字化けしますよね。

以下の手順で進めて下さい。

HTMLソースの一番上付近にある
<meta charset="Shift_JIS">の記述を探します。

HTMLの宣言タイプによって書き方が違うでしょうが、charset指定をしているタグです。

このcharsetタグを含まずに、そこから下のソースを一番下まで丸ごと(</html>まで)Ctrl+Xなどで「切り取り」してしまいましょう。

指定範囲を全切り取り

これで準備完了です(切り取りデータを記憶した状態なので、別のデータをコピーしない様にして下さい)。

エディタ自体の文字コードを変更

まずは、htmlファイル自体の文字コードがutf8になっている事を確認しましょう。

仮にutf8になっていない場合は、エディタの設定から文字コードを変更します。

サクラエディタの文字コード変更
サクラエディタの文字コード変更例

変更したら上書き保存しましょう。

※エディタごとに文字コードの変更方法は違うので、調べてみて下さい。

htmlの文字コードを変更

charsetの変更

次にcharsetを手入力で「utf8」に変更します。

その上で先ほど切り取ったソースを元通りの位置に貼り付けて、上書き保存しましょう。

これでそのページのcharsetは、いずれもutf8に切り替わります。

ご注意

上記の方法は、ソース上で正常に表示された日本語を別の文字コードに変更する場合のお話です。

何らかの原因でページ上やソース上で既に文字化けしているものを、正常にする方法ではありません。

あくまで正常な状態を前提としていますのでご注意下さい。

phpの文字コードもutf8

phpファイルを稼働させる時も文字コードは影響します。

いまphpがサポートする基本の文字コードはutf8です。

php5.6から、charsetが「sjis」や「euc-jp」のファイルをサポートしなくなりました。

ですのでphpファイルに直接日本語を書いたりデータを出力する場合、phpファイル(エディタ)の文字コードをutf8にする必要があります。

そうしないとサーバー上で確認した時に文字化けを起こしてしまいます。

※もちろん表示するWEBページの文字コードもutf8である必要があります。

この記事をシェアする

一押し人気コーナー紹介

HTMLカテゴリの関連記事