第9回「『オンラインストア』完成へ向けて各ファイルを再構築」までで、「簡易オンラインストア」の処理を一通り完成させましたが、今回はそこにAjax（Asynchronous JavaScript＋XML）を取り入れ、フォーム入力を支援するよう改良を加えます。Ajaxを活用すれば、フォームボタンを押下に加え、キーボード入力やマウスのドラッグといったイベントをトリガーにして、ページ表示の一部だけを再描画することができます。
前回までのシステムでは、郵便番号と住所への入力が互いに連携しておらず、個別に入力する必要がありました。今回はAjaxを用いて、郵便番号テキストボックスに数字が1文字入力されるごとに、入力された数字からデータベースを検索し、該当する住所が表示されるようにします。
なお、Ajaxの基本や詳細については以下を参考にしてください。
関連記事：
古くて新しいAjaxの真実を見極める（＠IT リッチクライアント＆帳票）
http://www.atmarkit.co.jp/fwcr/special/ajax01/01.html
Ajax技術解説（＠IT リッチクライアント＆帳票）
http://www.atmarkit.co.jp/fwcr/index/index-wcr.html#ajax_review
サンプルファイルで理解するAjaxの動作
「簡易オンラインストア」に改良を加える前に、Ajaxの簡単なサンプル「sample6」を基に解説しておきましょう（注）。
注：なお、サンプルではフォーム入力値のチェックやMySQLサーバの設定など、セキュリティに対する考慮が不足しています。サンプルを使用する際は不特定のユーザーから利用されることがないよう、公開されたサーバ上での使用は控えるようにします。
sample6のインストールと動作確認
こちらからサンプルアーカイブ「sample6.tgz」をダウンロードし、Apache HTTPDのドキュメントルート（注）など、PHPが動作するディレクトリに展開し、作業ディレクトリを移動します。その後サンプルに含まれる「sample_db6.sql」を利用し、データベース「sample_db6」を準備します。
注：ソースからデフォルトインストールした場合は/usr/local/apache2/htdocs、FedoraやRed hatなどRPMインストールした場合は/var/www/htmlなど
なお郵便番号・住所データベースには、日本郵政公社の「住所の郵便番号のダウンロードサービス」（読み仮名データの促音・拗音を小書きで表記したもの）を利用しています。日本郵政公社のデータをMySQLに取り込む方法については、コラム「郵便番号・住所データベースの作成方法」を参考にしてください（コラム1参照）。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
インストール後、Webブラウザで「http://HTTPDサーバ/sample6/frontend.php」にアクセスし、動作を確認します。郵便番号テキストボックスに数字を入力するたびに、住所テキストボックスに該当する住所が表示され、同時にメッセージテキストエリアに該当件数が表示されていることを確認します。また住所検索の過程でデータベース接続エラーのような不具合が発生している場合は、メッセージテキストエリアにその内容が表示されます。
最初の入力では、MySQLサーバ接続処理で多少反応が遅れる場合があります。その際は少し入力速度を抑え反応を確かめるようにします。
コラム1 郵便番号・住所データベースの作成方法
sample6で使用している郵便番号・住所データベースでは、日本郵政公社の「住所の郵便番号のダウンロードサービス（読み仮名データの促音・拗音を小書きで表記したもの）」を利用しています。以下の手順により、公開されているCSVファイルから必要なデータだけをMySQLのデータとして取り込みます。
まずhttp://www.post.japanpost.jp/zipcode/dl/kogaki.htmlから「全国一括」を選び、「ken_all.lzh」をダウンロードします。ファイルはLZH形式で圧縮されています。Linuxで解凍するには、別途lhaユーティリティが必要となるため、まずWindowsで解凍し、その後Linuxにファイルを転送するなどします。なおLinuxでlhaユーティリティを使用する場合は下記を参考にしてください。
関連記事：
Fedora Core 6でLZH形式の圧縮ファイルを展開するには
http://www.atmarkit.co.jp/flinux/rensai/linuxtips/986fc6lzh.html
Turbolinux 10 DesktopでLZH形式の圧縮ファイルを展開するには
http://www.atmarkit.co.jp/flinux/rensai/linuxtips/616uselzhtl.html
解凍後のファイル「KEN_ALL.CSV」の文字コードはシフトJISで、改行コードはCR+LFです。nkfやiconvコマンドを使用し、文字コードをUTF-8に変換します。なお変換後のファイルはMySQLデーモンで読み込みができるよう/tmpに作成し、以下のように読み込み権限を追加します。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
日本郵政公社のCSVデータには、不要なフィールドも含まれます。必要なデータは郵便番号（3番目のフィールド）と住所（7〜9番目のフィールドを連結したもの）だけです。Microsoft Excelなど、CSVを編集できるソフトを使ってデータを整形することもできますが、ここではMySQLを使ってデータを生成する方法を紹介します。
まず、いったんこのファイルを、日本郵政公社のCSVファイルの全フィールドに1対1で対応するカラムを持った仮のテーブル「tmp_table」に読み込みます。その後、必要なカラムだけを本番テーブル「zip_address」へ吸い出します。作業手順は以下のとおりです。
データベース「sample_db6」を作成
↓
仮のテーブル「tmp_table」を作成 （「CREATE TEMPORARY TABLE」クエリで仮テーブルを作成するため、mysqlクライアント終了とともに自動で削除される）
↓
CVSデータを「LOAD DATA LOCAL INFILE」クエリを使ってtmp_tableへ読み込む
↓
本番テーブル「zip_address」を作成 （検索優先のため、ストレージエンジンに「MyISAM」を指定）
↓
tmp_tableテーブルの3番目のカラムデータと7〜9番目のカラムを結合し、作成したデータを「INSERT INTO ... SELECT」クエリを使ってzip_addressテーブルに取り込む
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
最後に、一連のデータがzip_addressに正常に登録されているかどうかを確認します。データ件数は12万1960件に及ぶため、LIMIT節を用いて出力数を抑制することを忘れないようにします。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
Copyright © ITmedia, Inc. All Rights Reserved.