星5つ！ 評価を表示・入力できるスター表示プラグインRateIt

「jQuery プラグイン」の利用（27）

利用例：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メソッド・イベントを備え、利用目的に応じた幅広いカスタマイズが可能な点も魅力です。

参考資料

• RateIt