web拍手改造

文字化け要因を解消する

 web拍手に関する質問をいただいたので、ちょっとかいつまんでご紹介。その質問とは、IEだと正しく表示されるweb拍手送信完了画面(お礼メッセージの表示される画面)がNN7だと文字化けしてしまう、その原因はなんだろうか、対処法はないのだろうかというものなのだが、実はあるのである。だから今回はこの文字化け問題への対処を考えてみようと思う。

文字化けの原因

 文字化けの原因は、実はそれほど難しくない。昔からよくあるもので、そのページ(今回の場合ならweb拍手送信完了画面)で使われている文字コードがなにであるか、正しく指定されていないことに起因している。

 例えば、今皆さんがご覧になっているページであるが、ソースを開いていただくと、5行目に以下のような記述があるのを見つけることができるだろう。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

 これはいったいなにかというと、ブラウザにこのページはtext/htmlでできていて、文字コードはShift JISですよ、ということを伝えているのである。対して、web拍手送信完了画面ではどうだろうか。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja"><head>
<title>web拍手送信完了</title>
</head>

 ヘッド内のどこを見ても、文字コードを指定する記述がない。このため、文字コードの自動判別にIEほど長けていないNNは、ページの文字コードを判定し損なってしまい、文字化けを引き起こしてしまうのだ。

文字化けの解消

 では、文字化けを解消するにはどうすればいいのか。解はふたつある。ひとつはHTTPヘッダ内で文字コードを指定してやること。もうひとつは、先ほど例示したmeta要素をhead要素内に書き加えてやること。

 ここでは、私の施した方法、つまり後者、meta要素を使う方法で対処してみよう。

CGIを改造する

 今回修正するファイルは、clapinit.cgiである。無改造のclapinit.cgiなら、66行目あたりからHTMLヘッダーの表示に関する部分が見つかるはずだ。ここに、先ほどのmeta要素を一行書き加えてやる。

 書き加える位置は、HTMLの理屈を考えればおのずと決まってくる。meta要素はhead要素内になければならず、さらにいえば、半角英数以外の文字が現れるよりも前に書かれなければならない。つまり、title要素の直前行に書くということだ。具体的にいえば、74行目である。

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',"\n";
print '<html lang="ja"><head>',"\n";
print "<title>$title</title>\n";
print "</head>\n";

 title要素行(強調)の直前にmeta要素を書いてやる。

clapinit.cgiを書き換える

 では、clapinit.cgiに必要な行を書き加えてやろう。ただ、この場合に注意することが一点ある。それは、この書き込む行で指定する文字コードと、clapinit.cgiで使われている文字コードを一致させるということだ。Windows系のサーバだと一般的にShift JISが使われ、Unix系のサーバだとEUCが使われるだなんていわれるあれだというと、ピンとくる方もいらっしゃるだろうか。

 今回の変更はこの文字コードを指定するのだから、間違ったコードをmeta要素で指定してしまうと、問題はより根深くなってしまう。だから、自分の書き換えようとしているclapinit.cgiの文字コードがなにであるか、ちゃんと把握して改造することにしよう。

 今回の質問者の環境を確認してみると、Shift JISで文書が書かれていた。だから今回の改造例は文書がShift JISであることを想定している。その他の文字コードの場合は例を後に示すので、うまく文字化けが解消されない(あるいは文字化けがひどくなった)ようなときは、もう一度自分の環境で使われている文字コードを確認して、それに応じた指定をするようにしてほしい。

 では、clapinit.cgiを書き換えよう。次のように書き換えてやればいい。

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',"\n";
print '<html lang="ja"><head>',"\n";
print '<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">',"\n";
print "<title>$title</title>\n";
print "</head>\n";

他の文字コードの場合

 clapinit.cgiがShift JIS以外の文字コードで書かれている場合は、以下の例で強調した部分を、それぞれの文字コードにあわせて書き換えよう。

Shift JISの場合
print '<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">',"\n";
EUC-JPの場合
print '<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">',"\n";
JISの場合
print '<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">',"\n";
ユニコード(utf-8)の場合
print '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">',"\n";

 今回の改造は以上である。実をいうと、この改造は私が一番最初に着手した改造だった(つまり、文字化け問題は最初っから意識していた)。だからさっさと紹介したらよかったんだけれど、なんでかほったらかしにしてしまった。文字化け問題に悩んでいた読者の皆さんにはお待たせすることになってしまい、なんだか申し訳ない。


<   >

わたしの愛した機械へ トップページに戻る

公開日:2005.07.17
最終更新日:2005.08.08
webmaster@kototone.jp
Creative Commons License
こととねは、クリエイティブ・コモンズ・ライセンス(表示 - 継承 2.1 日本)の下でライセンスされています。