February 28, 2005

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

[ XML ]

近頃話題の 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 検索を実現した簡単(?)なアプリケーションです。

ajaxecs.png

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)  b_entry.gif
トラックバック [28件]
TrackBack URL: http://mt.bloghackers.net/mt/suck-tbspams.cgi/1493
Ajax って言うらしい
Excerpt: Ajax って言うらしい
Weblog: 菊池 Blog
Tracked: March 1, 2005 11:00 AM
Ajax で画面遷移なしの Amazon 検索
Excerpt: いつもperlプログラミングについて最新の話題を提供されているndo::weblogにて、Ajax で画面遷移なしの Amazon 検索という記事があります。 ...
Weblog: FileMaker Pro 7 によるWeb開発覚え書き
Tracked: March 1, 2005 11:31 AM
Ajaxって何?
Excerpt: ここ最近、急に巡回先のサイトで"Ajax"という言葉をよく目にするようになりました。 Asynchronous JavaScript + XMLの略称で、Gma...
Weblog: AUSGANG SOFT
Tracked: March 1, 2005 04:40 PM
Ajaxとは?
Excerpt: 最近、アルファギークな方々の間では「Ajax」というのが流行っているようです。なんとなく分かったつもりでいたのですが、じゃあ「Ajax」って何なの? と聞かれる...
Weblog: [N]
Tracked: March 1, 2005 06:52 PM
[pc]Ajax関連とJavaScript関連
Excerpt: naonosの日記 - 22635 経由、ここの方が凄い。 最速インターフェース研究会 FrontPage 今までひっそりやられてたっぽいのが、ここにきて...
Weblog: モーグルとカバとパウダーの日記
Tracked: March 2, 2005 05:33 PM
最近の個人的に気になるニュース
Excerpt: ■「Ajax で画面遷移なしの Amazon 検索」 from NDO::Weblog様 この1週間大盛り上がりの、Ajax。 Movable Type な...
Weblog: 闇プロジェクト::zoe
Tracked: March 2, 2005 10:16 PM
Ajax を用いた 2ch ビュワー
Excerpt: さて、Ajax を用いて、2ch ビュワーの部品を作ってみた。2部構成で、一方はブラウザ、もう一方は鯖。ブラウザ側では、鯖からXML形式で送られてきたスレを配列...
Weblog: morejams blog
Tracked: March 3, 2005 08:41 AM
[WEB][Java]Ajax で画面遷移なしの Amazon 検索
Excerpt: Gmail使ったときに感じた画面遷移の軽さを実現する技術に名前がついたみたいね.以下,感じたこととか. HTTP以外にもSOAP(over HTTP)なんかも...
Weblog: 32nd diary
Tracked: March 3, 2005 01:17 PM
Ajax
Excerpt: Ajaxと言ってもオランダリーグのチーム名ではなく、最近話題のWebアプリケーション技術と言えば良いのかな。 AjaxはAsynchronous JavaScr...
Weblog: コルム情報館 Blog
Tracked: March 3, 2005 05:18 PM
もう一時代は終わったかなと思われた技術が復権していた話
Excerpt: Ajax で画面遷移なしの Amazon 検索 で Ajax について触れられていた。 Perlもそうだけど、JavaScriptって、自分の中ではちょっと前...
Weblog: 眠る開発屋blog
Tracked: March 4, 2005 12:53 AM
Ajaxって何?
Excerpt: ここ最近、やたらとAjaxに関する記事を目にします。 以前から、GmailやGoogleMapsやGoogleSuggestやFlickrなどのインターフェース...
Weblog: Webディレクター::blog
Tracked: March 4, 2005 05:52 AM
[web][超きになる]Ajax: Web アプリケーション開発の新しいアプローチ
Excerpt: http://antipop.zapto.org/docs/translations/ajax.html >> Ajax は技術そのものではない。そ...
Weblog: ynakajimaの備忘録
Tracked: March 4, 2005 11:17 AM
最近のはやりモノ:Ajax
Excerpt: 最近急速に騒がれるようになった感のある言葉、「Ajax」。 僕の理解した感じでは、 ・CSS(サイトのビジュアルデザイン) ・XHTML(サイト構造の普遍化・共...
Weblog: 有無夢
Tracked: March 7, 2005 03:02 AM
ajax
Excerpt: ajax面白い 人によってはそんなの前からありましたよって話らしいが Ajax:...
Weblog: アレゲ
Tracked: March 8, 2005 09:58 AM
大絶賛キャンペーン中なAjaxアプローチ
Excerpt: このエントリにも書きましたが、Ajaxなアーキテクチャが大絶賛キャンペーン中です...
Weblog: Fantastic Metaphors!
Tracked: March 11, 2005 09:49 AM
発表終了
Excerpt: 研究会での発表が無事終了。来て頂いた皆様、ありがとうございました。 大きな字にし...
Weblog: 闇雲
Tracked: March 14, 2005 12:50 AM
ajax とやらで日本語訳検索
Excerpt: ちょっと恥ずかしいぐらい流行に乗り遅れてますが、ちょっと時間があったので ajax とやらを試してみました。 シームレスなUIを実現するための機能の一つが X...
Weblog: ITソルジャーの目指せ海外就職!
Tracked: March 17, 2005 04:10 AM
Ajaxを利用したアプリケーション
Excerpt: 最近巷で話題のAjaxについて。AjaxとはAsynchronous JavaScript + XMLの略称で新しく生み出された技術ではなくXML, JavaS...
Weblog: connect
Tracked: March 18, 2005 06:38 PM
AjaxによるWikiインターフェイスの試案
Excerpt: Ajaxが最近の流行らしい。 一口で言えばDOMとかJavascriptが枯れて来たということなのだろうか。。まぁ、ごちゃごちゃ言うのはいつものようにともかく...
Weblog: 帝都高速度文通営団
Tracked: March 20, 2005 11:54 PM
tawagoto/2005-03-21
Excerpt: Ajax † 近頃話題の Ajax (Asynchronous JavaScript + XML)。JavaScript の XMLHttpR...
Weblog: PukiWiki/TrackBack 0.1
Tracked: March 21, 2005 07:26 AM
メモ/その他
Excerpt: 索引 † 索引 本 プログラム関係 小説 その他 DVD-VIDEO ゲーム ソフトウェア ...
Weblog: PukiWiki/TrackBack 0.2
Tracked: April 1, 2005 05:41 PM
AJAXとGoogleMaps
Excerpt: GoogleMapsがアツい。 何がアツいって、 『Satellite(衛星写真)』がアツい。 まだ詳細情報が揃っているのは、 アメリカの主要都...
Weblog: Ring-A-Ding
Tracked: April 14, 2005 11:08 AM
Amazonのデータを検索するサンプルを作ってます
Excerpt: オンライン書店として有名なAmazonのデータを検索できるサンプルを作成していま
Weblog: MAKOTO3.NET Blog
Tracked: May 5, 2005 01:27 AM
Ajax
Excerpt:

Ajax
http://naoya.dyndns.org/~naoya/mt/archives/001610.html


Weblog: Ridicuaous Nonsense
Tracked: May 9, 2005 04:20 PM
検索技術の調査メモページ
Excerpt: 検索技術の調査メモ 検索技術の調査メモ 目的 対象 Yahoo Google goo はてな AskJeeves MonDo NII 調...
Weblog: PukiWiki/TrackBack 0.1
Tracked: May 16, 2005 11:54 AM
最近流行りのAjax
Excerpt: サーバサイドJavaとの連帯を提供するAjaxツール - DWR 0.6公開 ...
Weblog: Exist a Reason
Tracked: May 23, 2005 03:43 PM
Find Something Good作成時に参考になったサイト一覧
Excerpt: を忘れないうちにメモしておきます。 ちなみに、このサイト「Find Someth...
Weblog: Digital Life Innovator
Tracked: June 28, 2005 12:25 AM
AJAX
Excerpt: 名前をもつことによって名前自体が運搬される。 名前と実体がともに運搬される場合もあれば、名前だけの場合もある。 実体が無いか、あるいは隠蔽されているのに...
Weblog: カモシカあいらんど
Tracked: August 13, 2005 11:36 AM
コメント [2件]

はじめまして。
MSXML3.0でXMLHttpRequestなことをしていますが、こちらはPOSTもできます。
データをXMLでやりとりしてクライアント側でDOMでほげる、XSLTで変換とか、
変換したものをinnerHTMLで流し込むとかという利用をしています。
※MSXMLなのでIEに限定されている(?)のがアレですが。

結構前からサポートされているのでMSDNあたりとかを漁ると意外といいネタがあるかも?

[1] Posted by: ramsn at March 1, 2005 01:01 AM [返信]

サーバ側からJASONでデータ出力して、TrimPathのJavascriptTemplatesで処理すると、すっきり書けますね。
http://www.crockford.com/JSON/

[2] Posted by: Anonymous at March 5, 2005 12:42 AM [返信]
コメントする









名前、アドレスを登録しますか?