連載：AjaxとPHPでリッチクライアント（1）

Ajaxを使ったamazon検索をPHPで作ろう


上鍵 忠志
日本PHPユーザ会
2005/10/4

　AjaxACを使う

　ここではPHP用のAjaxライブラリであるAjaxACの実際の使用例を紹介しよう。AjaxACはフレームワークを名乗っているが、主に実質時間管理とXMLHttpRequest管理とリクエスト時のイベントハンドリングを行う。これはAjaxを用いるうえでほぼ最低限必要な機能になる。

・サンプルを使用し、改造してみる

　AjaxACには以下の3つのサンプルが同梱されている．

ArithmeJax 2つの整数値を元に四則演算をAjaxを用いてダイナミックに行うサンプル
CountryRegionCityJax 地域から国，都市名などをAjaxを用いてダイナミックにセレクトボックスに設定し，選択させるサンプル
GoogleSuggestCloneJax GoogleSuggestに似たものをAjaxを用いて作成するサンプル

■CountryRegionCityJax

　サンプルとして比較的簡単なつくりになっていて、改造しやすそうな「CountryRegionCityJax」を動かしてみよう（ArithmeJaxは演算するだけだし、GoogleSuggestCloneJaxはMySQLを動作させなければならない）。

　まずはAjaxACを公式サイトから取得し（執筆時現在AjaxACの最新版は0.4.4）、アーカイブを展開した後、「lib」ディレクトリをブラウザからアクセスできる場所にコピーする。

AjaxACのコピー例
tar jxvf ajaxac-0.4.4.tar.bz2
cp -pr ajax-0.4.4/lib /var/www/html/ajaxac
あるいは
bzip -dc ajaxac-0.4.4.tar.bz2 | tar xvf -
cp -pr ajax-0.4.4/lib /var/www/html/ajaxac

　今回は「/var/www/html/ajaxac/」にコピーすることにする（執筆時現在AjaxACの最新版は0.4.4）。次に「examples/CountryRegionCityJax」の内容をブラウザからアクセスできる場所にコピーする。

　コピーが完了したらCountryRegionCityJax.phpに下記コードを追加し、include_pathにAjaxACのコアが読み込まれるようにする。

改変したCountryRegionCityJax.phpの一部
$include_path = ini_get( "include_path"); <= この行を追加
ini_set( "include_path",<= この行を追加
$include_path.":/var/www/html/ajaxac/"); <= この行を追加
require_once(CountryRegionCityJax.class.php');

　後はブラウザでindex.phpにアクセスするだけである。画面には3つのセレクトボックスが現れ、それぞれCountry→State/Region→Cityと選ぶようになっている。これはセレクトボックス1つ1つの選択のバックグラウンドでAjaxが次のデータを読み込んでいる。

　ちなみに読み込んでいるデータは同一ディレクトリにある「locations.txt」である。ファイルを開くと単なるCSVなので、国名に日本も追加してみよう。

改変したlocations.txtの一部の例
United States,Texas,Houston
United States,Texas,San Antonio
Japan,Hokkaido,Susukino city　<= この行以下を追加
Japan,Hokkaido,Abashiri city　
Japan,Tokyo,Shinagawa ku　
Japan,Tokyo,Meguro ku　
Japan,Osaka,Osaka city　
Japan,Osaka,Higashi-Osaka city　
Japan,Osaka,Kishiwada city　
Japan,Fukuoka,Fukuoka city　
Japan,Hokkaido,Abashiri city　
Japan,Tokyo,Shibuya ku　
Japan,Tokyo,Shinjuku ku
Japan,Osaka,Osaka city　
Japan,Osaka,Higashi-Osaka city　
Japan,Osaka,Kishiwada city　
Japan,Fukuoka,Fukuoka city
Japan,Fukuoka,Kurume city

　これで日本に関連する地域が選択できることになる。

注意：Ajaxはブラウザのキャッシュの影響で思ったとおりに動作しない場合が多い。そういった場合はブラウザのキャッシュを一度クリアしてみよう。

■GoogleSuggestCloneJax

　最後にGoogleSuggestCloneJaxを動かしてみよう。これを動かすにはMySQLの準備が必要である。まずは適当なテーブルを作成し、GoogleSuggestCloneJaxのディレクトリに存在する「data.sql」をmysqlコマンド（参照：連載記事「快速MySQLでデータベースアプリ！」）などで実行しよう。

MySQLのデータベースを作成
$ mysqladmin -u root -p create test_ajaxac_google
$ cat data.sql | mysql -u root -p test_ajaxac_google

　ちなみにこのdata.sqlはGoogleが表示する検索結果のようなものをあらかじめ用意したデータである。つまりここで用意されたものしか結果として出てこないことを前もって知っておくといい。

　次に先ほどのCountryRegionCityJaxと同様にinclude_pathの修正を行う処理をGoogleSuggestCloneJax.class.phpに追加する。さらにクラス「GoogleSuggestCloneJax」にあるプロパティからデータベースの設定を行う。

設定すべきプロパティ
プロパティ名 値 意味
$db_hostname localhost MySQLサーバのホスト名
$db_username 接続アカウント名 MySQLサーバへの接続ユーザー名
$db_password 接続パスワード MySQLサーバへの接続ユーザー名
$db_database test_ajaxac_google データが存在するデータベース名
$db_table google_suggest_clone_data データが存在するテーブル名

　後はindex.phpにアクセスし、いくつかキーワードを入れてみるといいだろう。data.sqlに存在するキーワードであればGoogleSuggestっぽい表示が行われるだろう。

2/3

　INDEX

Ajaxを使ったamazon検索をPHPで作ろう
　 Page1＜AjaxとPHPの関係＞
PHPとAjaxの関係／Ajaxを使ったウェブアプリケーションの例／Ajaxを用いたアプリケーションの可能性／Ajaxを扱うためのPHPライブラリたち
  Page2＜AjaxACを使う＞
サンプルを使用し、改造してみる／CountryRegionCityJax／GoogleSuggestCloneJax
　 Page3＜Amazon商品検索フォームにGoogleSuggestCloneJaxを改造する＞
AmazonSuggestCloneJax


HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT