作成日:2004年06月06日、更新日:2004年06月08日 作成:鷹の巣

サイト全体のWebページの文字コードをUTF-8に統一した時期の覚書です。


Webページの文字コードをUTF-8にする方法(前編)

このWebページでは、Webページの文字コードをUTF-8コード化するに当たっての要点のみを記載します。また、そのテキストの編集ツールとして、WindowsのTeraPadを使用して説明します。Windowsのメモ帳でもUTF-8コードのテキストファイルの編集が出来ますが、残念ながら保存する時に先頭に邪魔なBOM(Byte Order Markの略で、0xEF,0xBB,0xBFという3バイトのデータ)が付くからです。

目次

  1. まえがき
  2. Webページの文字コードをUTF-8にする方法
  3. Webページの検索文字コードをUTF-8からeuc-jp(Shift_JIS)にする方法
    3.1 検索エンジンの検索文字を引き継ぐ方法(おまけ)
  4. [後編]動的Webページ(CGI)の文字コードをUTF-8にする方法
  5. [後編]Webサーバー(AN HTTPD)にUTF-8の文字コードを設定する方法
  6. [後編]あとがき

1. まえがき

以前は、文字コードをShift_JISに統一して作成していました。しかし、

ことから、サイト全体のWebページの文字コードをUTF-8に統一することにしました。尚、後述しますが、統一した理由はこのサイトで使用しているWebサーバーのAN HTTPDがhttp応答ヘッダに個別のWebページの文字コードを付加出来ないからです。注)勿論、統一しますとhttp応答ヘッダは、Content-Type: text/html;charset=utf-8となって文字コードのutf-8を付加することが出来ます。

注)他のWebサーバーを使用するとhttp応答ヘッダに個別のWebページの文字コードを付加出来るということではありません。

※重要

参考文献:Yu TANAKA's Works:S-JISからUTF-8への変換とそのリンク先のWindows 2000上でのUTF-8のページの作り方

2. Webページの文字コードをUTF-8にする方法

静的Webページの文字コードをUTF-8にする方法は、実に簡単ですが、それでも注意しなければいけないところがあります。まず、UTF-8コードのhtmlファイルには、先頭にBOM(Byte Order Mark)を付けてはいけません。以下に示します様にファイルの保存はBOMなしのUTF-8Nにしなければなりません。

  1. TeraPadで、UTF-8コード以外のhtmlファイルを読込みます。
    以下にShift_JISコードで書かれたこのサイトのtopページのファイルを読み込んだ例を示します。
    TeraPadでShift_JISコードのファイル読込み例

  2. htmlファイルで指定している文字コードをUTF-8に変更します。
    以下にXHTML 1.0 Strict(厳格)で書かれたhtmlファイルの内容をUTF-8コードに変更した例を示します。
    TeraPadでUTF-8コードへの編集例

  3. 漢字/改行コードの指定保存を行います。
    下図の様に「ファイル(F)」-「漢字/改行コードの指定保存(K)」で左クリックします。
    TeraPadで漢字/改行コードの指定保存例1

  4. UTF-8Nで、上書き保存を行います。
    下図の様に漢字コードをUTF-8Nに指定して、改行コードは、CR+LFのままにして「OK」を左クリックして保存します。
    TeraPadで漢字/改行コードの指定保存例2

  5. TeraPadでUTF-8Nコードのhtmlファイルの表示例を以下に示します。
    前項で保存しますと、下図の様に漢字コードがUTF-8Nと表示されます。
    TeraPadでUTF-8Nコードのファイル表示例

以上で、htmlファイルがUTF-8Nコードに変更出来ました。ブラウザIEでこのファイルを表示しますと、「表示(V)」-「エンコード(D)」を選択すると文字コードが「Unicode(UTF-8)」と表示されます。

私のサイトの場合は、過去ログを含めてファイル数が3000以上ありますので、これを上記の方法でUTF-8Nコードに変換する訳にはいきません。そこで、ファイル一覧のhtml作成と文字コードの一括変換用Perlスクリプトを作成しました。変換する文字コードをUTF-8コードにした場合、全角文字の-や~等の文字が変換されずに半角の?になりますので、注意して下さい。一応変換出来なかった行の記録ファイルを作成していますが、個々の文字単位の変換エラー行を記録している訳ではありませんので、ご使用される場合は、必ず元のhtmlファイルのバックアップを取っておいて下さい

3. Webページの検索文字コードをUTF-8からeuc-jp(Shift_JIS)にする方法

私のサイトには、以下の様な検索窓を設置しています。Webページの文字コードがUTF-8になっているとブラウザIEでアクセスして検索すると、検索文字がUTF-8コードになります。試しに下記で検索して見て下さい。正常に検索出来ないサイトがあることが確認できます。

 文字コードがShift_JISの検索フォームをこのWebページ(UTF-8)にそのまま設置した場合

  1. Namazu: ←※1 検索文字は、Shift_JISかEUC-JPコードのみ。

  2.  Google: ←※2 検索文字は、UTF-8Nコードにも対応。

  3. Meta-Whois Gateway  ←ASCIIコード。

  4. Metcha Search Engine (Meta Search Engine)  ←※1 検索文字は、Shift_JISかEUC-JPコードのみ。

※1のNamazuや統合型メタサーチのMetcha Searchの場合は、検索文字がShift_JISかEUC-JPコードになっていないので、文字化けします

※2のGoogleの場合は、検索文字がUTF-8Nコードにも対応していますから、Webページの文字コードがShift_JISやEUC-JPやUTF-8コードになっている場合は、

というタグを追加するだけで、容易に検索できる様になります。

従って、CGIによっては検索文字をShift_JISかEUC-JPコードにしなければ、文字化けをおこします。下記のフォームで検索すると正常に検索できるのは、検索文字をShift_JISやEUC-JPコードに変換するCGIを使用して、URL転送を行っているからです。

 検索文字コードをShift_JISやEUC-JPに変換する検索フォームをこのWebページ(UTF-8)に設置した場合

  1. Namazu:

  2. Metcha Search Engine (Meta Search Engine)

namazuを例にして説明しますと、WebサーバーのCGI実行パス下(本例では、/cgi-bin/)に検索文字の文字コード変換Perlスクリプト(Encodeモジュールを使用)のURLwordEncode.cgiを設置し、Webページの検索フォームを下記の様に変更しています。

 検索フォームの変更例(namazuの例)

● WebページがShift_JISやEUC-JPの場合
<form method="get" action="/cgi-bin/namazu.cgi.exe">
<p>
<input type="hidden" name="idxname" value="pub,past" />
<input type="hidden" name="sort" value="score" />
<input type="hidden" name="result" value="normal" />
<input type="text" name="query" size="30" value='' tabindex="10" accesskey="T" />
<input type="submit" value="検索" tabindex="11" accesskey="S" />
<input type="hidden" name="whence" value="0" />
<input type="hidden" name="max" value="12" />
</p>
</form>

● WebページがUTF-8の場合
  一旦、検索文字をURLwordEncode.cgiに送り、検索文字列の文字コードeuc-jp(Shift_JIS)に変換して、検索サイトにURL転送を行う。
<form method="get" action="/cgi-bin/URLwordEncode.cgi"> <--- ※ここを変更する。
<p>
<input type="hidden" name="url" value="/cgi-bin/namazu.cgi.exe" /> <--- ※ここを追加変更する。
<input type="hidden" name="idxname" value="pub,past" />
<input type="hidden" name="sort" value="score" />
<input type="hidden" name="result" value="normal" />
<input type="text" name="query" size="30" value='' tabindex="10" accesskey="T" />
<input type="submit" value="検索" tabindex="11" accesskey="S" />
<input type="hidden" name="whence" value="0" /><input type="hidden" name="max" value="12" />
</p>
</form>

3.1 検索エンジンの検索文字を引き継ぐ方法(おまけ)

検索エンジンから、検索したWebページにそのサイト内の検索が出来る様になっている場合、検索文字を引き継げると便利だと思いませんか。 namazuを例にして説明しますと、WebサーバーのCGI実行パス下(本例では、/cgi-bin/)にSSI用検索文字抽出Perlスクリプト(Encodeモジュールを使用)のGetSearchWord.cgiを設置し、Webページの検索フォームを下記の様に変更すれば可能です。

 検索エンジンの検索文字を引き継ぐ検索フォームの変更例(namazuの例)

<form method="get" action="/cgi-bin/namazu.cgi.exe">
<p>
<input type="hidden" name="idxname" value="pub,past" />
<input type="hidden" name="sort" value="score" />
<input type="hidden" name="result" value="normal" />
<input type="text" name="query" size="30" value='<!--#exec cgi="/cgi-bin/GetSearchWord.cgi" -->' tabindex="10" accesskey="T" />
<input type="submit" value="検索" tabindex="11" accesskey="S" />
<input type="hidden" name="whence" value="0" />
<input type="hidden" name="max" value="12" />
</p>
</form>

目次▲頁先頭