HTML5クイズ！2012/3/13(火) nifty

第27回HTML5とか勉強会Toru Yoshikawa ( @yoshikawa_t )

HTML5クイズ！やりました

@デブサミ2012

総参加者207名！

豪華景品！

Summary2日間での総参加者207名

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

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

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

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

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

アンケート項目

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

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

66.18%

47.82%

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

（49.07%）

HTML5クイズ！にチャレンジ

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

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

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

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

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

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

クイズ中…

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

http://bit.ly/html5quiz

解説

初級コース

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

正しい

間違い

初級コース　第1問[SEMANTICS]

初級コース　第1問[SEMANTICS]

間違い35.77%

正しい

64.23%

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

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

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

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

正しい

間違い

初級コース　第2問[OFFLINE & STORAGE]

初級コース　第2問[OFFLINE & STORAGE]

間違い

84.55%

正しい15.45%

正答率84.55%Session StorageとLocal Storageの違いを問う問題。 Local Storageは、ブラウザを再起動しても保存される。消えてしまうのはSession Storage

その他の注意点として、Session Storageは、複数ウィンドウ間で共有できない

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

正しい

間違い

初級コース　第3問[MULTIMEDIA]

初級コース　第3問[MULTIMEDIA]

間違い32.52%

正しい

67.48%

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

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

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

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

正しい

間違い

初級コース　第4問[GRAPHICS & EFFECTS]

初級コース　第4問[GRAPHICS & EFFECTS]

間違い

17.07%

正しい82.93%

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

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

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

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

正しい

間違い

初級コース　第5問[CSS3]

初級コース　第5問[CSS3]

間違い54.44%

正しい

45.56%

正答率45.56%初級コースにはやや難しいと思われる知識問題

@keyframesでアニメーションを定義する。from、to、xx%で記述

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

上級コース

HTML5仕様の現在の状態は？

最終草案（Last Call Working Draft）

勧告候補（Candidate Recommendation）

勧告案（Proposed Recommendation）

勧告（Recommendation）

上級コース　第1問[SPECIFICATION]

上級コース　第1問[SPECIFICATION]

勧告7.14%勧告案

20.24%

勧告候補35.71%

最終草案

36.90%

正答率36.90%HTML5は、2011年5月25日にLast Callが宣言された

ここでいうHTML5は、MarkupやMicrodata、Canvasなど

勧告は、2014年を予定しているが果たして…

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

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

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

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

大きな変更は特にない

上級コース　第2問[DEVICE ACCESS]

上級コース　第2問[DEVICE ACCESS]

変更なし　　8.33%

ルート取得17.86%

取得元の選択54.76%

住所取得

19.05%

正答率19.05%Geolocation API Level2では、Addressインターフェースが追加され住所が取得できるようになった

位置情報の取得元については抽象化されている

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

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

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

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

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

上級コース　第3問[OFFLINE & STORAGE]

上級コース　第3問[OFFLINE & STORAGE]

いつでも定義変更可　　　　22.62%

JSオブジェクト保存可

65.48%

SQL操作11.90%

正答率65.48%Indexed Databaseは、KVS型のデータベース。SQL操作は、Web SQL Databaseで可能。

JavaScriptオブジェクトの保存が可能（structured clone）

IndexedDBでは、スキーマの変更はVERSION_CHANGEトランザクションで行う（DBのopen時）

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

80

81

443

815

上級コース　第4問[CONNECTIVITY]

上級コース　第4問[CONNECTIVITY]

「815」20.24%

「443」

53.57%

「81」11.90%

「80」14.29%

正答率53.57%WebSocketが利用するポートの問題。HTTP/HTTPSと同じポートを利用するため、ルータやFWを越えることができる特徴を持つ

あとは、HTTPS(SSL)のポート番号を知っているかどうか

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

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

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

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

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

上級コース　第5問[MULTIMEDIA]

上級コース　第5問[MULTIMEDIA]

基本エフェクト用意44.05%

マイク入力をルーティング

35.71%

3D音場20.24%

正答率35.71%Web Audio APIは、音声の再生、生成を可能とする仕様

音声の出力方向を調整するAudio Node(Panner)などでマルチチャネル対応

マイク入力を取得する機能はない

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

おまけ

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

UNPACK_FLIP_Y_WEBGL

UNPACK_ALIGNMENT

PACK_ALIGNMENT

おまけ問題[WebGL]

ランキング発表

http://bit.ly/html5quiz2

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

今すぐhtml5j.orgに参加！

Thank you!!