Movable Type 備忘録
prototype で Five Star Rating( Starbox )
- Prev Page: Ajaxでアクセス・ランキングを表示する4
- Next Page: prototype 1.6.0.2 と script.aculo.us 1.8.1 に差し替え
こんばんわ^^
Starbox 解析してたらこんな時間になっちゃいました (´Д`;) あぅ~
とりえあず、Starbox を使ってテキストベースの簡易 Five Star Rating を実装してます。
ほとんど出来上がったので、後はサーバ側で処理する
- 投票 PC の IP アドレスの重複チェック
- エントリ ID と IP アドレスの保存
この 2 点を作っちゃえば完成です (●>∀<●)/
まだ公開には至りませんが、そのうちわたしのサイトで動作確認がてら設置します。
[2008.10.01] Starbox の Open Source 版が Google Code で公開されてました。
もぅ寝なきゃなのでカンタンにサンプルと Starbox のパラメータを記します。
詳しいことは後日ということで・・・ (; ̄∇ ̄A
Starbox サンプル
rating_obj[boxid] = new Starbox(boxid, // Box ID0, { // 現在のアベレージcolor: '#4a488e', // 星の前景background: '#edd3a1', // 星の背景hoverColor: '#a22041', // ホバーの色overlay: 'default.png', // オーバレイ画像指定stars: 10, // 星の表示数max: 10, // 最大アベレージbuttons: 20, // stars を何分割にするか設定// たとえば、stars×2とすると1つ星が2分割されるtotal: 0, // 総投票数identity: ids, // IDindicator: '#{average} rating from #{total} votes', // インディケータ表示onRate: rating_post, // クリック時の処理inverse: false, // 表示方向設定 false(左⇒右)/true(右⇒左)lockOnRate: false, // 投票後ロック設定 false(なし)/true(ロック)locked: false // 投票不可設定 false(可)/true(不可)});
ホントごめんなさい。後日改めて追記します (m;_ _)mペコ
では、おやすみなさい。
[2009.09.25] ver0.05 投稿できない不具合を対応しました。
[2009.02.08] ver0.04 バージョンアップしました。以下のページも合わせて読んで頂けたらと思います。
[2007.12.15] ver0.03 ここでご紹介するスクリプトはロリポップでは使用できません。
ロリポップ以外のサーバをお使いの人専用です。ロリポップは対象外とさせていただきます。
さくらインターネットをお使いの人は、starbox.post.php 内の 16 ~ 18 行目を以下のように変更してください。
starbox.rating/js/prototype/starbox/starbox.post.php
//if (!file_exists($GLOBALS['LOGDIR'])) {// mkdir($GLOBALS['LOGDIR'], 0755, true);//}if (!file_exists($GLOBALS['LOGNAME'])) {mkdir($GLOBALS['LOGNAME'], 0755);}if (!file_exists($GLOBALS['LOGDIR'])) {mkdir($GLOBALS['LOGDIR'], 0755);}
赤い字の部分を削除(コメント)して、青い字の部分と差し替えます。
CORESERVER( or XREA )をお使いの人は修正なしでご使用になれます。
[2007.12.01] ver0.02 さっそく指摘されちゃいました (´Д`;) あぅ
ログファイルをブログ ID ごとのディレクトリで管理したいとのことでしたので以下のように修正しました。
- starbox.conf.php を削除し、starbox.post.php 内で吸収した。
- ログ格納ディレクトリをブログ ID ごとのディレクトリに分けて管理すようにした。
- 上記に伴って記事内容修正しました。
遅くなりました。
とりあえず、サーバ側プログラムも作成して動作確認も問題なさそうなので公開いたします。
ディレクトリ構成
starbox.rating/| demo.html|+---css/| container-header.gif| container-left.gif| container-right.gif| footer-left.gif| footer-right.gif| footer.gif| header-left.gif| header-right.gif| header.gif| input-shadow.gif| style.css|+---js/+---prototype/| prototype.js|+---scriptaculous/| effects.js| scriptaculous.js|+---starbox/| starbox.js| starbox.post.php| starbox.rating.js|+---css/ajax-loader.gifbigstar.pngdefault.pngdefault_dotted_backgroungifpointy.pngstarbox.css
ダウンロード
設置の仕方
設置の前に注意することは、starbox.js は prototype.js Ver 1.6.0、scriptaculous.js Ver 1.8.0 以上でないと動作しません。
starbox.rating.js を変更します。
上記 URL から starbox.rating.zip をダウンロードして適当なフォルダに展開します。 そして、js/prototype/starbox/starbox.rating.js をテキストエディタで開いてください。9 行目を以下のように変更します。
js/prototype/starbox/starbox.rating.js
base : 'http://●●●.com/js/prototype/starbox/',
青い字の部分を各自のサイトの URL に変更します。
次に js/prototype/starbox/starbox.post.php を変更します。
8 行目を以下のように変更してください。js/prototype/starbox/starbox.post.php
$GLOBALS['LOGNAME'] = 'log';
青い字の部分はログを格納するディレクトリ名称を設定します。 必ず任意の名前に変更してください。
一通り変更したらサーバにアップロードします。
各自の環境に合わせて starbox.rating/ フォルダごとアップロードしてください。サンプルを表示確認します。
ブラウザから starbox.rating/demo.html を表示してみてください。 正しく表示および、投稿ができれば OK です。正しく表示できなかった場合、上記で指定したログを格納するディレクトリのパーミッションを確認してください。
デフォルトでは 755 で作成しています。
サンプルが表示できたとこで、今度は実際に各自のサイトに設置してみます。
各エントリに Five Star Rating を設置する例を記します。
使い方はカンタンで、サンプルでは以下のような (X)HTML になってます。
<ul><li id='starbox1' class='star'><script type='text/javascript'>//<![CDATA[rating_view(14, 'starbox1', 1);//]]></script></li></ul>
青い字の部分はブログ ID になります。ですので、実際には <$MTBlogID$> となります。
赤い字の部分は Starbox を表示させたいボックスの ID になります。ページ内で唯一な ID にする必要があります。
そして、緑の字の部分は Rating 固有の ID になります。ページ内で複数の Five Star Rating を表示させる場合には、必ず重複しない、ページ内で唯一の ID を指定してください。
とりえあずここでは、エントリ ID を指定します。実際には <$MTEntryID$> に変更すれば OK です。
具体的には以下のようなかんじになるかと。
<div id='starbox-<$MTEntryID$>'><script type='text/javascript'>//<![CDATA[rating_view(<$MTBlogID$>, 'starbox-<$MTEntryID$>', <$MTEntryID$>);//]]></script></div>
最後に HTML ヘッダ(<head>~</head>)内に以下を追加します。
基本的にはサンプルと同様ですが、実際使用する場合には CSS や各 JavaScript を URL で指定すれば問題ないです。
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>js/prototype/starbox/css/starbox.css" /><script type='text/javascript' src='<$MTBlogURL$>js/prototype/prototype.js'></script><script type='text/javascript' src='<$MTBlogURL$>js/prototype/scriptaculous/scriptaculous.js?load=effects'></script><script type='text/javascript' src='<$MTBlogURL$>js/prototype/starbox/starbox.js'></script><script type='text/javascript' src='<$MTBlogURL$>js/prototype/starbox/starbox.rating.js'></script>
青い字の部分を各自でアップロードした環境に合わせて変更します。
以上で設置は完了です。
Starbox のパラメータを変更したい場合には、js/prototype/starbox/starbox.rating.js 内の以下の部分を変更します。
js/prototype/starbox/starbox.rating.js
rating_obj[result[1]] = new Starbox(result[1], // Box IDresult[2], { // 現在のアベレージcolor: '#4a488e', // 星の前景background: '#edd3a1', // 星の背景hoverColor: '#a22041', // ホバーの色overlay: 'default.png', // オーバレイ画像指定stars: 5, // 星の表示数max: 5, // 最大アベレージbuttons: 10, // stars を何分割にするか設定// たとえば、stars×2とすると1つ星が2分割されるtotal: result[3], // 総投票数identity: ids, // ID// インディケータ表示indicator: '#{average} rating from #{total} votes',onRate: rating_post, // クリック時の処理inverse: false, // 表示方向設定 false(左⇒右)/true(右⇒左)lockOnRate: true, // 投票後ロック設定 false(なし)/true(ロック)locked: locked // 投票不可設定 false(可)/true(不可)});
青い字の部分が変更可能です。他のパラメータは変更しないでください。
スタイルについて
<div id='yourId' class='starbox'><div class='stars default'> <!-- default or your className --><div class='hover'> <!-- has hover class on mouseover --><div class='colorbar'><div><!-- stars --></div></div></div></div><div class='indicator'><!-- indicator text if used --></div></div>
出力されるスタイルは Starbox でも明記されてます。
Trackback Pings(1)
- from
ギャラリー水楢
昨日今日と暑いですねー。いよいよ夏本番。真夏の花モントプレチアも咲き出しました。...




お世話になっております。
お蔭さまでなんとか設置できました。ありがとうございます。
デザイン面でFive Starの表示エリアの背景色をグレー系にしたいのですが、どう対応すれば良いのかご教授ください。
よろしくお願いします。
>>1 oak さん
こんばんわ^^
> デザイン面でFive Starの表示エリアの背景色をグレー系にしたいのですが、どう対応すれば良いのかご教授ください。
はい。
記事内の starbox.rating.js の説明でも明記してますが、72 行目辺りにある 'background' が背景色になります。
そちらを oak さんのご希望の色に変更して頂ければと思います
早速のご返事ありがとうございます。
backgroundの指定を変えると、デフォルトの星の色が変わります。
それではなく、デフォルトの星が並ぶ白地の入力エリアの色を変えたいのです。
default.pngとかを変えないといけないのでしょうか?starbox.cssにあるパラメターなどもいじってみたのですが、目的の修正ができません。
よろしくお願いします。
>>3 oak さん
こんにちわ^^
> それではなく、デフォルトの星が並ぶ白地の入力エリアの色を変えたいのです。
言ってる意味がよく理解できてなくって
、すいませんが確認させてください。
わたしのサイトで言うところの何色の部分を変更したいのでしょうか。
たとえば、わたしのサイトの黄色地の背景は background です。
デフォルトの星の色は color です。
ホバー時の色は hoverColor ですが、いずれもちゃんと変更されますし、これ以外の色指定は特にないです。
てか、それがウリ!? だったりします
ただし!! サイトが黒系の場合には default.png を黒背景の透過イメージを作成する必要がありますが、そのことを言われてるのでしょうか
表現が悪くて申し訳ありません。
サイトのベースが濃いグレーのため、bzbellさんの言われる最後の部分に該当するようです。白地をグレー系に変更したかったのです。
default.pngの透過イメージを作成することは私には難しそうなので、試しにstarbox.cssにあるdefault_dotted_background.gifに変更した所白地をグレー系に変更することができました。星型は使えませんがこれで行くことにします。
お手間を取らせて申し訳ありませんでした。ありがとうございました。
>>5 oak さん
おはよございます^^
>efault.pngの透過イメージを作成することは私には難しそうなので、試しにstarbox.cssにあるdefault_dotted_background.gifに変更した所白地をグレー系に変更することができました。
お作りしましょうか。
平日は無理だけど週末なら時間取れると思うので
bzbellさん、こんにちは。
いろいろとお世話になってます。60過ぎのおじさんにはこの世界は厳しいものがありますが、頭の体操になってます。嵌ると睡眠不足が心配ですが。
有り難いお申し出をいただき大感謝です。よろしくお願いします。
ベースの色を白に代わって#333333で作っていただけると有り難いのですが。星の大きさは他のイメージとの関係で決まってしまうのでしょうが、現状或いはそれより少し小さめのものを希望します。利用目的は写真のサイトでの各写真への評価を求めるもので、横99ピクセルのサムネイル画像の下に設置するものです。
再三にわたりご面倒をお掛けします。よろしくお願いします。
bzbellさん、こんにちは。
お忙しいところお手を煩わしました。
ぐっと見栄えも良くなりうれしい限りです。
心より感謝申し上げます。
過去記事も読ませていただいています。素人の私にとって為になる記事がたくさんあります。少しづつ改良して行きたいと思います。
これからもお世話になること多々と思いますがよろしくお願いします。
ありがとうございました。
>>8 oak さん
こんにちわ^^
> ぐっと見栄えも良くなりうれしい限りです。
気に入ってもらえてよかったです
今後ともどうぞよしなに
bzbellさん
はじめまして、こんばんは
Starboxの設置の仕方が分からず、途方にくれていたところ、
こちらに辿り着き、無事設置することができました。
ありがとうございました
ところで、デフォルトのままだと、星の下に0 rating from 0 votesの文字が来ますが、
こちらのブログのように、星の横に文字が来るようにするには、どうすればいいのでしょうか?
starbox.jsをいじってみたのですが、複雑で降参でございます
どうかご教示願います。よろしくお願いします。
>>10 shunk さん
こんにちわ^^
ご質問の件ですが、スタイルシートを以下のようにすれば横にレイアウトすることができます。
.starbox .indicator { height: 18px; line-height: 18px; display: inline; }お試しください
>>11 bzbell さん
早速のご返答、ありがとうございます
なるほど、starbox.jsをいじらなくてもCSSでよかったわけですね(^^)
それでですね、教えていただいたものをCSSに書き込んだんですけど、どういうわけか何の変化もしないんですよ。starbox.jsが吐き出すタグを<div>じゃなくて<span>にすればいいんじゃね?って思ったんですけどダメでした
で、Firebugとにらめっこしながら、
.starbox { position: relative; }と、文字を絶対配置にしちゃうことで、何とか横並びにしました。.indicator { height: 18px; line-height: 18px; position: absolute; left: 95px; top: 0; }
あまりスマートじゃない気が・・・・(汗
僕もdisplay: inline;を使えば、いけると思ったんですけど(-公- )
何がいけなかったんでしょうね。
>>12 shunk さん
こんばんわ^^
> それでですね、教えていただいたものをCSSに書き込んだんですけど、どういうわけか何の変化もしないんですよ。
わたしが使ってるのは 0.2 で現行は 1.1.1 なんですね。
コードもだいぶ変更されてるようでバージョンによる差異かもしれませんね。
今のバージョンの方が動作が重たいのは気のせいかな
余力があれば現行バージョン解析してみますね。
こんにちは。はじめまして
こちらの丁寧な説明のおかげで、無事Starboxを設置することができました。
便利なスクリプトをありがとうございます
2点、質問させていただいてよろしいでしょうか。
まず1点、
rating_view()を呼び出す際に引数で渡すなどして、投票の可・不可を指定したいと思い、
稚拙な知識をフル稼動してコードを追ってみたのですが、
やはり私にはハードルが高すぎたようで、分かりませんでした
もしお手すきでしたら、教えていただけると嬉しいです
具体的に何をしたいのかというと、「ブログ記事」ページでは投票できるようにして、
「ブログ記事リスト」などのページでは星の数は見れるけど、投票はできない、
のような感じにできたらいいなぁ、と思っています。
そして2点目、
サイドバーなどに「投票ランキング」を表示するような機能が追加される予定はありますでしょうか?
・・・・と、分かっていないので、もしかしたらとんでもないコトを言っているかもしれません。
失礼しましたっ
>>14 mnk さん
こんにちわ^^
はい。分かりました。
今は作れませんが帰宅したらコードをご連絡します。
今のところそのようには考えてません。
平日はちょと時間がないのでコーディングはできませんが、週末で良ければお作りしますよ
ですが、許容範囲内の機能だと思われます
ただし、全エントリのログファイルを集計してランキング( ソート )する必要があるので、表示するまでに少しラグが発生( 1、2秒かかってしまうかも )してしまうかもしれません。実装を少し検討してみます。
以上です。
今後ともどうぞよしなに
>>15 bzbell さん
こんにちは。早々のご返信ありがとうございます!!
そして嬉しいオコトバ、重ね重ね感謝です
両方とも、bzbellさんのご負担にならない、本当に時間がある時で構いませんので、

ぜひぜひお願いしますっ
楽しみに待たせていただきます~
>>16 mnk さん
こんばんわ^^
遅くなりましたが、以下の記事でご紹介してますので確認してみてください。
http://bizcaz.com/archives/2009/02/08-053626.php
何かありましたらご連絡くださいませ
>>17 bzbell さん
こんばんは。お礼が遅くなりまして申し訳ございません。
新しいスクリプト、ありがとうございます
結構な大手術になってしまったのですね。お手数をおかけしました。
これから試してみます
本当にありがとうございました
>>18 mnk さん
こんばんわ^^
> 結構な大手術になってしまったのですね。お手数をおかけしました。
いぃえぇ
ついでだったんでコードの整理みたいなこともやったので少し手間がかかっただけです
使い方など分からないことありましたらご連絡頂けたらと思います
はじめまして。MTでこまったときにいつも拝見しています。
実はどうしてもbzbellさん版のfive star rankingを設置したくて、
シルバーウィーク中格闘していたのですが、どうしても前に進めないでいるので
どうか教えてください。
どの状態でつまずいているかといいますとdemo.htmlで星がクリックできません。
http://www.tabier.com/mt/starbox.rating/demo.html
自分が行った設定でおおかしいところがありましたら、どうかご指摘いただけませんでしょうか。
なにぶん初心者なので、おかしなことをしちゃってるのかもしれません。
1.まず、サーバがさくらですのでstarbox.post.phpにこちらの処理を行いました。
自分のDLしたものは26~28行にこの記述がありました。
//if (!file_exists($GLOBALS['LOGDIR'])) {
// mkdir($GLOBALS['LOGDIR'], 0755, true);
//}
if (!file_exists($GLOBALS['RATING_DIR'])) {
mkdir($GLOBALS['RATING_DIR'], 0755);
}
if (!file_exists($GLOBALS['LOGDIR'])) {
mkdir($GLOBALS['LOGDIR'], 0755);
}
2.starbox.rating.js への変更
①9行目に下記の記述があったので自分の環境に合わせて変更しました。
base : 'http://●●●.com/js/prototype/starbox/',
↓
base : 'http://www.tabier.com/mt/starbox.rating/js/prototype/starbox/',
②14、15行目にこんな記述があったので
this.script = [this.base, 'starbox.post.php'].join('');
this.loader = [this.base, 'css/ajax-loader.gif'].join('');
「11、12 行目の変更。」にならって下記の通りに変更しました。
var rating_script = ['http://www.tabier.com/test/', 'starbox.rating/js/prototype/starbox/', 'starbox.post.php'].join('');
var rating_loader = ['http://www.tabier.com/test/', 'starbox.rating/js/prototype/starbox/', 'css/ajax-loader.gif'].join('');
しかしこの処理をしたところ、星自体が表示されなくなってしまったので、
ここは初期状態にもどしています。
③starbox.post.phpへの6、7 行目変更
6 $GLOBALS['RATING_DIR'] = 'log';
7 $GLOBALS['RATING_LOG'] = 'ratinglog';
についてですが、
私のファイルでは初期状態で下記のようになっていたので、
6 $GLOBALS['ENTRYID'] = $_POST['eid'];
7 $GLOBALS['BLOGID' ] = $_POST['bid' ];
8 $GLOBALS['LOGNAME'] = 'log';
9 $GLOBALS['LOGDIR' ] = $GLOBALS['LOGNAME'].'/'.$GLOBALS['BLOGID' ];
10 $GLOBALS['LOG' ] = sprintf('%s/r%d.log', $GLOBALS['LOGDIR'], $GLOBALS['ENTRYID']);
11 $GLOBALS['IP' ] = $_SERVER['REMOTE_ADDR'];
ここが一番自信が無く、
8,9行目を下記のように変更するなどして
$GLOBALS['RATING_DIR'] = 'logdir';
$GLOBALS['RATING_LOG'] = 'ratinglogname';
いろいろトライしてみたのですが、壁にぶつかりっぱなしです。
おかしいなと思う点ですが、ログのディレクトリが生成されている様子がありません。
お忙しいところ恐縮ですが、
お時間あるときにでもちょっとアドバイスいただければうれしいです。
どうぞよろしくお願いいたします。
ありがとうございます。
>>20 タビエル さん
記事中の説明はちょと間違ってますね
すいません。
記事を修正しましたので参考にして頂けたらと思います。
また、タビエル さんについてですが、記事中の説明をそのまま実行したことによって、正しく表示できてないのではないかと思われまする。
お手数ですが修正した記事を元に、再度確認して頂けますか
>>21 bzbell さん
お忙しい中、厄介なお願いをしてしまって申し訳ありません!
にもかかわらずご親切にありがとうございます!本当に感謝です。
ご報告なのですが、せっかくのご好意にこたえることができずに残念なのですが、
星は表示されるものの、動いてくれませんでした。
http://www.tabier.com/mt/starbox.rating/demo.html
これはもう、自分のサーバの環境の所為とあきらめるしかないようです。
私のよな初心者に、時間をさいてくださいまして本当にありがとうございました!!
>>22 タビエル さん
こんにちわ^^
そうですか。ダメですか
確かに環境依存的なところのように見受けられます。
starbox.post.php でエラーしてると思われ、気になる点を以下に記します。
さくらインターネットをお使いとのことですが、PHP のバージョンはいくつでしょうか。
ちなみにウチは PHP5 を利用してます。 その場合、セキュリティ上 starbox/ フォルダ内に .htaccess を作成して、その中に以下のコードを埋め込むことで startox.post.php へのパラメータ渡しを可能としてます。
上記のように PHP スクリプトを CGI モードにしてあげないと、startox.post.php へパラメータを渡すことができません。
starbox.rating.js 内の 72 行目直後に以下の★印のついたコードを追加して表示させた場合どのような結果が表示されますでしょうか。
var locked = true; alert(req.responseText);// ★ var result = req.responseText.split(':');starbox.post.php からの応答結果によってタビエル さんのような現象が発生します。
以上です。
もし TRY する気力がありましたらご確認くださいまし
bzbellさま、ご親切にありがとうございます。
テストしてみた結果、このような感じになりました。
まず、PHPのバージョンですが
PHP 5.2.10 (CGI版)
というものでした。
教えていただいた方法から
1.のみを実行するとLoadingのgif画像のまま先へ進まなくなりました。
2.のみを実行した場合
「Webからのメッセージ」として”ok:0:0:”というメッセージが表示され
OKボタンを3回ほど押すことによって星マークが表示されましたが
動作はしませんでした。
1.2.両方を実行すると
さらに長いメッセージがでてLoadingのgif画像のまま先へ進まなくなりました。
PHPのバージョンをPHP4.4.9に変えてテストしてみたのですが、
同様の結果となりました。
なにぶん初心者なので、どこかで基本的なミスを犯しちゃってるんでしょうかね~
ともあれ、見ず知らずの者ににあたたかい手を
差し伸べてくださってありがとうございます!
>>24 タビエル さん
原因が分かりました。
ウチで使ってる starbox.rating.js は不具合対策済みだったのですが、公開するのを忘れてたようで先ほど不具合対策済みのバージョン( ver0.05 )を UP しました。
具体的には以下のファイルを修正してます。
- starbox.rating.js : 141 行目修正
- starbox.post.php : 82、103 行目修正
最新版( ver0.05 )を改めて DL して頂き、確認して頂けますかやりましたーっ!!
成功です、動きましたー!!
感動です。
あきらめないでよかったです。
bzbellさま、ホントホントありがとうございます!
>>26 タビエル さん
よかったですねっ

わたしの不具合がなければ、もっと早く解決してたのに…ご迷惑をおかけしました
今後ともどうぞよしなに
はじめまして、こんばんは。
このstarboxはブログ専用でしょうか?
よろしければ教えてください。
>>28 アエル さん
こんばんわ^^
>このstarboxはブログ専用でしょうか?
いいえ、特にブログに依存してるわけではないです。
ページごとにユニークな ID を割り当てることができれば問題ありませんよ