Flash＋Flash Liteを使った参加型抽選会システム「lot777.com」
作成日
8 October 2008
ページ ツール |
必要条件
ユーザーレベル
中級
必要な製品
- Flash Professional CS3 (Download trial)
はじめに
「lot777.com」は、FlashとFlash Liteを使った参加型抽選会システムです。2008年9月6日に開催された北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」にスピーカーとして参加した際に、「イベント会場内で携帯電話から参加できるようなコンテンツを発表しよう」という企画をもとに開発したシステムです。この記事では、lot777.comの概要と仕組みについて解説します。
lot777.comの概要
lot777.comは、数字のカウントアップを使った抽選です。まず、運営側は、カウントアップしていく最大の数字（MAXカウント）と当選番号を設定します。たとえば、MAXカウントを200とし、「20、50…110、160…」などの数字を当選番号としておきます。
抽選会参加者は、携帯電話を使ってエントリーを行います。エントリー方法は、まず、特定のアドレスでFlash Liteコンテンツにアクセスすると、0～9の数字がランダムに一定時間表示されるので、タイミングよくその数字のキーを押すとエントリーしたことになります。誰かがエントリーに成功すると、数字を「1、2、3…」とカウントアップしていきます。そして、上記の例でいえば、20番目や50番目にエントリーに成功した人が当選となるわけです。
そして、会場のスクリーンには抽選会の状況を表示するFlashコンテンツを映しておきます。現在のカウントアップの状況、各数字の当選／ハズレ状況などが表示されるようになっています。
lot777.comの仕組み
今回のシステムは、データベースを中心軸として構成しています。
携帯電話でエントリーが成功すると、その情報がFlash LiteコンテンツからPHPを経由してデータベースへ渡されます。データベース側では、その情報を元にカウントを増やしたり、Flash Liteコンテンツに現在のカウント数と当選結果などを返します。その結果をもとにFlash Liteコンテンツでは、ハズレや当選、受付終了などの状況を表示します。
Flashコンテンツは定期的にデータベースの情報を取得し、その状態をコンテンツに表示していきます。Flashコンテンツは、完全にデータベース内の情報によってコンテンツの表示が切り替わるようになっているため、異なるPCで閲覧してもほぼ同期の取れた内容を表示することが可能です（ただし、コンテンツ内のアニメーションは同期しません。カウントアップの状況などが同期します）。
データベースの情報をそのままFlashコンテンツへ表示させることは、当初、それほど難しくはないと思っていたのですが、意外と苦労した部分でもあります。参考までに、以下に簡単な Flash コンテンツ側の処理の流れを説明します。
【STEP1】
データベースから定期的に情報を取得するため、下記のような感じでタイマー処理を行っています。一定時間経過するとデータベースにアクセスし情報を取得します。
private function setTimer():void {
//タイマー処理
waitTimer = new Timer(3000, 1);
waitTimer.addEventListener(TimerEvent.TIMER, compTimer);
waitTimer.start();
}
private function compTimer(e:Event):void {
//DB接続
joinDB();
}
【STEP2】
データベースから情報を取得した後、フラグの状況によってコンテンツ表示を振り分けます。抽選会の進行状況も把握するため、「beforeModeState」の変数名を見て分かるように、1つ前の状況を常に記憶させています。
if (startFlag && lotFlag || endFlag && beforeModeState != 0 && beforeModeState != 1) {
//抽選状況表示
showNumberMode();
} else if (startFlag) {
//カウントダウン
showCountDownMode();
beforeModeState = 2;
} else {
//スタート画面
showStandbyMode();
beforeModeState = 1;
}
【STEP3】
まず、スタート画面表示の場合、スタートボタンを表示させる処理を行います。そしてスタートボタン処理も設定し、クリックされた場合、データベース内のスタートフラグをONに変更する処理を行っています。
また、この時、同時にSTEP1のタイマーを再び始動させています。スタート画面時もデータベース監視のタイマーを動作させることで、異なるPC環境でも同期が取れるようになります。
private function showStandbyMode():void {
//スタートボタンの表示処理
:
//タイマー始動
setTimer();
}
//スタートボタン処理
private function standbyClickListener (e:MouseEvent):void {
//スタートフラグをONにする
startFlagOnDB();
}
【STEP4】
スタート画面でボタンが押された場合、データベース内のフラグが変動され、なおかつ一定時間ごとにデータベース接続を行っているので、STEP2の条件分岐がカウントダウンの処理に変更されます。カウントダウンもタイマーを使って表示させていきます。カウントダウンが終了したら、今度はデータベース内の抽選フラグをONに変更する処理を行います。
//カウントダウン開始処理
private function countDownStart():void {
countDownTimeCount = 4;
countDownTimer = new Timer(1000, countDownTimeCount);
countDownTimer.addEventListener(TimerEvent.TIMER, countDownTimerEnd);
countDownTimer.start();
}
//カウントダウン完了処理
private function countDownTimerEnd(e:Event):void {
countDownTimeCount--;
if (countDownTimeCount > 0) {
CountDown.timeTxt.text = countDownTimeCount.toString();
} else {
lotFlagOnDB();
}
}
【STEP5】
カウントダウン後、またデータベース内のフラグが変動されるため、STEP2の条件分岐が抽選状況表示の処理へ変更されます。抽選状況表示の処理では、携帯電話からエントリーされたカウントに合わせ、数値テキストを生成していきます。また、この時に、あまりにも大量のテキストを生成するとFlashコンテンツの表示で処理落ちが発生してしまうため、一定数を超えた場合は個数を制限してテキストが生成するようにしています。つまり、数秒間にエントリー数が何百もあった場合は、数字を飛ばしてテキストを生成することとなります。また、当選数字に関しては、必ず生成されるように処理を行っています。
private function showNumberMode():void {
//生成するテキストの個数の確認
：
//規定以上の個数の場合は制限内に変更
：
//当選数字のチェックと当選数字の生成
：
//通常数値テキスト生成
：
//終了フラグの確認
if (endFlag) {
//抽選終了処理
：
} else {
//抽選継続処理
：
//タイマー始動
setTimer();
}
}
所々の細かい処理は割愛していますが、基本処理としては、常にタイマーを始動させ、データベースの情報を取得、そしてフラグなどの状況によって各表示処理を行うことになります。http://labs180.com/lot/でも概略説明を掲載しているので、参考にしてみてください。
アクセス集中への対処
今回のイベントでは100名を超える参加者が予想されていました。携帯電話からのアクセスとはいえ、数秒の間に集中したアクセスが予想されたため、アクセスを分散させる工夫を施しています。
前述のように、携帯電話からエントリーを行う場合は、一定の短い間隔でランダムに表示される数値キーを押すことでエントリーができる仕組みにしています。ただ単にボタンを用意してエントリーさせるのではなく、ちょっとしたゲーム性を取り入れることで、ほんの少しエントリーにプレミア感を付加する効果があるとともに、参加者がエントリーを行うタイミングにズレが生じます。そのほんのわずかな時間差でも、アクセスを分散することが可能になります。
さらに、当然のことながら確率的には「ハズレ」が多くなります。その場合、携帯電話では、ハズレの結果表示を一定時間表示させて、それから最初の画面に戻るようにしています。この最初の画面に戻るまでの待機時間の長さをランダムに変動し、再エントリーするまでの時間差を生み出すようにしています。
このように、あまり気付かれない箇所に細かい工夫を取り入れることでアクセスの集中を防ぐようにしています。
以上で、lot777.comの解説は終了です。
lot777.comの今後の展開予定
lot777.comを応用していくと、抽選会だけではなくアンケートやクイズなど様々な展開が可能となります。機会があればまたイベントやセミナーなどで活用していきたいと思っています。
さらに、イベントのような限定的な参加ではなく、誰もが参加できるようwebで展開する携帯とPCを連動させたコンテンツに発展させていきたいと考えています。
