Amazon最速検索 説明書
デモ兼ダウンロード
特徴
- JavaScriptだけで動いています。
- サーバーサイド処理は一切ありません。Amazonと直結です。
- ローカルディスクに保存してもそのまま動きます。
- だからどうしたという話ではありますが、面白いのはそこです。理解しろ。
- Safariでは動きません
使い方
- 単語入れて検索。
- 続きがある場合は、続けてエンターを押すと、次の10件を読み込む。
動作の仕組み
簡単に書くと、検索実行されるたびにscriptタグを動的生成してAmazonウェブサービスにリクエストを発行、Amazonの側でXSLTによって生成されたJavaScriptのコードを実行して画面に検索結果を追加しています。
ただし、Amazonの側では単純なデータを返すのみで、実際の画面の制御は全て本体HTML側のJavaScriptに記述しています。
JavaScriptの知識があれば、本体HTMLを改造するだけで自在に表示をカスタマイズすることが出来るようになります。
- リクエスト
- 検索を実行すると、色々準備した上でscriptタグを動的に生成します。
- 例えば「Amazon」で検索した場合は
<script src="http://xml-jp.amznxslt.com/onca/xml3?t=mala-22&dev-t=1FFTKYMPDM6FZH782202&KeywordSearch=Amazon&mode=books-jp&type=lite&page=1&f=http://la.ma.la/misc/aws/aws2json.xsl&locale=jp"></script>
といったタグを追加します。
- Amazonによる検索
- scriptタグの追加によって、ブラウザからAWSに対してRESTインターフェースによってアクセスします。
- XSLを指定しない場合の素の状態のレスポンス(XML形式)はこんな感じになります。
- XSLTによってXMLをJSONに変換する
- 変換された結果(JSON)はこんな感じになります。
- あらかじめ本体htmlの側で宣言されている
AWS3という連想配列に対して、AWS3["books-jp_Amazon_1"] = {total:18,items:[item,item,item]}といった具合に検索結果を追加しています。
- 連想配列のキーは、「検索の種類_検索語句_ページ番号」です。
- scriptのロード完了と画面描画
- レスポンスの最後に
if(AWS3["books-jp_Amazon_1_onload"]){ AWS3["books-jp_Amazon_1_onload"](AWS3["books-jp_Amazon_1"]) } というコードが加えられています。
AWS3["books-jp_Amazon_1_onload"]はロード完了のトリガーとなる関数で、リクエストの前に本体htmlの側で作成されています。
- で、読み込まれたAWS3["books-jp_Amazon_1"]の中身をJavaScriptを使ってHTMLに出力します。
- 後はDOM操作とかイベント処理とか、いわゆる普通のダイナミックHTML的なテクニックです。
XSLはこんな感じ
- Amazon ECS3から、JSONに変換しているXSL
- http://la.ma.la/misc/aws/aws2json.xsl
ECS4用のも気が向いたら作る。
- 変換例はこちら
- http://xml-jp.amznxslt.com/onca/xml3?t=mala-22&dev-t=1FFTKYMPDM6FZH782202&KeywordSearch=Amazon&mode=books-jp&type=lite&page=1&f=http://la.ma.la/misc/aws/aws2json.xsl&locale=jp
任意のxslファイルを指定することで、レスポンスを自由に加工することが出来ます。HTMLに変換するサンプルなど、検索すれば割と見つかるので省略。
プロパティが長くて覚えにくいので、RSS2.0風にしてわかりやすくしようとしたらかえってわかりづらいという話ではある。
著作権
Artistic Licenseとします。
Amazon saisoku kensaku produced by ma.la