"HTML5 Conference 2012" のスペシャルセッション「HTML5クイズ」に登壇してきたよ!

f:id:georz:20120910025810p:plain

 

9/8に開催された "HTML5 Conference 2012" で、スペシャルセッションに登壇しました!

昨年の "Chrome+HTML5 Conference" もLTに参加したので、2年連続2回目の当選ですw

 

今回は、豪華賞品がもらえる某感謝祭風 "HTML5クイズ" をWebアプリで行いました。

HTML5, CSS3, JavaScript, jQuery Mobile, Node.js, MongoDB, etc. を使っています。

f:id:georz:20121116202231p:plainスペシャルセッション クイズ - HTML5 Conference 2012 - YouTube

おかげさまで、ご来場の皆さんやスタッフの皆さんにも好評をいただいたようです。

ご参加・ご協力いただきました皆さん、ありがとうございました!

 

実はこの企画、約1年前の社内勉強会向けに作ったWebアプリが元になっています。

f:id:georz:20120910084243p:plainf:id:georz:20120910084250p:plain

これを、僕と同じ会社で働いている "html5.org" のスタッフ @yusi00 さんに気に入ってもらえたようで「あのクイズやってみる?」なんてことになりました。

 

「はい!よろこんで!」とは言ってみたものの、これは社内向けに数日で作った代物。

解答の送信はAjaxのみで、DBすら使っていませんでした。

そこで今回は、所属部署のメンバーと協力して作り直すことになりました。

 

インフラとWebAPIは @damemaro さん、出題画面は @mitsuki_ni 君、解答画面とWebSocket関連を僕が担当しました。

f:id:georz:20120910063213p:plain

スマートフォンの動作確認は、主に iOS 3 〜 6, Android 2.x 〜 4.x で行いました。

これがなかなか大変なんです…

f:id:georz:20120910063900p:plain

詳しい話は "HTML5とか勉強会" でも紹介できたらいいなぁ、なんて思っています。

 

そんな裏話はこの辺にして…

 

HTML5クイズに参加された皆さんの "OS×ブラウザ情報" を集計してみました。

ニックネームを登録された492名のうち、トップ10は以下の通りです。

 

順位OSブラウザWebSocket
対応
人数全体に占める
割合
1 iOS 5.1 Safari 134 27.24%
2 Android 2.3 標準ブラウザ × 58 11.79%
3 Windows Chrome 21 54 10.98%
4 Mac Chrome 21 38 7.72%
5 Windows Firefox 15 24 4.88%
6 Windows Internet Explorer 9 × 20 4.07%
iOS 5.1 Chrome for iOS 21 20 4.07%
8 Android 4.0 Chrome for Android 18 18 3.66%
9 Android 2.2 標準ブラウザ × 12 2.44%
10 Android Firefox 15 8 1.63%

スマートフォンはOSのマイナーバージョン毎に集計

 

"iOS Safari" が圧倒的ですね。このトップ10で全体の78%を占めています。

全解答数に占めるWebSocketからの解答数は76%でした。

 

個人的にちょっと意外だったのは "Internet Explorer 9" が6位に入っていること。

HTML5 Conferenceなのに!?」と思ってしまいました。(Microsoftさんごめんなさい)

 

続いては、"HTML5クイズ" が "第六感早押しクイズ" に至る経過を見てみましょうw

第1問(練習問題)

f:id:georz:20120910043556p:plainf:id:georz:20120910043604p:plain

特に問題なさそうです。

 

 第2問(アニメーションあり)

f:id:georz:20120910043839p:plainf:id:georz:20120910043846p:plain

画像はアニメーションで徐々に見えてきます。すぐに答えが分からない問題なのですが…

 

第3問

f:id:georz:20120910043902p:plainf:id:georz:20120910043914p:plain

ずいぶん早いですが、正解の選択肢が1番なので上から読めば…

 

第4問

f:id:georz:20120910043941p:plainf:id:georz:20120910043950p:plain

おいっ

 

第5問

f:id:georz:20120910044007p:plainf:id:georz:20120910044019p:plain

ちょっと待て

 

第6問(アニメーションあり)

f:id:georz:20120910044040p:plainf:id:georz:20120910044047p:plain

0.10秒…

 

第7問

f:id:georz:20120910044103p:plainf:id:georz:20120910044113p:plain

7位まで全員が1.0秒以下…

 

第8問(アニメーションあり)

f:id:georz:20120910044129p:plainf:id:georz:20120910044139p:plain

もうマジメに答える気ないんでしょ?ww

 

最終問題

f:id:georz:20120910044155p:plainf:id:georz:20120910044203p:plain

あ、トシちゃんも来てたんですね。おつかれさまです。

 

とりあえず、なんだかんだと楽しんでいただけたようで良かったです。

そしてもちろん、最終的にはマジメに答えてくれた方が上位入賞されましたw

f:id:georz:20120910071437p:plainf:id:georz:20120910071442p:plain

 

それでは、また皆さんとお会いできる日を楽しみにしています!

 

special thanks to:
@shiori_misaka(Support)
@Mattew_Haik(BGM)