月別: 2012年3月

まず、ready() を作成し
検索ボタンがクリックされたら
テキストフィールをの値を引数にして検索を実行
クリアボタンがクリックされたら、div エレメントの内容をクリアするというもの
まず
ready() の中身から
ｓｅａｒｃｈ属性のボタンがクリックされたら
val（）　でテキストフィールドの値を取り出して
それを引数にして searcyh() を呼び出し
ちなみに。ｓｅａｒｃｈ() は自作関数
続いて、クリアボタンがクリックされたら、
empty() を使って
display 属性のついている内容をクリア
さらに
title 属性のついているテキストもクリアする
コードにすると

$(funcrion(){
//検索を実行
$("#search").click(function(){
search($("keyword").val());
});
//検索結果をクリア
$("#clear").click(funcrion(){
$("#display").empty();
$("#title").text("");
});
});

となります
続いて
検索する search() という関数の自作
function search(keyword){
//ローディング中
$(“#title”).text(“Loading …..”);
$.ajax({
dataType:”jsonp”,
data:{
“term”:keyword,
“country”:”jp”,
“media”:”music”,
“entity”:”album”,
“limit”:”10″
},
url: “http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch”,
success: funcrion(data){
$(“#title”).text(“”);
$.each(data.results,function(i, item){
$(““)
.attr(“href”, item.collectionViewUrl)
.appnd(““)
.mouseover(function(){
$(“#title”).text(item.collectionName);
})
.appendTo(“#display”);
});
}
});
}
$(“#title”).text(“Loading …..”);
は読み込み中の時に表示する文字列です
ネット速度が早いとでないかも…
data:{
“term”:keyword,
“country”:”jp”,
“media”:”music”,
“entity”:”album”,
“limit”:”10″
},
は
ｉＴｕｎｅｓ Store　Web API に送信するパラメータの指定です
ちなみに、
term はキーワードですが、これを
keyword という変数にしておくことで
検索キーワードで調べることが可能になっています
このkeyword は
<input type=”text” id=”keyword”>
で得たデータになっています
ちなみに、jsoncallback は指定していないけど
自動的に設定されるので問題無し
url: “http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch”,
は
Web API のURLとなります
最後の
success: funcrion(data){
$(“#title”).text(“”);
$.each(data.results,function(i, item){
$(““)
.attr(“href”, item.collectionViewUrl)
.appnd(““)
.mouseover(function(){
$(“#title”).text(item.collectionName);
})
.appendTo(“#display”);
});
はデータ取得成功のときの処理で
.attr(“href”, item.collectionViewUrl)
はhref 属性を web API へ
.mouseover(function(){
$(“#title”).text(item.collectionName);
はマウスを乗せたときの処理で
これにより　画像にマウスを乗せると
アルバム名が表示されます
ちなみに、iTunes の Web API を使っているため
アルバム画像をクリックすると
iTunes の画面に飛びます
これとアフィリエイトと組み合わせるといろいろとおもしろいことができそうです
iTunes Store Web Service Search API アフィリエイト
と検索すると、ヒントなどがでてきます

Ｗｅb API へのリクエストはこのURLに続いて ? を記述
その後に
パラメータ=値　のペアを & で接続して記述して送信します
構文にすると
http://アドレス?パラメータ１=値１&パラメータ２=値２&パラメータ３=値３
というように書きましたが
さすがにこれだけだとわかりにくいので
実際にパラメータをつけてみました
まず、パラメータの解説です
term
キーワード
country
国コード（jp)
media
（音楽なら music)
entity
(種類　音楽アルバムならalbum)
limit
最大データ数
となります
検索結果はJSON形式なので
これをJSONPにするには
callback=関数名を最後に加えます
ちょっと長いので、数行にわけましたが
実際には1行になります
http://ax.phobos.apple.com.edgesuite.net/
WebObjects/MZStoreServices.woa/wa/
wsSearch
?term=autumn
&limit=5
&country=jp
&media=music
&entity=album
&callback=myFunc
このURLをブラウザでアクセスするとJSONPデータがそのまま表示されます

マッシュアップサイト作成のため、勉強中です
今回の参考書籍は JavaScript & jQueryレッスンブック―最新jQuery対応

今回、使用するのは iTunes Sore内の製品を検索することのできる
iTunes Store Web Service Search API
です
URLは
http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch
Ｗｅb API へのリクエストはこのURLに続いて ? を記述
その後に
パラメータ=値　のペアを & で接続して記述して送信します
構文にすると
http://アドレス?パラメータ１=値１&パラメータ２=値２&パラメータ３=値３
というようになります
この　API　は
WAFL でも紹介されています
http://wafl.net/apis/iTunes+Store+Web+Service+Search+API
iTunes Store Web Service Search API
で検索するといろいろとでてきます
また、 wafl では、マッシュアップサイトも紹介されていますので
スキルアップのためにいろいろと調べるのもおもしろいと思います
例えば、今回の場合ですと
iPhoneアプリ人気ランキング＆使い方
では使用しているAPI、サイトURLが掲載されています
機能ごとのAPIでも検索できます