Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

特殊な投稿機能について

Feb102007
Vote:
http://bizcaz.com/archives/2007/02/10-161500.php
Categories: Customize
Tags: Ajax, Vote
Social Bookmark

Prev Page: 削除したエントリに依存するアーカイブの再構築
Next Page: Ajaxでアクセス・ランキングを表示する

こんにちわ^^

訪問者さんから、左図のように評価別にコメントを一覧表示するにはどうしたいいですか･･･という質問を頂きました。
コメント投稿までは作りこんでみたものの、図を見るまではその後のイメージが沸かなかったのですが、今回はMovableType(ムーバブルタイプ)標準のコメント機能を使用するのではなく、専用のコメント機能を作って対応しました。

今までの応用でできるものだったので、特に苦労したことはないのですが、強いて言えばプラグインを作ったことでしょうか。
既にご紹介してるLoop プラグインを使って、訪問者さんの要望を実現してみたんです (●´∀｀●)

機能説明

カンタンに機能説明してみますね。
まず、特徴的なところは

評価別にコメント・フォーム(3つ)があること。
各コメント・フォームは各評価に関連づけされて、個別にコメント投稿できること。
各評価別にコメント欄が表示されること。

です。
MovableType(ムーバブルタイプ)標準のコメント機能と連携させるのは、チョビッと面倒だったのでオリジナルのテーブルを作成して、投稿されたコメントを管理するようにしています。
図にすると左のようなイメージになります。

MovableType(ムーバブルタイプ)のmt_entryテーブル内のエントリID(entry_id)に関連させて、以下のデータを新規テーブルで管理します。

entry_id：エントリID
vote_no：評価別の投稿番号
vote_id：評価ID
vote_author：コメント投稿者名(必須入力)
vote_email：コメント投稿者のメールアドレス(オプション)
vote_url：コメント投稿者のサイトURL(オプション)
vote_created_on：コメント投稿日時
vote_text：投稿されたコメント内容
ip：コメント投稿時のサーバIPアドレス

重複投稿チェックは省いてますのでご了承ください (m;_ _)mペコ

また、今回は以下のプラグインおよび、設置条件で作成しました。

Counterプラグイン
Loopプラグイン
prototype.jsを併用します。
データベースにMySQLを使用していること。
PHPが使用可能なこと。
コメント内の改行変換は行わない。

インストール方法についてはここでは説明しませんので、上記記事を参考にプラグインおよび、prototype.jsのインストールを済ませてください。

また、ajax loaderもサーバにアップロードしておいてください。

以上、ざっと機能説明してみました。
以下がサンプルになります。

設置方法

では、設置の説明をします。
今回の設置は以下のディレクトリ構成として説明します。

http://●●●.com/
+--- eva_vote/
+-- eva_vote.js
+-- eva_vote.php
+-- eva_vote_config.php
+-- eva_vote_create.php

まず、お使いのデータベース(MySQL)に新規テーブルを作成します。
以下の圧縮ファイルをダウンロードして、適当なフォルダに展開してください。
eva_vote.zip

カンタンに作成できるようスクリプトを作成しましたので、eva_vote_config.phpというファイルをテキストエディタで開きます。ファイル内にコメント入れてますので、必要事項を記入して保存してください。

$cond_email = '0';// メールアドレス入力条件(0:なし 1:必須)
$dbhost = 'ホスト名';
$dbuser = 'ユーザ名';
$dbpass = 'パスワード';
$dbname = 'データベース名';

一通り記入したら、eva_vote_config.phpとeva_vote_create.phpをサーバにアップロードします。上記ディレクトリ構成で示す場所にアップロードします。アップロード後はパーミッションを755に変更しておくことを忘れずに (￣∇￣)b

ブラウザからeva_vote_create.phpを実行してください。そうすると、上記図のような新規テーブルが作成されます。
テーブル作成後は、eva_vote_create.phpを削除しておいてください。作成後は不要です。

次にAJax用のスクリプトを変更します。
eva_vote.jsというファイルをテキストエディタで開いて、以下の場所を変更します。

4行目
var url = 'http://●●●.com/eva_vote/eva_vote.php';

変更したら上記ディレクトリ構成で示す場所にアップロードします。ついでに、eva_vote.phpというファイルもアップロードしちゃってください。
最後にテンプレートを変更します。上記サンプルは以下のように表示しています。

<script type="text/javascript" src="<$MTBlogURL$>js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>eva_vote/eva_vote.js"></script>

<hread>～</head>の間に青い字の部分を変更して追加します。

<div id="votes_container">
<MTCounter>
<MTLoop count="3">
<$MTCounterPlus$>
<div class="votes_block">
<form method="post" id="votes_form<$MTCounterValue$>" name="votes_form<$MTCounterValue$>">
<input type="hidden" name="entryID" value="<$MTEntryID$>" />
<input type="hidden" name="voteID" value="<$MTCounterValue$>" />
<p class="vote_branch_name">
<MTCounterIfEqual value="1">良い評価に投稿</MTCounterIfEqual>
<MTCounterIfEqual value="2">中立の評価に投稿</MTCounterIfEqual>
<MTCounterIfEqual value="3">悪い評価に投稿</MTCounterIfEqual>
</p>
<p><label for="vote-author<$MTCounterValue$>">Name:</label>
<input id="vote-author<$MTCounterValue$>" name="author" tabindex="10" size="30" value="" /></p>
<p><label for="vote-email<$MTCounterValue$>">Email Address:</label>
<input id="vote-email<$MTCounterValue$>" name="email" tabindex="11" size="30" value="" /></p>
<p><label for="vote-url<$MTCounterValue$>">URL:</label>
<input id="vote-url<$MTCounterValue$>" name="url" tabindex="12" size="30" value="" /></p>
<p><label for="vote-text<$MTCounterValue$>">Comment:</label>
<textarea id="vote-text<$MTCounterValue$>" class="vote-text" name="text" tabindex="13" rows="6" cols="100"></textarea></p>
<p><input type="submit" tabindex="14" id="vote-post<$MTCounterValue$>" class="vote-post" value="Post" onclick="return ajax_vote_post('<$MTCounterValue$>');" /></p>
</form>
<img id="progress<$MTCounterValue$>" style="display:none;" src="http://●●●.com/image/ajax-loader.gif" alt="Loading..." />
<div id="votes_result<$MTCounterValue$>"></div>
</div>
</MTLoop>
<br style="clear: both;" />
<script type="text/javascript">
<!--
ajax_vote_onload_get('<$MTCounterValue$>');
//-->
</script>
</MTCounter>
</div>

上記を参考に、個別エントリ・アーカイブ内の表示させたい場所にコピペします。青い字の部分をアップロードしたajax loaderの場所に合わせて変更します。
そして、以下がCSSになります。お好みで変更・調整してください。

div#votes_container {
margin: 1em 0;
width: 100%;
}
div.votes_block {
width: 32%;
float: left;
}
div.votes_block p.vote_branch_name {
font-size: 120%;
}
div.votes_block label {
display: block;
}
div.votes_block textarea {
width: 90%;
}
div.votes_block dl {
margin: 0.5em 0;
padding: 0 0.5em;
width: 90%;
border-top: 1px solid #9a9a9a;
border-left: 1px solid #9a9a9a;
border-right: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
background-color: #fff;
}
div.votes_block dl dt {
margin: 0.5em;
}
div.votes_block dl dt.vote_comments_footer {
text-align: right;
font-size: 90%;
}
div.votes_block dl dd {
padding: 0.5em 0;
border-bottom: 1px solid #ccc;
}

一通り変更したら保存して再構築します。
そして、エントリページを開いて正しく表示・コメント投稿などができることを確認します。

Ajaxによる投稿コメント内容の表示は以下のようなXHTMLで出力されますので、CSSを使ってカスタマイズ可能です。

<p class="vote_comments_header">良い評価(3)</p>
<div class="vote_comments">
<dl>
<dt class="vote_comments_header">コメント投稿者名</dt>
<dd>投稿されたコメント内容</dd>
<dt class="vote_comments_footer">コメント投稿日時</dt>
</dl>
</div>

以上ざっと説明しました。
不明点などありましたらご連絡ください（￣∇￣)/

- 2007.02.11 追記 -

もし、メールアドレス、URLはデフォルトで不要の場合には入力フィールドを以下のようにします。

<p><label for="vote-email<$MTCounterValue$>">Email Address:</label>
<input type="hidden" id="vote-email<$MTCounterValue$>" name="email" tabindex="11" size="30" value="" /></p>
<p><label for="vote-url<$MTCounterValue$>">URL:</label>
<input type="hidden" id="vote-url<$MTCounterValue$>" name="url" tabindex="12" size="30" value="" /></p>

青い字の部分を削除します。そして、赤い字の部分を追加することで、メールアドレス、URLを非表示にし、未入力扱いとなります。

Edit
Permalink
10 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(10)

#1: Posted by す @ February 11, 2007 [REPLY]

設置しようと思ったのですが、
(MySQL)に新規テーブルを作成
というところで、
eva_vote_create.php
を実行したのですが、

Warning: mysql_connect() [function.mysql-connect]: Host 'localhost.localdomain' is not allowed to connect to this MySQL server in /●●●/eva_vote/eva_vote_config.php on line 11
Error connecting to mysql

というエラーメッセージがでて出来ませんでした。
何故でしょうか？
（ちなみにパーミッションは適切に変更しました。）

#2: Posted by bzbell @ February 11, 2007 [REPLY]

>>1 すさん

こんにちわ^^

まず以下のことを確認してください。

MySQLのセットアップはお済ですか!?
MySQLを利用可能な状態にしておかないと接続できません。セットアップに関してはサーバ・サポートにご連絡ください。

エラー内容から、eva_vote_config.phpの接続情報を記述しましたか!?
記事にもありますが、eva_vote_create.phpを実行する前にeva_vote_config.phpに接続情報を適切に記入しないとデータベースに接続できません。

#3: Posted by す @ February 11, 2007 [REPLY]: 今、サーバー会社に調査を依頼しました。

#4: Posted by bzbell @ February 11, 2007 [REPLY]

>>3 すさん

> 今、サーバー会社に調査を依頼しました。

すさん、接続サーバに 'localhost.localdomain' と記述してますか!?
MySQLセットアップ時に接続ユーザ名や接続サーバ名などが通知されますので、そちらを記述すればOKです (￣∇￣)b

#5: Posted by す @ February 11, 2007 [REPLY]: >>4 bzbell さん
どうしても
eva_vote_create.php
を実行できないので、
phpMyAdmin
から作成してもかまいませんか？

#6: Posted by bzbell @ February 11, 2007 [REPLY]

>>5 すさん

> phpMyAdminから作成してもかまいませんか？

はい。問題ありませんよ (￣∇￣)b

#7: Posted by す @ February 12, 2007 [REPLY]

>>6 bzbell さん
ありがとうございます。
phpMyAdminから作成してみます。

あと、質問なのですが、コメントを削除したい場合はどうすればよいのでしょうか？

#8: Posted by bzbell @ February 12, 2007 [REPLY]

>>7 すさん

こんにちわ^^

> コメントを削除したい場合はどうすればよいのでしょうか？

さ、削除ですか（;￣∀￣A
う～ん困った（つω-`｡）コメントには各評価内でユニークな番号を付けてるんです。また、eva_vote.php内で各評価のコメント件数も取得してます。
削除機能を付加することで、本来評価内でユニークでなければならない番号がユニークでなくなってしまうケースがでてしまいます。
削除はphpMyAdminで行うか、以下のコードを使えば削除することはできます。

<?
require('eva_vote_config.php');
mysql_query("delete from $tableName where (entry_id=$entry_id and vote_id=$vote_id) and '削除するユニーク番号(vote_no)'");
?>

上記の'削除するユニーク番号'に、サンプルのコメント投稿者の左にある番号を指定すれば削除可能です。
ですが、先程も言ったように削除したことでこの番号が重複するケースが発生します。
対策としては、別テーブルにて今までに投稿されたコメント件数を保持しておけば回避できそうです (￣∀￣)b
eva_vote_config.php内に以下を追加します。

$maxTableName = 'eva_vote_max';

eva_vote_create.phpを以下のように変更します。

<?
require('eva_vote_config.php');
mysql_query("drop table $tableName");
/*▼ここから追加▼*/
mysql_query("drop table $maxTableName);
/*▲ここまで追加▲*/
mysql_query("create table $tableName(ID int auto_increment not null primary key,
entry_id int(11),
vote_no int(11),
vote_id int(11),
vote_author varchar(100),
vote_email varchar(75),
vote_url varchar(255),
vote_created_on datetime,
vote_text mediumtext,
ip varchar(255))") or die(mysql_error());
/*▼ここから追加▼*/
mysql_query("create table $maxTableName(ID int auto_increment not null primary key,
entry_id int(11),
vote_id int(11),
vote_max int(11)") or die(mysql_error());
/*▲ここまで追加▲*/
?>

そして、eva_vote.phpを以下のように変更します。

78-79行目の間に追加
if (1 == $max)
$sql = "insert into $maxTableName (entry_id, vote_id, vote_max) values ($entry_id, $vote_id, $max)";
else
$sql = "update $maxTableName set vote_max=$max where (entry_id=$entry_id and vote_id=$vote_id)";
mysql_query($sql)or die(" Error: ".mysql_error());
66-69行目を変更
$max = 0;
$sql = "select vote_max from $maxTableName where (entry_id=$entry_id and vote_id=$vote_id)";
$res = mysql_query($sql);
if ($inf = mysql_fetch_assoc($res)) $max = $inf['vote_max'];

このようにすることで、各評価内で投稿された件数が保持されて、コメントにはユニークな番号が振られることになると思います (￣∀￣)b
※1度使われて削除された番号は欠番とするわけです。
すいません、わたし時間なくて未確認です。すさんの方で確認してみてください (m;_ _)mペコ