レポート

Are You Hot?―ワンパクがお届けする2009年最初の“熱さ”

この記事を読むのに必要な時間:およそ 2 分

GainerとBlazeDS/Flex+Flashで実現したリアル+テクノロジーサイト

それでは,実際にどのような仕組みになっているのか,システム構成図とともに紹介しましょう。まず,次の図をご覧ください。

写真3 ワンパクHOTサイトのガラガラ全体写真。

写真3 ワンパクHOTサイトのガラガラ全体写真。

図1 ワンパクHOTサイトのシステム構成図。

図1 ワンパクHOTサイトのシステム構成図。

まず,コンピュータ上の処理については,大きくサーバサイドとUIの2つに分けることができます。

サーバサイドは,BlazeDSとオリジナルAPIを使って開発されています。この部分は野村氏が中心となって開発しました。BlazeDSとは,Adobe Labsで提供されているJavaリモーティング&Webメッセージング技術で,複雑な信号処理を扱うことが可能になります。BlazeDSからリモーティング経由でFlexで開発したコントローラと通信を行い,Gainerを使ってガラガラを回転させます。

写真4 ユーザがサイトにアクセスしSTARTボタンを押すと,この板が回り,ビー玉が転がる。

写真4 ユーザがサイトにアクセスしSTARTボタンを押すと,この板が回り,ビー玉が転がる。

写真5 Gainer。

写真5 Gainer。

ここでガラガラを回転させる信号を処理する。

色の判定にはローカルPC上で動作するFlashアプリを用いており,ガラガラから出た球の色をWebカメラで撮影し,その色をアプリで判別して抽選が行われます。その結果をサーバ側のAPIに渡すことで⁠あたり⁠⁠はずれ⁠⁠,賞品抽選が行われます。

写真6 ガラガラから出た球を撮影するカメラ(左の丸いもの⁠⁠。

写真6 ガラガラから出た球を撮影するカメラ(左の丸いもの)。

ここで写された球の映像がローカルPC上のFlashアプリに送られ,色の判別が行われる。

写真7 色の判別を行うFlashアプリ。

写真7 色の判別を行うFlashアプリ。

画面右側上部「Result」に,あたり(青,赤,黄)とはずれ(白)の判別がわかるようになっている。

ちなみに, Flashの色判定アプリケーションやコントローラ部分については,藤井氏と山口氏が中心となって開発したとのこと。Flash開発について,⁠今回のシステムでは,Flashアプリケーション全体で200程度のクラスを開発しました。そのうち,色判別の部分が20種類ぐらいですね。開発期間は,ガラガラを使うということが決まったときから色判別部分だけ作り始めていて,だいたい1週間程度で作りました。Flash部分については,これまでの経験などもありますので,かなりスムースに開発が進みました」と,山口氏はコメントしています。