bootstrap3などを使えば投票関連システムのユーザーインタフェースも迅速に作成できる

twitter bootstrap3の場合

親指をたてた絵をクリックするとその横にある数字が増えていき、数字が多いほど高く評価されたコメントや投稿であることを表現する機能がfacebookのいいねをはじめいろんなwebサイトで見られる。

css frameworkを利用すればかっこいい投票(サムアップ ダウン)インタフェースをを高速に作ることが可能。

bootstrap3の場合は、Font Awesomeを利用して、アップとダウンのアイコンフォントを利用する。HTMLは以下のとおり

echo "<ul class='list-inline'>";
echo "<li><a id='eval-good-123'><i class='fa fa-thumbs-up'></i></a></li>";
echo "<li><span class='label label-success'>0</span></li>";
echo "<li><a id='eval-bad-123'><i class='fa fa-thumbs-down'></i></a></li>";
echo "<li><span class='label label-danger'>0</span></li>";
echo "</ul>";

見た目は以下のような感じになる。

上の例は、botstrap3のlabelで数字部分を囲っているが、Badges系のcssで装飾したほうが好ましい感じになるかもしれない。

foundationの場合

次にzurb foundationの投票インタフェースの例。コードは以下のようになる。foundationのicon fontsは以下の公式ページを参照。

http://zurb.com/playground/foundation-icons

bootstrapのhtmlコード同様インライン形式のリストで組んだhtmlは以下のとおり

<ul class='inline-list'>
<li><a id='eval-good-123'><i class='foundicon-thumb-up'></i></a></li>
<li><span class='round success label'>0</span></li>
<li><a id='eval-bad-123'><i class='foundicon-thumb-down'></i></a></li>
<li><span class='round alert label'>0</span></li>
</ul>

foundationの場合の見た目は以下の画像のような感じ

個人的には、foundationのほうがすっきりしていて良い投票インタフェースな気がしている。

参考
Foundation5の使い方

アイコンフォント部分のリンクをAjax化すれば投票システムになる

過去のエントリーでAjaxメールフォームに関する記事を投稿し、フォームタイプのAjaxアプリケーションについて書いてみた。投票システムはリンクタイプのAjaxアプリの良い題材となる。

• サムアップのアイコンフォントをクリック
• Ajaxリクエスト送信
• サーバ側でバリデーションとdbのカウントアップ
• カウント更新後の部分htmlをレンダリング

といった感じで高速にシステムを開発することが可能。その際のユーザーインタフェースは上で示したようにcss frameworkと関連するフォントを利用すれば迅速に作成が可能である。