Ajax で画面遷移なしの Amazon 検索

近頃話題の Ajax (Asynchronous JavaScript + XML)。JavaScript の XMLHttpRequest を使って XML 文書その他を取得して、それを Dynamic HTML で描写するという、既存の技術のあわせ技。Google Maps や GMail、Google Suggest なんかで日の目を見て最近はアルファな geek の注目のテクニック...ということでちょっと遊んでみました。

ECS with Ajax
http://naoya.dyndns.org/~naoya/ajaxecs/

XMLHttpRequest と Amazon Web サービス (ECS) を使って画面遷移なしの Amazon 検索を実現した簡単(?)なアプリケーションです。

XMLHttpRequest を使えば HTTP GET でコンテンツを持ってこれるのは良いのですが、ブラウザのセキュリティ設定のおかげで、大概の場合はリモートのコンテンツを持ってくることができません。なので、naoya.dyndns.org ドメインからでは AWS API を叩くことができません。そこで、naoya.dyndns.org ドメイン内に AWS API の proxy になるような CGI を作ってやって、それを叩きに行ってます。

proxy な CGI は Perl で作っていて、Net::Amazon で AWS 検索をして、Template-Toolkit で XML にして結果を返す。このアプリケーションにとっては AWS の返却フォーマットは冗長なので、必要な部分だけを返す簡単な API に作り変えてます。フレームワークには無駄に CGI::Application::Dispatch なんかを使ってみた。

api.cgi のライブラリ
http://naoya.dyndns.org/~naoya/ajaxecs/lib/

巷の Ajax Hack を見てると、XMLHttpRequest に HTML を GET しにいかせて、responseText で返ってきた HTML を innerHTML に流し込む、ということをやってるものが多いみたいですが、api.cgi は HTML ではなく XML を返して、responseXML で取得したオブジェクトを DOM で操作して、ビューは完全に HTML + JavaScript で作ってみました。

DOM で操作してビューを作ってやると、API を用意する側はビューを意識しなくてよくなるのでデザイン変更とかレイアウト変更の際にサーバーサイドのプログラムはいじる必要がなくて美しい...といいたいところなんだけど DOM プログラミングに慣れてないことなんかもあって、JavaScript のソースの HTML 生成部分がうんこです。

今朝ウェブを徘徊していたら JavaScript Template なる JavaScript のテンプレートエンジンを見つけたので、DOM をほげってビューを作る処理にこのフレームワークを使ってやるともう少し綺麗になるかもなあ。

で、簡単ながらもいじくってみて分かったのは、やっぱり DOM が激しくめんどくさくて、サーバーサイドで HTML 生成してやった方が楽なんじゃないかという話や、非同期になったからといってもこの程度のアプリケーションではそんなに嬉しくないといったところ(動きが普通の検索とはちょっと違うので、最初は物珍しいのだけど)、Google Maps や Google Suggest のすごい所は Ajax で作られたフロントエンドとバックエンドの連携の仕方やその設計だっていうところ..などなどです。

うまく使うといろんな可能性が開けそうな Ajax ですが、効率よく開発するためにはもっといろんなノウハウが必要っぽいなと感じた次第であります。

Posted by naoya at February 28, 2005 11:30 PM | トラックバック (28)