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に「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう

おすすめの記事

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

サーバで管理していたWordPressをローカル環境に移行する方法

サーバで管理していたWordPressをローカル環境に移行する方法

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設定をしよう

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設…

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

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

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

rsyslogを利用したログファイル作成と、logrotateを利用したログのローテーション

rsyslogを利用したログファイル作成と、logrotateを利用したロ…

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポンシブイメージの基本

lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポン…


コメントを残す

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

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