prototype で Five Star Rating( Starbox )

• Nov272007
• Author: bzbell
• Categories: Customize
• Tags: JavaScript, prototype

• Next Page: ウェブページのテンプレートを切り替える２
• Prev Page: jQuery でファイルアップロード( JqUploader )

こんばんわ^^

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

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

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

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

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

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

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

では、おやすみなさい。

- 2007.12.01 追記 -

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

ディレクトリ構成

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.gif
                      bigstar.png
                      default.png
                      default_dotted_backgroungif
                      pointy.png
                      starbox.css

ダウンロード

starbox.rating.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

   11. var rating_script = ['<$MTBlogURL$>', 'js/prototype/starbox/', 'starbox.post.php'].join('');
   12. 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

   6. $GLOBALS['RATING_DIR'] = 'log';
   7. $GLOBALS['RATING_LOG'] = 'ratinglog';

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

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

4. サンプルを表示確認します。
   ブラウザから 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 内の以下の部分を変更します。

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

スタイルについて

<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 でも明記されてます。

• Related Entries
• 07/09/08Prototype でプログレスバーの表示 (jsProgressBarHandler.js)
• 07/07/18prototypeで記事内容をアコーディオンのように表示する（Accordion.js）
• 06/05/04サムネイルをLightbox JSで表示してみる
• 08/02/11ナビゲーションバーのカレントリンクを強調表示する
• 08/02/03prototype 1.6.0.2 と script.aculo.us 1.8.1 に差し替え
• 07/12/25ブラウザのスクロールに連動する RSS アイコン表示
• 07/12/03jQuery でアンチエイリアスの角丸をやってみる（jQuery curvyCorners）
• 07/11/23Ajaxでアクセス・ランキングを表示する４
• 07/10/10Feed2JS
• 07/08/01Lightboxのように透過レイヤー表示してみる

• Edit
• Permalink
• Comments(0)
• Trackbacks(0)

 Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

 Comments(0)

No comments found.