第19回オープンソーステクノロジー勉強会@GREE

勉強会

GREEの勉強会に行ってきた。
今回のテーマは「HTML5について」

株式会社あゆた取締役、html5-developers-jp管理人、Google API Expert(HTML5) 白石俊平

そのすべてを一人の開発者が追跡するのは非常に困難なほどに、巨大な仕様群と化しているHTML5について、まずはその概要を広く浅くお伝えします。会場の雰囲気次第では、オフラインWebアプリをHTML5でどのように作るか、そのアーキテクチャとフレームワークなどに付いてもお話ししたいと思います。

http://labs.gree.jp/Top/Study/20091120/Report.html


ということでメモとか感想とか。
テーマがHTMLということで、女の人が結構いた気がします。
僕は嫁ちゃんと行きました。


勉強会開始前にプロジェクタで写されてたデモはHTML5+javascriptでゴリゴリ動いてたそうな。

  • HTML5はタグだけを表わすものではない
  • 関連APIも含めてHTML5です
  • HTML5って何?
    • HTMLの新バージョン
    • 新要素、新属性、新APIがたくさん
    • マークアップ中心の仕様と、API仕様とで分かれている


書き方

<!DOCTYPE html>
<html>
 <body>
 ___
 </body>
</html>

タグがいっぱい増えた

  • section アウトラインを構成する
  • airticle 独立した内容を構成(ブログエントリ、RSS配信単位)
  • nav ナビゲーションメニュー
  • header
  • footer

HTML5では全ての要素が何らかのセクションに属する
解析する側のプログラムにとって文章がわかりやすくなる

  • Canvas 自由にお絵描きできる
  • canvas内にjavascriptで書く
  • loading.gifみたいなクルクルが1Kで書ける
  • 画像じゃないので色とか速度とか変えられる(クルクル)

2Dの場合は

var ctx = canvas1.getContext("2d");

ということは…3Dもあるよ!

  • プラグインなしで動画を再生できる
  • video 動画の再生
  • audio 音声の再生
  • ただし、いまは動画フォーマットが決まっていないのでブラウザごとにサポートするフォーマットが異なる
  • フォームがパワーアップ
  • input要素のtype属性が増えた
  • 入力値のバリデーションがラクチンに
  • require,number,date,emailなどsend時点でチェックされる
  • autocomplete="on" 中身はlistにdatalistのidを指定
  • いまのところoperaが一番進んでる
  • クロスドキュメントメッセージング
  • 異なるウインドウ間でメッセージ送信
  • iGoogleのガジェット間で通信できるようになりそう
  • アプリケーションキャッシュ
  • オフラインwebアプリを実現するための仕組み
  • Web Database
  • クライアントで動作するRDB
  • SQLをフルに使える
  • ドメインごとに領域がわかれる
  • ドメインごとに複数のDBをもてる
  • var db = openDB(...); でDBができる
  • 同期と非同期のDBがある
  • Web Storage
  • キー バリュー型のストレージ
  • いきなりlocalStorageが使える
  • localStorage[key] = value;
  • Web Workers
  • バックグラウンドで動作するjavascript thread
  • これがないとUIとセットな今のjavascriptだとブラウザが固まる
  • 変数を共有できない
  • window,documentとか使えない
  • データの共有はメッセージの送りあい

fakeworker.jsとかAlexServiceとか使うといいよ

  • Web Sockets
  • 非HTTPで双方向通信を実現するためのAPI
  • サーバ側にも実行が必要


浅く広くということで、基本的なところを紹介してもらいました。
嫁ちゃんは最初あまり興味なさげでしたが、HTMLとjavascriptだけでこんなにいろいろできるよ という内容に「ほほー」と関心してました。