8
先日から入力フォームのUI（ユーザーインターフェイス）改善をいろいろ考えているのだが、「郵便番号から住所自動入力」こそ、Ajaxでやるにふさわしく、ユーザーの労力をかなり軽減できるものだろう。
zen-cartには『郵便番号入力支援モジュール』という専用のモジュールが存在するが、データベースをいじったりと素人には敷居が高く、導入も若干面倒な点がある。
そこで、できれば汎用的なものをと探していたら、とても良いものを発見！
[spoiler]
AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版） Kawa.net (2007-06-08)
JavaScriptだけで稼動するので、データベースもPHPもCGIも不要。
郵便番号を入力し終わった瞬間に、県名・市町村名・番地欄に住所が自動表示されるため、『郵便番号から住所を入力』といったボタンも不要だし、そのための説明も要らない。まさに「さりげない親切」。
しかもHTMLに3行追加するだけという簡単さが特徴だ。 
zen-cartでの実際の稼動サンプルは、私が運営しているclasse onlineに組み込んでみたので確認にどうぞ。
Kawa.netさんのページの説明がとてもわかりやすいので、通常のHTMLサイトに導入するなら何の問題もなさそうだ。
しかし、zen-cartに組み込むとなると若干の工夫が必要なので、ここにメモしておく。
※以下のメモは、zen-cart v1.2.0-l10n-jp-3を対象としている。v1.3などでは多少異なる場合があるかもしれないのでご注意を。
まず、Kawa.netさんのページからパッケージをダウンロードする。
展開してできるajaxzip2フォルダを、zen-cartのルートフォルダにそのままアップロードする。
ただし、ファイル総数が1,000ほどあるので、アップロードはかなり大変。できれば圧縮ファイルのままアップロードして、サーバー上で展開したほうがよい。
次に、ページヘッダでJavaScriptの読み込みを設定する。
includes/templates/マイテンプレート/common/html_header.phpファイルに
<script src="ajaxzip2/ajaxzip2.js" charset="UTF-8"></script>
の2行を追加する。
追加位置は、＜head＞～＜/head＞タグの中ならどこでもよい。例えば、最終行の＜/head＞の直前行など。
仕上げに＜INPUT＞タグで呼び出すわけだが、ここが少し工夫するところ。
includes/blocks/blk_address_format_jp.phpファイルの8行目あたり
（「国名非表示モジュール」を導入している場合は、blk_address_format_jp_only.phpファイル）
の、zen_set_field_length(TABLE_ADDRESS_BOOK, ‘entry_postcode’, ‘40′)) にある最後の二つの閉じ括弧の間に、
. ‘ onKeyUp=”AjaxZip2.zip2addr(this,￥’state￥’,￥’city￥’,null,￥’addr￥’,￥’street_address￥’);”‘
を追加して、以下のようにする。
‘（シングルクォート）の前に￥マークを追加するのは、PHPではシングルクォートで囲むとstring型と判断されるため。
シングルクォートの入ったHTMLコードをそのままPHP内に組み込むとエラーとなってしまうため、￥をつけてエスケープする（シングルクォートを文字として扱う）必要がある。
もちろん、実際には￥は半角で入力します。（ブログでは化けるので全角で書いています）
【追記】
上記同様に、ログイン後のマイページ ＞ アドレス帳を見る/編集する ページの修正について。
includes/templates/マイテンプレート/templates/tpl_modules_address_book_details.phpファイルの79行目あたり
を、以下のように修正。
また、レジプロセス中の「新しい配送先」を指定するページの修正について。
includes/templates/マイテンプレート/templates/tpl_modules_checkout_new_address.phpファイルの62行目あたり
を、以下のように修正。
[/spoiler]
