広い世間には、同じことでお悩みの方がきっといらっしゃると思うので、ご参考までに書いておきます。
フォームを使ってCGIなどのプログラムにデータを渡したい場合ってありますよね。 たとえば検索窓。 検索ワードをデータとして検索エンジンに渡さなくてはなりません。
でもまあ、このこと自体はそんなに難しいことではありません。 検索エンジンはたいてい、自分のところの検索窓を取り付けてもらうのは大歓迎ですから、 どこかにそのソースと貼り付け方が書いてあります。 googleや yahooなど 大手の検索エンジンともなると、 様々な文字コードをサポートしており、その指定方法まで書いてあったりなんかして。 もう、至れり尽くせりです。
けれども世の中には、自分のところの検索窓を取り付けたい人がいるだなんて 夢にも思わないマイナーもしくはローカルな検索エンジンもたくさんあるんですよね。 そういうところは、使える文字コードが決まっていたりします。
それでも、こちらが先方のご要望に合った文字コードを自由に選択して渡せれば問題はありません。 実際、そういうときのために、form（フォーム）タグには、文字コードを指定する属性があります。 たとえばこんな感じです：
<form action="起動したいプログラムのURL名" accept-charset="Shift_JIS">
これは要するに、「入力フィールドに打ち込まれた文字列を、Shift_JISで送信してください」と ブラウザにお願いしているわけですね。 Shift_JISの代わりに、UTF-8やEUC-JPを 指定することもできます。 そして、firefoxなど、聞き分けのよいブラウザなら、このお願いを二つ返事で引き受けてくれます。
ところが‥！ なんと、大メジャーInternet Explorer(IE)の聞き分けが悪いんです。 こっちがこんなに可愛らしくお願いしているのに、 なんとこのお願いを無視しやがるのです！！ そして勝手に、そのソースが書かれた文字コードのデータを先方に送りつけてしまうのです。
まったくこれには困ったものです。 先方のプログラムが所望する文字コードがソースの文字コードと異なる場合は、 どうすればよいのでしょう？
今回わたしが出合ったのも、そういうケースでした。 図書館の蔵書検索窓を、ホームページにしているローカルのhtmlに設置したかったのです。 htmlのソースはWindowsのメモ帳で書いているからもちろんShift_JISです。 でも先方はEUC-JPを要求してくる。 ああ、一体どうしたら‥？
先方に合わせてEUC-JPでソースを書く？ ――いいえ、それはできません。 だって、そのhtmlファイルには、Shift_JISのデータを欲しがる別の検索窓をすでに取り付けてあるんですもの。
あいだにCGIを噛ませて文字コードを変換する？ ――ウーン、検索窓一つのために、そこまでやりたくはありません。
これには本当に困ってしまいました。 それで、誰かに解決策を教えてもらおうと検索をかけてみたのですが、 案外こういうのの解決法ってないものなんですねえ‥。
本当は一つだけ見つかったのですけれどね。なんと、 サブミットの瞬間だけページ全体の charset の指定を入れ替える （Web検索！メタサーチ） という‥。 この方法にはもう、ビ〜クリ！！ Javascriptを使って一瞬だけ文字コードを書き換えてしまうという、アクロバット技というか力技というか‥。 うーん、素晴らしい！！ ――ただ、この方法にも問題があって、 ブラウザの戻るボタンを押した場合に、元のページが文字化けを起こしてしまうようです。
あー、困った。 諦めるしかないんだろうか？
‥でも、そうこうしているうちに、ふと閃いたのです。 文字コードが気に入らなければ、そこだけ別ページにしてしまえばいいじゃないか、と。
その方法はこうです。
- 送信したいコードにて、フォーム部分を別ファイルに作成
- インラインフレームとして、表示したいページに別ファイルを取り込む
こうすれば、一つのページにいくつでも、それぞれに違ったコードでデータを送信するフォームを 並べることができるではないですか！
テキストエディタは、手持ちの Tera Padを使うことにしました。 これだとShift_JIS、EUC-JP、UTF-8など５つの主要な文字コードから選択してソースが作成できるようです。 こんなエディタが無料で公開されているなんて、なんて有り難いんでしょう！ これを使って、ここではlibrary.htmlという埋め込み用のファイルを作成しました。
その別ファイルlibrary.htmlのソースは以下のような感じです。 （ここではキーポイント以外、はしょっていますので、正確には、実際のソースをご覧ください）：
<html>
<head>
<title>図書館蔵書検索</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
</head>
<body>
<form name="search" action="呼び出すプログラムのURL" method="POST" target="_top">
<input type="text" name="key" size="40"> <!-- 検索ワード入力エリア -->
<input type="submit" value="検索"> <!-- 送信ボタン -->
</form>
</body>
</html>
間違えやすい部分、重要な点を赤字にしてみました。 以下の３点がポイントでしょうか。
- metaタグでcharsetを正しく指定すること。
- 呼び出すプログラムのURLを正しく指定すること。
- formタグのtarget属性に_topを指定すること。
これを貼り付けたいファイルのソース部分は以下のような感じです：
<iframe src="./library.html" width="幅" height="高さ" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>
ここでのチェック項目は以下の２点です。
- フォーム部分を記載した別ファイルへのパスを正確に記入すること。
- 適切な幅、高さを指定する（最初は大きめに指定し、様子を見ながら縮めるとよい）。
こうして出来上がったのが、以下の検索窓です。
| 横浜図書館 |
|---|
ここにあるのはダミーなので、検索以外のボタンは正常に作動しませんが、 ローカルに置いてある本物には自分のIDやパスワードをソースの中に埋め込み、 予約状況・貸出状況がワンクリックで調べられるようにしました。
この図書館の検索窓を アマゾンの検索窓と並べておくと、すご〜く便利！ なぜってわたしは次のような手順で本を探すことが多いからです。
- どこかで本の評判を聞きつける。
- amazonで、その本の詳細およびカスタマーレビューをチェックする。
- 良さそうなら図書館で探して予約を入れる。
- 読んでみて本当に気に入ったら購入する。
図書館の蔵書検索窓の導入により、この流れがよりスムーズになりました。 手間はかかりましたが、満足です＾＾。
初稿：2005年12月24日