【WS-1】HTML5によって拓かれる次世代Web - Google Developer Day 2009
HTML5はアプリケーションのプラットフォームとしてのWebを目指している様子。
マルチメディアという点においては多少なりともAdobe AirやFlash、silverlightとも
重複しているのではないでしょうか。
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を是非使ってください