たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

カーセンサーAPIをいじってみた2

icon July 11, 2006 9:41 AM by yuugo このエントリーを含むはてなブックマーク

山本ゆうごです。

カーセンサーAPIをいじる続きです。今回はUIも作ってみました。

使い方

カーセンサーAPIパラパラテストを開いてください。検索キーワードに何か入れてしばらくすると、検索結果が返ってきます。写真の上でマウスホイールを回すと写真がパラパラ切り替わります。(7.22 矢印キーの←と→でもめくれるようにしました)

フリーワード検索なので、「赤レザー」とか「レガシー 白」なんてキーワードでどんどん帰ってきます。

APIで一度に返してくれるのは49件までなので、帰ってきた49件の中での写真を表示しています。(7.22 50件が正しいので50件に直しました)

ブラウザ上に大きな写真のキャッシュを大量に作るので、太い回線と速いマシンでないと厳しいです。IE6とFirefox1.5で動作確認をしています。

仕組み

  1. JavaScriptがcgiに要求を出します
  2. cgiはカーセンサーAPIに要求を出します
  3. cgiはカーセンサーAPIが返してきたXMLをJSON形式に変換します
  4. ブラウザ上のJavaScriptはJSONを受け取り、JavaScriptオブジェクトツリーに変換します
  5. JavaScriptが写真のURLをImageオブジェクトにどんどんキャッシュします
  6. IMGタグのホイールイベントで画像を切り替える

サーバ側ソース

#!/usr/bin/perl -w
use CGI::Carp qw(fatalsToBrowser);
use strict;
use XML::TreePP;
use JSON;

my $tpp = XML::TreePP->new(force_array => [ "used_car","other"]);
my $tree = $tpp->parsehttp("GET","http://www.carsensorlab.net/webapi/V1/usedCarSearch/?" . $ENV{"QUERY_STRING"});

my $js = objToJson($tree);

print "Content-Type: text/plain; charset=utf-8\n\n";
print $js;
すごくシンプルです。要求のあったクエリストリングをそのまま素通しでカーセンサーAPIに渡しているだけです。

XML:TreePPを使っているのは、PurePerlなのでインストールが楽(見えるところに置くだけでもいい)のと、PurePerlなのに速いというところです。XML系モジュールではこれが一番だと思います。 ブラウザ上でテストをしやすくするために、Content-Typeをtext/plainにしていますが、本当はtext/javascriptの方がいいはずです。

UIの可能性

テスト的に作っていますが、普通はコレくらいの大きな写真というのは、サイトの一番深いところにあって、最後に見れるというのが多いです。少なくとも一覧では小さな写真でクリックすると大きくなる、大きくしたり閉じたりとツリーの枝と幹を行ったりきたりしている。そうじゃなくて、雑誌を眺めるように「直線的に」みたいなぁという気持ちがあって、このパラパラのUIを作ってみました。

COMMENTS

カーセンサーラボのtです。

APIいじって頂きありがとうございます。
今回のUIはラボで提供しています画像検索に近い形になっていますね。(ホイールイベントまで^^;)

マッシュアップして頂く皆様には更に面白いサイトを
期待しています。

~~
APIの返却件数ですが49件ではなく50件です。
これはリファレンスの方が間違っておりました。
記事読んで気付きました。ありがとうございます。

本日、中古車検索のパラメータも増やしましたので
利用してみてください。

July 11, 2006 2:04 PM by t@carsensorlab  

触っていただいてありがとうございます。

・50件に直しました
・あと、ホイールがない人のために矢印キー(←→)でもめくれるようにしました。

July 22, 2006 11:55 AM by 山本ゆうご  

POST COMMENT




(書式を変更するような一部のHTMLタグを使うことができます)

必ず利用規約に同意いただいた上で送信ください。

ページトップへ



(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.