郵便番号から住所呼び出せる「ajaxzip3」で文字化け


簡単に設置でき手軽な住所呼び出し

webページでフォームプログラムを組んでいると郵便番号から住所を呼び出す場面は多々あります。
昔は郵便番号から紐づかせてデータベースから読み込んでくるというデータベースとプログラムを独自に組んだりもしたものですが、郵便番号は刻々と増減し、住所名も変化しているので正確な運営をしようと思うとデータベースの更新が必要になってきてしまいます。
しかし現在はいろんなところからそれにあたるプログラムが配布されています。
特にgoogleの「ajaxzip3」は設置が非常に簡単で、データベースはgoogle側なのでそちらが更新されれば自動的に反映されるので、それに関わる更新メンテナンスを考えなくて良いというメリットがあります。

ところが…
手軽に動作して安心安心♪と思っていたら、呼び出された住所が文字化けするという現象に。
検索して解決策を書いてあるページは見つけたものの、なかなかその意味がわからずかなりの時間悩んでしまいました。
そんなわけで、なるべくわかりやすくその解決策を書いておきたいと思います。

まずはノーマルな設置方法

ajaxzip3のサイト
https://code.google.com/p/ajaxzip3/

<head></head>内に書く内容はcharsetを明記することと、あとはgoogleのjsへのリンク一行だけで済みます。
ただし運営環境によって指し先が変わってきます。(httpかhttpsか、charsetがUTF-8かShift-JISか)
<body></body>内はどのケースでもすべて同じです。

【http(UTF-8)で運営する場合】
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8“>
<title>サンプル</title>
<script src=”http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js” charset=”UTF-8“></script>
</head>
<body>
〒<input type=”text” name=”zip21″ size=”4″ maxlength=”3″> - <input type=”text” name=”zip22″ size=”5″ maxlength=”4″ onKeyUp=”AjaxZip3.zip2addr(‘zip21′,’zip22′,’pref21′,’addr21′,’strt21’);”><br>
<input type=”text” name=”pref21″ size=”40″><br>
<input type=”text” name=”addr21″ size=”40″><br>
<input type=”text” name=”strt21″ size=”40″>
</body>
</html>
【http(shift-JIS)で運営する場合】
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS“>
<title>サンプル</title>
<script src=”http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js” charset=”UTF-8“></script>
</head>
<body>
〒<input type=”text” name=”zip21″ size=”4″ maxlength=”3″> - <input type=”text” name=”zip22″ size=”5″ maxlength=”4″ onKeyUp=”AjaxZip3.zip2addr(‘zip21′,’zip22′,’pref21′,’addr21′,’strt21’);”><br>
<input type=”text” name=”pref21″ size=”40″><br>
<input type=”text” name=”addr21″ size=”40″><br>
<input type=”text” name=”strt21″ size=”40″>
</body>
</html>
【https(UTF-8)で運営する場合】
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8“>
<title>サンプル</title>
<script src=”https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js” charset=”UTF-8“></script>
</head>
<body>
〒<input type=”text” name=”zip21″ size=”4″ maxlength=”3″> - <input type=”text” name=”zip22″ size=”5″ maxlength=”4″ onKeyUp=”AjaxZip3.zip2addr(‘zip21′,’zip22′,’pref21′,’addr21′,’strt21’);”><br>
<input type=”text” name=”pref21″ size=”40″><br>
<input type=”text” name=”addr21″ size=”40″><br>
<input type=”text” name=”strt21″ size=”40″>
</body>
</html>
【https(shift-JIS)で運営する場合】
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS“>
<title>サンプル</title>
<script src=”https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js” charset=”UTF-8“></script>
</head>
<body>
〒<input type=”text” name=”zip21″ size=”4″ maxlength=”3″> - <input type=”text” name=”zip22″ size=”5″ maxlength=”4″ onKeyUp=”AjaxZip3.zip2addr(‘zip21′,’zip22′,’pref21′,’addr21′,’strt21’);”><br>
<input type=”text” name=”pref21″ size=”40″><br>
<input type=”text” name=”addr21″ size=”40″><br>
<input type=”text” name=”strt21″ size=”40″>
</body>
</html>

ただし、このままでは環境によっては文字化けします。

症状

charsetがShift_JISの場合でなおかつIEでアクセスした場合に文字化けします。
shift_JISでもその他のブラウザー(Chrome、Firefox、Safari)では文字化け症状はでません。
また、charsetがUTF-8の場合はすべて正常に動作します。

化け方は、郵便番号を入力した1回目は正常に表示されますが、再度同じ郵便番号や似た郵便番号を入力すると確実に化けます。
2回目はIE内に保存したキャッシュから呼び出すため、UTF-8に変換されないという症状らしいです。

対策としてはHTML自身をUTF-8運営にすれば済むのでしょうが、すでにあるサイト内の複数ページとの連動やそれによる文字化けの可能性を考えるとその一歩は踏み出しにくいと思います。

IEだと文字化けするサンプル

shift-JISのままでIEで文字化けしないようにする方法

手順1

googleへの直リンクをやめて、ajaxzip3はサイト内に設置してください。
以下よりダウンロードして保存してください。
httpサーバの場合はhttp://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js
httpsサーバの場合はhttps://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js

手順2

<head></head>内のgoogleへの直リンクしていた箇所は、保存したファイルを指してください。
また、その際にcharset=”UTF-8″はsrcよりも先に記述してください。
上記の保存したファイルは同じファイル名で保存したと仮定して以下の例を書きます。

httpサーバの場合
<script charset=”UTF-8″ src=”ajaxzip3.js”></script>

httpsサーバの場合
<script charset=”UTF-8″ src=”ajaxzip3-https.js”></script>

手順3

保存したajaxzip3.js(またはajaxzip3-https.js)の中身を一部書き換えます。

テキストエディタでファイルを開きます。
文末近辺にあるsrcの指示とcharsetの指示を反対にします。
【変更前】b.setAttribute(“src”,a);b.setAttribute(“charset”,”UTF-8″);
【変更後】b.setAttribute(“charset”,”UTF-8″);b.setAttribute(“src”,a);

以上で、charsetがshift-JISの場合でもIEで文字化けしなくなります。

IEでも文字化けしないサンプル