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

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

1. まえがき

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

CGIで利用しているPerlにUTF-8コードが標準で実装されている
AWStatsを利用したアクセス解析のHTMLファイルがUTF-8コードで自動生成される
GoogleがUTF-8コードを使用して世界的な規模で検索サイトを提供している

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

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

※重要

UTF-8 - BOMあり、この書式を使用するとhtmlの文法チェックで減点されたり、perlスクリプトで不具合が出る。
UTF-8N - BOMなし、htmlファイルやperlスクリプトは、この書式で保存しなければならない。

参考文献：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にしなければなりません。

TeraPadで、UTF-8コード以外のhtmlファイルを読込みます。
以下にShift_JISコードで書かれたこのサイトのtopページのファイルを読み込んだ例を示します。
htmlファイルで指定している文字コードをUTF-8に変更します。
以下にXHTML 1.0 Strict（厳格）で書かれたhtmlファイルの内容をUTF-8コードに変更した例を示します。
漢字/改行コードの指定保存を行います。
下図の様に「ファイル(F)」－「漢字/改行コードの指定保存(K)」で左クリックします。
UTF-8Nで、上書き保存を行います。
下図の様に漢字コードをUTF-8Nに指定して、改行コードは、CR+LFのままにして「OK」を左クリックして保存します。
TeraPadでUTF-8Nコードのhtmlファイルの表示例を以下に示します。
前項で保存しますと、下図の様に漢字コードが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)にそのまま設置した場合

Namazu:　←※1 検索文字は、Shift_JISかEUC-JPコードのみ。
　Google:　←※2 検索文字は、UTF-8Nコードにも対応。
　　←ASCIIコード。
　←※1 検索文字は、Shift_JISかEUC-JPコードのみ。

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

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

Webページの文字コードがShift_JISコード　－　<input type="hidden" name="ie" value="Shift_JIS">
Webページの文字コードがEUC-JP コード　－　<input type="hidden" name="ie" value="EUC-JP">
Webページの文字コードがUTF-8 コード　－　<input type="hidden" name="ie" value="UTF-8">

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

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

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

Namazu:

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>

｜目次｜▲頁先頭｜

｜｜　　次　頁　　｜