• ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • 日経BP
  • PR

  • PR

  • PR

  • PR

  • PR

1週間で学ぶIT基礎の基礎

転ばぬ先の文字コード入門(第1回)

文字化けが発生する原因と対策

矢沢久雄 2001/06/25 ITpro

矢沢 久雄

 この講座では,様々な角度から文字コードの仕組みを解き明かしていきます。文字コードとは,文字を表すコード(本来数値でない情報を数値で表したもの)のことです。皆さんは,Webブラウザで表示した画面が文字化け(意味不明の文字が表示されること)した,という経験があるでしょう。文字化けは,Webブラウザ側で設定した文字コードと,Webページのファイルの文字コードの種類が違う場合に起こります。

 文字コードのコード体系に,ASCII,JISコード,シフトJISコード,Unicode,EUCなどの種類があることをご存知でしょうか。具体的に分からなくても,名前だけは聞いたことがあるでしょう。文字コードの種類が異なれば,同じ文字を表す文字コードが異なり,それが文字化けの原因となるのです。ところが,文字化けに遭遇したら,それきり対処できない…という人が多いのではないでしょうか? そのような人にこそ読んでいただきたいのが,この講座です。文字コードに関する知識を,もう一歩だけ深めてください。なお,使われている文字コードや主流となっているアプリケーションは,OSによって異なります。そこでこの講座では,Windowsでの文字コードの扱いを題材として解説していきたいと思います。今回は,文字コードに対する興味を深めていただくために,日本語版Windowsにおける文字化けの原因と対策を説明しましょう。よろしくお付き合いください。

図1●HTMLファイルの内容が正しく表示されたWebページ

●Webページの文字化け実験

 はじめに,リスト1に示した簡単なHTMLファイルを使って,Webページの文字化けの実験をしてみましょう。このHTMLファイルは「123ABC漢字」という文字列とMyImage.gifという画像ファイル(象形文字をイメージしたものです)を表示するものです。このHTMLが正しく表示されると,Webページの内容は,図1のようになります。

 それでは,実験開始です。以下に4つのHTMLファイルへのハイパーリンクがあります。これらのHTMLの内容は,リスト1と同じです。4つのHTMLファイルを順番にクリックして,どのようなWebページが表示されるかを確認してください。

JIS.html
SJIS.html
Unicode.html
EUC.html

 実験結果は,いかがだったでしょうか? Windows 2000でInternet Explorer(IE) 5.5を使っている筆者の環境では,SJIS.htmとUnicode.htmの2つは正しく表示されましたが,JIS.htmとEUC.htmは,図2[拡大表示]と図3[拡大表示]のように文字化けしてしまいました。ただし,どちらも画像ファイルだけは正しく表示されました。

図2●JIS.htmの表示結果
図3●EUC.htmの表示結果

●Webページの文字化けの原因と対策

 文字化けが発生した種明かしをしましょう。4つのHTMLファイルは,それぞれ異なる文字コードで保存されています。JIS.htmはJISコード,SJIS.htmはシフトJISコード,Unicode.htmはUnicode,EUC.htmはEUC(Extended Unix Code)で保存されています。Webページというものは,Webサーバーに保存されたHTMLファイルの内容が,そのままWebブラウザに転送されるだけのものです。筆者のWebブラウザでは,あえて文字コードの種類にシフトJISを指定しておきました。そのため,異なる種類の文字コードで保存されたHTMLファイルの内容が正しく表示されず,文字化けとなったのです。ここでは,数字,英字,漢字,ひらがな,カタカナ,および記号で構成した日本語用のHTMLファイルであっても,現状では,JISコード,シフトJISコード,Unicode,EUCの4種類の文字コードのうちのどれかで保存されている可能性があることをおぼえておいてください。それぞれの文字コードの特徴に関しては,次回以降の講座で詳しく説明します。

 それではIEを例として,日本語のWebページが正しく表示されない場合の対策をお教えしましょう。Webページが表示された状態で,「表示」メニューから「エンコード」を選択してください。文字コードの種類を選択するサブメニューが表示されるはずです(図4[拡大表示])。筆者の場合は,「日本語(シフトJIS)」が選択されています。これを,それぞのHTMLファイルを保存した文字コードの種類に変更すれば,Webページは正しく表示されます。「自動選択」という項目を選択しておけば,どのような文字コードで保存されたHTMLファイルであっても,文字コードの種類が自動的に判別されるようになっています(最初から「自動選択」に設定されていた場合は,特定の文字コードを選択し直して,文字化けを体験してください)。とりあえず「自動選択」にしておくことがお勧めですが,それでも文字化けが発生する場合は,表示結果を確認しながら特定の文字コードを選択することになります。

図4●Webブラウザで文字コードの種類を選択する
 ここまでの説明を読んで,「そんなことは,わかりきっている」と思われた人もいることでしょう。それでは,HTMLファイル全体が特定の文字コードで保存されているのに,画像ファイルが正しく表示されたのはなぜでしょう?「123ABC漢字」という文字列の中で,「123ABC」までは正しく表示されたのはなぜでしょう? Webブラウザの設定で「日本語(シフトJIS)」が選択されていても,Unicodeで保存されたHTMLファイルが正しく表示されたのはなぜでしょう? 文字コードの選択肢にある「Unicode(UTF-8)」のUTF-8とは何でしょう?

 大ざっぱに答えを言ってしまえば,文字コードの種類が異なっていても,数字と英字を表す文字コードは,基本的に同じだということです。<HTML>,<BODY>,<IMG>などのHTMLタグや,「123ABC」という文字列は,文字コードが異なっても同じなのです。Windowsでは,内部的に使われる文字コードが,シフトJISコードからUnicodeへの転換期にあるので,IEのようなWindowsアプリケーションは,それら2つの文字コードを自動判別するようになっているということです。UTF-8は,Unicodeの保存形式の一種であり,一口にUnicodeと言っても,複数の保存形式があるということです。

 この講座を通して文字コードの知識をもう一歩深めれば,このような文字コードに関する疑問に,皆さんも自信を持って答えられるようになります。最終回まで,がんばって読んでください。

●HTMLファイルの先頭に文字コードの種類を明記しておけば安心

 HTMLファイルの先頭に,そのファイルを保存した文字コードの種類を明記しておくこともできます。このようにすれば,文字コードを自動判別できないWebブラウザであっても,HTMLファイルの中で使われている文字コードを確実に判別できます。文字コードの種類は,<META>というタグの中に記述します。Microsoft FrontPageのようなHTMLファイル専用のエディタを使うと,使用する文字コードの種類に応じて<META>タグが自動的に挿入されます。Windowsに添付しているメモ帳のようなテキスト・エディタを使ってHTMLファイルを作成する場合には,<META>タグを使わない人が多いと思いますが,<META>タグで文字コードの種類を明記するのは,インターネットのマナーのようなものです。<META>タグを記述することを心がけましょう。

 以下に,<META>タグで文字コードの種類を明記する方法を示します。<META>タグのCHARSETパラメータ(タグやパラメータは,大文字でも小文字でもかまいません)に文字コードの種類を明記します。JISコードが,ISO-2022-JPで表されていることに注意してください。ISO-2022-JPとは,ISO(International Organization for Standardization,国際標準化機構)で制定されたJISコードのことです。

【JISコードの場合】
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=ISO-2022-JP">
【シフトJISコードの場合】
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=SHIFT_JIS">
【Unicodeの場合】
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8">
【EUCの場合】
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-JP">

図5●文字化けした韓国語のWebページ
 ここで,ふたたび実験です。以下に4つのHTMLファイルへのハイパーリンクがあります。これらのHTMLの内容は,リスト1の先頭に文字コードの種類を表す<META>タグを挿入したものです。Webブラウザのエンコードの設定を「自動選択」以外の文字コード(「日本語(EUC)」や「日本語(シフトJIS)」など)にしてから,4つのHTMLファイルを順番にクリックして,どのようなWebページが表示されるかを確認してください。

JIS2.html
SJIS2.html
Unicode2.html
EUC2.html

 実験結果は,いかがだったでしょうか? Webブラウザが<META>タグのCHARSETパラメータから文字コードを判別できるので,すべてのHTMLファイルが一発で正しく表示されたはずです。<META>タグは,便利でしょう!

●フォントがなければWebページを正しく表示できない

 Webページの文字化けについて,補足しておきたいことがあります。それは,たとえWebブラウザが文字コードを正しく判別できても,画面に文字を表示するためのフォント(文字の形状を表すデータ)がなければ,Webページを正しく表示できないということです。

図1-6 韓国語の言語パッケージのインストールを促すウインドウ
 具体例を示しましょう。図5[拡大表示]は,韓国のロッテホテル(韓国の超高級ホテルです)のホームページの一部(http://www.lotte.co.kr/family.html)です。このWebページの文字コードには,Unicodeが使われていますが,WebブラウザがUnicodeを判別できても,それを表示する環境に韓国語(ハングル文字)のフォントがなければ,文字化けとなってしまいます。日本語のWebページを,日本語版Windows以外の環境で表示させた場合でも,同じ問題が生じるはずです。

 ただし,この問題は,容易に解決できます。Windows 2000のCD-ROMには,様々な国のフォントが収録されているからです。IEの「表示」メニューから「エンコード」,「その他」の順に選択すると,様々な国の言語が一覧表示されます。その中から「韓国語」を選択してみましょう。図6[拡大表示]に示した「言語パッケージのインストール」というタイトルのウインドウが表示されます(このウインドウは,日本語以外のWebページを表示させようとしたときにも,自動的に開きます)。[インストール]ボタンをクリックしてから,Windows 2000のCD-ROMを挿入すると,韓国語のフォントがインストールされます。

図7●ハングル文字が正しく表示された韓国語のWebページ
 韓国語のフォントのインストールが完了したら,Webページを再表示させてみましょう。今度は,ハングル文字が正しく表示されるはずです(図7[拡大表示])。

 皆さんが文字化けに遭遇するのは,Webページだけではないでしょう。英語版のアプリケーションを使って,日本語のファイルを開いた場合にも,文字化けが発生することがあります。受信したメールの内容が文字化けしていることもあります。これらも,文字コードが一致していないこと,適切なフォントが存在しないことが原因です。絶対に文字化けを発生させたくないなら,どうしたらよいでしょうか? Windowsに添付された「ペイント」のようなお絵かきソフトを使って,文字を画像ファイルとして保存すればよいのです。「ばかばかしい方法だ!」と思われるかもしれませんが,古典で使われている文字や,古代の象形文字を表示するために,実際に使われているテクニックです。画像ファイルの種類には,BMP,JPEG,GIF,TIFなどがありますが,それぞれのファイルフォーマットは世界レベルで統一されています。画像ファイルは,画像化け(?)しません。

 次回は,すべての文字コードの基本となっているASCIIを説明します。お楽しみに!

【今後の予定】
第2回 文字コードの元祖ASCIIをマスターしよう
第3回 漢字を表せる文字コードは一種類だけじゃない
第4回 プログラマにとっての文字コード
第5回 文字コードと仲良しになるためのフリーウエア

(→「第2回 文字コードの元祖ASCIIをマスターしよう」を読む)

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

  • 【ITpro Report】

    CES 2018で感じた5つのインパクト

     2018年1月9日~12日に米国ラスベガスで開催された家電見本市「CES 2018」。スタートアップ企業を中心とした取材から、「CESと縁のなかった企業の参入」「国対抗のイノベーション競争」など5つのトピックスを紹介する。

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

クライアント/OA機器

ネットワーク/通信サービス

セキュリティ

もっと見る