HTML5に関するGREEさんのオープンソース勉強会に行ってきました。

第19回オープンソーステクノロジー勉強会(http://labs.gree.jp/Top/Study/20091120.html)
に行ってきました。

内容が↓ってことで、何も予習せずに行ったわけですが、すげかったっす><
＝＝＝＝＝＝＝
「HTML5について」
株式会社あゆた取締役、html5-developers-jp管理人、Google API Expert(HTML5) 白石俊平
＝＝＝＝＝＝＝

Youtubeの動画をブラウザ上でJavaScriptでゴリゴリやったGoogleIOのYoutubeのデモの紹介から。
のっけから、なんかHTML5すごそうって言う掴み。

ディべロッパーのためのHTML5としては、html5-developers-jpというグループが
あるそうで、会場の半数くらいの人が参加しているようでした。

講演者の白石さんはGearsでオフラインアプリの開発をずっとやってきた方だそうです。

で、以下本題。

HTML5ってなに？

　10月30日に最終ドラフトが公開され、新しい要素とか属性とかAPIが盛りだくさん。
　実装的には今すぐに使える。それぞれのブラウザで実装がバンバン進んでる。
　勧告は2022年とか言われている

　マークアップ中心の仕様(指定できるタグがめっちゃ増えてる)と、
　Webアプリ用の仕様(クライアントサイドでやれることがめっちゃ増えてる)で、
　分かれている

HTML5の基本

　　拡張子は今までのまま。htmlとかhtm。
　　Content-Typeはtext/htmlで今まで通り。
　　先頭に空のDOCTYPE宣言が必要になった。
　　
　　って書いておくことで、ブラウザはHTML5であることを認識して、
　　最新のモードでレンダリングしてくれる

　　増えたタグ
　　　文書構造
　　　　article, aside, footer, header, hgroup, nav, section
　　　フォーム、Webアプリ
　　　　figure, source, video, audio, canvas, embed
　　　インタラクティブ
　　　　keygen, output, input要素に新しいtypeがたくさん
　　　テキスト系
　　　　progress(プログレスバー), meter, command(ツールバー,右クリックメニュー等), details

　　HTML5ではセマンティックな意味合いを持つブロック要素(セクション)が追加。
　　　section ・・・ HTMLの論理的な分割単位。
　　　　　今まではdivを使ってた。sectionも使える。けどCSSはdivで。
　　　article・・・RSSで配信しちゃっていいもの
　　　aside・・・セクションに対する補足
　　　nav・・・ナビゲーション
　　　bodyとかtdとかも独自のセクションを生成。全ての要素がセクションに所属する。
　　　→セクションを使うとアウトラインが組めるようになる。文書をよりセマンティックに。
　　　　セクションの情報を自動的にとってきてーみたいなデモ。
　　　→→より適切なリスティング広告とかに応用できそう。

　　METAタグにCharsetを追加できる

　　Canvas・・・自由にお絵描きできるグラフィック要素
　　　　AJAXのクルクルしてるやつを画像使わずに。
　　　　色かえたり、止めたり、リスタートしたり。
　　　　getContextってやるとお絵描きのコンテキストがとれるらしいんだけど、
　　　　今は2dしかないけど、3d実装がどんどん進んでる

　　動画や音声の再生ができるように。
　　　videoタグで動画が再生できて、audioタグで音楽が再生できて、
　　　sourceタグで複数のメディアの中からどれをーってのが指定できる
　　　ってか、videoタグやばい。JSで簡単に再生したり、止めたり、リスタートしたり。

　　　ただ、フォーマットとかコーデックが明確になっていないため、
　　　firefoxとsafariで同じように動画を再生したいーってなったらちと厳しい

　　入力フォームのパワーアップ
　　　tel ・・・電話番号
　　　search・・・検索フォーム
　　　url・・・URL
　　　range・・・範囲内の数字
　　　→今のところOPERAが頑張ってる。カレンダーとか。
　　　　dateとかタギングするだけでそういう入力フォームになる。
　　　　requiredって書くだけで入力必須とか。pattern属性は正規表現で指定できる
　　　　typeによって自動的にチェック。email, urlとか。
　　　　JavaScriptに頼らずにバリデーションチェックできる。
　　　　→一度に一カ所しかバリデーションできないっぽいけど。。

　　エクスプローラーからファイルをドラッグアンドドロップしたり。
　　　Listenerで待つMIME Typeを指定してファイルを受け取ったりできる

　　クロスドキュメントメッセージング
　　　外側のHTMLとiframeの間で通信できる。
　　　個人的に、これができれば、アレに応用できる、、なんてのを思いつきました。
　　　自分は最近、ネット広告分野に携わっていますが、世の中なんだかんだで、
　　　iframeなんだなと実感してたりします。。そこにこれはあつい。。

　　オフラインWebアプリケーション
　　　マニフェストに書いておくと、ドバっとローカルに落としてくれてー
　　　オフラインでもいろいろできるよ、と。

　　で、こっからが若干ひいた。

　　WebDatabase
　　　ブラウザが持ってるデータベース。ドメインごとにDBを持つ。
　　　INDEXもはれて、普通にDBプログラミングできる。
　　　これは行動ターゲティングとかするのに、サーバ側の処理を
　　　思いっきり簡略化する可能性を秘めてると思う。

　　WebStorage
　　　ちょ、なにそれっていう。。
　　　setXXXとかそういうので、KVS的にストレージにデータを保持。
　　　非常に使い方は簡単。IE8でも使える。
　　　上のDBと組み合わせて使えればいろいろできるよね。。

　　WebWorkers
　　　で、極めつけに、こいつ。
　　　バックグランドで動作するJSスレッド
　　　画面の表示とは関係なく裏側でグリグリまわせる。
　　　DBやKVSと組み合わせてグリグリ回せるんだったら
　　　俺がサーバ側で頑張ってる今の仕事って何？とかw

　　　ただ、スレッドとはいえ、変数を共有できない〜とか。
　　　windowとかdocumentとかの変数は使えないので、
　　　Prototype.jsとかを使ってるやつは移植できないらしい。

　　　バックグランドのスレッドと画面を表示するスレッドは
　　　メッセージを送り合う感じらしい。

　　　Workerから直接DOMを触る事はできなかったり、デバッガが
　　　使えなかったりいろいろあるらしいけど、なんか違う世界観が
　　　求められるような気がする。

　　WebSockets

　　　なんかここまで来ると引きますが、
　　　Commetみたいに双方向通信とかできるみたいです。
　　　今まではクライアントがサーバに問い合わせるだけだったのが、
　　　サーバからプッシュ〜とか出来るんだってさ。

ビジュアル的にいろいろやれるようになってるだけなのかと思ったら。。
しかも、これが標準仕様なので、この方向にみんな向かっていくということで。
本当にこの業界って飽きなくて素敵、とか思ってしまう今日この頃です。

懇親会はいろんな方とお話させていただいて、
思わぬところで、思わぬ人が繋がってたり、
業界の裏話的な事を聞かせてもらったり、楽しかったです。

こんなためになる勉強会なら1年間に50日くらい行きたいです。。