iPhone向けAmazon検索アプリ

作った JavaScript iPhone Yahoo!Pipes

せっかくiPhone買ったので、アプリを作ってみた。...と言ってもApp Store用のネイティブアプリではなくて、Safari上で動くWebアプリ。JavaScript盛りだくさん。

Webアプリではあるけど、JavaScriptで作ったのでサーバサイドの処理は何もないよ(ただしYahoo! Pipes使ってる。後述)。

Amazon検索

今回作ったものは以下。

iPhone向けだけど、普通にFirefoxやSafariからも使えると思う。IEやOperaはダメっぽい。

使い方は簡単。

まず最初の画面は上記のような感じ。

ここにキーワードを入れて、カテゴリを選び、「検索」ボタンをタップ。

検索結果が出る。もちろん指でスクロール可能。

検索結果をタップすれば、すぐ下にAmazonのモバイル版のページが表示される(もう一度タップすれば消える)。検索結果のリストはそのまま残るので、スクロールさせれば他の検索結果も見れる。

使いどころ

例えば、本屋さんで本を買おうと思ったら、タイトルはわかるけど出版社や著者がわからないとき。大抵の本屋さんは出版社や著者で分類されているので、タイトルだけでは探すのも大変。そんなとき、サッとiPhoneを取り出して、サクっと本の情報を検索できる。

他にも、価格を調べたいときとか、レビューを読みたいときなど、いろいろ使えると思う。

仕組み

作ったのは2つ。

Amazon Web サービスをJSONPで呼び出せるようにしたYahoo! Pipes

Amazonの検索エンジンとして「Amazon Web サービス(AWS)」を利用してる。Amazonが提供する、いわゆるWeb API。欲しい情報の条件でURLを作ってAmazonにリクエストすると、情報が記載されたxmlが返される。あとはこのxmlを好きに使ってアプリを作れるよ、というもの。

しかし、今回はサーバサイドのプログラムは作らない予定。htmlとJavaScriptだけで検索させたい。つまり、こういうWeb APIの呼び出しにはJSONPを使うことになる。

現在のところ、AWSはxmlしか返してくれないので、このままでは利用できない。JSONPで欲しい。

そこでYahoo! Pipesの登場。これはYahoo.comが提供するサービスで、フィードやxmlやJSONを入力して、好きにいじって、フィードやxmlやJSONで出力するツール。Plaggerみたいなものだけど、ルールをGUIで簡単に作れて、作ったものをそのままYahoo.comがホスティングしてくれるというのが特徴。

今回のために以下のようなYahoo! Pipesを作った。

必要なパラメータを受け取って、内部でURLを組み立ててAWSにリクエストし、取得したxmlをそのまま出力する。「そのまま出力する」とは言うけども、Yahoo! Pipesの機能によってJSONやJSONPでの取得も可能になる。つまり、xml→JSONPの変換のためのYahoo! Pipesというわけ。

実際には以下のようにして作った。

こうしてGUIだけで作れるのは面白いなあ。

amazon_search.html

あとは、上記のYahoo! Pipesを呼び出すようなWebページを作る。htmlとJavaScriptとcssしか使ってない。1ファイルにすべて書いてある。何をどうやっているかは、ソースを見ればすべて書いてある。

いくつか機能ごとにクラスにしているので、このまま他のものを開発するときにも使えると思う。ポイントになりそうな所を挙げておく。

  • Templateクラスは、簡易テンプレートエンジン。textareaにhtmlのテンプレートを持って、textareaのidとオブジェクトを渡すと、テンプレートに動的な値を埋め込んで文字列で返す。livedoor Readerがたぶんこのやり方だったと思うので、マネしてみた。
  • JSONPクラスは、その名の通りJSONP呼び出し機能。URLとコールバック関数を渡してloadメソッドを呼んで使う。URLごとに結果をキャッシュしたりしてる。渡すURLは"callback="のところで終わるようにしておいて、コールバック関数名だけ内部で追加するようにしている。
  • Amazonクラスは、AWS呼び出し部分をまとめている。必要なパラメータを受け取り、内部でURLを組み立ててJSONPクラスに渡す。今回は検索機能しか使ってないけど、ASINを元に商品の詳細を取ってくるメソッドも実は作った。
  • SearchFormクラスとListFormクラスは、画面。それぞれ検索画面と検索結果画面。newして、必要なパラメータを渡して、goメソッドを呼ぶとその画面を表示する。これをクラスにまとめたことで前の画面に戻る処理が簡単になった。

iPhone向けのデザイン

画面デザインは結構適当。iPhoneに最初から入ってるアプリとかを参考にしつつも、画像を一切使わない(Amazonの商品の写真は別として)ようにするなど軽快さも一応重視した。

あと、GmailのiPhone版のソースを見てみたら、

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

こういうのが入っていて、縦スクロールしかしない(拡大や横スクロールが無い)ようになっていた。縦にリストを並べるだけのアプリはこういう操作感がしっくり来るので、マネした。

まとめ

この3連休、ドラクエばっかりやってたワケじゃないんだよ、ということを言っておきたかった。

ドラゴンクエストV 天空の花嫁

ドラゴンクエストV 天空の花嫁

追記(2008.8.29)

Amazon.co.jpが公式にiPhone向けのサイトをオープンした。

普通にiPhoneからhttp://www.amazon.co.jp/にアクセスするだけで見れるし、使い勝手もちょっと重いけどなかなかいい。もう自分が作ったやつはいらないと思う。