Amazon関連商品をアニメーション表示する「Amazonレーダー」
Amazonの商品ページへアクセスすると「この商品を買った人はこんな商品も買っています」という文章とともに関連する商品の一覧が表示される。同じ趣味を持つユーザーは似た商品を買っていることが多いので、ついつい、「おっ、これも欲しいな!」と目をとめて全力でクリックしてしまう。このように関連でつながっている商品同士を図にできると面白いのではないか?そういったアイデアから生まれたのが「Amazonレーダー」だ。
Amazonレーダーはフラッシュで作られており、関連商品同士が線で結ばれて表示される。中央の商品に関連する商品が周囲に10個表示され、さらに周囲の10商品に関連する商品同士も結ばれる。関連商品の関連度が非常に高いと、線が所狭しと結ばれるのだ。逆に、関連度が低い商品が関連商品の場合は、線の数は少なめになる。
周囲の関連商品を「ダブルクリック」すると、その商品が中心へ移動する。そして、中心となった商品の関連商品が周囲に表示されるという仕組みだ。
■Amazonレーダーを使ってみよう
Amazonでは「この商品を買った人はこんな商品も買っています」というところに関連商品が表示されている。Amazonレーダーでは、関連度の高い商品から10個分をAmazonレーダーに表示している
AmazonAPIを用いて関連する商品同士を線でつないで表示したのがこの「Amazonレーダー」だ。中心の商品に関連する商品が周囲に表示される
商品をダブルクリックするとアニメーションがスタートし……
関連商品だったものが中心の商品となり、関連する商品が再度周囲に表示される。これで関連商品の関連商品を知ることができる。商品のつながりが分かるというわけだ
商品にカーソルを重ねると、詳細情報が表示され、その商品と関連する商品との間の線が強調表示される
商品をシングルクリックすると……
Amazonの商品ページが開くぞ
■Amazonレーダーをブログに貼り付けてみよう!
次の記事では、Amazonレーダーを自分のサイトにも貼り付けられるよう、貼付け用のHTMLタグも提供している。アソシエイトコードも自分のものに変更できるので、ぜひ挑戦してみよう!
→アソシエイトIDも可変! Amazonレーダーをブログに貼り付けよう