スライド 1

2010 年 3 月 3 日 有 限 会 社 futomi 代 表 取 締 役 羽 田 野 太 巳 http://www.futomi.com/ http://www.html5.jp/ http://twitter.com/futomi

旧 来 のHTML マークアップの 規 定 が 中 心 論 文 をベースとした 語 彙 が 中 心 ブラウザー 向 けの 要 件 は 規 定 されず

ブラウザーの 互 換 性 規 定 違 反 のマークアップに 遭 遇 したときの 扱 いが 違 う JavaScriptコードの 実 行 結 果 が 異 なる

BOM/DOM 仕 様 のドキュメント 多 くの 仕 様 が 策 定 されていない 仕 様 があったとしても 古 く 現 状 にあっていない ブラウザーごとに 解 釈 が 違 う

ウェブ アプリケーションの 壁 ブラウザーの 互 換 性 対 策 ブラウザーによって 機 能 がない リッチなアプリケーション 制 作 に 限 界 リッチなアプリケーションになるほど ブラウ ザー 互 換 性 の 対 策 に 大 きな 労 力 を 要 する

ウェブを 再 定 義 ブラウザーごとの 非 互 換 性 を 解 決 リッチなウェブ アプリケーションに 求 められる APIを 新 たに 開 発 現 代 のウェブの 用 途 に 合 わせてマークアップの 語 彙 を 追 加 HTML5の 誕 生

HTML5をひとことでいうと Webプラットフォーム Open Web

HTML5の 特 徴 マークアップ 下 位 互 換 性 人 が 見 ても 分 かりやすい 誰 でも 簡 単 に 作 れる ウェブ アプリケーション 互 換 性 のあるAPI 新 たなAPI

HTML5の 設 計 原 則 互 換 性 実 用 性 相 互 運 用 性 ユニバーサル アクセス http://www.w3.org/tr/html-design-principles/

互 換 性 コンテンツの 互 換 性 過 去 のコンテンツが 利 用 できなくなるわけではない ブラウザーの 互 換 性 どのブラウザーでも 同 じように 見 える 再 利 用 ブラウザー 独 自 の 機 能 を 標 準 として 採 用 車 輪 の 再 発 明 をしない 革 新 より 発 展 理 想 を 求 めてまったく 新 しいものを 作 るのではなく 今 あるものを 改 良 することを 優 先 する XHTML 2.0の 反 省?

実 用 性 理 想 より 実 用 性 を 優 先 優 先 順 位 ユーザー ウェブ 制 作 者 ブラウザー ベンダー 仕 様 書 理 想 セキュリティー 重 視

相 互 運 用 性 ブラウザーの 挙 動 の 互 換 性 を 保 証 複 雑 さは ブラウザー 間 の 互 換 性 を 損 なう 可 能 性 がある 複 雑 な 仕 様 は ウェブ 制 作 者 が 利 用 をためらう 原 因 にも シンプルであることを 重 要 視

ユニバーサル アクセス すべてのメディアに PC モバイル 端 末 テレビ ゲーム 機 など すべての 言 語 に 英 語 だけでなく 日 本 語 やアラビア 語 なども 考 慮 すべての 人 に ハンディキャップを 持 った 人 でも 利 用 できる アクセシビリティが 重 要

W3Cの 勧 告 の 条 件 2つ 以 上 のブラウザーがHTML5を 実 装 しなければ 勧 告 にできない 2009 年 から 各 ブラウザー ベンダーはHTML5の 実 装 を 強 く 推 し 進 めている MicrosoftもInternet Explorer 9でHTML5の 実 装 を 推 し 進 めることを 表 明 (Microsoft PDC09) http://microsoftpdc.com/

W3C 勧 告 までのマイルストーン 2010 年 01 月 : 最 終 草 案 2010 年 12 月 : 勧 告 候 補 2012 年 01 月 : 勧 告 案 2012 年 03 月 : 勧 告 W3C HTML Working Group http://www.w3.org/html/wg/ 2010 年 3 月 時 点 でまだ 最 終 草 案 に 至 っていない

HTML5 仕 様 の 関 連

HTML5の 範 囲 HTML5の 範 囲 は 曖 昧 もともとはWHATWGが 開 発 した 仕 様 の 範 囲 を 表 す W3Cが 開 発 したAPIも 含 めてHTML5と 呼 ぶことが 多 い 文 脈 によっては CSS3も 含 めて 次 世 代 ウェ ブ テクノロジーの 代 名 詞 として 使 われることも ある

Webアプリの 入 り 口 新 たに 追 加 されたフォーム コントロール Webアプリケーションが デスクトップ アプリ ケーションに 近 いUIを 実 現

日 付 <input type="date" name="dt" />

時 間 <input type="time" name="tm" />

数 値 <input type="number" name="mb" />

スライダー( 数 値 ) <input type="range" name="mb" />

色 <input type="color" name="cl" />

必 須 <input type="url" name="url" required>

正 規 表 現 <input type="text" pattern=" d{3} - d{4}">

<canvas> ウェブページに 図 を 描 くことができる canvas 要 素 にAPIが 規 定 されている JavaScriptからAPIを 通 して 図 を 描 く <canvas width="300" height="150"> <!-- ここにフォールバック コンテンツを 入 れます --> </canvas>

Canvas 2d context CanvasのAPIを 規 定 HTML5 仕 様 から 分 離 現 在 は2dのみ 将 来 的 には3d SVGとの 連 携 アクセシビリティ (WAI)を 考 慮 http://dev.w3.org/html5/2dcontext/

CanvasとSVGの 違 い Canvas JavaScriptを 使 って 描 画 描 いてしまった 図 を 個 別 に 認 識 できない 描 画 そのものは 高 速 ピクセル 操 作 が 可 能 SVG XML 形 式 のマークアップで 図 を 表 現 JavaScriptから 各 要 素 にアクセス 可 能 要 素 が 多 すぎると 重 い ピクセル 操 作 はできない

/* 半 透 明 度 を 指 定 */ ctx.globalalpha = 0.7; /* 円 #1 */ ctx.beginpath(); ctx.fillstyle = 'rgb(192, 80, 77)'; // 赤 ctx.arc(70, 45, 35, 0, Math.PI*2, false); ctx.fill(); /* 円 #2 */ ctx.beginpath(); ctx.fillstyle = 'rgb(155, 187, 89)'; // 緑 ctx.arc(45, 95, 35, 0, Math.PI*2, false); ctx.fill(); /* 円 #3 */ ctx.beginpath(); ctx.fillstyle = 'rgb(128, 100, 162)'; // 紫 ctx.arc(95, 95, 35, 0, Math.PI*2, false); ctx.fill();

Canvasによるアニメーション アニメーションに 特 化 した 機 能 はない Canvasは 描 画 速 度 が 非 常 に 高 速 パラパラマンガを 作 る(1コマずつ 全 体 描 画 ) settimeout() やsetInterval()を 組 み 合 わせる

<video>/<audio> プラグインなしにビデオやオーディオの 再 生 を 可 能 とする <video id="video" src="sample.mp4"> <p>ご 利 用 のブラウザーでは 再 生 できません <a href="test.mp4">こちら</a> からダウンロードしてください </p> </video>

Chrome 4 Firefox 3.6 Safari 4

Video/AudioのAPI ビデオやオーディオの 再 生 は JavaScriptから 制 御 可 能 イベント メソッド プロパティが 仕 様 で 規 定 さ れる 独 自 のビデオ コントロール インタフェースを 構 築 することが 可 能

Web Workers JavaScriptの 処 理 をバックグラウンドで 実 行 ブラウザーのUIをブロッキングしない すでにFirefox 3.5+, Chrome 3+ で 利 用 可 能 http://www.w3.org/tr/workers/

workerの 種 類 専 用 ワーカー(Dedicated workers) 1つのブラウジング コンテキスト 専 用 で 動 作 するワー カー Chrome 3+, Firefox 3.5+がサポート 共 有 ワーカー(Shared workers) 複 数 のブラウジング コンテキストで 共 有 して 動 作 する ワーカー Chrome 4+がサポート 予 定

Web Storage ブラウザーにデータを 蓄 積 Cookieと 同 様 にキーと 値 のペアを 保 存 数 MBのデータも 保 存 可 能 保 存 されたデータは サーバーに 送 信 されない オフライン アプリケーション サーバーの 負 荷 低 減 などに 有 効 すでにInternet Explorer 8 Firefox 3.5+ Chrome 3+ Opera 10.5 pre-alphaで 利 用 可 能 http://www.w3.org/tr/webstorage/

セッション ストレージ ブラウジング コンテキスト 単 位 にデータを 保 存 管 理 保 存 されたデータは ブラウジング コンテキス トが 終 了 閉 じるまで 保 存 その 後 は 破 棄 Cookieに 例 えれば 有 効 期 限 を 指 定 しなかった 場 合 と 同 じ var o = window.sessionstorage;

ローカル ストレージ オリジン 単 位 でデータを 保 存 管 理 オリジンが 少 しでも 違 うサイトでは 別 々のスト レージとして 管 理 お 互 いのデータを 参 照 することはできない ブラウザーを 閉 じても そのデータは 消 えない var o = window.localstorage;

Indexed Database API ブラウザーにデータを 蓄 積 データのリスト データの 検 索 大 量 のレコード 数 を 考 慮 2009 年 9 月 より 策 定 が 始 まる 策 定 が 始 まって 間 もないため 対 応 したブラウザ はない http://www.w3.org/tr/indexeddb/

Web SQL Database ブラウザーにデータを 蓄 積 データ 読 み 取 り 保 存 にSQLを 利 用 複 雑 なデータ 構 造 の 保 存 に 有 効 すでにSafari 4+ Chrome 4+ Opera 10.5 prealphaで 利 用 可 能 データベース エンジンに 実 装 されているSQLの 方 言 を 懸 念 される ブラウザー ベンダーの 意 見 がまとまらず 仕 様 策 定 が 実 質 的 に 停 止 http://www.w3.org/tr/webdatabase/

Server-Sent Events リアルタイムにサーバーからのメッセージを 受 信 する API HTTPを 利 用 する コネクションを 明 示 的 に 閉 じない 限 り 再 接 続 される サーバー 側 では text/event-streamで 出 力 する サーバーから 送 信 するデータは data:メッセージ Perl/CGIやPHPなどで 簡 単 にサーバー 側 の 仕 組 みを 用 意 できる すでにWebKit Nightly Buildsで 利 用 可 能 http://www.w3.org/tr/eventsource/

WebSockets API サーバーと 双 方 向 に 通 信 するためのAPI 全 二 重 である 点 が 重 要 オーバーヘッドが 少 ないため 効 率 的 にメッセー ジの 送 受 信 が 可 能 となる チャットなどのリアルタイム 双 方 向 通 信 を 必 要 と するアプリケーションに 有 効 サーバー 側 では WebSocketsプロトコルに 対 応 する 必 要 がある すでにChrome 4で 利 用 可 能 http://www.w3.org/tr/websockets/

Drag & Drop / File API File APIは fileタイプのinput 要 素 に 指 定 された ファイルを 扱 うためのAPI ドラッグ&ドロップと 組 み 合 わせることで デス クトップ 上 のファイルを 扱 うことも 可 能 ファイルのメタ 情 報 だけでなく ファイルの 中 身 (データ)をJavaScriptで 扱 うことも 可 能 ブラウザーとデスクトップをシームレスにつなげ るキー テクノロジーとなる すでにFirefox 3.6+ で 利 用 可 能 http://www.w3.org/tr/fileapi/

Geolocation API 位 置 情 報 を 取 得 するAPI 緯 度 経 度 高 度 進 行 方 向 移 動 速 度 日 本 国 内 でも 各 キャリアが 位 置 情 報 サービスを 提 供 しているが サーバーとの 連 携 が 必 要 さらに キャリアごとに 互 換 性 が 一 切 ない Geolocation APIはJavaScriptだけで 位 置 情 報 を 取 得 でき 標 準 化 されたAPIであるため 将 来 的 に はデバイス フリーの 位 置 情 報 アプリケーション が 期 待 できる すでにFirefox 3.5+ iphone 3.0で 利 用 可 能 http://www.w3.org/tr/geolocation-api/

HTML5 Canvas and Audio Experiment by 9elements http://9elements.com/io/projects/html5/canvas/ http://9elements.com/

採 用 テクノロジー <canvas> 図 の 描 画 <audio> 音 楽 の 再 生 Modernizr http://www.modernizr.com/ Processing.js http://processingjs.org/

Movement tracker by Paul Rouget http://people.mozilla.com/~prouget/demos/tracker/tracker.xhtml http://blog.mozbox.org/

採 用 テクノロジー <video> ビデオの 再 生 <canvas> ビデオの 表 示 Web Workers 動 きを 検 知 する 処 理

Sketchpad by COLOR JACK http://mugtug.com/sketchpad/ http://www.colorjack.com/

採 用 テクノロジー <canvas> パレットの 表 示 履 歴 の 記 録

Wars Episode IV: A NEW HOPE by Guillermo Esteves http://www.gesteves.com/experiments/starwars.html http://www.gesteves.com/

採 用 テクノロジー CSS3 Webフォント フォントをサーバーからダウンロード CSS3 Transitions 文 字 の 変 形 CSS3 アニメーション 文 字 の 動 き

open ライセンス フリー 仕 様 の 詳 細 が 完 全 にオープン 互 換 性 が 保 たれたブラウザー 環 境 へ

Web ホームページ ホームページ プラットフォームからアプリケー ション プラットフォームへシフト Webがホームページからデスクトップ アプリケーショ ンまでをカバー ブラウザー(デスクトップ)とクラウド(サーバー 群 ) の 組 み 合 わせで デスクトップ アプリケーションの 多 くを 代 替 できる Webディベロッパー ホームページ 制 作 者 コンピューター アプリケーション ディベロッパー

マルチ デバイス Webはパソコンだけにあるのではない あらゆるコンピューター デバイスへ モバイル 端 末 テレビ カーナビ ゲームコン ソール セットトップボックス その 他 組 み 込 み 機 器 etc. FORD In-Dash Computer / Opera http://www.fordworksolutions.com/products/in-dash http://www.youtube.com/watch?v=d3nhcxokyt0

知 識 より 想 像 力 が 問 われる 時 代 へ HTML5のAPIの 仕 様 はシンプル 誰 でも 簡 単 にアプリケーションが 作 れる 仕 様 の 詳 細 は 誰 でもアクセス 可 能 知 っていること 覚 えていることに 価 値 はない Webテクノロジーを どこで どのように 使 える のかを 考 えることが 重 要

JavaScriptがフロントエンドの 中 核 に HTML5のAPIは JavaScriptで プロプライエタリーなプラットフォームの 必 要 性 が 低 下 ブラウザー + JavaScriptだけで 多 くのコン ピューター アプリケーションをカバー つぶしが 効 くスキルへ