Movable Type 備忘録
Ajaxによる投票をやってみる
- Prev Page: エントリ内のリンク切れをチェックする
- Next Page: ブログの最終更新日付を表示する
あけましておめでとうございます。ことよろぉ~♪
みなさん、年末年始はゆっくり、まったりできましたか。
わたしはまぁ~たりできました。
明治神宮は相変わらずでしたの。
今年も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.php12行目$rating_dbhost = 'ホスト名';$rating_dbuser = '接続ユーザ名';$rating_dbpass = '接続パスワード';$drating_dbname = 'データベース名';$rating_tableName = 'ratings';
青い字の部分は各自で使用しているMySQLの接続情報を記入します。
赤い字の部分は投票用テーブル名称になります。他と重複しなければ任意の名前で構いません。
とりえあず、ここではデフォルトの'ratings'としておきます。
_drawrating.php80行目$rater.='<li><a href="http://●●●/ratings/db.php?j='.$ncount.'&q='.$id.'&t='.$ip.'&c='.$units.'" title="'.$ncount.' out of '.$units.'" class="r'.$ncount.'-unit rater" rel="nofollow">'.$ncount.'</a></li>';
青い字の部分でdb.phpへのURLを追加しています。 各自の環境に合わせて追加してください。
rpc.php25行目$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.js65行目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.php1行目<?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という名前でファイルコピーします。 内容は以下のようになります。
上記は、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(3)
- from
PhotoLog@SiliconValley
前から入れたいと思っていた投票システムを導入しました。皆さんの率直な評価をお知ら...
- from
じっぷろぐ
各エントリーの下のところに、評価を投票できる仕組みを設置してみました。 画面遷移したりしないので、気軽に投票してみて下さい。 こちらのエントリーを大いに参...
- from
うかブログ
昨夜、このブログの記事ページに「5つ星評価が付けられる機能」を追加しました。クリックひとつで「悪い/参考にならない」か...





付けてみたんですね。
私も一度検討してみたんですが、ある程度のリアクションが無い所でこれやると、情けない状況になるんでやめました。
投票して知りたい事もなかったですしね。
ただ、コメントやブクマよりは敷居が低いので、もうチョット広い範囲での反応が解るかもしれないですね。
> ある程度のリアクションが無い所でこれやると、情けない状況になるんでやめました。
わたしは他のサイトで同じようなVoteを見かけたとき、コメントはしない(できない)けど、投票だけしたりしてますよ♪
だから、oscarさんも設置してみてください (>∀< )
あとですね、このカスタマイズのソース解析などしたことでデータベースの制御の仕方を覚えました。
今度は自分専用のテーブルを作って何かできないかなぁ・・・って考えてます。
データの扱い方さえ分かってしまえば、自分が求めてるプラグインがなかったとしても、PHPなどで実装できちゃいますからね。
カスタマイズの幅が広がったと思ってますの♪
こんにちは。
毎回素晴らしいカスタマイズどうもありがとうございます!
トラックバックが上手くいかなかったので、コメントにて失礼します。
<body onload="individualArchivesOnLoad(commenter_name);>と書かれている場合、上手く投票できないようです。
私の方で、簡単な補足記事を書いてみました。
参考になれば幸いです。
>>3 白露 さん
こんにちわ^^
あっそうなんですの Σ( ̄Д ̄;)!?
確かにわたしのサイトでも、individualArchivesOnLoadはページ末端に移動させてたのでまったく気づきませんでした
ありがとうございます。
さっそく記事のほうに反映させていただきます。
はじめまして!
2007/3/18 の version 1.2.1 以降は
<?php echo rating_bar('x'); ?>
のように echo を入れないと正常に表示されないようです。
サイトを再構築中にこのソフトをバージョンアップしたら起動しなくなったので readme 読んでみたところ書いてありました。
参考までに!
>>5 Masao.S さん
はじめまして^^
ご連絡ありがとうございます。
とりえあず、カンタンにスクリプトの中見てみたら、結構変更されてますね (; ̄∇ ̄A
単純にファイルを差し替えるだけではダメなようです。
とっても助かりました♪
はじめまして
こちらの記事を参考にAJAXによる投票機能、試してみました。
すごくわかりやすく参考になりました。
ありがとうございます。
ところで、1箇所気になっているですが、
Unobtrusive AJAX Star Rating Barのバージョン1.2.2で試したところ
rpc.phpの修正は必要なさそうなのですが、どうなんでしょう・・・?
いろいろ試した結果、この部分を削除したらうまく動くようになりました。
新しいバージョンでは対応済みなのかな?と思っているのですが・・・
>>7 kay さん
はじめまして^^
> rpc.phpの修正は必要なさそうなのですが、どうなんでしょう・・・?
コード見比べたら結構違ってますね (; ̄∇ ̄A
どうやら、Ver1.2 で上記対策が施されたようです。
ですので、ご指摘の通り今となっては不要ですね。
ご報告ありがとうございます♪
こんにちは。
いつも参考にさせていただいてます。
現在、Ajaxによる投票をしています。
このページの記事に下記のような文章があります。↓
各自で借りてるレンタルサーバに接続して、phpMyAdminにログインします。
「SQL」というタブをクリックすると右の図のような画面が表示されます。赤い枠がMovableType(ムーバブルタイプ)用のテーブル一覧です。危険です!!
黄色枠内に以下のコードを入力して、「実行」ボタンをクリックすると青い枠に示す投票用のテーブルが新規作成されます。
↑ここにある「右の図のような画面」が見れないため、SQLのテーブルの作り方がわかりません。
サイトリニューアルの際に消えてしまったのでしょうか?
「危険」とあるため怖くて先に進めません、、、。
もし可能であれば表示いただければ助かります。
よろしく願いします。
>>9 imo787 さん
こんばんわ^^
ご迷惑をおかけしてすいません (´Д`;)
また、ajaxstarrater はこの記事でご紹介してるバージョンより新しくなってます。
インストール方法は、ダウンロードした圧縮ファイル中の readme.txt というファイルが入ってますのでそちらも合わせて確認してください。
先ほど、最新バージョンをダウンロードして設置してみたところ、そのインストール手順なら問題なくサンプルを表示することができましたから大丈夫 ( ̄∇ ̄)v
>>10 bzbell さん
画像の表示ありがとうございました。
助言もあり、問題なくインストールできました。
助かりました!
こんにちはー。はじめまして。
このエントリーと直接関係はないのですが、MTのPermalinkは、mysqlのどのテーブルのフィールドに格納されているのかお分かりになりますか?
>>12 bzbell さん
こんばんわ^^
Permalink ですか!?
データベース上には Permalink は保存してなかったように思います。
MT の各テーブルの紐付けを理解してないので詳しいことは分かりませんが、再構築時に各テーブルからのデータを組み合わせて作成するんじゃないですかね!?
いつも参考にさせていただいてます。
先日もajaxstarraterに関して質問させていただきましたが、
新たな壁にあたってしまいました。
ajaxstarraterを設置する途中の、デフォルトのindex.phpを見てみると下記URLのようになります。
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の設置に成功してきたのですが、
今回のエラーは初めてです。
dbのテーブルもbzbell さんのソースをそのままコピーさせていただいてます。
今までと違う点は、MTが4になったってことくらいです。
MT4だと違う設置方法ってことってありますかね?
ご教授よろしくお願いします!!
>>14 imo787 さん
こんにちわ^^
上記エラー内容からデータ抽出時に指定する ID が何かおかしいように思います。
具体的には db.php 内の 30 行目でエラーしてるっぽくって、rating.js 内の 65 行目でリクエストしたときの ID が指定されます。
'id21' という ID は imo787 さんが意図した ID でしょうか。
ちなみにわたしのとこでは、ただの数値だけのように思いましたけど。
あと、接続はできてるようです!? が、データベース名( -music.ratings2 )も正しいでしょうか。
こんなすごいサイトがあるとは驚きです!
色々参考にさせていただきます。
一つお聞きしたいのですが、この最後の部分で
<?php echo rating_bar('<$MTEntryID$>',5); ?>
<$MTEntryID$>に任意のIDを入れて投票が行われるのはできたのですが、
動的なPHPファイルが生成されるファイルに自動でIDをつけることはできますでしょうか。
(例えばwww.aaa.com/aaa.php?eid=00745のurlの末尾5桁をIDにするなど)
といいますのもaaa.phpのファイルがすべて同じ評価になってしまいます。
宜しければご教示願いします。
こんばんわ^^
> 色々参考にさせていただきます。
ありがとうございます。
どうぞよしなに
> 的なPHPファイルが生成されるファイルに自動でIDをつけることはできますでしょうか。
そうですねぇ・・・静的なファイルに静的な ID が基本ですからねぇ。
う~ん・・・ムズかしいかもです
ID は必ずユニーク(唯一)ものであること。
そして、動的なページと采番した ID をどう関連付けするかが問題だと思います。
動的ページに ID を割り振ること自体はいいのですが、一度采番されたその ID はずっとそのページのもの!! としないとダメですからねぇ。
> といいますのもaaa.phpのファイルがすべて同じ評価になってしまいます。
えっ!? どいうことですか!?
bzbell様
早速のお返事ありがとうございます!!
今後ともよろしくお願いします。
はじめまして!
わかりやすい解説、とても助かっています。
1つ質問させてください。貴サイトのように星のイメージのすぐ後ろに
"3.9 rating from 47 votes"の文字をもってくるにはどうすればよいので
しょうか?標準では星の下に文字が配置されてしまうと思うのですが。
ご回答宜しくお願い致します。
>>19 KH さん
こんばんわ^^
返事が遅くなってすいません
ご質問の件ですが、以下のように CSS でスタイルしてあげればいいと思います。
.starbox .indicator { height: 18px; line-height: 18px; display: inline; }今後ともどうぞよしなに
はじめまして。
いつもこちらのアドバイスを参考にしながら、
MT運営を楽しんでやっているものです。
先日、こちらの「Ajaxによる投票をやってみる」を見つけ、
ぜひとも設置したいと思い、挑戦してみたのですが、
初期段階でつまづいている状況です。
ぜひご教授願いたいです。
「各ファイルを編集」直下の「_config-rating.php 」部分について、
$rating_dbhost = 'ホスト名';
$rating_dbuser = '接続ユーザ名';
$rating_dbpass = '接続パスワード';
$drating_dbname = 'データベース名';
は、さくらレンタルサーバーでしたら、どちらにあたりますか?
初期段階の大変お恥ずかしい質問なのですが、
ぜひご教授お願い致します。
>>21 ひろひろ さん
こんばんわ^^
_config-rating.php 内のデータベースの設定についてですが、
上記情報のさくらインターネットは以下のように設定してください。
以上です。
早速の返事いただきありがとうございました!
その後、無事MTのエントリーページに表示することができ、
投票もできるようになりました。
なのですが、ここでひとつ新たな壁にあたってしまいまして。
「- 2007.01.07 追記 -」の部分に書いておられます、
「SQLプラグイン」のことなのですが、MT4では使えないとのこと。
何か代替処置などはありますでしょうか?
自身のサイトのトップページに「人気ページランキング」などで、
ぜひとも表示させたいのです。
重ねての質問すみません。
ぜひアドバイスをよろしくお願いします。
>>23 ひろひろ さん
こんにちわ^^
以下のページのプラグインは使えませんか!?
http://bizcaz.com/archives/2008/02/03-195241.php
ご確認ください
bzbellさん、何度もすみませんでした。
「SQL プラグイン for MT4」ページの存在を知らなかったです。
その後、無事に設置することができました!
ありがとうございました!!