昨日のエントリーで少し触れましたけど、本日、アマちぇっきを正式公開しました。
AWS(Amazon Webサービス)のAPIを利用したサイトです。
特徴としては、写真にオンマウスで滑らかにズームイン拡大する商品写真と、購入者のレビュー評価を表示しながら、アマゾンのショッピングを楽しめるサイトになってます。
(アソシエイトIDは、もちろん埋め込んでますけど、たいして収益はないでしょう、多分。)
PHP+javascriptで構築。基本的に、最近本格的に勉強始めたJavaScriptの腕試しのために作ったものです。
JavaScript使ってますんで、オフにしてたら遊べません。(そこのふかわくんとかww)
最初AWSに、価格comAPIから価格比較情報と、Yahoo検索APIからレビューページをマッシュアップさせようと設計してたら、AWSの利用規約に違反しそうなのに気付いて、途中でマッシュアップは断念・・・orz。(なにやらAWS使う場合、アマゾン以外の商用サイトにトラフィック誘導しては駄目らしい。)
アマゾンの商品写真拡大のサイトでは、かん吉さん(http://www.web2-labo.com/)のサイト(http://www.amz360.com/)が有名ですが・・・
全くおんなじにしちゃうのは申し訳ないし、面白くないので、オンマウスで写真がズームイン拡大(だんだん拡大していく)機能を実装しました。
リンク先のプレビュー拡大表示のサービス(http://glance.heartrails.com/、
https://account.snap.com/signup.phpなど)を利用してるサイトとかで、リンク先にオンマウスした時に、ボンっていきなりプレビュー画像が表示されると、ちょっとびっくりする時があります。
面白く便利にはしたいけど、ユーザーさんを驚かせたくはないので、なんとかズームイン拡大を実現したかった。ズーム拡大することで、若干びっくり度が下がるはず。
(もう少し、ゆっくりズーム拡大のほうがいいでしょうか?)
ズームイン拡大の機能、最初javascriptで、「for文+sleep」で実装しようとしたら、なんと、javascriptにはsleep関数がないことが判明。
setInterval()で、他の定義した関数を一定間隔置きに呼び出せるので、こっちで実装しようとしたら、ここでつまずいて、足止めをくらいました。
でも、最終的に解決して動くようになったので良かった。
setInterval()、ちょっと曲者でした・・(って知ってたら当たり前のことなのでしょうけど。)
javascriptのsetInterval()については、今度また備忘録として別エントリーに書きます。
アマちぇっき動作確認済みの環境
・OS: Windows XP
・ブラウザ: IE6、IE7、FireFox2.0、Safari3.1、Opera9.27
Mac、Windows Vistaでは、テストしてません。
時々、ズームイン拡大の機能が、動作不安定になることがあるようです。
あとOpera使ってると、動かないわけじゃないですけど、ちょっと動作がいまいちです。
では、アマちぇっきをどうぞよろしくお願いします。
バグ報告、ご意見・ご感想、「ここ、こうしたほうが良いよ!」などのお声も、お待ちしております。
ズームいいですね~
グンゼのパンツいいなーって見てたら
下の方に
女性用の下着があって
ぶふぁw
笑ってしまいましたw
プレゼント?
そんな人居ません(--
お!なかなか面白いことやってますね。
setInterval()は使ったことがあります。
あれを使ってるのか。なるほど~。
■TAKA SEAくん
いやぁ・・・昔は本屋だったアマゾンも、今じゃ何でも売ってる総合ストアになってるもんね。
オカモトのコンドー○とかまで売ってあるよ(笑い)
■かん吉さん
JavaScript面白いですね~。(って今さら気付きました)
Ajaxも作り方の基本は分かったんで、今度はAjaxアプリ作る予定です。
ミュージックは、アーティストの名前があるといいですね。
カテゴリをクリックした時にデフォルトが何順なのか分かるといいですね。
画像が拡大する際、最終的に右に出てもいいと思いますが、オンマウスの箇所から拡大が始まるといいですね。
拡大画像が消える時も縮んでくれるといいですね。
■あびるさん
ごぶさたしてます、あびるさん。
アドバイスどうも有難うございました。
とりあえず、カテゴリデフォルトの順序表示だけ対応してます。
>拡大画像が消える時も縮んでくれるといいですね。
これは良いアイデアですね。なんか応用すれば、色々面白いものが作れそうな。
■この記事のトラックバックURL:
http://www.mapee.jp/mpe334/mt-tb.cgi/134