Movable Type 備忘録

Ajax でアンケートフォーム表示

Jul302008
Author: bzbell
Categories: Customize
Tags: Ajax, jQuery, Prototype, Questionnaire

Prev Page: TypePad AntiSpam を使ってみる
Next Page: Ajax でアンケートフォーム表示 - 不具合対応

こんばんわ^^

すいませんが、ちょと眠くなってきた（つω-`｡）のでサクサクっとカンタンに説明しますね。
後日追記で詳しく説明します。

以下のようなアンケートフォームです。

一応重複 IP アドレスのチェックなど行ってます。
任意のアンケート項目を作成することで、自由にアンケートフォームを表示できます。
投票最大値を個別に設定できます。
ブログごとにアンケートフォームを集計できます。
データベースを使用せず、テキストファイルで管理してます。
prototype と jQuery に対応してます。[2008.08.02] 追記
同一ページ内に複数のアンケート表示が可能です。[2008.08.03] 追記

[2008.07.30] 主な機能は上記のとおりです。

ファイル構成

以下のアンケートフォームのファイル構成を記します。

poll/
|
+-- log/              ログファイル格納ディレクトリ
|
+-- poll_list.txt     アンケートファイル
|
+-- poll.php          サーバサイドのスクリプト
+-- poll.css          アンケートフォーム用スタイルシート
|
+-- prototype/
|    +-- prototype.js
|    +-- prototype.poll.js クライアントサイドのスクリプト
|    +-- index.php         アンケートフォーム・サンプル
|
+-- jquery/
|    +-- jquery-1.2.6.pack.js
|    +-- jquery.poll.js    クライアントサイドのスクリプト
|    +-- index.php         アンケートフォーム・サンプル
|
+-- bargraph.png      プログレスバーイメージ
+-- bargraph_back.png プログレスバーイメージ
+-- slash.png         背景イメージ

サーバ／クライアントのスクリプトのカンタンな説明

Ajax でアンケートフォームを表示するためのスクリプトは上記ファイル構成の poll.php と prototype.poll.js( jquery.poll.js )になります。

poll.php

サーバサイドの PHP スクリプトです。PHP 使用なのでお使いのサーバによっては PHP バージョンに影響がでるかもしれません。クライアント( JavaScript )から転送されたアンケートデータの保存／タグ表示を行います。
prototype.poll.js( jquery.poll.js )

prototype( jquery )をベースにしたクライアントサイドの JavaScript です。各自のブログでロードすることで、アンケートフォーム／投票経過を表示することができます。

アンケートファイルのカンタンな説明

アンケートフォームで表示する各項目は、poll_list.txt というテキストファイルで管理しています。1 行を 1 アンケートとします。たとえば、2 つのアンケート項目を追加する場合には 2 行になります。
以下のファイルのフォーマットを記します。

アンケートタイトル<>項目1,項目2,項目3,項目n

緑字の部分にはアンケートのタイトルを入力します。
青字の部分にはアンケートの内容( 項目 )を必ず半角カンマ「,」で区切って入力します。項目数に制限はありません。いくつでもどうぞ (●´∀｀●)
そして、最後に赤字の部分はタイトルと項目の間を「<>」で区切ります。これは必須です。お間違えのないように。

2 つのアンケートフォームを作成する場合、poll_list.txt は以下のようになります。

利用している JavaScript フレームワーク<>Prototype,jQuery,mootools,YUI,Dojo,Ext JS
100 万あったら何に使う!?<>海外旅行する,温泉いく,おぃひぃもの食べまくり,貯金 orz

また、アンケートにはアンケート番号で識別するようになっています。アンケート番号とは、poll_list.txt 内で追加した行番号に相当します。
たとえば上記例だと、「利用している JavaScript フレームワーク」というアンケートのアンケート番号は「1」になります。「100 万あったら何に使う!?」というアンケートは「2」になります。

ですので、行間は必ずつめてくださいね (￣∇￣)b

設置の仕方

以下の手順で設置します。

アンケート投票の圧縮ファイルをダウンロードします。
以下の圧縮ファイルをダウンロードしてください。
- ajax.poll.zip
この圧縮ファイル中には prototype 版と jQuery 版が同梱されてます。各自でお使いのフレームワークに合わせて適宜読み替えてください。
サーバにアップロードします。
ダウンロードした圧縮ファイルを適当なフォルダに展開していただき、poll/ フォルダごとサーバにアップロードします。アップロード先は各自の環境に合わせてお好きな場所にアップロードしてください。

[2008.07.30] 肝心なことを忘れてました。prototype.poll.js( jquery.poll.js )内の 7 行目を、各自のアップロード先の URL に変更してください。
動作確認します。
アップロードしたフォルダの中にサンプル用のページ( porotype/index.html or jquery/index.html )があります。そちらをブラウザから表示してください。正しくアンケートフォームが表示されれば OK です。
続いて投票してみてください。投票経過が表示されれば OK です。

表示ができない場合、以下のことを確認してください。
- お使いのサーバの PHP のバージョンを確認してください。PHP 4 の古いバージョンだと機能しないかも、です。
- フォルダのバーミッションを確認してください。サーバサイドのスクリプトではファイルを自動生成しますので、フォルダに書込み権限がないとファイルを作成することができません。

以上で前準備は完了です。
では、実際に各自のテンプレート内にアンケートフォームを追加してみます。追加する場所はお好きな場所で構いませんので、デザインに合わせて追加しちゃってくださいｄ(＞∀＜　)

基本的には同梱してますサンプル( prototype/index.html or jquery/index.html )のように使っていただければ OK です。

HTML ヘッダ( <head>～</head> )内に以下を追加します。
Prototype 使用の場合
1. <script type="text/javascript" src="prototype.js"></script>
2. <script type="text/javascript" src="prototype.poll.js"></script>
3. <link rel="stylesheet" href="poll.css" type="text/css" />
既に prototype.js をお使いの人は改めて追加する必要はありません。
jQuery 使用の場合
1. <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
2. <script type="text/javascript" src="jquery.poll.js"></script>
3. <link rel="stylesheet" href="poll.css" type="text/css" />
既に jquery.js をお使いの人は改めて追加する必要はありません。
アンケートフォームを表示したい場所に以下を追加します。
1. <div id="poll_viewer1">
2. <script type="text/javascript">ajaxpoller('view', 2, 1, 100);</script>
3. </div>
赤い時の部分にはブログ ID を指定します。ですので、<$MTBlogID$> を使用すればいいかと。
青字の部分にはアンケート番号を指定します。
緑字の部分には最大投票数を指定します。指定投票数に達するとフォーム表示はされなくなります。

[2008.08.02] 期限を指定してアンケートフォームを表示したい場合には以下のようにします。
1. <div id="poll_viewer2">
2. <script type="text/javascript">ajaxpoller('view', 2, 2, 100, 20080802);</script>
3. </div>
赤字の行を追加して期限を指定します。上記例では 2008/08/02 までを有効期限とし、2008/08/03 からは投稿フォームが表示されなくなります。
ただし、注意することがありまして、期限を指定した場合には最大投票数よりも優先されます。ですので、最大投票数でアンケートフォームを表示したい場合には期限は必ず削除してください。

同一ページ内に異なるアンケートを表示したい場合には、Ajax による表示先ブロック( poll_viewer )＋アンケート番号としてください。
たとえば、以下のようになります。
1. <div id="poll_viewer1">
2. <script type="text/javascript">ajaxpoller('view', 2, 1, 100);</script>
3. </div>
5. <div id="poll_viewer2">
6. <script type="text/javascript">ajaxpoller('view', 2, 2, 100, 20080802);</script>
7. </div>
青字の部分を必ず合わせてください。

以上でテンプレートへの追加は完了です。
後はいつものように再構築してください。

スタイルシート

以下にスクリプトが出力するアンケートフォームは以下のようにマークアップされてます。同梱してます。

アンケートフォーム

<div id="pollbox">
<form id="poll-form" method="post" action="poll.php">
<p class="poll_header">アンケートタイトル</p>
<div class="polllist"><input type="radio" name="val" value="1" />項目1</div>
<div class="polllist"><input type="radio" name="val" value="2" />項目2</div>
<div class="polllist"><input type="radio" name="val" value="3" />項目3</div>
<div>
<input type="hidden" name="blogid" value="2" />
<input type="hidden" name="pollno" value="1" />
<input type="hidden" name="limit" value="100" />
<input type="submit" value="POST" onclick="return ajaxpoller(\'poll\');" />
<div>
</form>
</div>

そして、投票経過は以下のようにマークアップされてます。

投票経過

<div id="pollbox">
<p class="poll_header">アンケートタイトル</p>
<ul class="poll">
<li class="polllist"><em>項目1</em><img class="bargraph" style="background-position:-%dpx 0;" src="bargraph.png" alt="比率" /><span>比率</span></li>
<li class="polllist"><em>項目2</em><img class="bargraph" style="background-position:-%dpx 0;" src="bargraph.png" alt="比率" /><span>比率</span></li>
<li class="polllist"><em>項目3</em><img class="bargraph" style="background-position:-%dpx 0;" src="bargraph.png" alt="比率" /><span>比率</span></li>
</ul>
<p class="poll_footer">Total Votes: 000/100</p>
</div>