グリーの第19回オープンソーステクノロジー勉強会に参加してきました。
グリーの第19回オープンソーステクノロジー勉強会に参加してきました。
参加の理由は お題が気になっていた HTML5 だったから！
株式会社あゆた取締役の白石俊平さんの講演でした。
さて HTML5 のトピックを並べてみようかと思います。
- マークアップタグが増える
canvas タグ
javascriptでお絵かきできる
canvas は 3Dもできる
webkit最新, firefox3.6 あたりで使えるらしい。
video タグ
動画貼り付け一発。flash不要。
Javascirptで再生、戻し、早回しが制御できる
しかし、標準フォーマット（コーデック）が定められない。
googleがon2社を買収する。
on2社のコーデックをopensource 化してくれるか？（予想）
input タグ
パワーアップする。
<input type="month" />
と書くと、月がセレクトメニューで表示できる
<input type="datetime" />
とすると、カレンダーがポップアップして日付選べるようになるらしい。
凄い！
validateについて
required で入力必須
urlでurlチェック
emailでメールアドレスチェック
autocomplete
<input type="text" list="hoge, aiueo" >
progress タグ
カウントダウンの進捗がJavascriptを利用しないでも標準仕様のHTML5で実現できる。
- セマンティックな意味合いを持つブロック要素（セクション）が追加される
divでやっていたようなことを、さらに意味づけられる。
header, nav, section ,article
例：
<!DOCTYPE html>
<head>
</head>
<body>
<header>
<nav>
<ul>
<li></li>
</ul>
</nav>
</header>
<section>
<article>
</article>
</section>
</body>
</html>
- ローカルにデータ保存できるようになる。
localstrage jsでローカルに保存できる
- Web Workers (thread)
バックグラウンドでスレッド(Worker)が使える。
(とあるループの計算をバックグラウンドで行えるので、計算中もユーザーはスムーズなブラウジングができる、
という機能。凄いな！)
変数は共有できない。
メッセージをやりとりする。
worker から、document window オブジェクトは触れない。
worker は body windowでは使えない。
firefox safariで使える。
弱点
Workerの動きをデバッガーで追えない
Workerからdocumentを操れないので、ログがDOMに書けない
解決策 白石さん作成の fakeworker.js は、setIntervalとevalで嘘のworkerを作る。
- Web Sockets
サーバーからクライアントにリクエストを送れるようになる。
ただし、Web Socketsというプロトコルをサーバーに実装する必要がある。
これも凄い！
WebWorkersと組み合わせて簡単にチャットみたいな仕組みが作れますね！
- 動画はコチラから
http://www.ustream.tv/recorded/2598940
- まとめ
今のwebアプリを作っていて、面倒だな、と感じていた部分を
HTML5でかなりの部分標準化される事がわかりました。
今行っているHTMLを補足するJavascriptのコーディング量が減りそうですね。
Web Workers/Web Socketsを利用すれば、HTML5の環境だけで、
リアルタイムでリッチなアプリが作れる事も分かりました。
HTML5の仕様策定にはGoogleが結構な発言をしているそうです。
そこから導かれる答えは、Google Chrome OSへの組み込みだと思います。
Google Chrome OSが楽しみになってきました。
反面Google勢力が強すぎてしまうのは如何な物かな、とも思ったりします。
