NOTICE: This page is written in Unicode(UTF-8)!!

Unicode を使う

...テキストファイル、特にHTMLファイル作成方法の一つとして、Unicode (UTF-8) を使用する方法について書いています。

１．はじめに

HTMLで多言語混在テキストを作成する場合、日本語以外の言語の言語特有な文字をブラウザで表示させるには、

実体文字参照を用い、普通の文字コード（Shift_JIS, JIS, euc-jpなど）で記述する。
Unicodeでファイルを作成し、特殊文字を直接記述する。

の２つの方法が考えられます。「鈴木朝子と高橋誠の部屋」の記事によると、メジャーなブラウザ（Firefox等の"Mozilla系" と MSIE）については、Unicode, それもUTF-8で記述すれば、まず間違いなく表示出来るようです。
「文字コードとはそもそも何か」とか、「Unicodeの生い立ち」等の解説については他のサイトにゆずるとして、ここでは「日本語／チェコ語混在テキスト文書」作成に使用する文字コードの選択肢の一つとして、Unicode, 特にUTF-8 を使うという話と、実際にHTMLファイルを作成する場合の注意点について書いていきます。

２．ツール

テキストファイル作成時に文字コードを決めるのはOSではなく、テキストエディタになります。
従って、大概の場合、Unicode を扱えるエディタを別途入手する必要があります。ただし、Unicode には幾つもの種類があり、下手をすると「Unicode 対応」と謳っていながら、自分が目的とする文字コード（ここではUTF-8）が使えないものである可能性があるので、注意が必要です。

下表にUnicodeを扱えるテキストエディタを挙げました。Windows用のそれぞれのソフトについては、高橋さんによる詳しい解説がありますので、そちらを参照して下さい。私はxyzzyがお薦めと思います。
また、UNIX/Linux用には、LOACLE（ユーザ毎、或いはマシン毎に設定される言語設定）に依存せずに各国語を取り扱えるという点で、emacs/XEmacsあたりが良いかと思います。が、最近のLinuxで動作するvim等でもutf-8を扱えるものが出てきているようです。

Unicode対応のテキストエディタ
Macintosh	Windows(9x/NT/2000/Vista)	UNIX / Linux
テキストエンコーディングコンバータ＋ミミカキエディット（最新はMi） ※テキストエンコーディングコンバータは、MacOS8以上ではOSに標準装備。 Muwse TextEdit（MacOS標準装備） ※また、MacOSXでは、UNIXの世界で親しまれているGNUのツール群が使えるようになっているので、emacs+ mule-ucs等を使うことも出来るようです。	xyzzy（Unicode各種対応）秀丸エディタ（UTF-16） Yudit mined（要cygwin） Windows2000メモ帳（UTF-16, UTF-8(BOM)）	emacs+ mule-ucs XEmacs+ mule-ucs Yudit mined

３． HTMLファイルを編集する

UnicodeでHTMLを記述するには、次の点に注意が必要です。

head フィールドの記述内容
ファイルを保存する際の文字コード指定

取り敢えず、見ていきましょう。

３．１ヘッダの編集

まず HTML ファイル全体の記述ですが、大枠としては以下のように書きます。
この中から、<head>と</head>で囲まれた領域を見ていきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> ←(1)
<html lang="ja"> ←(2)
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> ←(3)
 <meta name="keyword" content="（ページのキーワード）">
 <meta name="description" content="（ページの概要）">
 <link rel="stylesheet" href="./czech-style.css" type="text/css"> ←(4)
 <link rel="index" href="./index.html">
 <link rel="prev" href="./prev.html">
 <link rel="next" href="./next.html">
 <link rev="made" href="mailto:myaccount@mydomain.jp">
 <title>（ページのタイトル）</title>
 </head>

 <body>

・・・（コンテンツを記述）・・・

 </body>
</html>

(1): DOCTYPE宣言は、適用するHTMLの規格・バージョンによって記述が異なる（参考：W3Cのサイト）。
(2): このHTML文書の主言語が日本語であることを示すため、<html>タグに lang属性を記述する。主言語が他の言語なら、適宜変更する。
尚、lang属性で指定する言語の略号（"ja"など）は、ISO639で定められたものを使用する。
(3): 文字コード指定。<head> タグとこの行との間には余計なものを書かない方が良いだろう。
(4): 外部スタイルシート指定の記述例（後述）

ここで一点、注意しなければならないことがあります。
それは、文字コードを指定する

というタグを、このファイルで使われる最初の非ASCII文字よりも先に記述しなければならないことです。
例えば、meta タグの description, keywords, author, 或いはtitle タグの行には日本語やチェコ語などを使う可能性がありますが、それらよりも先に記述しなければならないということです。
上記の例のように <head> タグの直後に書けば問題ないでしょう。
この順番を守らなかった場合、Seamonkey や Firefox 辺りでは特に支障はないのですが、MSIEでは最悪「何も表示されない」という結果となる場合があるので要注意です。

以上のように記述したら、文字コード・改行コードを指定して保存します。
このとき、保存するファイルの文字コードはBOMなしのutf-8 である必要があります。
MacintoshやWindowsで動作するテキストエディタの多くは、「BOMありutf-8」を「UTF-8 」と表し、「BOMなしutf-8」のことを「UTF-8N」のように、後ろに「N」をつけた表記で表していますので、ここでは「UTF-8N」を選択します。
但し、HTMLファイルに記述する文字コード指定は、上記(3)のように「utf-8」とします。
「BOMなし」とする理由は単にMozilla系やMSIEなどのブラウザが、「BOMなしutf-8」を前提にしているからです。敢えてBOMありで保存して閲覧した場合、ブラウザやそのバージョンによっては正常に表示されない場合があります。
尚、昔はこんな風に問題が起きました（下表参照）：

ファイルの文字コード	METAタグに記述する文字コード	Windows版 Netscape4.5[ja]上での表示	Windows版 InternetExplorer5[ja]上での表示
Unicode (UTF-8)	UTF-8	不正常	（未確認）
Unicode (UTF-8N)	UTF-8N	不正常	（未確認）
Unicode (UTF-8)	UTF-8N	不正常	（未確認）
Unicode (UTF-8N)	UTF-8	正常	正常（一部文字化けあり）尤も、2003年1月現在でメジャーになっているバージョン(IE6)では、このような文字化けは発生しないようである。

尚、「BOM」とは、 Byte Order Mark の略です。utf-16等は、バイト・オーダー（平たく言うと、データ並びの向き）がビッグ・エンディアンかリトル・エンディアンかによってデータの並びが違う為、その何れであるかを明示する為に BOM というものが取り決められています。 BOMは、utf-8でも一応使っても良いことになっていますが、utf-8は自体はそもそもデータの単位が1byte(=8bit)である為にバイト・オーダーは元々問題になりません。従って、utf-8でBOMを付ける必然性は特にありません。

３．２ BODYの編集

表示する側の環境にもよりますが、チェコ語文字を記述した箇所、特にハーチェクが文字化けする場合があります。これを回避するには、チェコ語の箇所にはチェコ語を表示出来るフォントを使うよう、コード中に指示をしてやることです。
HTML1.x とかの昔にはタグを使いましたが、ここはタグとスタイルシートを使いましょう。

まず、外部スタイルシート（ここでは、ファイル名を"czech-style.css" とします）に、チェコ語用のSPANクラス "ce" を、次のように定義します：

  .ce {/* チェコ語用フォントを指定。courier体優先*/
    font-family: "Courier CE", "Courier New CE",
                 "Times CE", "Times New Roman CE", 
                 "Geneva CE", "Helvetica CE";
  }

他にもフォントサイズ、色等あれこれと指定することが出来ますが、ここはフォント指定のみとしておきます。
上記のようにフォントを複数指定した場合、先頭に書かれたものほど優先的に選択されます。この例では、クライアントがWindows（チェコ語対応）の場合、Mac用のフォントである"Courier CE"がなくても、"Courier New CE"がある筈なので、これが選択される。という具合です。
閲覧側の色々な環境を考慮して、出来れば複数のフォントを指定した方が良いでしょう。
とりあえず最低限の措置として、MacユーザとWindowsユーザの環境をフォローするなら、チェコ語の部分のFONTには、以下を設定しておけば良いと思います。

チェコ語用フォント
フォントスタイル	フォント名
等幅フォント	Courier CE, Courier New CE
プロポーショナルフォント	Times CE, Times New Roman CE, New York CE

スタイルシートの記述が終わったら、このスタイルシートをHTMLファイルから参照するようにします。
前節で示したHTMLファイルの記述の(4)にあるように、<link>タグを記述します。
そして最後に、HTMLファイルの文字種指定をしたいところに、

Česka

としておけば、その部分のフォントを変える事が出来ます。
SPANタグではもっといろいろなことが出来ますが、更に詳しいことについては、HTMLの書籍等を参照して下さい。
また、上記の例では "ce" クラスをタグに適用しましたが、他のタグ（例えば<div>、<a>など）にも同様に適用させることが出来ます。
但し、このフォント指定という方法は、閲覧者の環境に適切なフォントが入っていてこその話です。必要なフォントの入っていない閲覧環境ではやはり正しく表示されませんが、制作者側としては、これは止むを得ないでしょう。
そのような環境をフォローとすれば、恐らく「言語固有の文字を全く使用しないページを別に用意しておく」といった方法しかないと思います。

Unicodeに関する参考文献・サイト

japanese font, charactor code / 日本語フォント、文字コード
文字コード、フォント等に関する、有用なサイトへのリンク集。多言語テキスト・UNIX/Linuxでの日本語等の扱いに関して参考になる。
euc.JP
サイトのタイトルは"euc.JP"となっていますが、「地域化と国際化」の、各項に、Unicode の記事もあります。
Unicode を始めとする各文字コードや、それを搭載するOS、更にはプログラミングなどについても踏み込んだ解説がなされています。
Windows 98/2000上でのutf-8のページの作り方
高橋さんのページの１コーナーです。「WebPage制作」という観点から、文字コード、特にUnicode について述べられています。数多くのWebPage作成のためのツールや、ブラウザについて、その性能の詳細な検証もされていて参考になります。
ユニコード・コンソーシアム
ユニコードの業界団体。英語です。
北海道大学・スラブ研究センター
直接Unicodeの話題、というわけではありませんが、PC環境を多言語対応にしたり、多言語混在ドキュメントの作成を行う際の参考になると思います。
また、関係サイトへのリンクも非常に充実しています。
ほら貝：文字コード
文字コードが内包する問題点についての検証や、独自の調査・インタビュー取材が掲載されています。ただ、「謹告」に、内容に著者自身により、修正していない誤りも含まれる旨が記されていますので、その点を割り引いて読む必要があります。参考文献なども役に立つでしょう。
使いこなそうユニコード
ギリシア語、ロシア語、ハングル、アラビア文字を使うための方法や、プログラミング言語PerlでUnicodeを扱う話などが掲載されており、参考になります。

戻る...

Special thanks to: 高橋誠様（「鈴木朝子と高橋誠の部屋」）

ご意見・ご感想はこちらまで...