クイック スタート: 評価の追加 (HTML)

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

Rating コントロールを使うと、ユーザーは、評価を表すアイコンをクリックして評価を実行できます。このクイック スタートでは、JavaScript を使った Windows ストア アプリに評価コントロールを追加する方法について説明します。

必要条件

WinJS コントロールを使う、JavaScript で開発された基本的な Windows ストア アプリの作成経験が必要です。WinJS のコントロールを使う手順については、「クイック スタート: WinJS コントロールとスタイルの追加」をご覧ください。

評価コントロールの作成

Rating コントロールを作成するには、div 要素を作成し、data-win-control プロパティを "WinJS.UI.Rating" に設定します。基本的な評価コントロールを作成する方法を次に示します。

<div id="ratingControl" data-win-control="WinJS.UI.Rating"></div>

注  コントロールをインスタンス化するには、ページ内に WinJS の JavaScript ファイルを配置し、コード ビハインド内で WinJS.UI.processAll 関数を呼び出す必要があります。詳しくは、「クイック スタート: WinJS コントロールとスタイルの追加」をご覧ください。

平均評価と最高評価の設定

averageRating プロパティでは、評価対象の項目の平均評価を指定します (その項目の平均評価を決定する方法は任意に指定できます)。 averageRating プロパティを設定すると、ユーザー自身の評価が選択されるまで、Rating コントロールには平均評価が表示されます。 次の例では、averageRating を 3.4 に設定します。

<div id="ratingControl" data-win-control="WinJS.UI.Rating"
    data-win-options="{averageRating : 3.4}"></div>

maxRating プロパティでは、選択できる最高評価を指定します。既定値は 5 です。次の例では、maxRating を 7 に設定します。このコントロールでは、星が 5 個ではなく、7 個表示されます。

<div id="ratingControl" data-win-control="WinJS.UI.Rating"
    data-win-options="{averageRating : 3.4, maxRating : 7}"></div>

ユーザーの評価の取得

ユーザーが評価をクリックすると、change イベントがトリガーされます。ユーザーの評価を取得するには、userRating プロパティの値を取得します。

次の例では、スタート ページでアクティブ化されたイベント ハンドラーを使って、change イベント ハンドラーを Rating コントロールに追加します (イベントをアタッチする最適な場所について詳しくは、「クイック スタート: HTML コントロールの追加とイベントの処理」をご覧ください)。

(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll()
            .done(function () {

                // Get the rating control
                var ratingControl = document.getElementById("ratingControl").winControl;

                ratingControl.addEventListener("change", changeRating);
            });
        }
    };

    app.start();
})();

例で使われているイベント ハンドラー関数の changeRating は、ユーザーの評価を取得し、格納します。

    function changeRating(ev) {
        var ratingControl = ev.target.winControl;
        if (ratingControl) {

            if (ratingControl.userRating != 0) {

                // Put your code here to save user rating and re-calculate average rating.
                WinJS.Application.sessionState.userRating = ratingControl.userRating;

                var appData = Windows.Storage.ApplicationData.current;
                var roamingValues = appData.roamingSettings.values;

                // Write a setting
                roamingValues.insert("userRating", ratingControl.userRating);
            } else {

                // Put your code here to delete user rating.
            }
        }
    }

次の例では、格納されたユーザーの評価を取得し、これを使って Rating を設定できるように、前の例で示したアクティブ化されたイベント ハンドラーを変更します。

(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll()
            .done(function () {

                // Get the rating control
                var ratingControl = document.getElementById("ratingControl").winControl;

                // Retrieve stored state info 
                var appData = Windows.Storage.ApplicationData.current;
                var roamingValues = appData.roamingSettings.values;

                // Read a setting
                var currentRating = parseFloat(roamingValues.lookup("userRating"));

                if (currentRating > 0) {
                    ratingControl.userRating = currentRating;
                }

                ratingControl.addEventListener("change", changeRating);
            });
        }
    };

    function changeRating(ev) {
        var ratingControl = ev.target.winControl;
        if (ratingControl) {

            if (ratingControl.userRating != 0) {

                // Put your code here to save user rating and re-calculate average rating.
                WinJS.Application.sessionState.userRating = ratingControl.userRating;

                var appData = Windows.Storage.ApplicationData.current;
                var roamingValues = appData.roamingSettings.values;

                // Write a setting
                roamingValues.insert("userRating", ratingControl.userRating);
            } else {

                // Put your code here to delete user rating.
            }
        }
    }

    app.start();
})();

要約と次のステップ

Rating コントロールを作成する方法と、コントロールの userRating を格納、取得する方法について説明しました。次は、評価コントロールを最大限に活用する方法について、「Rating コントロールのガイドラインとチェック リスト」をご覧ください。

関連トピック

WinJS.UI.Rating