HTML5 により拓かれる次世代 Web (GDD09)

HTML5 により拓かれる次世代 Web 田村健人氏

以前、事前インタビュー時にお聞きした内容についてのご講演です。

GDD事前インタビュー 5/26 (Enterprise, HTML5, Google App Engine)
http://ofuku.blog.so-net.ne.jp/2009-06-02


HTML5：アプリケーションプラットフォーム
　・HTML4：基本的には構造文書として強化
　・アプリケーションを作る為の要素の追加
　・挙動の定義
　・様々なAPIを定義：HTML DOM, 文書と全く関係のないAPIも定義
　・アプリを動作させる標準プラットフォームの定義へ
　　・長期的目標：OSネイティブアプリのような機能

Webの使い易さの向上
　・HTML5のメリット：エンドユーザ
　　・オフライン関係機能
　　・SVG, MathML, canvas, audio, video等、表現力の向上
　　・メニュー, フォームの強化、利便性
　　・スクリプト, コード現象→高速化：読み込み,動作

Web開発を容易へ
　・開発者のメリット
　　・上記のメリットをユーザに提供
　　・プラグインを使わないと実装できなかったこと
　　　→一部HTMLとスクリプトで作ることができる
　　・メニュー, フォーム検証の為の大量のスクリプト
　　　　→HTMLのみの記述で可能に
　　・規格化によるブラウザ間の非互換→減少

新機能
　・Web Workers：マルチスレッド
　・Web Sockets：サーバとのメッセージ交換
　・Web Storage：クライアント側でデータ保存
　・フォームの強化
　・メディア要素：canbas, video, audio
　・アプリ向け：menu, datagrid, progress, meter
　・構造化向け要素
　・ドラッグ＆ドロップ機能
　・ドキュメント間メッセージ
　・ルビ
　・データ属性：アプリ依存データの埋込み
　・SVGとMathMLの埋込み

今からでもHTML5を始めましょう
・iPhoneやAndroid等の特定のプラットフォーム向けWebアプリでの恩恵
　→アプリケーションキャッシュ, canvas
・無くてもよいが使うと便利な機能の実装
・ドラフトに目を通し、フィードバック
・オープンソースブラウザのHTML5対応への貢献

概要ここまで

-----------------------

HTML5は、10年ぶりのHTML新バージョン
・99年から全く更新がなかった
・W3C HTML4で終わりで、XHTMLへ
・Ajaxが出た
・HTML4とXHTML, DOM Level2 HTMLを利用
・Apple、Mojira、Google、Opera

geoロケーションAPI
今年１０月に出せそう
---

HTML5は、4つの企画で構成
・HTML5-A vocabulary and associated APIs for HTML and XHTML
・Web Storage
・Web Workers
・The Web Sockets API

→現在ワーキングドラフト
　2009年に最後のワーキングドラフト

HTML表記とXHTML表記
・HTML表記とXHTML表記のサポート
・SVGとMathMLは、XHTML表記のときのみサポート

--

Web Worker
・バックグランドでスクリプト実行
・毎回新しいスレッドを生成するWorker
・複数のウィンドウででSharedWorker
・ウィンドウを閉じても動き続けるpersistent workerが議論中

Web Sockets
・サーバと専用プロトコル通信
・XMLHttpRecquestは重く、それと比較するとオーバーへットが
　小さくリアルアイム性が高い

Web Storege
・クライアント側にデータを置く
・データ形式の異なる2つのタイプ
　・Storage型：文字列のkey-valueペアを扱うStorgte型
　　・スコープの違う2種類
　　　・window.localStorage：
　　　　　・サイト側に保持-key-valueペア
　　　　　・消さない限り、ローカルに保持-アプリケーションキャッシュ
　　　　　　キャッシュしても良いURL,しないで欲しいURLを宣言
　　　　　・ブラウザがオンライン時、キャッシュされていないURLを先読み
　　　　　・オフライン時には、キャッシュを行なう

　　　・window.sessionStorage：
　　　　・サイト別、ウィンドウ別に保持-key-valueペア
　　　　・複数のウィンドウを開いても別インスタンス
　　　　・ウィンドウを閉じると消滅

　・Database型：SQLを使う
　　・インターフェイスの違う2種類
　　・localStorage同様、サイト側に保持される記憶領域
　　　・同期型
　　　・非同期型

フォームの強化





メディア要素：Canvas
・スクリプトによる2次元グラフィックス描画
・定義されている機能
　・座標系：拡大縮小、回転、行列変換、原点移動
　・色、透明色、ブラシパターン、グラデーション
　・線の太さ、先端の形状
　・矩形、直線、ベジュ曲線、円弧の描画
　・文字列描画
　・矩形コピー
　・他のcanvas要素、img要素、video要素からの矩形コピー
　・canvas内のピクセル色の取得

メディア要素：videoとaudio
・img要素と同じようにsrc属性に動画URLや音声URLを指定（動画の切り出し）
・souce要素を複数指定→ブラウザに選択させる

アプリケーション向け要素
・menu要素



・datagrid要素
　・まとまったデータを表現
　・リスト構造、木構造、表を扱う
　・ソートや編集が可能
　・大量のデータの表示、ユーザが編集したデータをスクリプト処理

・progress要素とmeter要素
　


構造化文書向け要素
・section、article、aside、header、footar、nav、time等
　・文書の見た目にほとんど影響がない　
　・HTMLの可読性向上、機械処理に有用

まとめ
・HTML5は、アプリケーションプラットフォーム
・プザウザを限定すれば、一部の機能は今利用可能
・まだワーキングドラフト、企画の内容は追加修正可能
・新機能の一部を紹介

※6/16インデントを一部修正しました。

-----------------------------------------------------------------

※8/29 関連URL 追記

HTML5
Draft Standard - 28 August 2009
http://www.whatwg.org/specs/web-apps/current-work/#the-address-element