5段階評価を付けることができるjQuery Ratyプラグインの使い方


投稿日:2014年9月29日
  • 7
  • 12


多機能で拡張性に優れたStar Rating Plugin

jquery_raty

今回PukiWikiで5段階評価を付けるプラグインを作成するにあたり「jQuery Raty」を利用しました。

公式ページのドキュメントで丁寧に解説されています。しかし、英語のため細かい部分がわからず手こずりました。このページでは利用方法をまとめました。


jQuery Ratyの使い方

jQuery Raty」は名前の通りjQueryを利用して動作するJavaScriptのライブラリです。

公式ページの解説が非常に丁寧なので、jQueryの一般的な書式で動作することがわかると思います。

1.jQuery Ratyをダウンロード

まずはjQuery Raty公式ページの右上にあるv2.7.0をクリックしてダウンロード、解凍します。
(2016年4月追記:公式ページにアクセスできない状態です。現在はGitHubのページで提供されています)

jquery_raty01

2.HTMLファイルを作成してjQueryを読込み、jquery.raty.jsへのパスを記述

とりあえずjQueryは、信頼と安心のGoogleのCDNが提供してくれているものを利用します。以下の記述だとjQueryの1.x系の最終バージョンが読み込まれます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.raty.js"></script>

3.jquery.raty.js用の設定を記述

あとはjQueryの書式でDOM要素を指定するだけです。

<div></div>

<script type="text/javascript">
$('div').raty();
</script>

デモページ

とても簡単ですね。
これだけでは何なので、カスタマイズの要点を少し。

星の画像を置いてあるディレクトリを指定する

$.fn.raty.defaults.path = "./images";
$('div').raty();

デモページ

予めスコアを表示する(この例では3)

$(function raty() {
	$("div").raty({
		number: 5,
		score : 3
	});
});

デモページ

評価数を10段階にする

$(function raty() {
	$("div").raty({
		number: 10,
		score : 3
	});
});

デモページ

マウスオーバー時の表示(hint)を変更する

デフォルトはhints: [‘bad’, ‘poor’, ‘regular’, ‘good’, ‘gorgeous’]

$(function raty() {
	$("div").raty({
		hints: ['1', '2', '3', '4', '5']
	});
});

デモページ

クリックしたスコアやイベントを表示する

evtで何が取れるかはconsole.log(evt);で見てください。

$('div').raty({
	click: function(score, evt) {
		alert("score: " + score + "\nevent: " + evt.type);
	}
});

デモページ

スコアやイベントの情報を外部のPHPファイルへ渡す

$('div').raty({
	click: function(score, evt) {
		$.post('./raty.php',{score:score, url:evt.currentTarget.baseURI},
		function(data){
			location.href = './sample.txt';
		});
	}
});

渡される側のPHP(raty.php)

実際にはXSS対策やバリデーションを行ってください。

<?php
$score = $_POST['score'];
$url = $_POST['url'];
$raty = 'score:' . $score . ',url:' . $url . "\n";

$fp = fopen("sample.txt", "a");
fwrite($fp, $raty);
fclose($fp);
?>

デモページ

ここまでできれば後はMySQLに渡すなり、CSVファイルに書き出すなり自由に利用できます。

今回紹介した機能の他にも、星画像を1つ1つ変更する方法、3.5など小数点を切り捨てるか切り上げるかの指定、入力したスコアをキャンセルするボタンの設置など、便利な機能が用意されています。
詳しくは公式ページを参照してください。

今回PukiWikiのプラグインで使用したコード

一応サンプルとして残しておきます。
PukiWikiにはプラグインにGETでパラメータを渡すことができるので、スコアを渡してからURLを更新しています。

<script type="text/javascript">
$(function raty0() {
$.fn.raty.defaults.path = "./image";
$(".star0").raty({
number: 5,
score : 0,
click: function(score, evt) {
var url = "プラグインのURL" + score;
location.href=url;
}
});
});
</script>

以上、カスタマイズ次第で何にでも使える汎用性の高いプラグインjQuery Ratyのまとめでした。

次回はPukiWikiのプラグインに組み込んでみます。



現在のページを共有する



現在のページに関連する記事

5段階評価を付けることができるjQuery Ratyプラグインの使い方 目に楽しい便利な機能!jQueryでページトップヘスムーススクロール
5段階評価を付けることができるjQuery Ratyプラグインの使い方 5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成する方法
5段階評価を付けることができるjQuery Ratyプラグインの使い方 PukiWikiで5段階評価を付けるプラグインを作成しました
5段階評価を付けることができるjQuery Ratyプラグインの使い方 jQueryでクロスサイトのiframe広告のクリックをカウントする方法
facebookのCommentをPukiWikiに追加 facebookのCommentをPukiWikiに追加
5段階評価を付けることができるjQuery Ratyプラグインの使い方 Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法
5段階評価を付けることができるjQuery Ratyプラグインの使い方 WordPressに「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう

おすすめの記事

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスターの使い方

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスター…

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単語200

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単…

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…

SNSのカウントをキャッシュするWordPressのプラグインを作成しました

SNSのカウントをキャッシュするWordPressのプラグインを作成し…

Windows 10でネットワークが不安定になった際の対策まとめ

Windows 10でネットワークが不安定になった際の対策まとめ

FuckAdBlockを利用して自由自在にAdblock対策をする方法

FuckAdBlockを利用して自由自在にAdblock対策をする方法

Windows 10でpsd形式のファイルをサムネイル表示する方法

Windows 10でpsd形式のファイルをサムネイル表示する方法

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザイン…


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。