利用例：Web APIから商品の評価を取得して表示
最後により実践的なサンプルとして、Yahoo! JAPANが提供する「Yahoo!ショッピングWeb API」で取得した商品の評価（レビュー平均）をRateItで表示する例を紹介します。Web APIはjQueryのajaxメソッドでリスト6のように呼び出します。ここで変数appidはAPIを呼び出すために必要となるアプリケーションIDで、Yahoo!デベロッパーネットワークで取得できます。queryは画面で入力された検索文字列です。
リスト6 Web APIで商品情報を検索（006_RateIt_6.html）
var ajax = $.ajax(
"http://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch",
{
type: "POST",
cache: false,
dataType: "jsonp",
data: {
appid: appid, // アプリケーションID
query: query // 検索文字列
}
}
);
APIから検索結果が取得できた時の処理はリスト7のようになります。
リスト7 商品情報の検索結果をWebページに表示する処理（006_RateIt_6.html）
// API成功時の処理
ajax.done(function(data, textStatus, jqXHR){
// 検索結果表示欄をクリア
searchResult.html("");
// 検索結果と結果数を取得 ...（1）
var result = data["ResultSet"]["0"]["Result"];
var resultCount = data["ResultSet"]["totalResultsReturned"];
// 検索結果を出力
for (var i = 0; i < resultCount; i++) {
// 検索結果から商品情報を取り出し ...（2）
var elem = result[String(i)];
var imageUrl = elem.Image.Small; // 画像URL
var prodUrl = elem.Url; // 商品URL
var prodName = elem.Name; // 商品名
var prodRate = elem.Review.Rate // レビュー平均
// RateItを設定するdiv要素のID
var rateItId = "rateit" + i;
// 検索結果のHTMLを出力 ...（3）
var appendElem =
"<div>"
+ " <div class='photo-and-rate'>"
+ " <img src='" + imageUrl + "' class='thumb' /><br/>"
+ " <div id='" + rateItId + "' />" // RateItのdiv要素 ...（4）
+ " <br/>" + prodRate
+ " </div>"
+ " <a href='" + prodUrl + "'>" + prodName + "</a>"
+ "</div>"
+ "<div class='separator'/>";
searchResult.append(appendElem);
// RateItを設定 ...（5）
$("#" + rateItId).rateit({
value: prodRate,
readonly: true
});
}
});
APIの戻り値はJavaScriptオブジェクトdataに格納されるため、（1）の処理でdataから検索結果resultとその個数resultCountを取得します。（2）で検索結果から商品情報を取り出し、（3）でHTMLに整形して出力します。このときRateItを設定するdiv要素を（4）で準備しておき、（5）でRateItを用いてレビュー平均の数値を出力しています。
リスト6、リスト7のページで検索を実行すると、商品のレビュー平均がRateItによりスターで表示されます。
図7 製品のレビュー平均をRateItでスター表示（006_RateIt_6.html）
まとめ
本記事では、アプリやサービスなどの評価をスターで表示・入力するUIを実現するjQueryプラグインとしてRateItを紹介しました。このプラグインを使用すれば、ショッピングサイトやレビューサイトで利用者の評価を表すスターのUIを容易に実現できます。CSSによるデザインの変更機能や、各種JavaScriptメソッド・イベントを備え、利用目的に応じた幅広いカスタマイズが可能な点も魅力です。
