ならべて選べる、新感覚グルメ情報サイト『食べならべ.com』
January 12, 2007 2:00 AM written by Gen Taguchi

先日の開発合宿の成果をようやくリリース。

価格.comとYahoo! JAPANのAPIを使ったグルメ情報サイトです。

tabenarabe.gif

↑ 新感覚(?)グルメ情報サイトを作りました。APIの勉強でw。

よく店を選ぶときに選択肢をたくさんタブブラウザで開いて、「これよりこれの方がいいな・・・今のところこれがベスト。これはないな、消しちゃおう・・・」みたいなことをしますよね(しません?)。

そこでその作業をカード型のインターフェースでできるようにしました。Ajax使ってぐりぐりです。

以下、詳しい使い方。

まずは最寄り駅にて検索します。

tabenarabe_input.gif

するとずらずらとお店が並びます。tabelogで評価の高いものから最大20件並びます。結果は24時間キャッシュしていますが、最初はちょっと時間がかかるかもです。あとAPIのエラーもたまに起こります・・・。

tabenarabe_cards.gif

見ていていらないものは消しちゃいましょう(「今日は中華って気分じゃないな」とか)。すーっと消えていきます(無駄にビジュアル効果使ってみた)。

tabenarabe_del.gif

気になるお店は詳細情報を調べることもできます。tabelogのページが開きますので口コミ情報や地図をチェックしましょう。詳細情報のウィンドウは別ウィンドウで開くこともできますよ。

tabenarabe_details.gif

こりゃいいな、と思えるものはどんどん上に持って行きましょう。マウスでドラッグ可能です。

tabenarabe_sort.gif

・・・えーと、それだけです。ならべるだけのアプリです。

本当はならべたものにコメントつけて友達に転送とかできればいいかもしれませんが・・・ちょっと後日の課題とさせてください。

なお、技術的に工夫したところ他を羅列しておこうかな。

  • キャッシュを使用。一度検索されたページは24時間有効。pearのcache_lite便利。
  • カードの上にマウスを持っていくと「手のカタチ」になるようにして直感的に操作しやすいように(thanks to Funaki-kun)。
  • カードの写真は「(お店の名前)(駅名)」で画像検索。トップに来た画像を縮小して表示しています。
  • カードは店の名前が長くなりすぎて整列がずれてしまわないように半角カナに変換し、さらに一定文字数を超えたら「...」で省略するようにしています。
  • PHP5を利用。simplexmlがちょー便利。DBは使っていません。Ajax系の処理はprototype.js + script.aculo.us。
  • 構想60分。制作時間は正味12時間ぐらいですかね・・・もちょっとかかったかな。
  • なお、たまにAPIがタイムアウトしますのでご了承ください・・・。
  • 最後まで決まらなかったドメインはジュンヤさんの鶴の一声で決定!気に入っています。ありがとうございました!

自分がよく行くエリアをたまに検索したりしますが、意外に知らないお店があったりして結構使えますよ。よろしければどうぞ。

» 食べならべ.com - ならべて選ぶ、新感覚グルメ情報サイト

この記事のトラックバックURL (トラックバックは承認後に公開されます)

食べならべ.com: 食べログAPIマッシュアップサイト

食べログAPIを使ったサイトを紹介。 食べならべ.com - ならべて選ぶ、新感覚グルメ情報サイト! よく店を選ぶときに選択肢をたくさんタブブラウザで開い...

食べならべ.com: 食べログAPIマッシュアップサイト

using API; | 2007年01月12日 08:26

飲食店を並べて選ぶ「食べならべ.com」

ならべて選べる、新感覚グルメ情報サイト『食べならべ.com』というエントリーより。 よく店を選ぶときに選択肢をたくさんタブブラウザで開いて、「これよりこれ...

飲食店を並べて選ぶ「食べならべ.com」

[N] | 2007年01月12日 12:29

食べログAPIを使った「食べならべ.com」

なんとなくニュース回りをうろうろしていたら、「食べならべ.com」に行き当たりました。なんかオモシロそうと思って見てみたら、時々おじゃまするIDEA*ID...

食べログAPIを使った「食べならべ.com」

ニュースブログ | 2007年01月12日 15:35

複数のマーカーを自由に動かして検索する「飲食店検索 - この辺とかこの辺とか」

今回は、食べログ.com APIとGoogle Maps APIをマッシュアップした飲食店検索サイトです。 よくある飲食店検索が「ひとつの場所しか指定で...

複数のマーカーを自由に動かして検索する「飲食店検索 - この辺とかこの辺とか」

F.Ko-Jiの「一秒後は未来」 | 2007年01月13日 14:34

並べて選ぶ、新感覚のグルメ店検索?「食べならべ.com」

「食べならべ.com」って、「食べログ」のマッシュアップサイトなんすけど、実に...

並べて選ぶ、新感覚のグルメ店検索?「食べならべ.com」

nOObs | 2007年01月14日 04:54

街で見かけた笑える海賊版のロゴいろいろ

自分に自信をもちたいです。 何故かそんな風に考えます...

街で見かけた笑える海賊版のロゴいろいろ

ラグタイム | 2007年01月21日 23:49

コメント一覧

「たべならべ」おもしろかったです。
結構便利そうだし。

惜しむらくは、Opera(私のメインブラウザ)でちょっと表示が崩れることですかね。
(詳しく見る)をクリックした後...

by junichiro | 2007年01月12日 10:24

すごい!!

by mina | 2007年01月12日 17:52

「たべならべ.com」面白いですね!

ユーザビリティで、気になったことをいくつかあげさせていただきます。。
・「消去」をクリックして、やっぱりやめたーとマウスを動かして抜けようとすると、カードの移動。そして、マウスを放すとカードが移動されたあとに消えてしまいます。
・カードが消える時間が、半分くらいでもよいかも・・。

by よしひで | 2007年01月12日 20:12

特に便利だとは思いませんでした。
ユーザーが利用するメリットを感じられませんでした。

by たも | 2007年01月13日 17:54

お店のジャンル等が色分けされてたりすると、解り易いかも。
価格帯なども視覚化して、100個位並べられれば、地域ごとの料理屋の傾向とかも把握できて、面白いかもですね。

by kim | 2007年01月16日 12:17

operaだともっと詳しくwindowが閉じれなかった。

by 通りすがり | 2007年12月07日 18:34

コメント投稿 (コメントは承認後に公開されます)

名前
メールアドレス (表示されませんのでご安心を)
URL
情報保存?
コメント
あわせて読みたい

クリエイティブ・コモンズ・ライセンス

ユーザビリティ向上支援ビービット
Usability tested by BeBit

タブブラウザ Sleipnir 公式ページ(上級者向け)

Powered by
MovableType 3.33-ja

人気ブログランキング - idea*idea
ワード
www.flickr.com
This is a Flickr badge showing photos in a set called 自炊生活. Make your own badge here.