第26回 Twilioで投票システムをつくる(前編)

スポンサーリンク

Twilioを使って投票システムを作成してみる。
今回は前編・後編に分けて作ってみます。

前編:Twilioを使って投票システムを構築
後編:投票結果をリアルタイムに集計するシステムを構築

目的

Twilioを使って投票システムを構築する

開発

  • index.php(投票画面ページ)
  • base.css(投票画面のスタイルシート)
  • vote.xml(電話で投票を受け付けるTwiML)
  • insert.php(vote.xmlで投票された情報をデータベースに保存するページ)

かなりシンプルですが、投票画面ページを作ってみた。

index.php

<?php
	$connect = mysql_connect('localhost', 'hoge', 'hoge');
	mysql_select_db('hoge', $connect);

	// 1(好き)の投票結果
	$query1  = 'select * from twilio_vote where number = 1';
	$result1 = mysql_query($query1);
	$rows1   = mysql_num_rows($result1);

	// 2(嫌い)の投票結果
	$query2 = 'select * from twilio_vote where number = 2';
	$result2 = mysql_query($query2);
	$rows2   = mysql_num_rows($result2);

	// 3(その他)の投票結果
	$query3 = 'select * from twilio_vote where number = 3';
	$result3 = mysql_query($query3);
	$rows3   = mysql_num_rows($result3);

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<title>投票システムサンプル</title>
</head>
<body>
	<h1>投票システムサンプル</h1>
	<h2>050-XXXX-XXXX</h2>

	<p id="question">りんごは好きですか?</p>

	<div class="voteResult">
		<p class="title">好き</p>
		<p class="result"><?php echo $rows1;?></p>
	</div>
	<div class="voteResult">
		<p class="title">嫌い</p>
		<p class="result"><?php echo $rows2;?></p>
	</div>
	<div class="voteResult">
		<p class="title">どちらでもない</p>
		<p class="result"><?php echo $rows3;?></p>
	</div>
	<br class="clear" />
</body>
</html>

2〜18行目で現在の投票結果をそれぞれ抽出する。
データベース接続の情報は環境にあわせて設定。

base.css

@charset "utf-8";

*{
	margin: 0;
	padding: 0;
}

h1{
	font-size: 50px;
}

h2{
	font-size: 40px;
}

#question{
	font-size: 30px;
	margin: 30px 0px;
}

.voteResult{
	width: 150px;
	border: 1px solid black;
	float: left;
}

.voteResult .title{
	font-size: 20px;
	text-align: center;
	border-bottom: 1px solid black;
}

.voteResult .result{
	font-size: 30px;
	font-weight: bold;
	text-align: center;
}

.clear{
	clear: both;
}

サーバにアップロードしてアクセスしてページが表示されるか確認。
sample

これで画面はできあがり。次に vote.xml を作ってみる。

vote.xml

<?xml version="1.0" encoding="UTF-8"?>
<Response>
	<Gather timeout="10" finishOnKey="*" method="POST" numDigits="1" action="http://example.com/insert.php">
		<Say language="ja-JP">投票システムへようこそ。りんごが好きなかたは1を、嫌いなかたは2を、どっちでも無いかたは3を押してください。</Say>
	</Gather>
	<Say langage="ja-JP">ボタンの操作が無かったので通話を終了します。</Say>
	<Hangup />
</Response>

投票システムのtwilio番号にかけると実行されるファイル。
スクリプトは至極シンプルで、Gather 命令動詞を使って発信者にダイヤルのプッシュを促す。
ダイヤルをプッシュすると http://example.com/insert.php にプッシュした番号をPOSTで送信。

次に送信されたデータをデータベースに保存するPHPプログラムを作成。

insert.php

<?php
	header("Content-Type: text/xml");

        // Twiml.phpまでのパスを環境に合わせて設定
	include '../Services/Twilio/Twiml.php';

        // インスタンス化
	$twiml = new Services_Twilio_Twiml();

        // Databaseへ接続
        // host名とuser名とパスワードは環境に合わせて設定
	$connect = mysql_connect('localhost', 'hoge', 'hoge');
        // 使用するデータベース名は環境に合わせて設定
	mysql_select_db('hoge', $connect);

        // 発信者が入力した番号を取得
	$number = $_POST['Digits'];
	$number = htmlspecialchars($number);

	if(!empty($number)){
                // 情報の保存
		$insert = 'insert into twilio_vote set number = "'.$number.'", date="'.time().'"';
		mysql_query($insert);
                
                // TwiML生成ヘルパーを使って Say 命令動詞を生成。
		$twiml->say('投票を受け付けました。ありがとうございました。', array('language' => 'ja-JP'));
                // TwiML生成ヘルパーをを使って Hangup 命令動詞を生成。
		$twiml->hangup();
	}else{
                // TwiML生成ヘルパーを使って Say 命令動詞を生成。
		$twiml->say('1から3の番号をプッシュしてください。', array('language' => 'ja-JP'));
                // TwiML生成ヘルパーをを使って Hangup 命令動詞を生成。
		$twiml->hangup();
	}

	echo $twiml;
	

php内にxmlを直接記述する方法もありだが、ちょっと面倒な感じがしたので今回はヘルパーを使ってTwiMLを作成してみた。
TwiMLをヘルパーで作成する場合は、 /Services/Twilio/ の中にある Twiml.phpを読み込むようにします。読み込んだらインスタンス化して実際にTwiMLを作成していきます。

例として、24行目の一行、

$twiml->say('投票を受け付けました。ありがとうございました。', array('language' => 'ja-JP'));

は、

<Say language="ja-JP">投票を受け付けました。ありがとうございました。</Say>

として変換され表示されます。

データベース接続の情報は環境にあわせて設定。

以上で投票システムのできあがり。
実際にtwilio番号にかけて投票を行い、index.phpの投票結果の数字が増えたら成功。

参考文献

電話投票システム(アプリ)を作ってみましょう。:https://www.youtube.com/watch?v=FaG7qav4sNM

スポンサーリンク
スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク