Movable Type 備忘録

 prototype で Five Star Rating( Starbox )２

  • Feb082009
  • Vote:
    http://bizcaz.com/archives/2009/02/08-053626.php
  • Categories: prototype
  • Tags: ,
  • Social Bookmark

こんばんわ^^

昨日は寿退社する後輩の送別会で 3 次会まで飲んでまして、今日はホント辛かった （つω-`｡） 始発まで待って帰って起きたのが 12 時過ぎでしたよ (;￣∇￣A

さて、先日訪問者さんからのリクエストで、Starbox の機能拡張やってみました。

久しぶりにコードを読んだのですが、カンタンに実装できると言ったもののリクエストを満たすための、ブログ記事タイトル、URL をログに保存してないので、結局大幅に変更しちゃいました (;￣∇￣A
どんな機能を追加したかというと、

  • 投票の可／不可をオプションで選択できるようにした。
  • 投票結果( アベレージ )のランキング表示をできるようにした。
  • 上記機能に伴って、ブログ記事名、ブログ記事 URL もいっしょにロギングするよう変更した。

です。
ついでに、オブジェクト指向的に作り直してみたので良かったら使ってみてください。

以前のバージョンとの互換はありません。
ですので、以前のデータをそのまま使うことができないのでご注意ください。

ダウンロード

使い方

使い方は以前とそれ程違いはないのですが、カンタンに以下に記します。

  • 投票機能を有効にする場合

    投票機能を有効にしたい場合には以下のようになります。

    投票機能有効

    1. <ul>
    2. <li id='starbox<$MTEntryID$>' class='star'><script type='text/javascript'>StarboxRating('starbox<$MTEntryID$>', {bid:<$MTBlogID$>, eid:<$MTEntryID$>, tit:'<$MTEntryTitle encode_js="1"$>', url:'<$MTEntryPermalink valid_html="yes"$>'});</script></li>
    3. </ul>

    赤字の部分には Starbox を表示するエレメントを指定します。
    同一ページ内に複数の Starbox を表示する場合には必ずユニーク( 重複しない ) ID を指定する必要があります。必須です。

    青字の部分はブログ ID を指定してください。
    この ID でログフォルダが作成されてブログ毎に管理されます。必須です。

    ピンク字にはブログ記事 ID を指定します。
    必須です。( ただし、ランキング表示時は不要です。)

    緑字の部分はブログ記事タイトルを指定します。
    必須です。( ただし、ランキング表示時は不要です。)

    黄色字の部分にはブログ記事 URL を指定します。
    必須です。( ただし、ランキング表示時は不要です。)

  • 投票機能を無効にする場合

    投票機能を無効にしたい場合には以下のようになります。

    投票機能無

    1. <ul>
    2. <li id='starbox<$MTEntryID$>' class='star'><script type='text/javascript'>StarboxRating('starbox<$MTEntryID$>', {bid:<$MTBlogID$>, eid:<$MTEntryID$>, tit:'<$MTEntryTitle encode_js="1"$>', url:'<$MTEntryPermalink valid_html="yes"$>', loc=true});</script></li>
    3. </ul>

    青字のように loc オプションを 'true' にすることで投票機能を無効にすることができます。デフォルトは 'false' です。

  • ランキング表示したい場合

    投票されたブログ記事のランキングを表示するには以下のようになります。

    ランキング表示

    1. <ul>
    2. <li id='starbox<$MTEntryID$>' class='star'><script type='text/javascript'>StarboxRating('starbox<$MTEntryID$>', {bid:<$MTBlogID$>, rnk:10});</script></li>
    3. </ul>

    赤字の部分は必須で指定します。
    青字の部分は上位何件分を表示するか指定します。'rnk' オプションを指定しないとランキング表示することができません。

    実際にはランキング表示は以下のようにマークアップされます。

    ランキング表示時のマークアップ

    1. <div id="starbox_ranking">
    2.     <ul>
    3.     <li><a href="ブログ記事 URL" title="ブログ記事タイトル"><span>アベレージ</span>ブログ記事タイトル</a></li>
    4.     </ul>
    5. </div>

    サンプルの CSS は以下のようになります。

    スタイルシート

    1. #starbox_rank ul {
    2.     padding: .5em;
    3.     width: 300px;
    4. }
    5. #starbox_rank ul li {
    6.     border-bottom: 1px solid #303;
    7. }
    8. #starbox_rank li a,
    9. #starbox_rank li a span {
    10.     display: block;
    11. }
    12. #starbox_rank li a:hover {
    13.     text-decoration: none;
    14. }
    15. #starbox_rank li a span {
    16.     padding: 0 5px;
    17.     float: right;
    18.     font-weight: 700;
    19. }

    お好みで変更してください。

以上です。

 Trackback Pings(0)

No trackbacks found.

 Comments(14)

#1: Posted by mnk @ February 16, 2009 [REPLY]
user-pic

bzbellさん、こんにちは。

新しいstarbox.ratingを試させていただきました。
もーバッチリです！希望どうりです！！ありがとうございますパチパチ
若干表示も速くなったような気がします。

ランキング表示部分を、こちらのエントリーの「ランキング表示」の
サンプルコードのように書いたらうまく表示されず、
それまでうまくいっていた投票部分（星の部分）の表示までおかしくなって、
焦ってしまいまいましたが、同包されていたdemo.htmlを参考に書き直したら、
正しく表示されるようになりました。

これならオプションを追加するといった簡単なカスタマイズなら自分でもできるかも！
などと無謀にもチャレンジしてみたのですが、できました！！ブイブイ
アーカイブリストページではインジケータを非表示＆少し小さい星で表示する、
というようにしてみたら大成功で、カスタマイズの幅が広がりましたウインク

素晴らしいスクリプトを配布してくださって、感謝の気持ちでいっぱいです。
ありがとうございましたぺこり

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

>>1 mnk さん

こんばんわ^^

よかったぁあせあせ ちゃんと表示できて。
また何かありましたらご連絡頂けたらと思います。
今後ともどうぞよしなにぺこり

 
#3: Posted by オーク @ April 12, 2009 [REPLY]
user-pic

bzbellさん、こんばんは。
先日はページ・アクセス・ランキングのPluginでお世話になりありがとうございました。
またまた、お世話になります。
今回は当Five Star Ratingをバージョンアップしようとしているのですが、
うまくログ・データの書き込みが出来ず難儀しております。
現段階ではプラグインのインストールと関係部分jの修正のみしており、ブログへの
組み込みはしていません。確認はDEMO.HTMLで行っています。

１．さくらインターネットと同じ仕様なのか、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);
}

と前バージョンと同じ修正を行いました。その結果ログが出来るようには
なったのですが、ログ・ファイルの第1フィールドとなるタイトルが文字化けを
しています。（ファイルをダンプしてEditorで見た所、他のフィールドはOK
ですが、ここだけが文字化けしてます）
その為なのか、Rateの指定をして再度表示を行うと待ち状態から抜け出ません。
（ファイルの読み込みでループしている状態）
そこで、ログ・ファイルをEditorで修正してあげると正常に動作します。
と言う事で、ログファイルの書き込みがうまくいっていないと思うのですが
対応策をご教授いただけないでしょうか。
現在、異なるディレクトリで前バージョンが動いたままです。
prototype.js等はDEMO.HTMLでは全く別のファイルのものを指定しています。
尚、PHPはバージョン４です。
よろしくお願いします。

 
#4: Posted by オーク @ April 12, 2009 [REPLY]
user-pic

追加情報です。
IE6では以下のエラー・メッセージが出ます。

ライン:1369
文字:7
エラー:システムエラー:-1072896748
コード:0
URL:http://www.mizunara.com/script/starbox/demo.html

よろしくお願いします。

 
#5: Posted by Author Profile Page bzbellからオークへの返信 @ April 12, 2009 [REPLY]
user-pic

>>3 オーク さん

こんばんわ^^

文字化けの原因は UTF-8 でないからだと思います。
アップロードされたファイルは UTF-8 になってるかご確認ください。

 
#6: Posted by オーク @ April 13, 2009 [REPLY]
user-pic

bzbellさん、ご面倒をお掛けしております。
再三UTF-8での転送やり直しなど色々とやってみたのですが、
駄目でした。サーバーのデフォルトのコードとの変換がうまく
いかないようです。ログ・ファイルは作成され、EUC-JかS-JISで
読めるのですが、UTF-8への変換がうまくいかないのか？？？
私には皆目見当がつきません。

しばらく頭を冷やします。とりあえず旧バージョンで行きます。
ありがとうございました。

 
#7: Posted by Author Profile Page bzbellからオークへの返信 @ April 13, 2009 [REPLY]
user-pic

>>6 オーク さん

こんばんわ^^

試しに starbox.post.php 内の 112 行目を削除して確認してみてください。

 
#8: Posted by オーク @ April 14, 2009 [REPLY]
user-pic

お手間取らせます。
starbox.post.phpの112行目
header("Content-Type: text/javascript; charset=utf-8");
をコメントアウトしても結果は同じでした。demo.htmlの表示にも変化はありません。
page.rankingでは正常に動作するのにねー。
尚、タイトルが英数字では問題なく、日本語だと駄目ですのでエンコードの
問題だとは思うのですが。

 
#9: Posted by Author Profile Page bzbellからオークへの返信 @ April 14, 2009 [REPLY]
user-pic

>>8 オーク さん

こんばんわ^^

先ほども確認したのですが、ウチでは問題ないようなのでコード的なところではないと思われまする。
なので、やっぱりサーバ側の問題のように見受けられます。
ファイル保存において文字コードの扱いは特に変更してませんので変わりはないはずで、排他制御の方法とログファイルの内容が変更になった程度です。

オークさんのテストページをデバッグしたところ Ajax による転送までは日本語はちゃんと読めてました。ここまでしかわたしからは確認できません。その先のこととなるとオークさんの環境に依存します。

たとえば、UTF-8 で作成したファイルに日本語を記入しておき、FTP で転送したことでその結果が化けてるということはないでしょうか。

もうわたしからはそれくらいしかアドバイスできませんのほほん

 
#10: Posted by オーク @ April 29, 2009 [REPLY]
user-pic

bzbellさん、ご面倒をお掛けしました。
グローバル・モディファイアーescape="url"をつけることで解決しました。
私の知識では理屈は分かりませんが、私のシステム環境でのコード変換に
問題があるのかなーと思っています。
これでしばらく運用してみます。ありがとうございました。

 
#11: Posted by Author Profile Page bzbellからオークへの返信 @ April 29, 2009 [REPLY]
user-pic

>>10 オーク さん

おはよございます^^

> グローバル・モディファイアーescape="url"をつけることで解決しました。

使われてる文字コードが UTF-8 ではなかったということでしょうか。
何れにしましても解決してよかったですねパチパチ

 
#12: Posted by オーク @ May 25, 2009 [REPLY]
user-pic

bzbellさん、おはようございます。
お忙しいようですね。そんな中申し訳ないのですが、一つ問題が出てしまい解決できないでいます。お力をお借りしたくお願いします。
前回の文字バケの問題は解決して運用しているのですが、表示順に問題が発生しています。
ログ・ファイルが１０件を超えた所から、ランク順に並ばなくなって、上位ランクのものが表示されず、下位ランクのものが表示されるようになりました。ログ・ファイルの中がおかしいのかと思って確認したのですが、そうでもないようです。最終的に下位ランクのログ・ファイルを１件づつ削除していった所、ログ・ファイルの件数が１０件（表示を１０件に指定しています）になった時点で上位１０件が正常にランク順に表示されるようになりました。
ランク順にソートする手法や必要とするメモリ容量（共用サーバーなので制限あるのか？）、私のサーバーのＩ／Ｏ（make Directory：予め手動で作っておかないと駄目らしい）に問題あるのか良く分からないのですが、何かアドバイスがありましたらお願いします。
よろしくお願いします。

 
#13: Posted by Author Profile Page bzbellからオークへの返信 @ May 25, 2009 [REPLY]
user-pic

>>12 オーク さん

こんばんわ^^

> ログ・ファイルが１０件を超えた所から、ランク順に並ばなくなって、
> 上位ランクのものが表示されず、下位ランクのものが表示されるようになりました。

う～んはて？
starbox.rating.js の方はサーバ側スクリプトからの順番を充実に一覧表示するだけなので、問題があるとしたらサーバ側スクリプト starbox.post.php だと思われます。

starbox.post.php のコードを確認したところ、不具合と思わしきコードがありましたので少し変更しました。
http://bizcaz.com/archives/shoco/js/starbox.rating-0.05.zip

お手数ですが上記圧縮ファイルを DL して頂き、starbox.post.php を更新して確認してみて頂けますか。たぶん、これでログファイルが 10 件以上になったとしてもちゃんとランキング表示されると思いますブイブイ

 
#14: Posted by オークからbzbellへの返信 @ May 26, 2009 [REPLY]
user-pic

>>13 bzbell さん
早速の対応ありがとうございます。
削除していた下位ランクのログ・ファイルを追加しても、正常な順序で表示されるようになりました。
暫く様子を見ることにしますが、修正されたようです。
お忙しい中での対応ありがとうございました。
またまたお世話になってしまいました。感謝します。

 

 Post a Comment

 

コメント用フィード