その他のUIコントロール (2/4)
作成:2012-11-24 15:01
更新:2012-11-24 15:01
更新:2012-11-24 15:01
■レーティング
「レーティング」は、レート（評価）を示すのに用いられるUIコントロールです。これは、例えばアプリストア（Google Playとか）などでアプリの評価をするとき、★の数で表したりしますね？ あれのことだと考えてください。
このレーティングは、<div>タグに「data-win-control="WinJS.UI.Rating"」の属性を用意するだけで実現できます。こんな具合です。
maxRating――最大のレート数（つまり、★の数）を指定します。
averageRating――平均レートを設定します。
userRating――現在選択されているレートを示すものです。
ちょっとわかりにくいのが「averageRating」と「userRating」の違いでしょう。userRatingは、文字通り、ユーザーが選択したレートを示すものです。これに対し、averageRatingは平均値を示すものです。この２つは、実際に使ってみると明らかに表示が違うのでわかります。
userRatingはユーザが選択したものですから、例えば「３」とすれば★３つが選択された状態になります。★は１つずつ選択しますので、「３と半分」というような選択はできません。これに対し、averageRatingは平均値を表すものであって、実際の選択された値ではありません。ですから、★はまったく選択された状態にはならず、ひとつの目安のような形で表されます。また平均ですから、実数で指定できます。「3.5」とすれば、★３つと半分がグレー表示に変わります。
では、実際の利用例を下のリスト欄にあげておきましょう。ここでは、７つの★のレーティングを作成してあります。またaverageRatingに3.5を設定してあるため、起動時には3.5個分の★が白色になっています。選択すると、本来の選択色で表示され、また選択されたレーティング値が上に表示されます。
レーティングを設定した時のイベント処理は、「change」というイベントとして用意されています。ここでは、addEventListener("change", rating1Change);としてイベント処理を組み込んでいますね。
設定されている値は、既に述べたように「userRating」というものでした。これは、レーティングの<div>タグのDOMにあるwinControlプロパティに用意されているオブジェクトのプロパティとして用意されています。ここでのイベント処理を見てみると以下のようになっていますね。
このレーティングは、<div>タグに「data-win-control="WinJS.UI.Rating"」の属性を用意するだけで実現できます。こんな具合です。
<div data-win-control="WinJS.UI.Rating"></div>これで表示されるのは★が５つ並んだ状態のものです。表示に関する設定などを行うには、data-win-options属性を用意してやります。この属性は、既に何度も登場していますが、オプション設定を連想配列の形でまとめたものを値に指定します。主なオプションとしては以下のようなものがあります。
maxRating――最大のレート数（つまり、★の数）を指定します。
averageRating――平均レートを設定します。
userRating――現在選択されているレートを示すものです。
ちょっとわかりにくいのが「averageRating」と「userRating」の違いでしょう。userRatingは、文字通り、ユーザーが選択したレートを示すものです。これに対し、averageRatingは平均値を示すものです。この２つは、実際に使ってみると明らかに表示が違うのでわかります。
userRatingはユーザが選択したものですから、例えば「３」とすれば★３つが選択された状態になります。★は１つずつ選択しますので、「３と半分」というような選択はできません。これに対し、averageRatingは平均値を表すものであって、実際の選択された値ではありません。ですから、★はまったく選択された状態にはならず、ひとつの目安のような形で表されます。また平均ですから、実数で指定できます。「3.5」とすれば、★３つと半分がグレー表示に変わります。
では、実際の利用例を下のリスト欄にあげておきましょう。ここでは、７つの★のレーティングを作成してあります。またaverageRatingに3.5を設定してあるため、起動時には3.5個分の★が白色になっています。選択すると、本来の選択色で表示され、また選択されたレーティング値が上に表示されます。
レーティングを設定した時のイベント処理は、「change」というイベントとして用意されています。ここでは、addEventListener("change", rating1Change);としてイベント処理を組み込んでいますね。
設定されている値は、既に述べたように「userRating」というものでした。これは、レーティングの<div>タグのDOMにあるwinControlプロパティに用意されているオブジェクトのプロパティとして用意されています。ここでのイベント処理を見てみると以下のようになっていますね。
var ctrl = event.target.winControlevent.targetでイベントの発生したDOMオブジェクトを取得し、そのwinControlを変数に取り出しています。後は、テキストを表示するタグをgetElementByIdで取得し、winControlのuserRatingの値を使ってtextContentを設定するだけです。
var msg = document.getElementById("msg");
msg.textContent = "Rate: " + ctrl.userRating;
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※HTMLの<body>タグ
<body>
<h1 id="title">Sample Page</h1>
<p id="msg">this is list sample page.</p>
<div data-win-control="WinJS.UI.Rating" id="rating1"
data-win-options="{maxRating:7, averageRating:3.5}"></div>
</body>
※JavaScriptのスクリプト
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.
ApplicationExecutionState.terminated) {} else {}
args.setPromise(WinJS.UI.processAll().then(function completed() {
document.getElementById("rating1").addEventListener("change", rating1Change);
}));
}
}
app.oncheckpoint = function (args) {}
// ※追加した関数
function rating1Change(event) {
var ctrl = event.target.winControl
var msg = document.getElementById("msg");
msg.textContent = "Rate: " + ctrl.userRating;
}
app.start();
})();
※関連コンテンツ
「JavaScriptで作ろう! Windows 8 アプリ・プログラミング入門」に戻る