5 Star Comment Rating とは

5 Star Comment Rating

Movable Type でサイトを構築するとき、ユーザーからのフィードバックを受けたり、記事に対する評価や感想をいただいたりするために、コメント機能をカスタマイズして利用することは意外と多いのではないでしょうか？

5 Star Comment Rating とは、Movable Type のコメント機能を利用して、ブログ記事に５つ星の評価を追加することができるプラグインです。

また、モディファイアを設定するだけで複数の５つ星評価を利用することができます。

動作環境

Movable Type 4.2、5 で動作確認済み

jQuery必須

ダウンロード

以下のページより、最新版をダウンロードしてください。Twitterで最初につぶやいてから本体ファイルに修正を加えていますのでご注意ください。

インストール

ダウンロードしたファイルを解凍し、「plugins / CommentRating」フォルダを Movable Type の「plugins」ディレクトリに、「mt-static / plugins / CommentRating」を Movable Type の「mt-static / plugins」ディレクトリにそれぞれアップロードしてください。

  • plugins
    • CommentRating
  • mt-static
    • plugins
      • CommentRating

ブログメニューまたはシステムメニューの「プラグイン」を開き、プラグイン一覧の中に「5 Star Comment Rating」が表示されていればインストール成功です。

使い方

データベースのアップグレード

プラグインをアップロードしてから初めて Movable Type の管理画面にアクセスするとデータベースのアップグレード画面になります。そのまま手順に沿ってアップグレードしてください。

5star_02.png

5star_03.png

5star_04.png

この作業で、「mt_comment_rating」というテーブルが追加され、さらに「mt_comment」テーブルに「comment_repetition」というカラムが追加されます。

プラグインを有効化

次に、プラグインの設定画面で、「有効にする」にチェックを入れ「変更を保存」をクリックするとプラグインが有効化されます。

5star_05.png

なお、ウェブサイトを複数のブログで運営している場合、「システムメニュー」のプラグインの設定を変更すれば、全ブログに反映されます。個々のブログで設定したい場合は「ブログメニュー」のプラグインの設定を変更します。「システムメニュー」の設定より「ブログメニュー」の設定が優先されます。

５つ星評価の項目の設定

次に、５つ星評価の項目名を、プラグインの設定画面の「キー」欄に入力し変更を保存します。項目名に設定できる値は、すべて半角の英数字、ハイフン、アンダースコアのみになります。

複数の項目を設置する場合は、キー欄に半角スペースで区切って複数の項目名を入力します。

例えば、「パワー」「スピード」「スタミナ」という３つの項目を５つ星で評価させたい場合は、キー欄に「power speed stamina」と入力します。

5star_06.png

小数第１位まで表示（オプション）

プラグインの設定画面で「端数」にチェックを入れて変更を保存すると、端数が生じる場合の評価の値を少数第１位まで出力することができます。

IPアドレスの重複チェック（オプション）

プラグインの設定画面で「IPチェック」にチェックを入れて変更を保存すると、コメント投稿者のIPアドレスが重複する場合は評価を保存しないようにできます。

つまり、一つのブログ記事に対して、コメントは複数回できますが、保存する評価は１回のみにすることができます。

CSSとJavaScriptの読み込み

(X)HTMLのhead内で、このプラグインの動作に必要なCSSとJavaScriptを次のように読み込みます。星印の動作は、jQueryで実装されているので、jQueryの読み込みが必須となります。

<link rel="stylesheet" href="<mt:StaticWebPath />plugins/CommentRating/commentrating.css" type="text/css" />
<script type="text/javascript" src="<mt:StaticWebPath />plugins/CommentRating/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath />plugins/CommentRating/commentrating.js"></script>

もちろん、CSSファイルやJavaScriptファイルは、サイトで使用している他のCSSファイル等の場所に移動しても構いませんし、jQueryもGoogle Ajax APIを利用して読み込んでも構いません。

コメントフォームのカスタマイズ

コメント入力欄の５つ星評価を追加したい場所に、次のようなコードを挿入します。このソースコードの形は変えないでください。span.star-btnは、コードの視認性を考えるとspan.btn要素で改行したくなりますが、ブラウザによっては星印がずれてしまうので、１行で書いてください。

<span class="star-btn"><span class="btn" title="1"><span class="text">星1つ</span></span><span class="btn" title="2"><span class="text">星2つ</span></span><span class="btn" title="3"><span class="text">星3つ</span></span><span class="btn" title="4"><span class="text">星4つ</span></span><span class="btn" title="5"><span class="text">星5つ</span></span></span>
<input type="hidden" name="xxx" value="<mt:If name="comment_preview"><$mt:CommentRating key="xxx"$></mt:If>" />
【2010-01-14 追記】
公開当初は<a href="#" title="1">のように実装していましたが、文法エラーになるとの指摘があったのでspan要素に変更しました。spanが続いて気持ち悪いですが、おまじないだと思って目をつぶってください。

このソースの「xxx」の部分には、５つ星評価の項目名が入ります。つまり、先ほどプラグインの設定画面のキー欄に入力した値のいずれかが入ることになります。

例えば、「パワー（power）、スピード（speed）、スタミナ（stamina）」という３つの５つ星評価を付けたい場合は、コメント入力フォームに次のようなコードを挿入します（MT5 プロフェッショナルブログの場合）。

<div id="comment-form-power">
    <label for="comment-power">パワー</label>
    <span class="star-btn"><span class="btn" title="1"><span class="text">星1つ</span></span><span class="btn" title="2"><span class="text">星2つ</span></span><span class="btn" title="3"><span class="text">星3つ</span></span><span class="btn" title="4"><span class="text">星4つ</span></span><span class="btn" title="5"><span class="text">星5つ</span></span></span>
    <input type="hidden" id="comment-power" name="power" value="<mt:If name="comment_preview"><$mt:CommentRating key="power"$></mt:If>" />
</div>
<div id="comment-form-speed">
    <label for="comment-speed">スピード</label>
    <span class="star-btn"><span class="btn" title="1"><span class="text">星1つ</span></span><span class="btn" title="2"><span class="text">星2つ</span></span><span class="btn" title="3"><span class="text">星3つ</span></span><span class="btn" title="4"><span class="text">星4つ</span></span><span class="btn" title="5"><span class="text">星5つ</span></span></span>
    <input type="hidden" id="comment-speed" name="speed" value="<mt:If name="comment_preview"><$mt:CommentRating key="speed"$></mt:If>" />
</div>
<div id="comment-form-stamina">
    <label for="comment-stamina">スタミナ</label>
    <span class="star-btn"><span class="btn" title="1"><span class="text">星1つ</span></span><span class="btn" title="2"><span class="text">星2つ</span></span><span class="btn" title="3"><span class="text">星3つ</span></span><span class="btn" title="4"><span class="text">星4つ</span></span><span class="btn" title="5"><span class="text">星5つ</span></span></span>
    <input type="hidden" id="comment-stamina" name="stamina" value="<mt:If name="comment_preview"><$mt:CommentRating key="stamina"$></mt:If>" />
</div>

テンプレートで注意しなければならいのは、次の３点です。

  • span.star-btn は１行で書くこと。
  • span.star-btn の直後にinput（type : hidden）要素を置くこと。
  • input（type : hidden）要素のname属性には、プラグインのキー欄で設定した値を書くこと。

これでブログ記事に対する評価も、通常のコメントと同様に保存されます。

後はテンプレートタグで値と取り出すだけです。

テンプレートタグ

このプラグインをインストールすると、以下のファンクションタグが使えるようになります。

  • MTCommentRating
  • MTCommentRatingStar
  • MTEntryRating
  • MTEntryRatingStar
  • MTEntryRatingCount

MTCommentRatingタグ

投稿されたコメントに付随する評価の値が出力されます。

MTCommentRatingStarタグ

投稿されたコメントに付随する評価の値が５つ星で出力されます。前述のCSSとJavaScriptの読み込みが必須です。

MTEntryRatingタグ

ブログ記事に付けられた評価の値が出力されます。

MTEntryRatingStarタグ

ブログ記事に付けられた評価の値が５つ星で出力されます。前述のCSSとJavaScriptの読み込みが必須です。

MTEntryRatingCountタグ

ブログ記事に付けられた評価の数（個数）が出力されます。

keyモディファイア

すべてのタグに共通して使えるモディファイアです。プラグインの設定画面のキー欄に入力したいずれかの項目名を指定します。これにより、上記ファンクションタグの出力結果を、指定した項目名だけに絞り込めます。

既知の問題

現時点ではコメントプレビューに対応していません。コメントプレビューを無効にしてお使いください。

ライセンス

個人利用・商用利用を問わず、このプラグインを無償で自由に利用することができます。プラグインの著作権は作者が所有しています。

このプラグインは無保証です。作者は、基本的に、このプラグインの利用における動作保証とサポートを行いません（ローカル環境では念入りにテストしています）。

プラグインのカスタマイズは有料になります。お問い合わせよりご相談ください。

更新履歴

【2010-01-20】

端数が生じる場合の評価の値を少数第１位まで出力することができるようにしました。

5 Star Comment Rating プラグインに関するブログ記事