読者です 読者をやめる 読者になる 読者になる

ひつじのにっき

mhidakaのにっきです。たまに長文、気が向いたとき更新。

【WS-1】HTML5によって拓かれる次世代Web - Google Developer Day 2009

Android

HTML5はアプリケーションのプラットフォームとしてのWebを目指している様子。
マルチメディアという点においては多少なりともAdobe AirFlashsilverlightとも
重複しているのではないでしょうか。

HTML5はまだワーキングドラフトで最終的な策定は2012年ぐらい?らしいです。
その間もブラウザ間の実装が異なる=意図した動作をしない
なんて構図は残りそうですね。

でも出来ることは格段に広がっていて、とても可能性を感じた技術です!
(というか今のWebで出来ることは全部内包している贅沢な規格では?)。


以下メモです。

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

HTML5はアプリケーションプラットフォーム

HTML4は基本的には構造化文書を定義する。HTML5はそれに加えて
 - アプリケーションを作るための要素
 - 挙動の定義
 - 様々なAPIを定義(HTML DOMのプロパティや文書と全く関係のないAPIも含まれている)
		
アプリケーションを動かす標準プラットフォームを定義する規格へ
	長期的な目標はOSのネイティブアプリに匹敵する機能をOSに依存せずに作る

ユーザメリット
 - オフライン機能
 - 表現力向上(SVG、MathML、canvas, audio, video などタグ要素の追加)
 - 利便性向上
	
開発者メリット
 - 前述のようなユーザアクティビティの向上
 - プラグイン不要(互換性の問題を排除)
	例)Gmailは3月に添付ファイルアップデートを複数可能に。
		Flashを使って実装しているが
		リリース当初、特定のブラウザ、Flashのバージョンで不具合が発生してしまった
		→ Googleも品質確保に努めているが全部テストするのは難しい現実も。
		   HTMLで出来たら、プラグインを使わなくてよいはず。
		
コード削減にも効果
	現在、メニューやフォーム検証などに大量のスクリプトコードが必要
	→ HTML5の新しい機能を使うとコード削減できる(Googleのとある機能で2000行ぐらい?)
	
互換性向上
	規格で曖昧だったところをHTML5で標準化することができる
	→ 互換性問題の解消
 	   例)JavascriptのWindowオブジェクトの標準化など

HTML5の新機能
	- Web Workers:スクリプトでのマルチスレッド
	- Web Sockets:サーバーとのメッセージ交換
	- Web Storage:クライアントへのデータ保管
	- アプリケーションキャッシュ
	- フォームの強化
	- メディア要素の追加(canvas video audioなど)
	- ドラッグアンドドロップ(ただしページ内の要素のみ。惜しい!)
	- contenteditable属性の標準化(この属性は何?)
	- ドキュメント間メッセージング:他ドメインとでも交換可能(セキュリティは大丈夫?)
	- ルビの標準化(いままでIEでは出来てたけど標準化はされていなかった)
	- data-*属性	アプリケーション依存データを埋め込める(で、何が出来るの?)
	- SVGとMathMLの埋め込み
	
HTML5を始める
	- 特定プラットフォーム向けにであれば始めやすい
		AndroidやiPhone等、特定Platform向けのウェブアプリケーションであれば
		プラットフォームとしてHTML実装が進んでおり、すぐに恩恵が受けられる。
			実装済みで効果がある機能例:アプリケーションキャッシュ、canvasなど
	
	- 「無くても構わないけどあれば便利」と言う機能はHTML5で実装するのも現実的
	
	- ドラフトに目を通すことで開発者の意見をフィードバックできる

	- オープンソースブラウザのHTML5対応に貢献

HTML5規格概要
	10年ぶりのHTML新バージョン
	
	XHTML1.1を普及させるつもりだったが、恩恵が少なく、進まなかった
	その間にAjaxやJavascriptが普及、アプリケーションとしてWebを利用する土台ができた
	
	HTML5
		HTML4、XHTML1.1、DOM level.2を包含して、機能を加えて策定(ドラフト)
		W3Cの規格 (作るのはWHATWG)

	4つの規格で構成(もともと1つだったがあまりに巨大になり分割された)
		- HTML5 
		- Web Worker
		- Web Sockets
		- Web Storage 

	ちなみに基調講演で紹介されたgeolocation APIはHTML5の一部ではなく、別団体で策定中のもの。

	策定完了まで
		Editorによると今年10月ぐらいに最後のWorking Draftが出てきそうだが、
	策定完了までは非常に時間がかかる。(最終は2012年とも?)
	
HTML5の表記
	- HTMLとXHTMLの両方をサポート
	- SVGとMathMLを埋め込む際はXHTMLのときのみサポート
	
新機能の解説
	
Web Workers
	今シングルスレッドのJavascriptを
	新しいスレッドを生成するWorkerと
	複数のウインドウで共有できるSharedWorkerで制御
	Windowを閉じても動き続けるpersistent workerを議論中
	
	var worker = new Worker('foo.js');
	worker.postMessage(data);	//データ送信
	
Web Sockets
	専用のプロトコルでサーバと文字列送受信を行う
	HTTPではないのでサーバ側でも実装が必要
	HTTPが通らない場合は?
		HTTP over Web Socketsを考えている
	
	Web Socketsはオーバーヘッドが小さく、リアルタイム性が高い
	XmlHttpRequestより効率的
	
Web Storage
	ページ遷移しても消えない、クライアント側のデータ格納機能
	データ形式の違いで2種類のタイプ
	
	Storage型 文字列のKey-Valueを扱う
		window.localStorage
			サイト別に保持される。
			ローカルマシン上に保持され続ける

		window.sessionStorage
			複数のウィンドウで同じサイトを開いても
			別のインスタンスとなる。Windowごとに別々に使う
			
		上記二つは生存期間、スコープが異なるが使い方は同じ
	
	Database型
		SQLが使用可能
		サイト別に保持される記憶領域
		同期実行と非同期実行の2つのインターフェイス
		(ただし、同期実行はユーザが待たされるので宜しくない)
		
アプリケーションキャッシュ
	キャッシュ許可・禁止を宣言しておく
	ブラウザがオンライン時にキャッシュされていないURLを先読みして
	オフライン時にはキャッシュを使う
		
		
フォームの強化
	inputタグがたくさん増えました。
		search,tel,url,email,month,week,time,datetimeなど専用のインターフェイスを用意
		Operaで実装が進んでいる
		
	フォーム検証機能
		最小値、最大値、文字列パターン、入力必須をチェック
		検証をパスしないとSubmitできない
	
	<input type='url' placeholder = "画像のURL" 
		pattern="https?://.+\.(gif|png|jpeg|jpg)">
	
	上記の書き方にしておけばパターンマッチングにあわないデータが入っていればSubmitできない。

メディア要素
	canvas:IE以外で実装済み
	2次元描画が可能。一通りの機能もあります(縮小・拡大、Canvasからの矩形コピーなど)
	
	VideoとAudio:イメージと異なり、時間軸があるのでAPIは色々ある。
		.play()メソッドなど時間軸制御できるもの
	
アプリケーション向けの要素
	menu要素
		あらゆる要素にコンテキストメニューを定義。ツールバーを簡単に作れたり、
		右クリックから好きなメニューを指定できる。
		type に contextやtoolbarがあり、メニューが自由に定義できる
	
	datagrid要素
		まとまったデータを表現できる
		リスト構造、木構造、表を扱う。(Flexに似たようなクラスがある。目指すところは同じなのか?)
	
	progress要素
	meter要素
	
	構造化文書向け要素
		section,article aside, header, footer,nav, timeなど
		文書の見た目にはほとんど影響がない
		
		HTMLソースの可読性向上や機械処理に有用。
			検索エンジンがarticleを優先するなど
		
HTML5はアプリケーションのプラットフォーム
	ブラウザを限定できる状況なら今からでも使える
	まだドラフト段階なので追加修正が可能
	HTMLを是非使ってください