)jQuery+JSONPで商品検索[jQuery+楽天API#1]これからはjQueryだろーって雰囲気なのでjQuery+楽天ウェブサービスを練習してみます。これまでjQueryのライブラリは使ったことはあっても自分でスクリプトを組んだことがないのでここらで練習しておきます。今回の目標&やりたいことはこれ!楽天商品検索APIを使用(version:2009-02-03)jQueryでAjaxJSONP検索機能はなし用意するファイル・・・index.htmlとjQuery.js最初なのでシンプルなサンプルからいきます!。これをベースに機能を追加していく感じで・・・。jQueryの本体をダウンロードしてindex.htmlに読み込みます。src="jquery.js"></script>ページの読込み時に実行するjQueryお決まりの書式。{}でもいけるみたい。ajax通信をするので「.ajax()」を使います。Library$.ajax({~ここにオプション~});定義したオプションパラメータは次の通り。typeGETかPOSTかを指定。デフォルトがGETなので書かなくてもOK。urlリクエスト先のベースとなるURL。data上のurlで指定したURLの後ろにつけるクエリ。オブジェクト形式で指定します。キーワードに日本語を指定しても内部で変換してくれるのでそのまま日本語OKです。dataType"xml"とか"json"とか、送信するデータの形式。今回は"jsonp"。jsonpコールバック関数のためのパラメータが「callback」以外のときにここで名前を指定できます。success通信が成功したときに実行される関数を指定します。これ以外にもたくさんのパラメータがあるので詳しくはドキュメントを見てください。"GET",通信タイプは"GET"でいきます。なくてもOKですが、練習なので書きます。"http://api.rakuten.co.jp/rws/1.13/json?",APIバージョンによって変わってくる値です。これは2009-02-03の場合です。},送信するクエリです。"keyword"は最近欲しい「電卓」で。ここは「"(ダブルクウォート)」や「,(コンマ)」を忘れがちなので注意ですね。"jsonp",送信するデータ形式はjsonp。"callBack",楽天APIではコールバック関数を指定するパラメータが「callBack」(Bが大文字)となっているのでここで指定しておきます。実際のクエリは「&callBack=(jQueryによって勝手につけられる名前)」になります。}はじめの関数の引数にはJSONデータがはいっています。取得したデータにアクセスするには$.each()関数を使います。技術評論社」によると第1引数には繰り返す対象のオブジェクト、第2引数には繰り返す処理を定義した関数を指定します。この関数にも2つの引数があって、1番目は何番目の要素かを示すインデックス、2番目は要素の値が入るということですが、ふたつめはちょっとわかりません。each()の第1引数に指定したものと同じオブジェクトが入るようです。ここのように「item」とすると商品名の「itemName」にアクセスするときは「item.itemName」となります。これでできたのでとりあえずこのままいきます。説明しなかったそのほかのコードはjQueryの関数をつかって商品名をリスト形式に整形するためのものです。結果はdiv#result内にulリストをつくって出力します。出来上がったサンプルコードを置いておきます。コードを見るモコモコつうしんスコティッシュフォールド「モコ」の日々の様子を写真と動画で紹介してます。ツイートphotograph最近撮った写真たち。LightroomとPhotoshopで加工してます。EOS50D今一番すきなことは愛猫モコの撮影。あとはDIYでいろいろつくったり、20年ぶりのガンプラしたり、ときには山のぼったりしてます。写真はPhotoshopとLightroomでちょこちょこいじってます。