清き一票！ Ver2.1 （投票CGI）

ハンドル、コメントが入れられる投票CGIです。投票結果はグラフで表示されます。Cookieを使って、二重投票を禁止することができ、さらにCookieを拒否しているブラウザーからは投票できないようにしています。さらに同一の IP アドレスからの二重投稿も禁止することができますので、信憑性の高い投票結果を得ることができます。

管理者専用のメニューを用意しており、ログのメンテなどができます。投票のコメントは一覧表示で見ることができ、検索機能も充実しています。

サンプルでは、自動車メーカー人気投票を行っていますので、清き一票をどうぞ。

• 投票フォーム・結果グラフのサンプル
• コメント一覧表示のサンプル
• 管理者メニューのサンプル（パスワードは「password」）

• 主な機能
• CGI利用規定の同意
• CGIのダウンロード
• ファイルの一覧と機能
• Let's get started！
• 投票フォームの編集方法
• 確認画面テンプレートの編集方法
• コメント一覧表示画面テンプレートの編集方法
• 機能・環境設定
• 制限・注意事項
• バージョンアップ方法
• バージョンアップ履歴

• 投票結果は、リアルタイムでグラフ表示

投票フォームに結果をグラフでリアルタイムで表示します。結果のグラフは表示する、しないを設定可能ですので、管理者だけが見ることができるようにすることが可能です。

• コメント、ハンドルが入れられます。

投票フォームにには、投票項目だけでなく、ハンドル、コメントを入れることが可能です。一覧表示でこれらコメントを見ることができます。ハンドル、コメントは文字サイズを設定することができますので、長文の投入を禁止できます。また、必須項目にするかどうかも設定可能です。

• 確認画面表示機能つき

投票フォームに入力したものを確認するための画面を表示することができます。設定で表示する、しないを選ぶことができます。

• 投票フォーム（入力画面）、確認画面、一覧表示画面を自由にカスタマイズできます。

これらの画面は、テンプレート方式をとっていますので、あなたのサイトのイメージに合わせたデザインが可能です。

• 多彩な管理者機能

管理者用に、ログメンテなどの機能を提供します。管理者用のメニューは、パスワード制限をかけますので、セキュリティーも万全！　管理者機能では、

• 投票を個別に削除
• ログファイルを文字コード、改行コード、区切り文字指定でダウンロード
• ログファイルの初期化

を提供します。

CGI利用規定をご覧になり、同意した上で、ダウンロードしてください。

CGIは、「ダウンロード」ボタンを押して、入手してください。Windows をご利用の方は zip 版を、Macintosh をお使いの方は sit 版をダウンロードしてください。

CGIをダウンロードし、解凍してください。それぞれのファイルについて解説します。

ファイル名 パーミッション１ パーミッション２ 転送モード ファイルの機能  kiyoki/ 変更不要 変更不要 本CGI用ディレクトリ  kiyoki.cgi 704 705 [ASCII] 投票フォーム、投票結果表示用CGI  kiyolist.cgil 704 705 {ASCII] コメント一覧表示用CGI  kiyoadmin.cgi 704 705 [ASCII] 管理者機能用CGI  config.cgi 変更不要 変更不要 [ASCII] 設定ファイル  jcode.pl 変更不要 変更不要 [ASCII] 日本語コード変換ライブラリー※1  images/ 変更不要 変更不要 グラフ用GIFファイル格納ディレクトリ graphbar.gif 変更不要 変更不要 [BINARY] グラフ用GIFファイル  logs/ 変更不要 707 ログファイル格納ディレクトリ  template/ 変更不要 変更不要 テンプレートファイル格納ディレクトリ  admin.html 変更不要 変更不要 [ASCII] 管理者メニュー用テンプレート  confirm.html 変更不要 変更不要 [ASCII] 確認画面用テンプレート  error.html 変更不要 変更不要 [ASCII] エラー画面用テンプレート  list.html 変更不要 変更不要 [ASCII] コメント一覧用テンプレート  vote.htm 変更不要 変更不要 [ASCII] 投票フォーム用テンプレート

■ 転送先

　CGI ファイルと、HTMLファイルを何処に設置してもよいサーバの場合には、本 CGI を解凍したディレクトリ構成のまま、サーバへアップロードしてください。CGI ファイルは、専用のディレクトリ（cgi-bin等）に設置しなければいけないサーバ（WebARENA等）の場合には、images ディレクトリを除いたすべてのファイルを CGI 専用のディレクトリへアップロードしてください。images ディレクトリは、通常の HTML ファイル等ををアップロードする場所へアップロードしてください。

■ パーミッション

これらパーミッションは、あくまでも例です。お使いのプロバイダー、レンタルサーバ業者の指示に従ってください。

上表には、パーミッションの指定が 2 種類指定されております。CGI がオーナー権限で実行されるサーバをお使いの場合には、パーミッション１の設定を使ってください。CGI が ohter 権限で実行されるサーバをお使いの場合には、パーミッション２の設定を使ってください。

CGI がオーナー権限で実行されるか、other 権限で実行されるかは、お使いのプロバイダーもしくはレンタルサーバ業者に確認してください。おおむね、CGI ファイルのパーミッションが、704 でも動作する場合には、オーナー権限で実行されると考えても結構です。CGI ファイルのパーミッションが、705 もしくは 707 でないと動作しない場合には、other 権限で実行されているとお考えください。

「変更不要」と指定しているファイルは、サーバにアップロードするだけで OK です。あえてパーミッションを変更しないでください。

とりあえず、動かしてみましょう。以下の手順に従って、サンプルを動かしてみましょう。

1. Perlのパス設定

プロバイダーによって、Perlパスが異なります。デフォルトでは「#!/usr/local/bin/perl」と設定しております。プロバイダーの指示に従い、「kiyoki.cgi」「kiyoadmin.cgi」「kiyolist.cgi」の１行目を書き換えてください。ほとんどのプロバイダーでは、そのままで動作します。

2. CGIの設定

「config.cgi」をテキストエディターで開いてください。すべて設定は、このファイルで指定します。ここではとりあえず動かしてみるだけですので、最小限の設定をご案内します。

• 管理者パスワードの設定

管理者メニューを表示する際に必要なパスワードの設定です。必ず変更してください。

#----------------------------------------------------------- #■管理者パスワードの設定 #----------------------------------------------------------- $ADMINPASSWORD = 'password';

• グラフイメージファイルのURL

グラフ表示につかうGIFのURLを指定します。CGIファイルからの相対パスでも問題ありません。

#----------------------------------------------------------- #■グラフイメージファイルのURL #棒グラフに使用するgifファイルをURLで指定して下さい。 #または、各CGIファイルからの相対パスで指定して下さい。 #----------------------------------------------------------- $GRAPHIMAGEURL = './images/graphbar.gif';

3. サーバへアップロード

これで設定は完了ですので、サーバへアップロードしましょう。「images」ディレクトリ以外のすべてのファイルをASCIIモードで転送してください。「images」ディレクトリは、バイナリーモードで転送してください。

ホームページコンテンツとCGIのディレクトリが異なるプロバイダーをご利用の方は、「images」ディレクトリをホームページコンテンツ用のディレクトリへ、その他はCGI用のディレクトリへアップロードしてください。

転送が完了しましたら、「kiyoki.cgi」「kiyoadmin.cgi」「kiyolist.cgi」のパーミッションを「704」もしくは「705」にして下さい。また、other 権限で CGI が実行されるサーバをご利用の場合には、ディレクトリ「logs」のパーミッションを「707」に変更して下さい。もし、お使いのプロバイダーでは異なるパーミッションを指定しているようでしたら、プロバイダーの指示に従ってください。

4. さぁ！　試験してみましょう

サーバへアップロードした「kiyoki.cgi」に、ブラウザーでアクセスしてみてください。フォームサンプル画面が表示されましたね。これでいろいろ試してみてください。機能の概要が分かってくるかと思います。投票を１度した後、「kiyolist.cgi」にブラウザーでアクセスしてみてください。先ほどの投票が表示されますね。さらに「kiyoadmin.cgi」にアクセスしてみてください。先ほど設定したパスワードを入れて、管理者用メニューを出してください。

いかがでしたか？ちゃんと動いたでしょうか。これからは、あなたの環境に合わせて、少しずつカスタマイズしていってください。次から、カスタマイズの方法をご案内します。

投票フォームの画面は、「vote.html」を編集することでカスタマイズすることができます。フォームは、通常どおり作成していただいて結構ですが、一部システム利用の記述があります。システム利用の記述を消したり、順番などを変更すると、正しく動作しなくなりますので、ご注意ください。また、テンプレートではスタイルシートを利用しています。headタグ内のスタイルの記述を消さないようにして下さい。

投票フォームは、サンプルでは、ラジオボタンですが、チェックボックス、ドロップダウンメニューでかまいません。ただし、inputタグ内で指定する name属性名は必ず「item」にして下さい。同様にハンドルのname属性名は「handle」、コメントのname属性名は「comment」としてください。それ以外のname属性名を指定しても動作しませんので、ご注意ください。

システム利用の記述は、以下の通りです。

以下の例を見て、システム利用の記述と、実際にブラウザーに表示されるものとを比較してみてください。

人気国産自動車メーカー 投票結果 総投票数：3 順位 項目 投票数 グラフ 1 トヨタ 2 (66.6%) 2 日産 1 (33.3%) Q. あなたが一番好きな国産自動車メーカーは？ トヨタ 日産 ホンダ ハンドル コメント

<p><b>人気国産自動車メーカー 投票結果</b></p> 総投票数：<!--sum--><br> <!--graph--> <form method="POST" action="<!--cgiurl-->"> <!--hidden--> <b>Q. あなたが一番好きな国産自動車メーカーは？</b><br> <input type="radio" value="トヨタ" name="item">トヨタ<br> <input type="radio" value="日産" name="item">日産<br> <input type="radio" value="ホンダ" name="item">ホンダ<br> <br> ハンドル<br> <input type="text" name="handle"><br> <br> コメント<br> <textarea name="comment" rows="3" cols="30"></textarea><br> <br> <input type="submit" value="　投　　票　" name="vote"> </form>

確認画面は、「confirm.html」を編集することでカスタマイズすることができます。テンプレートは、通常どおり作成していただいて結構ですが、一部システム利用の記述があります。システム利用の記述を消したり、順番などを変更すると、正しく動作しなくなりますので、ご注意ください。また、テンプレートではスタイルシートを利用しています。headタグ内のスタイルの記述を消さないようにして下さい。

システム利用の記述は、以下の通りです。

以下の例を見て、システム利用の記述と、実際にブラウザーに表示されるものとを比較してみてください。

<table border="0" cellspacing="1">
  <tr>
    <td class=ListHeader1>投票項目</td>
    <td class=ListHeader2><!--value--></td>
  </tr>
  <tr>
    <td class=ListHeader1>ハンドル</td>
    <td class=ListHeader2><!--handle--></td>
  </tr>
  <tr>
    <td class=ListHeader1 valign="top">コメント</td>
    <td class=ListHeader2><!--comment--></td>
  </tr>
</table>
<form method="POST" action="<!--cgiurl-->">
<!--hidden-->
<p><input type="submit" value="投票！" name="B1"></p>
</form>

コメント一覧表示画面は、「list.html」を編集することでカスタマイズすることができます。テンプレートは、通常どおり作成していただいて結構ですが、一部システム利用の記述があります。システム利用の記述を消したり、順番などを変更すると、正しく動作しなくなりますので、ご注意ください。また、テンプレートではスタイルシートを利用しています。headタグ内のスタイルの記述を消さないようにして下さい。

システム利用の記述は、以下の通りです。

すべての機能設定、環境設定は、「config.cgi」で行います。すべて重要な設定項目ですので、もれなく説明を読んでいただき、お好みにあわせて設定してください。

#-----------------------------------------------------------
#■管理者パスワードの設定
#-----------------------------------------------------------
my $ADMINPASSWORD = 'password';

#-----------------------------------------------------------
#■グラフイメージファイルのURL
#棒グラフに使用するgifファイルをURLで指定して下さい。
#または、各CGIファイルからの相対パスで指定して下さい。
#-----------------------------------------------------------
my $GRAPHIMAGEURL = './images/graphbar.gif';

#-----------------------------------------------------------
#■確認画面設定
#投票したときに、確認画面を表示するかどうかを設定します。
# 0:表示しない
# 1:表示する
#-----------------------------------------------------------
my $CONFIRMFLAG = 1;

#-----------------------------------------------------------
#■二重投票設定（Cookie）
#Cookieを使って二重投票を許可すかどうかを設定します。許可し
#ない設定にすると、もしブラウザーがCookieを受け付けなかった
#場合にも投票を拒否します。
# 0:許可しない
# 1:許可する
#-----------------------------------------------------------
my $MultiAnsFlag = 0;

#-----------------------------------------------------------
#■二重投票設定（IPアドレス）
#IPアドレスを使って二重投票を許可すかどうかを設定します。
#Cookieを毎度削除して、何度も投票する行為を防止することが
#できます。
#ここでは、同じIPアドレスで投票できないようロックする時間を
#秒で指定して下さい。
#-----------------------------------------------------------
my $IP_LOCK_SEC = 3600;

#-----------------------------------------------------------
#■投票の有効期限の設定
#投票に有効期限を設定します。ここで指定した日時が過ぎると、
#投票できなくなり、次で指定するメッセージを表示します。
#有効期限のフォーマットは、YYYYMMDDhhmmss　です。
# 【サンプル】西暦2003年7月14日 12時30分0秒　の場合、
# $ExpireDate = '20030714123000';
#必ず、トータルで１４桁で指定して下さい。
#もし有効期限を設けたくない場合には、有効期限を大きめに設定
#して下さい。
#-----------------------------------------------------------
my $ExpireDate = '20100331235959';

#-----------------------------------------------------------
#■投票の有効期限終了時のエラーメッセージ
#-----------------------------------------------------------
my $ExpireErrMsg = '投票は終了しました。';

#-----------------------------------------------------------
#■投票結果グラフを投票フォームで表示するかどうかの設定
# 表示しないと設定すると、管理者のみが見ることができます。
# 管理者モードで投票フォームを見る場合には、ここの設定に
# 関わらず、必ず結果を表示します。
# 0:表示しない
# 1:表示する
#-----------------------------------------------------------
my $ResultPrintFlag = 1;

#-----------------------------------------------------------
#■投票後、指定のページへリダイレクトするかどうかの設定
#「しない」と設定すると、元の投票ページに戻ります。
#「する」と設定すると、次に指定指定するリダイレクト先のページ
#を表示します。
# 0:しない
# 1:する
#-----------------------------------------------------------
my $REDIRECTFLAG = 0;

#-----------------------------------------------------------
#■リダイレクト先URL
#-----------------------------------------------------------
my $REDIRECTURL = 'http://www.futomi.com';

#-----------------------------------------------------------
#■グラフの最大幅指定（ピクセル）
#棒グラフの最大長をピクセルで指定して下さい。
#-----------------------------------------------------------
my $GRAPHMAXLENGTH = 300;

#-----------------------------------------------------------
#■グラフの奇数行目のバックグラウンドカラー
#コメント一覧表示の奇数行目の色を指定します。16進数で指定して
#下さい。
#-----------------------------------------------------------
my $GRAPHLINECOLOR1 = '#E6EAF3';

#-----------------------------------------------------------
#■グラフの偶数行目のバックグラウンドカラー
#コメント一覧表示の偶数行目の色を指定します。16進数で指定して
#下さい。
#-----------------------------------------------------------
my $GRAPHLINECOLOR2 = '#EBE1E2';

#-----------------------------------------------------------
#■コメントの一覧表示で一度に表示する項目数
#投票数が多い場合、コメント一覧でここで指定する数を１ページに
#表示します。ここで指定した数を超える場合にいは、ボタンで次の
#投票内容を見ることができます。
#-----------------------------------------------------------
my $MAXLISTNUM = 20;

#-----------------------------------------------------------
#■ハンドル名の最大文字数（バイト）
#ハンドル名の文字数制限を設定します。ここではバイト指定です
#ので、全角文字数を２倍した数字を設定してください。
#-----------------------------------------------------------
my $HANDLEMAXLENGTH = 40;

#-----------------------------------------------------------
#コメントの最大文字数（バイト）
#コメント名の文字数制限を設定します。ここではバイト指定です
#ので、全角文字数を２倍した数字を設定してください。
#-----------------------------------------------------------
my $COMMENTMAXLENGTH = 200;

#-----------------------------------------------------------
#■ハンドル必須設定
#ハンドルを投票時に必須項目とするかどうかの設定です。
# 0: 必須でない
# 1: 必須とする
#-----------------------------------------------------------
my $CHECKHANDLE = 1;

#-----------------------------------------------------------
#■コメント必須設定
#コメントを投票時に必須項目とするかどうかの設定です。
# 0: 必須でない
# 1: 必須とする
#-----------------------------------------------------------
my $CHECKCOMMENT = 1;

• 各 CGI ファイルは、Shift-JIS で作成されており、それが前提で動作します。他の文字コードに変換すると動作しなくなりますので、ご注意ください。
• 各種テンプレートはすべて Shift-JIS で作成されていることを前提に動作します。他の文字コードで作成されますと、正しく動作しませんので、ご注意ください。

• Ver 2.0 をご利用の方

kiyoki.cgi のみを上書きアップロードして下さい。

• Ver 1.x をご利用の方

お手数ですが、再度、すべてをセットアップし直してください。

【Ver 2.0 → Ver 2.1】 2004/06/02

• 設定ファイル config.cgi にて、ResultPrintFlag を "0" に設定すると、管理者でもグラフが表示されなくなるバグを改修した。

【Ver 1.0 → Ver 2.0】 2004/05/12

• Cookie による不正投票防止機能に加え、IP アドレスによる防止機能を追加した。
• 一部の海外サーバで文字化けする現象が起こらないよう改善した。
• 機能追加、バグ改修をしやすいように、全面的にソースコードを書き直した。