HTML5 + CSS3 = 次のWeb標準?
概要 †
- Webブラウザベンダが参加するWHATWGコミュニティによって作成が進められていた仕様
- 以下が可能になる
- 2D/3Dグラフィックス操作
- 動画や音声の再生
- オフラインWebアプリケーション(Web Applications 1.0)
- クロスドメイン通信
- クライアントサイドデータベース(SQLストレージAPI)
- バックグラウンドプロセス
- サーバからのデータプッシュ
- 多様な入力フォーム(Web Forms 2.0)
- 一部の機能はすでに最新のWebブラウザに実装されている
- スケジュール
- 2009年3月にワーキングドラフトの最終版を発表
- 2009年6月に準備リコメンデーションを発表
- 2010年6月にプロポーザルリコメンデーションを発表
- 2010年9月にHTML5をW3C勧告として公表
HTML5 †
- フォームの強化
- input要素のtype属性に指定できる型の追加
- フォームに入力された値を検証する仕組みの追加
- 入力が必須である事を表すrequired属性
- 入力値のパターンを表すpattern属性 (正規表現で指定)
- canvasタグ
- 任意のグラフィックを自由に描画できる領域として、canvas要素が利用できる
- 幅と高さを指定したcanvasを定義し、あとはJavaScriptコードを用いて矩形や円、画像などを自由に描画できる
- 文書構造をより明確に表すsectionやarticleといった要素
- メニュー項目を作成するためのmenuタグやcommandタグ
- progress(進捗バー), meter(メーター)
機能 †
Web Storage †
- 日本語訳
- クライアント内にデータを永続化するための機構。StorageとDatabaseの2つがある。
- Storage
- キー/バリューの形式で永続化できる
- キーと値はどちらも文字列である必要がある
- localStorage ... ドメインごとに保存され、永続化期間は無制限だ。
- sessionStorage ... ウィンドウごと保存され、永続化期間はそのウィンドウを閉じるまでとなる
- Database
- SQLを用いてアクセスする事の出来る永続化領域
- 非同期APIと同期APIの双方を用いてアクセスすることができる
- 非同期APIは扱いにくい分、データアクセスがバックグラウンドで行われるため、UI操作の妨げにならない
- 大きなデータを蓄積できるので、ユーザーエクスペリエンスの向上やサーバー負荷の低減に役立てることができる
Web Workers †
- バックグラウンドで動作するJavaScriptスレッド
- 「重い」処理を行うJavaScriptコードも、ワーカで実行するようにすれば、UIをブロックする事なく処理を行える
- メインページのJavaScriptとワーカ、もしくはワーカ同士はJavaScriptオブジェクトを「メッセージ」として送受信することにより、ワーカ間の協調を実現
- SharedWorker? ... 複数のウィンドウ間で共有
- Persistent Worker ... ブラウザのウィンドウを閉じても動作を続ける(策定中?)
」
The Web Sockets API †
- 日本語訳
- JavaScriptからサーバーとの双方向通信を行いメッセージ交換を実現するAPI
- サーバ側でもWeb Socketsへの対処を必要とされるが、HTTPを用いずに効率的な双方向通信を実現可能
Offline Web Applications †
- 日本語訳
- 次の2つで実現
- SQL-based database API ... ローカルにデータを保存する
- offline application HTTP cache ... ユーザーがネットワークに接続していないときでもアプリケーションが確実に利用できるようにする
ブラウザ †
IE9 †
ブラウザ補完計画 †
ライブラリ・フレームワーク †
HTML5 サンプル †
HTML5 活用事例 †