多国語 HTML (UTF-8) の作り方

Multilingual HTMLs in UTF-8 Encoding

 

1. UTF-8 と主要ブラウザの対応 4. MS FrontPage 2000 で作成する場合
2. UTF-8 のメリットとデメリット 5. UTF-8 対応のエディタ
3. MS Word で作成する場合 6. UTF-8 作成の鉄則

 

1. UTF-8 と主要ブラウザの対応

UTF-8 と Unicode

最初に、UTF-8 と Unicode について、こちらをご覧ください。

主要ブラウザの UTF-8 対応

Windows / Macintosh 双方における主要ブラウザの UTF-8 対応状況を、こちらで確認してください。

2. UTF-8 のメリットとデメリット

UTF-8 を使用するメリット

UTF-8 のエンコーディングを使用すれば、どんな言語でも OS と ブラウザーの仕様に応じて、インストールされているフォントの中から適切なものを自動選択して表示しますから、次のメリットがあります。

  1. 訪問者が使用する OS、言語の文字コード、使用ブラウザなどに関係なく、単一のページを作成すればよい。
    従来は、Windows の文字コードのページが Macintosh では文字化けしてしまう、フォントがなくて空白文字となってしまう、ブラウザが文字コードに対応していない、などのために、様々な困難がありました。
  2. ファイルサイズの小さい HTML を作成できる。
    複数の言語が混在するページでは、多くの場合、言語ごとにフォントを指定していましたが、UTF-8 では言語を自動判定しフォントも自動選択しますから、それらの指定を HTML の中に記述する必要がありません。その結果、ファイルサイズがとても小さくなり、訪問者のコンピューターへの読み込みが早くなると同時に、ブラウザの動き方が軽快になります。

UTF-8 のデメリット

    1. 複数の言語が混在するページ作成は一般的に必要度が低いので、UTF-8 対応のホームページ作成ソフトが少ない。
    2. 「UTF-8 対応」 としているソフトでも、Unicode 規格のすべてに対応しているわけでないので、自分の環境に応じて工夫、根気がいる。
    3. どうしてもうまくいかない場合に、最後の手段としてエディタで編集するためには、HTML のタグに関する基本知識が必要となる。

3. MS Word で作成する場合

(1) 保存形式の UTF-8 指定

Word 2000 で 「オプション」 - 「全般」 タブ - 「Web オプション」 ボタン - 「エンコード」 タブ の順に選択し、「保存する形式」 で Unicode (UTF-8) を指定します。

(2) コンテンツの編集と保存

通常の Word 文書作成要領で、コンテンツを作成します。外国語部分も通常の入力方法で行います。保存時には、「ファイル」 - 「Web ページとして保存」 を選び、保存します。

(3) HTML のファイルサイズと軽快なコンテンツ

上記の方法で保存した HTML ファイルは、Word での再編集とオリジナルに忠実な再現のため、膨大な編集情報を保存します。シンプルな HTML と比較した下の例を比較すれば、表示にほとんど相違がないのに、ソースがいかに膨大でファイルサイズが大きくなるかが分かると思います。

Word の Web ページ保存 UTF-8 (5.81KB)

IE5.5 での表示 (上) / ソース (3行目相当部分のみ)

シンプルな UTF-8 (0.406 KB)

IE5.5 での表示 (上) / ソース (全体)

ですから、このまま Web サイトのコンテンツとして使用するには適さないと言わざるを得ません。本来、フォントの種類やサイズはブラウザが HTML の規格に従って自動的に決める事柄ですから、ソースに含める必要はありません。それに、ファイルサイズが小さいほど、ブラウザに読み込み表示するまでの時間が少なく、軽快なアクセスが可能となります。

(4) Microsoft Office HTML Filter によるファイルのスリム化

マイクロソフト社はこの問題を認識しており、Microsoft Office HTML Filter というユーティリティーを提供しています。これは、同社のサイトからダウンロードする必要がありますがその URL、使用方法などの詳細は、本サイト内のこちらをご覧ください。

このユーティティーを使用した結果は、次のとおりです。これで元のファイルの 15% まで、サイズが小さくなりました。

MS Office HTML Filter を適用した UTF-8 (0.858 KB)

IE5.5 での表示 (上) / ソース (3行の文字部分のみ)

(5) エディタによる HTML ソースの編集

上の結果に見るように、相当小さなファイルになったのですが、よく観察すると、次の問題があることが分かります。

  1. 言語名と外国語部分との間のスペースが消えている。
  2. ソースにまだフォント指定や行方向の指定 (アラビア語の span dir=RTL) が残っている。これらは UTF-8 なので、ブラウザと OS に任せればよく、指定の必要がない。
  3. フォントサイズの指定が絶対指定になっているので、日本語部分 (標準なので無指定でよいはず) にまで指定がある。

これらはいずれも、簡単な HTML タグの文法を知っておれば修正するのは簡単です。しかし、これを修正するために、再度、Word で読み込むと同じことの繰り返しになります。

これらは、以下に述べる UTF-8 対応のエディタで修正してください。やってみると分かりますが、一般のページはこんなに単純ではないので、実は、ここからが根気で勝負する作業なのです。

4. MS FrontPage 2000 で作成する場合

(1) 保存形式の UTF-8 指定

「ファイル」 - 「プロパティ」 - 「言語」 タブで、「保存時の HTML エンコード」 に多国語 (UTF-8) を設定します。

(2) コンテンツの編集と保存

通常のコンテンツ作成方法で自由に編集します。Word と異なり、FrontPage は不必要なタグをつけませんから、スリムなソースを作成できます。

(3) 入力可能な言語

FrontPage 2000 を使用する Windows の多言語環境に応じて、使用可能な言語も異なります。たとえば、Windows 2000 でしか使用できない言語は、同じ FrontPage 2000 でも Windows 98 では使用できません。

(4) RTL (Right-To-Left) 言語と UTF-8 の HTML ソース

右から左に表記するアラビア文字使用言語とヘブライ語では、ABC を一語とみなせば、HTML ソースとブラウザの表示が次の対応になります。つまり、タグ <p> </p> の間のアラビア文字等のデータは、最初の punctuation を除き、左右逆転されます。アラビア文字の疑問符は、アラビア文字とみなされるようです。

期待するブラウザの表示
(.G F] E D :C B A
ソースの記述方法
(.A B C: D E [F G

このことは、FrontPage 2000 のプレビュー画面と HTML ソース画面とを比較すればよく分かります。

>>> RTL 言語のソース編集の問題点 <<<

このような現象は、言語情報がなく文字コードのみで言語を判定する UTF-8 の仕組みとしては当然ともいえます。また、FrontPage は 「標準」 画面でも 「HTML」 画面でも、これらの言語の入力に対応しようという涙ぐましい努力をしています。しかし、以下の点が大きな問題です。

したがって、これらの言語の文単位のデータ入力には、Windows 2000 付属の 「メモ帳」 を使用するといいでしょう。

5. UTF-8 対応のエディタ

エディタが必要な理由

上記のように、Word 作成のファイルを MS Office HTML Filter でスリムにした後の修正とか、多国語データを含めてほぼ完成した後で細部のレタッチをするなどで HTML タグを編集する場合は、HTML のソースファイルをテキスト形式で読み込むことができるエディタが必要です。ところが、多国語の Unicode / UTF-8 を処理できるエディタは非常に限られています。

「UTF-8 対応」 の意味について

ユーザーが使用したい言語や記号の範囲により、「対応」 の中身が異なることに留意してください。

特殊な知識がなくとも使用できる一般的なエディタとしては、次のものがあります。一般的なものばかりですが、それだけ 「安全」 ということです。

>>> 注意 <<<
Unicode/UTF-8 対応としていても、対応範囲を超える言語や記号の文字列があると、 「?」 や無意味な文字列でファイル内容を変更してしまうものがあります。下記にはそうした現象はありません。慣れるまでは、細心の注意が必要です。

Windows 2000 付属 「メモ帳」 (notepad)

Windows 2000 が対応するどの言語も扱えます。特に、右クリックすると下図のように、Unicode 制御文字の挿入メニューが表示されます。編集画面での外国語表示は小さくて非常に見にくいですが、変更は可能です。

MS FrontPage 2000

既に見たように、FrontPage 2000 の 「HTML」 画面は、 HTML ソースのエディタとして使えます。

Mifes for Windows Ver.5 (Megasoft 社発売)

DOS 時代からの代表的エディタの一つ。Win 9x, Me, 2000 のいずれにも対応。

多言語をそのフォントで表示することはできませんが、文字化けはしていても、Unicode 文字列を絶対に破壊しないという優れた特徴があります。言語をそのフォントで表示できなくてどんな用途があるのかと言えば、次のような場合です。

Shift-JIS と UTF-8 間で相互に読み込み保存するオプション (MIWUTF8.PPP) もありますが、この機能は、2バイト UNICODE (UCS-2) のみ対応で UCS-4 には非対応です。したがって、Mifes で HTML ファイルを開く場合は、「プリプロセッサ」 を 「自動設定」 のまま開いてください。Unicode 部分は文字化けしますが、文字列が壊れることはありません。

6. UTF-8 作成の鉄則

(1) 慣れたホームページ作成ソフトを使用する。

エンコードが UTF-8 であっても、ホームページの作成にはレイアウトやデザインが重要です。そのためには、UTF-8 対応の有無を超えて、使い慣れたソフトがベストです。特に、リンクを張ったり、テーブルを作成するなどは、専用ソフトなしにはとても面倒な作業です。

ただし、完成後に内容をアップデートするなどのため再編集しなければなりません。そのためには、愛用ソフトが UTF-8 に対応していなくても、少なくとも、Unicode 文字列を破壊しないものを選ぶ必要があります。たとえば、Dreamweaver はUTF-8 非対応ですが、Unicode 文字列を破壊しないので、注意しながら使えば十分使用可能です。

(*) ただ、Unicode 文字列のあるファイルを保存すると、数箇所に制御文字 (^@) が入り、Dreamweaver で読み込めなくなってしまいます。これは、Mifes で検索し除去すれば、修復可能です。

(2) ページデザインとレイアウトは Shift-JIS でまず完成させる。

Shift-JIS はどのソフトでも作成できます。使い慣れたソフトで日本語や英語部分を中心に、ホームページで一番重要なデザインをまず完成させます。その後、各ソフトで保存形式を UTF-8 に変更します。

FrontPage や Word 以外で、保存時の形式に UTF-8 を選択できないソフトでは、Shift-JIS で保存したファイルを Windows 2000 付属 「メモ帳」 や Mifes で読み込み、保存時に UTF-8 形式を選びます。Mifes では、保存時の 「ポストプロセッサ」 に MIWUTF8.PPP を指定します。

(3) 多言語データは HTML ソースの編集で追加する。

FrontPage を使わない場合は、ページデザイン完了後に、UTF-8 対応エディタで HTML ソースの編集で多言語データを追加します。Unicode 文字列を壊さずに編集するのは、神経質な作業ですから、ページレイアウトの大幅な変更につながる場合、いろんな危険が伴います。

多言語データの追加に Windows 2000 付属 「メモ帳」 や FrontPage を使用できない場合は、次のようにします。

  1. Word で多言語を入力します。
  2. 多言語部分を範囲指定後、「編集」 - 「HTML としてコピー」 を選びます。
    「HTML としてコピー」 コマンドについては、こちらをご覧ください。
  3. Mifes などの Unicode 文字列を壊さないテキストエディタの該当部分に、貼り付けます。
  4. テキストエディタの画面で Word の余分なタグを除去します。


Word の 「HTML としてコピー」 の画面


Mifes の画面 (赤が貼り付けた内容、黄色がアラビア語の Unicode 文字列、黄色以外を削除)


編集済みのページを表示する IE5.5

(4) Word を使わない。

上で紹介したように単純な HTML の場合は、Microsoft Office HTML Filter でファイルをスリムにできるのですが、普通はもっと手の込んだページのレイアウトを行うことになります。すると、この Filter でスリム化する際のオプションの組合わせによっては、オリジナルのデザインが一変してしまいます。また、安全なオプションを選択すると、ほとんどスリムにならず、余分なタグを除去するのにとてつもない労力が必要になります。

ですから、同じ Microsoft の FrontPage も使用しない独自のタグを多数使用する 「Word はホームページ作成ソフトではない、その HTML 形式は Web 用ではない」 と認識するべきでしょう。