Yahoo!ショッピングの商品検索するウィジェット jQuery Yahoo ShoppingSearch

 今回はYahoo!ショッピングの商品一覧を表示するウィジェットです。楽天バージョンと同じく入力したキーワードで商品検索を行い、ヒットした内容を表示します。 これはjQueryのプラグインとして動作します。
Yahoo ShoppingSearch

デモページ
アフィリエイトでも稼げる! Yahoo!ショッピング検索ウィジェット

ダウンロードページ

<最新バージョン>
JavaScript バージョン0.1CSS バージョン0.1
 jQueryプラグイン ⇒Yahoo ShoppingSearch.js(ベータ版ver 0.1 13KB)
 CSSファイル ⇒Yahoo ShoppingSearch.cssver 0.1 3KB)
 
サイドバー用JavaScriptCSS
 jQueryプラグイン ⇒Yahoo ShoppingSearch Sidebar.js
 CSSファイル ⇒Yahoo ShoppingSearch Sidebar.css

まずは前準備

 このプラグインはjQueryの最新バージョン1.4以上を必要とします。jQueryライブラリはこちらのページでダウンロードできますが、 デモページではGoogle Libraries APIを利用しています。 今回呼び出すライブラリはjQueryjQuery UIの二つです。

HEADタグ内の記述例

ライブラリに続けてYahoo ShoppingSearchのJavaScriptファイルをscriptタグに記述します。

 CSSファイルは好きなテーマのjQuery UIセットと、Yahoo ShoppingSearchのCSSファイルをインクルードします。 このときjQuery UIのCSSファイルと画像フォルダをサイト上にアップする必要がありますが、 ファイル内容を特に変更しないならば次の例のようにGoogle Libraries APIを利用する方が手軽です。
次のURLのjqueryui/の後にバージョンの数値、themes/の後にテーマ名を入れるだけです。画像フォルダの用意はいりません。
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css
使用可能なテーマは、base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vaderなどです。
参考サイトjQuery UI Blog

ウィジェットの設置方法

 上記の準備ができたら、body要素の終了タグ直線などに次のような短いスクリプトを書きます。

 jQueryオブジェクトの代わりにショートカットの$を使用できます。この例では、 ウィジェットが初期化された際にドラえもんキャラクターグッズという単語で商品を検索し、 ID名がshopping_boxという要素内に結果を最大10件まで表示します。キーワードはウィジェットを設定したページ内容に関連したものにすると効果的です。 最後の引数に渡した文字列はYahoo!デベロッパーネットワークアプリケーションIDです。サイト内でYahoo!ショッピングAPIを使用するために必要なので、 引数の最後に必ず指定してください。

 オプションとして、最後の引数にハッシュを渡すことができます。affiliateIdプロパティはYahoo!のアフィリエイトIDかバリューコマースアフィリエイトIDを取得しているときに指定します。 このプロパティを指定すると、紹介した商品が購入されたとき成果報酬が支払われます。Yahoo!アフィリエイトについて詳しくはこちらをご覧ください。
affiliateTypeプロパティは利用するアフィリエイトを指定します。Yahoo!アフィリエイトはyid、バリューコマースアフィリエイトはvcです。デフォルトはyidです。 sizeプロパティは一度に表示する商品の数を指定します。初期値は10で最大値が50です。検索にヒットした商品が多いと表示まで時間がかかることがあります。
sortプロパティは商品をソートする基準を指定します。初期値は"-score"おすすめ順(降順)です。 詳細はYahoo!ショッピング商品検索APIのリクエストパラメータの項をご覧ください。
categoryIdプロパティは検索範囲をカテゴリで指定します。初期値は1(全商品)です。カテゴリ毎のIDはこちらのサイトが参考になります。
baseFontSizeはウィジェットの基準となるフォントサイズを指定します。初期値は12pxです。 defaultKeywordsは配列形式です。デフォルトで検索ワードに入れておきたい単語を配列にして入れます。 Yahoo ShoppingSearch.js177行目あたりにデフォルトオプションの記述があり、 始めから"ファッション"、"腕時計"、"DVD"、"ゲーム"が登録されているので、この部分は自由に好きな単語に変えてください。

 ウィジェットを埋め込む箇所に記述するタグは次のようになります。ID属性名は自由ですが、スクリプトのjQueryオブジェクトに渡すものと必ず同じにしてください。

アフィリエイトが関係するので一応利用規約を作っておきます。
・このウィジェットを利用するにはYahoo!デベロッパーネットワークのアプリケーションIDが必要です。
・アフィリエイトを利用するにはYahoo! JAPAN IDが必要です。
・アフィリエイトIDを指定すると、商品のリンクは常にそのアフィリエイトIDを経由して作られます。
・Yahoo!ショッピングの送料に「条件付き無料」という区分がありますが、文字数の関係で「送料別」に分類しています。
・短時間に大量のアクセスがかかると、一定時間利用できなくなる場合があります。
・Yahoo!ショッピングのサーバー状況によって、リクエストに不具合を生じる場合があります。
・このプラグインはYahoo!ショッピングのAPIに依存しています。将来的にYahoo!ショッピングがAPIの一部を変更もしくは終了する可能性があり、 その際にウィジェットが正常に動作しなくなる場合があります。
・このウィジェットを利用したことにより生じるいかなる損害に関して管理人は責任を負いかねます。

バージョン情報

2011/08/29 ver 0.1
ベータ版最初バージョン。

※このプラグインはまだ開発中のベータ版です。不具合等ありましたら、ブログコメントやメール等でお知らせください。

動作確認: Firefox6.0 Chrome14.0beta IE7-9