Movable Type 備忘録

 prototype で Five Star Rating( Starbox )

こんばんわ^^

Starbox 解析してたらこんな時間になっちゃいました (´Д｀；) あぅ～

とりえあず、Starbox を使ってテキストベースの簡易 Five Star Rating を実装してます。
ほとんど出来上がったので、後はサーバ側で処理する

  • 投票 PC の IP アドレスの重複チェック
  • エントリ ID と IP アドレスの保存

この 2 点を作っちゃえば完成です (●＞∀＜●)／
まだ公開には至りませんが、そのうちわたしのサイトで動作確認がてら設置します。

[2008.10.01] Starbox の Open Source 版が Google Code で公開されてました。

もぅ寝なきゃなのでカンタンにサンプルと Starbox のパラメータを記します。
詳しいことは後日ということで･･･ (;￣∇￣A
Starbox サンプル

  1. rating_obj[boxid] = new Starbox(boxid, // Box ID
  2.     0, { // 現在のアベレージ
  3.         color: '#4a488e', // 星の前景
  4.         background: '#edd3a1', // 星の背景
  5.         hoverColor: '#a22041', // ホバーの色
  6.         overlay: 'default.png', // オーバレイ画像指定
  7.         stars: 10, // 星の表示数
  8.         max: 10, // 最大アベレージ
  9.         buttons: 20, // stars を何分割にするか設定
  10.                                     // たとえば、stars×２とすると１つ星が２分割される
  11.         total: 0, // 総投票数
  12.         identity: ids, // ID
  13.         indicator: '#{average} rating from #{total} votes', // インディケータ表示
  14.         onRate: rating_post, // クリック時の処理
  15.         inverse: false, // 表示方向設定 false(左⇒右)/true(右⇒左)
  16.         lockOnRate: false, // 投票後ロック設定 false(なし)/true(ロック)
  17.         locked: false // 投票不可設定 false(可)/true(不可)
  18.     });

ホントごめんなさい。後日改めて追記します (m;_ _)mペコ

では、おやすみなさい。

[2009.02.08] バージョンアップしました。以下のページも合わせて読んで頂けたらと思います。

[2007.12.15] ここでご紹介するスクリプトはロリポップでは使用できません。
ロリポップ以外のサーバをお使いの人専用です。ロリポップは対象外とさせていただきます。

さくらインターネットをお使いの人は、starbox.post.php 内の 16 ～ 18 行目を以下のように変更してください。

starbox.rating/js/prototype/starbox/starbox.post.php

  1. //if (!file_exists($GLOBALS['LOGDIR'])) {
  2. // mkdir($GLOBALS['LOGDIR'], 0755, true);
  3. //}
  4. if (!file_exists($GLOBALS['RATING_DIR'])) {
  5. mkdir($GLOBALS['RATING_DIR'], 0755);
  6. }
  7.  
  8. if (!file_exists($GLOBALS['LOGDIR'])) {
  9. mkdir($GLOBALS['LOGDIR'], 0755);
  10. }

赤い字の部分を削除(コメント)して、青い字の部分と差し替えます。
CORESERVER( or XREA )をお使いの人は修正なしでご使用になれます。

[2007.12.01] さっそく指摘されちゃいました (´Д｀；) あぅ
ログファイルをブログ ID ごとのディレクトリで管理したいとのことでしたので以下のように修正しました。

  • starbox.conf.php を削除し、starbox.post.php 内で吸収した。
  • ログ格納ディレクトリをブログ ID ごとのディレクトリに分けて管理すようにした。
  • 上記に伴って記事内容修正しました。

遅くなりました。
とりあえず、サーバ側プログラムも作成して動作確認も問題なさそうなので公開いたします。

ディレクトリ構成

  1. starbox.rating/
  2.   | demo.html
  3.   |
  4.   +---css/
  5.   | container-header.gif
  6.   | container-left.gif
  7.   | container-right.gif
  8.   | footer-left.gif
  9.   | footer-right.gif
  10.   | footer.gif
  11.   | header-left.gif
  12.   | header-right.gif
  13.   | header.gif
  14.   | input-shadow.gif
  15.   | style.css
  16.   |
  17.   +---js/
  18.       +---prototype/
  19.           | prototype.js
  20.           |
  21.           +---scriptaculous/
  22.           | effects.js
  23.           | scriptaculous.js
  24.           |
  25.           +---starbox/
  26.               | starbox.js
  27.               | starbox.post.php
  28.               | starbox.rating.js
  29.               |
  30.               +---css/
  31.                       ajax-loader.gif
  32.                       bigstar.png
  33.                       default.png
  34.                       default_dotted_backgroungif
  35.                       pointy.png
  36.                       starbox.css

ダウンロード

starbox.rating-0.04.zip

設置の仕方

設置の前に注意することは、starbox.js は prototype.js Ver 1.6.0、scriptaculous.js Ver 1.8.0 以上でないと動作しません。

  1. starbox.rating.js を変更します。
    上記 URL から starbox.rating.zip をダウンロードして適当なフォルダに展開します。 そして、js/prototype/starbox/starbox.rating.js をテキストエディタで開いてください。

    11、12 行目を以下のように変更します。

    js/prototype/starbox/starbox.rating.js

    1. var rating_script = ['<$MTBlogURL$>', 'js/prototype/starbox/', 'starbox.post.php'].join('');
    2. var rating_loader = ['<$MTBlogURL$>', 'js/prototype/starbox/', 'css/ajax-loader.gif'].join('');

    青い字の部分を各自のサイトの URL に変更します。 赤い字の部分を各自の環境に合わせて変更してください。デフォルトでは上記ディレクトリ構成のような環境となってます。

  2. 次に js/prototype/starbox/starbox.post.php を変更します。
    6、7 行目を以下のように変更してください。

    js/prototype/starbox/starbox.post.php

    1. $GLOBALS['RATING_DIR'] = 'log';
    2. $GLOBALS['RATING_LOG'] = 'ratinglog';

    青い字の部分はログを格納するディレクトリ名称を設定します。 赤い字の部分はログファイル名になります。
    必ず任意の名前に変更してください。

  3. 一通り変更したらサーバにアップロードします。
    各自の環境に合わせて starbox.rating/ フォルダごとアップロードしてください。

  4. サンプルを表示確認します。
    ブラウザから starbox.rating/demo.html を表示してみてください。 正しく表示および、投稿ができれば OK です。

    正しく表示できなかった場合、上記で指定したログを格納するディレクトリのパーミッションを確認してください。
    デフォルトでは 755 で作成しています。

サンプルが表示できたとこで、今度は実際に各自のサイトに設置してみます。
各エントリに Five Star Rating を設置する例を記します。

使い方はカンタンで、サンプルでは以下のような (X)HTML になってます。

  1. <ul>
  2. <li id='starbox1' class='star'>
  3.     <script type='text/javascript'>
  4.     //<![CDATA[
  5.         rating_view(14, 'starbox1', 1);
  6.     //]]>
  7.     </script>
  8. </li>
  9. </ul>

青い字の部分はブログ ID になります。ですので、実際には <$MTBlogID$> となります。
赤い字の部分は Starbox を表示させたいボックスの ID になります。ページ内で唯一な ID にする必要があります。
そして、緑の字の部分は Rating 固有の ID になります。ページ内で複数の Five Star Rating を表示させる場合には、必ず重複しない、ページ内で唯一の ID を指定してください。
とりえあずここでは、エントリ ID を指定します。実際には <$MTEntryID$> に変更すれば OK です。

具体的には以下のようなかんじになるかと。

  1. <div id='starbox-<$MTEntryID$>'>
  2.     <script type='text/javascript'>
  3.     //<![CDATA[
  4.         rating_view(<$MTBlogID$>, 'starbox-<$MTEntryID$>', <$MTEntryID$>);
  5.     //]]>
  6.     </script>
  7. </div>

最後に HTML ヘッダ(<head>～</head>)内に以下を追加します。
基本的にはサンプルと同様ですが、実際使用する場合には CSS や各 JavaScript を URL で指定すれば問題ないです。

  1. <link rel="stylesheet" type="text/css" href="<$MTBlogURL$>js/prototype/starbox/css/starbox.css" />
  2. <script type='text/javascript' src='<$MTBlogURL$>js/prototype/prototype.js'></script>
  3. <script type='text/javascript' src='<$MTBlogURL$>js/prototype/scriptaculous/scriptaculous.js?load=effects'></script>
  4. <script type='text/javascript' src='<$MTBlogURL$>js/prototype/starbox/starbox.js'></script>
  5. <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

  1. rating_obj[result[1]] = new Starbox(
  2.     result[1], // Box ID
  3.     result[2], { // 現在のアベレージ
  4. color: '#4a488e', // 星の前景
  5. background: '#edd3a1', // 星の背景
  6. hoverColor: '#a22041', // ホバーの色
  7. overlay: 'default.png', // オーバレイ画像指定
  8. stars: 5, // 星の表示数
  9. max: 5, // 最大アベレージ
  10. buttons: 10, // stars を何分割にするか設定
  11. // たとえば、stars×２とすると１つ星が２分割される
  12. total: result[3], // 総投票数
  13.     identity: ids, // ID
  14. // インディケータ表示
  15. indicator: '#{average} rating from #{total} votes',
  16.     onRate: rating_post, // クリック時の処理
  17.     inverse: false, // 表示方向設定 false(左⇒右)/true(右⇒左)
  18.     lockOnRate: true, // 投票後ロック設定 false(なし)/true(ロック)
  19.     locked: locked // 投票不可設定 false(可)/true(不可)
  20. });

青い字の部分が変更可能です。他のパラメータは変更しないでください。

スタイルについて

  1. <div id='yourId' class='starbox'>
  2.   <div class='stars default'> <!-- default or your className -->
  3.     <div class='hover'> <!-- has hover class on mouseover -->
  4.       <div class='colorbar'>
  5.         <div><!-- stars --></div>
  6.       </div>
  7.     </div>
  8.   </div>
  9.   <div class='indicator'><!-- indicator text if used --></div>
  10. </div>

出力されるスタイルは Starbox でも明記されてます。

 Trackback Pings(1)

from ギャラリー水楢

昨日今日と暑いですねー。いよいよ夏本番。真夏の花モントプレチアも咲き出しました。...

Tracked on September 28, 2008

 Comments(19)

#1: Posted by Author Profile Page oak @ June 29, 2008 [REPLY]
user-pic

お世話になっております。
お蔭さまでなんとか設置できました。ありがとうございます。

デザイン面でFive Starの表示エリアの背景色をグレー系にしたいのですが、どう対応すれば良いのかご教授ください。
よろしくお願いします。

 
#2: Posted by Author Profile Page bzbell @ June 29, 2008 [REPLY]
user-pic

>>1 oak さん

こんばんわ^^

> デザイン面でFive Starの表示エリアの背景色をグレー系にしたいのですが、どう対応すれば良いのかご教授ください。

はい。
記事内の starbox.rating.js の説明でも明記してますが、72 行目辺りにある 'background' が背景色になります。
そちらを oak さんのご希望の色に変更して頂ければと思いますテレテレ

 
#3: Posted by Author Profile Page oak @ June 30, 2008 [REPLY]
user-pic

早速のご返事ありがとうございます。
backgroundの指定を変えると、デフォルトの星の色が変わります。
それではなく、デフォルトの星が並ぶ白地の入力エリアの色を変えたいのです。
default.pngとかを変えないといけないのでしょうか？starbox.cssにあるパラメターなどもいじってみたのですが、目的の修正ができません。
よろしくお願いします。

 
#4: Posted by Author Profile Page bzbell @ June 30, 2008 [REPLY]
user-pic

>>3 oak さん

こんにちわ^^

> それではなく、デフォルトの星が並ぶ白地の入力エリアの色を変えたいのです。

言ってる意味がよく理解できてなくってあせあせ、すいませんが確認させてください。
わたしのサイトで言うところの何色の部分を変更したいのでしょうか。

たとえば、わたしのサイトの黄色地の背景は background です。
デフォルトの星の色は color です。
ホバー時の色は hoverColor ですが、いずれもちゃんと変更されますし、これ以外の色指定は特にないです。
てか、それがウリ!? だったりしますのほほん

ただし!! サイトが黒系の場合には default.png を黒背景の透過イメージを作成する必要がありますが、そのことを言われてるのでしょうかあせあせ

 
#5: Posted by Author Profile Page oak @ July 1, 2008 [REPLY]
user-pic

表現が悪くて申し訳ありません。
サイトのベースが濃いグレーのため、bzbellさんの言われる最後の部分に該当するようです。白地をグレー系に変更したかったのです。
default.pngの透過イメージを作成することは私には難しそうなので、試しにstarbox.cssにあるdefault_dotted_background.gifに変更した所白地をグレー系に変更することができました。星型は使えませんがこれで行くことにします。
お手間を取らせて申し訳ありませんでした。ありがとうございました。

 
#6: Posted by Author Profile Page bzbell @ July 1, 2008 [REPLY]
user-pic

>>5 oak さん

おはよございます^^

>efault.pngの透過イメージを作成することは私には難しそうなので、試しにstarbox.cssにあるdefault_dotted_background.gifに変更した所白地をグレー系に変更することができました。

お作りしましょうか。
平日は無理だけど週末なら時間取れると思うのでうぅ～ん

 
#7: Posted by Author Profile Page oak @ July 1, 2008 [REPLY]
user-pic

bzbellさん、こんにちは。
いろいろとお世話になってます。60過ぎのおじさんにはこの世界は厳しいものがありますが、頭の体操になってます。嵌ると睡眠不足が心配ですが。

有り難いお申し出をいただき大感謝です。よろしくお願いします。
ベースの色を白に代わって＃３３３３３３で作っていただけると有り難いのですが。星の大きさは他のイメージとの関係で決まってしまうのでしょうが、現状或いはそれより少し小さめのものを希望します。利用目的は写真のサイトでの各写真への評価を求めるもので、横９９ピクセルのサムネイル画像の下に設置するものです。
再三にわたりご面倒をお掛けします。よろしくお願いします。

 
#8: Posted by Author Profile Page oak @ July 5, 2008 [REPLY]
user-pic

ｂｚｂｅｌｌさん、こんにちは。
お忙しいところお手を煩わしました。
ぐっと見栄えも良くなりうれしい限りです。うるうる
心より感謝申し上げます。ぺこり

過去記事も読ませていただいています。素人の私にとって為になる記事がたくさんあります。少しづつ改良して行きたいと思います。
これからもお世話になること多々と思いますがよろしくお願いします。
ありがとうございました。

 
#9: Posted by Author Profile Page bzbell @ July 5, 2008 [REPLY]
user-pic

>>8 oak さん

こんにちわ^^

> ぐっと見栄えも良くなりうれしい限りです。

気に入ってもらえてよかったですウインク
今後ともどうぞよしなにテレテレ

 
#10: Posted by shunk @ September 20, 2008 [REPLY]
user-pic

bzbellさん
はじめまして、こんばんは

Starboxの設置の仕方が分からず、途方にくれていたところ、
こちらに辿り着き、無事設置することができました。
ありがとうございましたぺこり

ところで、デフォルトのままだと、星の下に0 rating from 0 votesの文字が来ますが、
こちらのブログのように、星の横に文字が来るようにするには、どうすればいいのでしょうか？
starbox.jsをいじってみたのですが、複雑で降参でございますガーン

どうかご教示願います。よろしくお願いします。

 
#11: Posted by Author Profile Page bzbellからshunkへの返信 @ September 20, 2008 [REPLY]
user-pic

>>10 shunk さん

こんにちわ^^

ご質問の件ですが、スタイルシートを以下のようにすれば横にレイアウトすることができます。 

.starbox .indicator { height: 18px; line-height: 18px; display: inline; }

お試しくださいもじもじ

 
#12: Posted by shunkからbzbellへの返信 @ September 20, 2008 [REPLY]
user-pic

>>11 bzbell さん

早速のご返答、ありがとうございますにこっ！

なるほど、starbox.jsをいじらなくてもCSSでよかったわけですね（＾＾）
starbox.jsが吐き出すタグを<div>じゃなくて<span>にすればいいんじゃね？って思ったんですけどダメでしたしくしく

それでですね、教えていただいたものをCSSに書き込んだんですけど、どういうわけか何の変化もしないんですよ。
で、Firebugとにらめっこしながら、 
.starbox { position: relative; }

.indicator { height: 18px; line-height: 18px; position: absolute; left: 95px; top: 0; }
と、文字を絶対配置にしちゃうことで、何とか横並びにしました。
あまりスマートじゃない気が・・・・（汗
僕もdisplay: inline;を使えば、いけると思ったんですけど(-公- )
何がいけなかったんでしょうね。
 
#13: Posted by Author Profile Page bzbellからshunkへの返信 @ September 20, 2008 [REPLY]
user-pic

>>12 shunk さん

こんばんわ^^

> それでですね、教えていただいたものをCSSに書き込んだんですけど、どういうわけか何の変化もしないんですよ。

わたしが使ってるのは 0.2 で現行は 1.1.1 なんですね。
コードもだいぶ変更されてるようでバージョンによる差異かもしれませんね。
今のバージョンの方が動作が重たいのは気のせいかなあせあせ

余力があれば現行バージョン解析してみますね。

 
#14: Posted by mnk @ February 3, 2009 [REPLY]
user-pic

こんにちは。はじめましてぺこり
こちらの丁寧な説明のおかげで、無事Starboxを設置することができました。
便利なスクリプトをありがとうございますチュ！

2点、質問させていただいてよろしいでしょうか。

まず1点、
rating_view()を呼び出す際に引数で渡すなどして、投票の可・不可を指定したいと思い、
稚拙な知識をフル稼動してコードを追ってみたのですが、
やはり私にはハードルが高すぎたようで、分かりませんでしたエーン
もしお手すきでしたら、教えていただけると嬉しいですうるうる

具体的に何をしたいのかというと、「ブログ記事」ページでは投票できるようにして、
「ブログ記事リスト」などのページでは星の数は見れるけど、投票はできない、
のような感じにできたらいいなぁ、と思っています。

そして2点目、
サイドバーなどに「投票ランキング」を表示するような機能が追加される予定はありますでしょうか？
・・・・と、分かっていないので、もしかしたらとんでもないコトを言っているかもしれません。
失礼しましたっあせあせ

 
#15: Posted by Author Profile Page bzbellからmnkへの返信 @ February 3, 2009 [REPLY]
user-pic

>>14 mnk さん

こんにちわ^^

  1. はい。分かりました。
    今は作れませんが帰宅したらコードをご連絡します。

  2. 今のところそのようには考えてません。
    ですが、許容範囲内の機能だと思われますウインク平日はちょと時間がないのでコーディングはできませんが、週末で良ければお作りしますよぺこり

    ただし、全エントリのログファイルを集計してランキング( ソート )する必要があるので、表示するまでに少しラグが発生( 1、2秒かかってしまうかも )してしまうかもしれません。実装を少し検討してみます。

以上です。
今後ともどうぞよしなにぺこり

 
#16: Posted by mnkからbzbellへの返信 @ February 3, 2009 [REPLY]
user-pic

>>15 bzbell さん

こんにちは。早々のご返信ありがとうございます！！
そして嬉しいオコトバ、重ね重ね感謝ですぺこり

両方とも、bzbellさんのご負担にならない、本当に時間がある時で構いませんので、
ぜひぜひお願いしますっうるうる
楽しみに待たせていただきます～もじもじ

 
#17: Posted by Author Profile Page bzbellからmnkへの返信 @ February 8, 2009 [REPLY]
user-pic

>>16 mnk さん

こんばんわ^^

遅くなりましたが、以下の記事でご紹介してますので確認してみてください。
http://bizcaz.com/archives/2009/02/08-053626.php

何かありましたらご連絡くださいませぺこり

 
#18: Posted by mnk @ February 15, 2009 [REPLY]
user-pic

>>17 bzbell さん

こんばんは。お礼が遅くなりまして申し訳ございません。
新しいスクリプト、ありがとうございますパチパチ
結構な大手術になってしまったのですね。お手数をおかけしました。
これから試してみますワクワク

本当にありがとうございましたぺこり

 
#19: Posted by Author Profile Page bzbellからmnkへの返信 @ February 15, 2009 [REPLY]
user-pic

>>18 mnk さん

こんばんわ^^

> 結構な大手術になってしまったのですね。お手数をおかけしました。

いぃえぇテレテレ
ついでだったんでコードの整理みたいなこともやったので少し手間がかかっただけですワクワク

使い方など分からないことありましたらご連絡頂けたらと思いますぺこり

 

 Post a Comment

 

コメント用フィード