13
株式会社FLECT 小西俊司

WebSocketでリアルタイムクイズアプリを作ってみた

Embed Size (px)

Citation preview

Page 1: WebSocketでリアルタイムクイズアプリを作ってみた

株式会社FLECT

小西俊司

Page 2: WebSocketでリアルタイムクイズアプリを作ってみた

Salesforce HackChallengeに向けてHerokuでWebSocketアプリを作ったのでその補足説明 ◦ http://events.developerforce.com/ja/contests/chall

engejapan2014

HackChallengeとは無関係なWebSocketアプリとしてのチャレンジの説明

Page 3: WebSocketでリアルタイムクイズアプリを作ってみた

http://www.quizar.info/

リアルタイムクイズアプリ

出題者の出したクイズを解答者が手元の端末(スマホ)で解答し、順位を競うゲーム

Page 4: WebSocketでリアルタイムクイズアプリを作ってみた

HTML5系の最新技術を使っているので古いブラウザでは動かない ◦ WebSocket ◦ WebStorage ◦ PushState ◦ CSS3 Animation など

普段は互換性を気にしてあまり使えないこれらの技術を全部ぶちこむことも目的の一つ

IE(9以前)はともかく、Android標準ブラウザ(4.3以前)が対象外となるのは残念だが、Android版Chromeもそこそこ普及してきているし時間が解決する問題でもあるので気にしないことにする

Page 5: WebSocketでリアルタイムクイズアプリを作ってみた

ルーム(テーマを決めたクイズ部屋)の作成 最大5択のクイズの作成 ◦ アンケート的な正解のない問題もアリ ◦ 設定によって参加者からの問題投稿を受け付けることも可能

イベント(クイズの出題)の開催 ランキング ◦ イベントごとのランキング ◦ ルームでの複数イベントを通しての通算ランキング

復習 ◦ 勉強会などで使う場合は説明や参考リンクを後から参照可能

Page 6: WebSocketでリアルタイムクイズアプリを作ってみた

イベントが開催されているルームに入室

自分でクイズを出したい人はルームを作成

※イベントへの参加はリモートからも可能ですが主たる使い方は実際に皆が同じ空間に集まって使うことを想定しています。

Page 7: WebSocketでリアルタイムクイズアプリを作ってみた

ルーム主催者は適当に何問かクイズを作ります

Page 8: WebSocketでリアルタイムクイズアプリを作ってみた

Let’s クイズ大会

Page 9: WebSocketでリアルタイムクイズアプリを作ってみた

ランキングを確認したり

Page 10: WebSocketでリアルタイムクイズアプリを作ってみた

過去に参加したイベント

の問題を振り返ったり

できます

Page 11: WebSocketでリアルタイムクイズアプリを作ってみた

勉強会での利用

◦ 全編をクイズ大会にするのではなく、ところどころ予告してから問題を挟むのが良いと思う

◦ 問題には解説と参考リンクを含められるので、参加者が後から振り返るのに便利

結婚式の2次会とかホームパーティとか

◦ ランキングが出るのでビンゴの代わりのゲームとして使ってみたり(ただしイケメ。。。以下略)

◦ その場で参加者からの問題投稿も受け付けられるので愉快なことが起きるかもね(^^;

Page 12: WebSocketでリアルタイムクイズアプリを作ってみた

WebSocketアプリが実際にどの程度使い物になるかの実験

実際に作ってみて思うがWebSocketアプリがどこまで実用レベルにあるかはまだまだ未知数 ◦ LTEなどの通信環境の問題 ◦ スリープなどの接続断への対応パターンが確立していない 実際のところ、これに限らず設計が手探りな部分が多くフレームワークの必要性を痛感する

◦ C10K(クライアント1万台)問題 一応Dynoを増やせば対応できる設計にしているつもりだが、試せていないのでとりあえずイベント参加人数を50人に制限している

など

これらは時間とともに解決していく問題だとは思うが、そのためにも何かしらWebSocketアプリが必要

Page 13: WebSocketでリアルタイムクイズアプリを作ってみた

WebSocketアプリの開発はまだまだ手探りな部分が多く難しい

今回題材としてクイズを選択したが、このような「ルームマスター VS. 参加者」という構図のアプリの潜在需要はかなりあると想像する ◦ なにしろ今までそんなアプリはなかったのでほとんどの人は考えたこともないはず

◦ DreamForce等の千人、万人規模のイベントでこうしたアプリが使用可能になればそのインパクトは計り知れない

こうした課題に対して今回作成したアプリの中からフレームワーク化できるところは抜き出して何かしら作りたい

WebSocket、PushState等のノウハウは近日FLECTのR&Dブログ(またはスライド)で公開予定