HTML5クイズ！

HTML5クイズ！
2012/3/13(火) nifty
第27回HTML5とか勉強会
Toru Yoshikawa ( @yoshikawa_t )

@デブサミ2012

HTML5クイズ！やりました

豪華景品！

総参加者 207名！

Summary
2日間での総参加者207名

うち初級コース123名、上級コース84名

Google、Microsoft、Mozilla、Opera、W3C、Yahoo!に協力頂き、景品
としてノベルティを提供して頂きました。感謝！

クイズの得点によって貰える景品が変わり、ランキングの表示も

100点は、上級コースは1名、初級コース4名という難度の高いクイズ
に…

開発は3日ぐらい？、問題作成はほとんど前日に、当日に問題アレン
ジ…

アンケート項目

HTML5について、どんな要
素やAPIがあるのか概要を 47.82%
知っている。

HTML5について、実際に調
べたり、記述したことがあ
66.18%
る。

概要は知らないが、調べたり記述したりしたことがあるひと

（49.07%）

HTML5クイズ！にチャレンジ

Rule
最初の2問のアンケートで両方とも「はい」を答えると上級コー
ス、それ以外は初級コース

各コース5問、同点は回答スピードが早いほうが上位になる

上級コース上位2名、初級コース2名に景品プレゼント！

初級コース、上級コースいずれでも、両方でも参加可能（上級
コースは得点数、初級は回答スピードが肝？）

デブサミ2012にて既にクイズをやったことのある人は景品のほ
うは辞退して頂けると助かります（参加はOK！）

未参加者の方へのネタバレは注意！

HTML5クイズ！一般公開アドレス

http://bit.ly/html5quiz

初級コース第1問
[SEMANTICS]

HTML5では、<font>要素が廃止された。

正しい

間違い

[SEMANTICS]
正答率64.23%
間違い HTML5では、見た目にしか影響し
ない要素は廃止された（見た目は
35.77%
正しい CSSで定義する）

64.23% 他にもbig、center、uなどの要素
が廃止されている

samllは、注釈や細めを表す意味に
変更された

[OFFLINE & STORAGE]

Local Storageに保存されたデータでもブ
ラウザを再起動すると消える。

正しい

間違い

[OFFLINE & STORAGE]

正しい
正答率84.55%
15.45% Session StorageとLocal Storageの
違いを問う問題。 Local Storage
は、ブラウザを再起動しても保存
間違いされる。消えてしまうのはSession
Storage
84.55%
その他の注意点として、Session
Storageは、複数ウィンドウ間で
共有できない

[MULTIMEDIA]

ウェブページに埋めこまれているビデオ
をプラグインなしで見るにはHTML5が必
要になる。

正しい

間違い

[MULTIMEDIA]
正答率67.48%
間違い video要素を利用するとプラグイン
32.52% なしでビデオを再生できる（再生
正しいできるコーデックは限られる）

67.48% ただし、現状では動画再生アプリ
が立ち上がるデバイスもある

最初は、「iPhone・iPadでビデオ
を見るには∼」だったが、Quick

[GRAPHICS & EFFECTS]

Canvasには、アニメーション用の機能が
ある。

正しい

間違い

[GRAPHICS & EFFECTS]
正答率17.07%
間違い
正確には、Canvas 2D Context。
17.07%
2Dグラフィックスのための仕様
で、アニメーションについては規
正しい定されていない

82.93% Canvasでアニメーションを表現す
るためには、紙芝居のようにする

svgには、anime要素などがある

[CSS3]

CSS Animationsでアニメーションを定義
するブロックは@keyframesと呼ばれる

正しい

間違い

[CSS3]
正答率45.56%
初級コースにはやや難しいと思わ
正しいれる知識問題
間違い
45.56% @keyframesでアニメーションを定
54.44%
義する。from、to、xx%で記述

要素に適用するには、animation-
nameでアニメーション名、
animation-durationで時間を指定す
る

上級コース第1問
[SPECIFICATION]

HTML5仕様の現在の状態は？

最終草案（Last Call Working Draft）

勧告候補（Candidate Recommendation）

勧告案（Proposed Recommendation）

勧告（Recommendation）

[SPECIFICATION]

勧告
正答率36.90%
7.14%
勧告案最終草案 HTML5は、2011年5月25日にLast
20.24%
36.90% Callが宣言された

勧告候補ここでいうHTML5は、Markupや
Microdata、Canvasなど
35.71%
勧告は、2014年を予定しているが
果たして…

[DEVICE ACCESS]
Geolocation API Level2で加わった主な変更として最も
適切なのは何か？

住所の情報を取得できるようになった

GPSや基地局情報など、位置情報の取得元を選択できるようになっ
た

現在地から目的地までのルート情報を取得できるようになった

大きな変更は特にない

[DEVICE ACCESS]

変更なし住所取得
正答率19.05%
8.33%
ルート取得
19.05% Geolocation API Level2では、
17.86%
Addressインターフェースが追加さ
れ住所が取得できるようになった
取得元の選択
位置情報の取得元については抽象
54.76% 化されている

ルート取得に関する規定はなし

[OFFLINE & STORAGE]

Indexed Database APIについて正しいものはどれ
か？

データベースの操作はSQLで行う

オブジェクト・ストアには、JavaScriptのオブジェクトを保
存できる

オブジェクト・ストアの作成や変更は、いつでも可能である

[OFFLINE & STORAGE]
正答率65.48%
SQL操作
いつでも定義変更可
11.90% Indexed Databaseは、KVS型の
22.62%
データベース。SQL操作は、Web
SQL Databaseで可能。

JSオブジェクト保存可 JavaScriptオブジェクトの保存が
可能（structured clone）
65.48%
IndexedDBでは、スキーマの変更
はVERSION_CHANGEトランザク
ションで行う（DBのopen時）

[CONNECTIVITY]

セキュアなWebSocketであるwssスキームが
デフォルトで使用するポート番号はどれか？

80

81

443

815

[CONNECTIVITY]
正答率53.57%
「80」
「815」
20.24% 14.29% WebSocketが利用するポートの問
「81」
題。HTTP/HTTPSと同じポートを
11.90%
利用するため、ルータやFWを越
えることができる特徴を持つ
「443」
あとは、HTTPS(SSL)のポート番号
53.57%
を知っているかどうか

もちろん他のポートを利用可能

[MULTIMEDIA]

Web Audio APIの仕様として定められている機
能で間違っているものはどれか

複数のスピーカーを使って3D音場を再現できる

デバイスのマイクから入力した音をルーティングするこ
とができる

ブラウザが基本的なエフェクト機能を実装している

[MULTIMEDIA]
正答率35.71%
3D音場
20.24% Web Audio APIは、音声の再生、生
基本エフェクト用意成を可能とする仕様
44.05%
音声の出力方向を調整するAudio
マイク入力をルーティング
Node(Panner)などでマルチチャネル
対応
35.71%
マイク入力を取得する機能はない

基本的なエフェクトが用意されてい
いる

おまけ問題
[WebGL]

WebGLの仕様はOpenGL ES 2.0ベースだが、
異なる部分も存在する。以下の定数の内、
WebGLでしか定義されていないものはどれか

UNPACK_FLIP_Y_WEBGL

UNPACK_ALIGNMENT

PACK_ALIGNMENT

ランキング発表
http://bit.ly/html5quiz2

HTML5は最新情報を
キャッチアップするのが大変ですね

今すぐhtml5j.orgに参加！

HTML5クイズ！

More Related Content

Viewers also liked (13)

Similar to HTML5クイズ！ (20)

More from yoshikawa_t (20)

HTML5クイズ！