Amazonのウィッシュリストをサイドバーに(ECS 4.0で)

 (以下の情報。06年3月2日現在、正常に動作してません。05年10月からずっとです。詳細はAmazonのListLookupいまだにダメっぽいから。)
 (といってましたが、06年7月に問題解消されたっぽいです。詳細はAmazon Webサービスのウィッシュリスト情報の取得が復活している
 Amazonのウィッシュリストはけっこう便利。今すぐは買わないけどいつかは買うかも、とか、あとでまたチェックしたくなるかも、っていう商品をがんがんウィッシュリストに入れていく。その中から気に入ったらやっぱり買う、みたいな感じで。
 アメリカなんかだと、ウィッシュリストをメールで友達に送って(こういう機能がAmazonにあるのだ)、「おいらが今欲しいのはこのリストの中にあるから」とか言って、誕生日とかのお祝いや出産祝いとかで、ほんとに欲しいものだけを友達からもらうっていうふうに使ってるらしい。なるほど合理的である。
 じゃあ、ウィッシュリストをBlogで公開するってのもありなのではなかろうか。プレゼントもらいたいってだけでなく、「このblogの中の人はこんなものが欲しいのか」「じゃあ、きっとああいう人なんだろうな」なんて推測ができて、おもしろかったり、逆にいやな感じだったりするわけですが。まあ、プロフィールの一種としての役割も担えるかと。
 ということで、そういうのを実現する方法。
 Windows XP SP2だとブロックされちゃうんで、そこはブロックをOFFにしてください。
 普通にAmazonのウィッシュリストへのリンクを張ったりしてもいいんでしょうが、blogのパーツとして使うには無駄が多すぎる。インラインフレームで表示なんてできるわけもなく。
 ということで、AmazonのE-Commerce Serviceの勉強の成果を発表(あいかわらず無駄な文章が多くてすみませんが)。
 まずはこんな感じ。
 例を新しいウィンドウで開く
 えー、誰かさんのウィッシュリストです。
 でもって。
 これをインラインフレームで表示すると。

 どうでしょうか?
 意味不明の文字の羅列が表示された場合はリロードしてください(これは弱点だなあ)。
 まずは試したいって方は。
 Amazonにサインインした状態でウィッシュリストにてきとーに商品を 追加してください。
 で、次に画面上のリンクから「ウィッシュリスト」のページに行って、「このリストをメールで友達に知らせる」をクリック。
 ここで表示されるページのアドレスをブラウザで確認してください。

http://www.amazon.co.jp/exec/obidos/tg
/registry/registry-share/-/wishlist
/○○○○○○○○○○○○○
/×××-×××××××-×××××××

 っていうふうになってると思います(見やすいようにあえて改行入れてますが、実際は1行)。○や×はユーザーによって違います。
 ここで○の部分(英数字で13桁)をコピーします。これを「リストID」と言います。で、このコピーしたリストIDを、下のフォームに入れてください。あとはOKで新しくウィンhウが開くはず。

リストIDを入力:

 で、新しく開いたウィンドウのURLをコピーして、<iframe>タグかなんかを使ってサイドバーに表示させればよろしいかと思います。ココログなら「マイリスト」を使うことになるでしょう。で、以下がそのタグ。

<iframe src="上で開いたURL" width="150" height="200">&lt/iframe>

 widthが横幅でheightが縦の長さ。とくに横幅は各blogサービスにあわせてください。IEでうまく表示できてもFirefoxで崩れるってこともあるので、ちょっと狭くするのがいいかも。しばらくページの右下あたりにサンプルを載せておこう(追記:現在は倉庫行き)。「frameborder="0"」なんてのをタグ内に入れれば枠もなくなります。数が決まってるならこれもいいかも(クレジットがうざったいですが)。
 さらなるカスタマイズ。一応、今回作ったやつは多少のカスタマイズができるようになってます。
 もう一度、さっき開いたページのURLを見てください(ブラウザだと長すぎて見にくいので、テキストエディタなどに貼り付けたほうがいいかも)
 「&cssfile=○○○」の部分の○○○に自作のスタイルシートを割り当てられるようになってます。絶対パス(http://サーバー名/パス/ファイル名)で指定してください。 
 あと、blogサービスで使っている自作のスタイルシートファイル(.css)を流用したい場合も多いとは思いますが。別にcssファイルを作るのも面倒だし。
 というわけで、既存のblog用cssにこのウィッシュリスト用の設定を加える方法。
 自作スタイルシートに「iwish」っていうクラスを追加すれば、表示される文字列のデザインや背景が変えられます。

.iwish { background-color: #ffffff;
     font-size: x-small;
}
.iwish a { color: #006699;
}

 こんな感じで。例では背景色と文字サイズ、リンクの色を指定してます。
 もちろん、アソシエイトIDもサポートしております(そのまま使っていただくのがありがたいですが)。あとは、ECS 4.0の勉強してる方ならほかのパラメータを変える方法もわかるかと思います。まあ、やってる方は自分でガリガリXLST書いちゃうんでしょうけど。
 MTなんかは専用のプラグインがあるっぽいですが(使ったことない)。まあ、これなら多くのblogサービスで使えるのではないかと。
 問題点など。
 Amazonのサーバー経由でなんか処理してから表示する(?)ため、ページの表示が遅くなってしまうという難点があります(あちゃー)。キャッシュシステムとか作れればいいんだろうけど、そこまではわからないのです。Amazonのサービスが調子悪いことも多いっぽいので、そのときもかっこわるい状態(意味不明の文字の羅列)になるかも。
 あと、画像がない商品の場合、「×」マークがでてきて(IEの場合?)かっこ悪いです。改善方法は調査中。AWS 3.0だと画像が出ないだけで済んだのになあ。
 さらに、最大10件までしか表示できません。いまんとこ。それ以上やる方法も勉強中。それが実現してもiframeで表示するには向かないかも。
 ともかく。CGIなんか使わなくてもこういうのができるのが ECS / AWS の利点ですね。REST/XLSTだけってのがすばらしい。Amazonえらい。
 こちらも、Goodpic.comの金子さんの書いたITmediaの記事を参考にしてやってみました。それに関する本人のblogでのエントリも注目。お世話になります。
 ここまでにいたる試行錯誤とかはここの過去ログの「勉強」カテゴリなんかにあります。
 試してみた方、感想などいただけると幸いです。いまだ勉強の身ゆえ。トラックバック、コメントをお気軽にどうぞ。
(追記 2005.02.03)
 フレーム使うのはスマートではないな。と思ってたら、Javascriptでうまいことできるという話が。Amazon Web Services – XSLTでJavaScriptを吐く 。あーこちらのほうがいいですね。
 Amazonのサーバーが調子悪い場合、XMLの文字列がそのまんま表示されたりするんですが、上記の方法だとそれが表示されないで済むみたいです。すばらしい。で、ページの右下のやつ、それに書き換えてみよう。時間ができたら。XSLTも書き換えが必要になるようなので、時間がかかりそうだ。さらに画像がないやつの対処もされているようです。うむ。
(さらに追記、同日)
 とりあえず、画像がない場合に「×」が出ないように対処。XSLTで。<xsl:if test="">ってのがあるのだな。これを適用。なるほど。いろんなことができそうだ。
(追記 02.06)
 クレジットが長いよ。ということで最小限にしてみる。まあ、これくらいは許してください。とりあえず、これでしばらく。
(追記 03.15)
 なお、Amazon ECSを使ったシステムでは、利用者のプライバシーに関する情報を取得することはできません。また、わたしが上記のスクリプトを使っている人のAmazonのIDを特定するような情報を収集してるようなこともありません(そのようなスクリプトを埋め込んでるってことはないです)。一応、念のため。
(追記 03.22)
 Javascript版を作成。Javascriptが使えるblogサービスならこっちのほうがスマートかも。Amazonのウィッシュリストをサイドバーに(ECS 4.0で)Javascript版
(追記 05.27)
 クレジットの文字がじゃまくさい、ということで、Javascript版と同様、小さい画像アイコンに変更しました。これで使いやすくなるかなあ?
 あと、スクリプト内URLのパラメータで「&AssociateTag=○○」の○○の部分にアソシエイトIDを入れれば、利用者に還元されます。この解説書くの忘れてたよ。
(追記 06/04/13)
 Amazonの不具合で動的に拾って来れないのなら、静的なものでもいいからリンクを作成できればいいじゃないか、という逆転の発想がfun9.netのAmazonのウィッシュリストをブログのサイドバーににあり。こう手もありか。

コメント

タイトルとURLをコピーしました