Movable Type 備忘録

Ajaxによる投票をやってみる

Jan032007
Author: bzbell
Categories: Customize
Tags: Ajax, Customize, MovableType, Vote

Prev Page: 投稿されたコメント、トラックバックの強調表示
Next Page: JavaScriptでドロップシャドウ

あけましておめでとうございます。ことよろぉ～♪

みなさん、年末年始はゆっくり、まったりできましたか。
わたしはまぁ～たりできました。明治神宮は相変わらずでしたの。

今年もMovableType(ムーバブルタイプ)をベースにいろんなカスタマイズをやってみようと思っておりますので、よろしくお願い致します。

さて、本年度最初のカスタマイズとなります、「MovableType(ムーバブルタイプ)に投票システム入れてしまおう」です。

Voteプラグインというものがあったようですが(今もあるのかな)、既に過去の産物となっているようで、あまり使われてないようですの。わたし的にはプラグインに拘っているわけではないので、MovableType(ムーバブルタイプ)に設置できるものなら、何でもTRYしてみようという姿勢でおります。

というわけで、今回は投票システムを設置してみましたのでご紹介します。

- 2007.10.23 追記 -

2007.10.23 付けのバージョンは ver1.2.2 です。それに合わせて設置方法を修正しました。

- 2007.07.09 追記 -

またまた訪問者さんのご連絡で貴重な情報を頂きました。
ですので、もし思った通りの動作をしないな･･･という時は、各訪問者さんのコメントを参考にしてください。

kay さんありがとうございます (￣∇￣)/

- 2007.03.22 追記 -

訪問者さんからのご連絡で、配布元のスクリプトがバージョンアップされていました。カンタンにファイルの中と、動作確認してみたところ、表示はできるものの、投稿はできませんでした。
ざっと見たところ、ダウンロードした最新バージョンでここで説明してる内容の変更すれば動作できそうです。アップグレードはダメみたい。週末にでも詳しく解析してみますの♪

ちなみに、この記事で使用していたバージョンは1.1です。

ここでご紹介するカスタマイズは、

データベースにMySQLを使用していること。
ブログのPHP化を行っていること。

が、大前提となります。ご注意ください。

今回使用した投票ツールは、こちらのMasuga Design - Unobtrusive AJAX Star Rating Barを使わせてもらいました。

投票ツールの環境について

ここでは以下のような環境として説明していきます。例を参考に各自の環境に読み替えてください。

http://●●●.com/
+--- rating/
+-- _config-rating.php
+-- _drawrating.php
+-- db.php
+-- rpc.php
+--- index.php
|
+--- css/
|    +--- rating.css
|
+--- images/
|    +--- starrating.gif
|    +--- working.gif
|
+--- js/
|    +--- behavior.js
|    +--- rating.js
|
+--- test/
+--- index.php  <-- rating/index.phpをコピペします

まず、上記URLから圧縮ファイルをダウンロードします。ダウンロードしたら適当なフォルダに展開してください。

各ファイルを編集

上記環境に合わせて各スクリプトを修正します。
修正内容は以下の通りです。

_config-rating.php
12行目
$rating_dbhost  = 'ホスト名';
$rating_dbuser = '接続ユーザ名';
$rating_dbpass  = '接続パスワード';
$drating_dbname  = 'データベース名';
$rating_tableName  = 'ratings';

青い字の部分は各自で使用しているMySQLの接続情報を記入します。
赤い字の部分は投票用テーブル名称になります。他と重複しなければ任意の名前で構いません。とりえあず、ここではデフォルトの'ratings'としておきます。

_drawrating.php
80行目
$rater.='<li><a href="http://●●●/ratings/db.php?j='.$ncount.'&amp;q='.$id.'&amp;t='.$ip.'&amp;c='.$units.'" title="'.$ncount.' out of '.$units.'" class="r'.$ncount.'-unit rater" rel="nofollow">'.$ncount.'</a></li>';

青い字の部分でdb.phpへのURLを追加しています。各自の環境に合わせて追加してください。

rpc.php
25行目
$numbers = mysql_fetch_assoc($query);
if ( !$numbers['total_votes'] )
{
// 初めての投票の場合ダミーレコードを作成しておく
mysql_query("INSERT INTO $tableName VALUES ('$id_sent', 0, 0, '')")or die(" Error: ".mysql_error());
}

- 2007.07.09 追記 -

上記対策は Ver1.1 の対策です。Ver1.2.2(現行バージョン)では不要ですので読み飛ばしてください。

赤い字の行の下に、青い字の部分を追加します。
このコードでは、データベースからデータを読み出した結果、レコード件数が0の場合、新規レコードを作成しています。
わたしもしばらく悩んだのですが、どうやら指定IDに該当するレコードがデータベース内に存在していないと正しく動作しないようなんです。

言い換えると、これからカスタマイズする、エントリごとに投票ツールを設置する場合、エントリ数分のレコードを作成しておく必要があります。なので、上記コードにより自動的に作成するようにしているわけです。

js/rating.js
65行目
xmlhttp.open('get', 'http://●●●/ratings/rpc.php?j='+vote+'&q='+id_num+'&t='+ip_num+'&c='+units);

先ほどと同様に、青い字の部分でrpc.phpへのURLを追加しています。

以上で前準備は完了です。
一通り修正したら保存してサーバにアップロードします。アップロード先は、先ほど示した例のような環境としてアップロードします。

投票用テーブルを新規作成

MovableType(ムーバブルタイプ)で作成されたテーブルとは別に、投票用のテーブルを新規作成します。

ぶっちゃけ、ここでの作業は気をつけてください。

間違ってもMovableType(ムーバブルタイプ)で使用しているテーブルを削除なんてしないでくださいね。

心配な人はエキスポートしてバックアップすることをおすすめします。

各自で借りてるレンタルサーバに接続して、phpMyAdminにログインします。
「SQL」というタブをクリックすると右の図のような画面が表示されます。赤い枠がMovableType(ムーバブルタイプ)用のテーブル一覧です。危険です!!
黄色枠内に以下のコードを入力して、「実行」ボタンをクリックすると青い枠に示す投票用のテーブルが新規作成されます。

CREATE TABLE `ratings` (
`id` varchar(11) NOT NULL,
`total_votes` int(11) NOT NULL default 0,
`total_value` int(11) NOT NULL default 0,
`used_ips` longtext,
PRIMARY KEY  (`id`)
) TYPE=MyISAM AUTO_INCREMENT=3;

以上で前準備は完了です。
ブラウザから、先ほどアップロードしたrating/index.phpを表示してみてください。投票イメージが表示されるはずです。クリックするとAjaxにより、データベースにデータが保存されて、投票結果が表示されることを確認してください。

デフォルトの動作が確認できたら、今度はMovableType(ムーバブルタイプ)に組み込んだ想定で投票させてみます。
index.phpを以下のように修正してください。

index.php
1行目
<?php require('/home/●●●/●●●/●●●/rating/_drawrating.php'); ?>
10行目
<script type="text/javascript" src="../js/behavior.js"></script>
<script type="text/javascript" src="../js/rating.js"></script>
<link rel="stylesheet" type="text/css" href="../css/default.css"" />
<link rel="stylesheet" type="text/css" href="../css/rating.css"" />

青い字の部分で_drawrating.phpへの絶対パスを追加します。 URLではありませんのでご注意ください。

index.phpの場所が変わったので、それに伴ってJSとCSSのパスを赤い字の部分で変更します。
一通り修正したら保存して、先ほど示した例のように、rating/testというディレクトリを作成してその中にアップロードしてください。

アップロードしたら、ブラウザから表示させてみてください。デフォルト(rating/index.php)のときと同じように投票できたらOKです。
表示ができなかった場合には、パスが間違ってる可能性大です。

個別エントリ・アーカイブを修正

では、いよいよ個別エントリ・アーカイブ・テンプレート内に投票ツールを埋め込んでみたいと思います。
ここまでできれば、後はindex.phpと同じ記述を個別エントリ・アーカイブ・テンプレート内に追加するだけです。ざっと説明します。

1行目
<?php require('/home/●●●/●●●/●●●/rating/_drawrating.php'); ?>
：
：
：
<script type="text/javascript" src="<$MTBlogURL$>rating/js/behavior.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>rating/js/rating.js"></script>
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>rating/css/rating.css" />
</head>

青い字の部分を追加します。赤い字の部分をMovableType(ムーバブルタイプ)用に変更しました。

以下のコードを、投票イメージを表示させたい場所に追加します。

<?php echo rating_bar('<$MTEntryID$>',5); ?>

青い字の部分が投票ID(= エントリID)で、赤い字の部分は表示される星のイメージ数を表しています。

一通り追加したら保存して再構築します。
再構築後、エントリページを表示して正しく投票できることを確認します。

以上でAjaxによる投票が行えるようになりました。
新年早々、長々とすいません。

- 2007.01.19 追記 -

どうやら、エントリ・ページ中の<body>タグで、以下のindividualArchivesOnLoad()をロードするようにしていると、ページがリロードするだけで投票されないとのご連絡を頂きました。

<body onload="individualArchivesOnLoad(commenter_name)">

MovableType(ムーバブルタイプ)のデフォルト・テンプレートでは、上記のようになっております。ですので、同じ現象がでて諦めてしまっていた人は、以下のように修正を行えば正しく投票できるようになります。

<body>からonload="individualArchivesOnLoad(commenter_name)"を削除します。
<body onload="individualArchivesOnLoad(commenter_name)">

</body>の上あたりに以下を追加します。
<script type="text/javascript">
<!--
individualArchivesOnLoad(commenter_name);
//-->
</script>
</body>

わたしのサイトでは既に上記のような対応済みだったので、普通に投票できてしまって気づきませんでした。すいません。

SPECIAL THANKS!!
hakuro.info blog::photologに投票ボタンを追加してみました。

投票(人気ページ)ランキングとか、投票された全エントリ一覧などの表示を後日追記いたしますね。

- 2007.01.07 追記 -

投票された、上位10エントリを表示する場合は以下のようにします。サンプルとして、わたしのサイトではトップページの「Popular Page Top10」として表示させてみました。

まず、rating/_drawrating.phpをベースに一覧表示用として、rating/_ratinglist.phpという名前でファイルコピーします。内容は以下のようになります。

<?php
function rating_bar($id,$units='') {
require('_config-rating.php'); // get the db connection info
//set some variables
$ip = $_SERVER['REMOTE_ADDR'];
if (!$units) {$units = 10;}
$query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='$id' ")or die(" Error: ".mysql_error());
$numbers=mysql_fetch_assoc($query);
$count=$numbers['total_votes']; //how many votes total
$current_rating=$numbers['total_value']; //total number of rating added together and stored
$tense=($count==1) ? "vote" : "votes"; //plural form votes/vote
// determine whether the user has voted, so we know how to draw the ul/li
$voted=mysql_num_rows(mysql_query("SELECT used_ips FROM $tableName WHERE used_ips LIKE '%".$ip."%' AND id='".$id."' "));
// now draw the rating bar
?>
<div class="ratingblock">
<div id="unit_long<?php echo $id ?>">
<ul id="unit_ul<?php echo $id ?>" class="unit-rating" style="width:<?php echo $unitwidth*$units; ?>px;">
<li class="current-rating" style="width:<?php echo @number_format($current_rating/$count,2)*$unitwidth; ?>px;">Currently <?php echo @number_format($current_rating/$count,2); ?>/<?php echo $units ?></li>
</ul>
<p>Rating: <strong><?php echo @number_format($current_rating/$count,1) ?></strong>/<?php echo $units ?> (<?php echo $count ?> <?php echo $tense ?> cast)
</p>
</div>
</div>
<?
}
?>

上記は、rating/_drawrating.phpの投票機能をなくして、現在の投票数を表示するだけにしています。
そして、一覧表示したいページに以下を追加します。

1行目
<?php require('/home/●●●/●●●/●●●/rating/_ratinglist.php'); ?>
：
：
：
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>rating/css/rating.css" />

最後に、一覧表示したい場所に以下のコードを追加します。

<MTSQLEntries query="SELECT DISTINCT mt_entry.*,ratings.* FROM mt_entry,ratings WHERE mt_entry.entry_id=ratings.id ORDER BY ratings.total_value DESC LIMIT 0 , 10">
<h4><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></h4>
<?php rating_bar('<$MTEntryID$>',5); ?>
</MTSQLEntries>

上記はこちらのSQLでエントリを更新された順にソートするでご紹介した、SQLプラグインをインストールする必要があります。
上記では青い字の部分で10件分を表示させています。すべての投票エントリを表示させたい場合には青い字の部分を削除します。

では、懲りずに本年もよろしくお願い致します。

Trackback Pings(2)

TrackBack URL for this entry:

from PhotoLog@SiliconValley: 前から入れたいと思っていた投票システムを導入しました。皆さんの率直な評価をお知ら...
Tracked on March 3, 2007

from じっぷろぐ: 各エントリーの下のところに、評価を投票できる仕組みを設置してみました。画面遷移したりしないので、気軽に投票してみて下さい。こちらのエントリーを大いに参...
Tracked on March 11, 2007

Comments(18)

#1: Posted by oscar @ January 3, 2007 [REPLY]

付けてみたんですね。
私も一度検討してみたんですが、ある程度のリアクションが無い所でこれやると、情けない状況になるんでやめました。
投票して知りたい事もなかったですしね。

ただ、コメントやブクマよりは敷居が低いので、もうチョット広い範囲での反応が解るかもしれないですね。

#2: Posted by bzbell @ January 4, 2007 [REPLY]

> ある程度のリアクションが無い所でこれやると、情けない状況になるんでやめました。

わたしは他のサイトで同じようなVoteを見かけたとき、コメントはしない(できない)けど、投票だけしたりしてますよ♪
だから、oscarさんも設置してみてください (＞∀＜　)

あとですね、このカスタマイズのソース解析などしたことでデータベースの制御の仕方を覚えました。
今度は自分専用のテーブルを作って何かできないかなぁ･･･って考えてます。
データの扱い方さえ分かってしまえば、自分が求めてるプラグインがなかったとしても、PHPなどで実装できちゃいますからね。
カスタマイズの幅が広がったと思ってますの♪

#3: Posted by 白露 @ January 19, 2007 [REPLY]: こんにちは。
毎回素晴らしいカスタマイズどうもありがとうございます！
トラックバックが上手くいかなかったので、コメントにて失礼します。
<body onload="individualArchivesOnLoad(commenter_name);>と書かれている場合、上手く投票できないようです。
私の方で、簡単な補足記事を書いてみました。
参考になれば幸いです。

#4: Posted by bzbell @ January 19, 2007 [REPLY]

>>3 白露さん

こんにちわ^^

あっそうなんですの Σ(￣Д￣；)!?
確かにわたしのサイトでも、individualArchivesOnLoadはページ末端に移動させてたのでまったく気づきませんでした
ありがとうございます。

さっそく記事のほうに反映させていただきます。

#5: Posted by Masao.S @ March 22, 2007 [REPLY]

はじめまして！

2007/3/18 の version 1.2.1 以降は

<?php echo rating_bar('x'); ?>

のように echo を入れないと正常に表示されないようです。

サイトを再構築中にこのソフトをバージョンアップしたら起動しなくなったので readme 読んでみたところ書いてありました。

参考までに！

#6: Posted by bzbell @ March 22, 2007 [REPLY]

>>5 Masao.S さん

はじめまして^^

ご連絡ありがとうございます。

とりえあず、カンタンにスクリプトの中見てみたら、結構変更されてますね (;￣∇￣A

単純にファイルを差し替えるだけではダメなようです。

とっても助かりました♪

#7: Posted by kay @ July 9, 2007 [REPLY]

はじめまして

こちらの記事を参考にAJAXによる投票機能、試してみました。
すごくわかりやすく参考になりました。

ありがとうございます。

ところで、１箇所気になっているですが、
Unobtrusive AJAX Star Rating Barのバージョン1.2.2で試したところ

rpc.phpの修正は必要なさそうなのですが、どうなんでしょう・・・？
いろいろ試した結果、この部分を削除したらうまく動くようになりました。

新しいバージョンでは対応済みなのかな？と思っているのですが・・・

#8: Posted by bzbell @ July 9, 2007 [REPLY]

>>7 kay さん

はじめまして^^

> rpc.phpの修正は必要なさそうなのですが、どうなんでしょう・・・？

コード見比べたら結構違ってますね (;￣∇￣A
どうやら、Ver1.2 で上記対策が施されたようです。

ですので、ご指摘の通り今となっては不要ですね。
ご報告ありがとうございます♪

#9: Posted by imo787 @ October 23, 2007 [REPLY]

こんにちは。
いつも参考にさせていただいてます。
現在、Ajaxによる投票をしています。
このページの記事に下記のような文章があります。↓

各自で借りてるレンタルサーバに接続して、phpMyAdminにログインします。
「SQL」というタブをクリックすると右の図のような画面が表示されます。赤い枠がMovableType(ムーバブルタイプ)用のテーブル一覧です。危険です!!
黄色枠内に以下のコードを入力して、「実行」ボタンをクリックすると青い枠に示す投票用のテーブルが新規作成されます。

↑ここにある「右の図のような画面」が見れないため、SQLのテーブルの作り方がわかりません。
サイトリニューアルの際に消えてしまったのでしょうか？
「危険」とあるため怖くて先に進めません、、、。
もし可能であれば表示いただければ助かります。
よろしく願いします。

#10: Posted by bzbell @ October 23, 2007 [REPLY]

>>9 imo787 さん

こんばんわ^^

ご迷惑をおかけしてすいません (´Д｀；)
また、ajaxstarrater はこの記事でご紹介してるバージョンより新しくなってます。
インストール方法は、ダウンロードした圧縮ファイル中の readme.txt というファイルが入ってますのでそちらも合わせて確認してください。

先ほど、最新バージョンをダウンロードして設置してみたところ、そのインストール手順なら問題なくサンプルを表示することができましたから大丈夫 (￣∇￣)v

#11: Posted by imo787 @ October 25, 2007 [REPLY]: >>10 bzbell さん
画像の表示ありがとうございました。
助言もあり、問題なくインストールできました。
助かりました!

#12: Posted by I am Google @ November 26, 2007 [REPLY]: こんにちはー。はじめまして。
このエントリーと直接関係はないのですが、MTのPermalinkは、mysqlのどのテーブルのフィールドに格納されているのかお分かりになりますか？

#13: Posted by bzbell @ November 26, 2007 [REPLY]

>>12 bzbell さん

こんばんわ^^

Permalink ですか!?

データベース上には Permalink は保存してなかったように思います。
MT の各テーブルの紐付けを理解してないので詳しいことは分かりませんが、再構築時に各テーブルからのデータを組み合わせて作成するんじゃないですかね!?

#14: Posted by imo787 @ December 3, 2007 [REPLY]

いつも参考にさせていただいてます。
先日もajaxstarraterに関して質問させていただきましたが、
新たな壁にあたってしまいました。

ajaxstarraterを設置する途中の、デフォルトのindex.phpを見てみると下記ＵＲＬのようになります。

Error: You have an error in your SQL syntax. Check the manual that corresponds to your MySQL server version for the right syntax to use near '-music.ratings2 WHERE id='id21'' at line 1

今まで数サイトでajaxstarraterの設置に成功してきたのですが、
今回のエラーは初めてです。
ｄｂのテーブルもbzbell さんのソースをそのままコピーさせていただいてます。
今までと違う点は、ＭＴが４になったってことくらいです。

ＭＴ４だと違う設置方法ってことってありますかね？
ご教授よろしくお願いします！！

#15: Posted by bzbell @ December 3, 2007 [REPLY]

>>14 imo787 さん

こんにちわ^^

上記エラー内容からデータ抽出時に指定する ID が何かおかしいように思います。
具体的には db.php 内の 30 行目でエラーしてるっぽくって、rating.js 内の 65 行目でリクエストしたときの ID が指定されます。

'id21' という ID は imo787 さんが意図した ID でしょうか。
ちなみにわたしのとこでは、ただの数値だけのように思いましたけど。

あと、接続はできてるようです!? が、データベース名( -music.ratings2 )も正しいでしょうか。

#16: Posted by bronco @ May 19, 2008 [REPLY]

こんなすごいサイトがあるとは驚きです！
色々参考にさせていただきます。

一つお聞きしたいのですが、この最後の部分で
<?php echo rating_bar('<$MTEntryID$>',5); ?>
<$MTEntryID$>に任意のIDを入れて投票が行われるのはできたのですが、
動的なPHPファイルが生成されるファイルに自動でIDをつけることはできますでしょうか。
（例えばwww.aaa.com/aaa.php?eid=00745のurlの末尾5桁をIDにするなど）
といいますのもaaa.phpのファイルがすべて同じ評価になってしまいます。
宜しければご教示願いします。

#17: Posted by bzbell @ May 19, 2008 [REPLY]

こんばんわ^^

> 色々参考にさせていただきます。

ありがとうございます。
どうぞよしなに