Amazon 商品をJavaScriptでこじんまり表示テスト

 

powered by Amazon.co.jp


検索

なんとなく、XML、XSLのイメージが分かってくると、もっと変わった使い方ができないだろうかと欲がでてくる。

ということで、スピリッツオブゼロ@blogさんとこで紹介されている、JavaScriptを併用したRESTでの表示を実習してみた。

前置き (すっとばしてください)

アフィリエイトをするしない関係なく、Amazonアソシエイト系のネタを通じてXML、XSLで何ができるかを学習するのは非常に便利。Amazonが公開しているソースを利用して、たくさんの人がさまざまなプログラムやスクリプトを紹介しているから、それらを実際に試しながら実習もできる。あとは、どのようにXMLで遊びたいかというアイデアに沿ったスクリプトを探していけばいい。

旧スクリプト遊びでXML、XSL理解の備忘録で書いたように、とにかくシンプルでどんなことができるのかを実習できるようになることで、次のステップへも移り易いようだ。cgiやphpといったスクリプトを少しいじれるようになったのも似たような感覚。すごくかっこいい掲示板をみて、こういうの設置したいなぁと思いスクリプトをダウンロードしてみたものの、動かない。かといって、フルコースでcgiやらphpを学習するほどの気力もない。あるのは、設置したいという気持ちだけ。ということで、おもいきりシンプルな掲示板の設置をまず成功させたところからはじまった。

設置に成功したシンプルなスクリプトは、比較的ファイルサイズが小さい。HTMLタグなどを覚えた時のように、ソースをながめていくと、よく目にする文字(めっちゃしろうとな書き方)やパターンとかが、気になってくる。どういう働きをするとかしないとかというのはおいといて、目になじんできた部分をどうするかというと、検索エンジンで行単位とかで検索する。

すると、結構その文字列を説明したページがみつかったり、あるいは、その部分をつかった別のスクリプトがみつかったりする。

設置に成功したスクリプトをいくつかみくらべていくと、プログラマーでないから細かいところや完璧なロジックは頭にはいらないけれど、イメージ的な理解が実習経験でついてくるようだ。そんな感じで、いくつかスクリプトをみていくと、どこをどういじるとこちらの好みにあったカスタマイズができるのか、ヒントとなるキーワードをいくつか覚えていくので、あとは、必要に応じてヒント・キーワードで取り込みたいスクリプトや機能を検索していくことになる。

どうしようもなく横着な、でもゲーム感覚なスクリプトいじりである、ということだから、まじめに学習したい人にとっては邪道であるかも知れない。

で、

時折、成功したことや覚えたことをメモることにしている。

と前置きが長くなったけれど、JavaScriptを使ってAmazonの検索結果をこじんまり表示させる方法が、スピリッツオブゼロ@blogさんとこで解説、紹介されている。

一瞥すると、すごく設置が簡単そうにみえるけれど、実際に設置できるかどうかは別問題だから、さっそく実習してみた。

aws2javascript.zip をダウンロードして解凍したあと、no image画像をアップロードし、画像へのURLをaws2j_img.xslの設定URLに置き換えた。

画像URLほかを設定したaws2j_img.xslをサーバーにアップ。

<script type="text/javascript" src="【Amazonの呼び出しURI】" charset="UTF-8"></script> の【Amazonの呼び出しURI】の箇所に、

http://xml-jp.amznxslt.com/onca/xml3?KeywordSearch=ブログ&mode=books-jp&dev-t=[デベロッパ・トークン or SubscriptionId]&t=[アソシエイトID]&locale=jp&type=lite&f=aws2js_img.xsl

とスプリッツオブゼロさんとこで列挙されている各エレメントをつなげた形で、置き換えた。

けど、キーワードの設定か、エンコードの設定か(このページ自体はUTF-8なのが原因なのか)、すっとうまく表示できなかったので、Browse Node Search(Nodeは、こちらで丁寧にまとめられている)で、本のベストセラーを表示してみた。

<script type="text/javascript" src="http://xml-jp.amznxslt.com/onca/xml3??BrowseNodeSearch=465610&mode=books-jp&dev-t=[デベロッパ・トークン or SubscriptionId]&t=[アソシエイトID]&locale=jp&type=lite&f=http://page.freett.com/ven/scripts/aws2js_img.xsl&n=7" charset="UTF-8"></script>

* もうすぐ7月だし、n=7で、7件表示にした。

こんな感じ (Browse Node Search)

検索結果 (Keyword Search)での表示に再挑戦。

こんな感じ (Keyword Search)

今度はうまくいった。

あとは、cssとかで表示スタイルをかえるといいみたい。(css、これもおもしろいんだけど、なかなかなじめない)

あるいは、XSLのほうをいじるかして、「こじんまり」表示にする。

このやりかたをFC2ブログで試してみた。=> この記事の箇所

スペースの関係だろうか、ちょっとぎざぎざ表示になったけど、それなりにこじんまりしてくれている。

[追記] (2005.7.2)

表示させるページのほうで、<script ...></script> を <table style=...></table> (かなりはしょった書き方)で表示をコンパクトにまとめる方法も試してみた。=> このページの右側下部分

あと、xslをいじることで、下のような形にしてみた。商品のタイトル部分は、画像にマウスをのっけると、ポップアップする形。

 


おすすめページ:

MAKOTO3.NET : AjaxやAmazon Webサービスを知るための個人的な練習サンプル、というページで紹介されている例はすごい。

RSSフィードをウェッブページに埋め込む方法
クライアントサイトでのRSS直接処理という箇所で、外部JavaScriptとxslのサンプルをダウンロードできる。


rookie 検索 旧スクリプト遊び アマゾン|めっけもん