< E93788F748B478B5A8F7094AD955C5F >

Size: px

Start display at page:

Download "< E93788F748B478B5A8F7094AD955C5F >"

みいかうづき
5 years ago
Views:

1 HTML5 DIVIC 新横浜支店技術部島田圭

2 HTML5 登場までの経緯 2000 年 W3C が XHTML1.0 を勧告 HTML から XML へと移行する予定だった 2004 年ブラウザベンダが HTML 拡張を呼びかけ WEB アプリの台頭機能が複雑化 XML の普及を待てない 2005 年 WHAT WG を立ち上げ HTML5 のベースとなる仕様を策定開発者からの支持を得る 2007 年 W3C が HTML WG を立ち上げ以後共同で策定を進める 2012 年勧告予定勧告 = すべての機能の実装 2022 年という話も既にブラウザで実装され使用できる機能もたくさんある 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

3 HTML5 HTML5 とは何か? HTML の最新バージョン HTML4 との違いマルチメディア機能の強化フォーム機能の強化 Web アプリケーションを支える機能の強化 etc 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

4 マルチメディア機能 Video/Audio 要素 Canvas 要素 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

5 マルチメディア機能 Video/Audio 要素動画再生機能音楽再生機能サンプルコード <video src="sample.ogg" controls="controls"> 動画を視聴するには video タグをサポートしたブラウザが必要です </video> Firefox での例少ないないソースソースで簡単簡単に実装 Flash などのプラグインプラグインいらず 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

6 マルチメディア機能 Video 要素コーデック問題各ブラウザブラウザの対応対応ビデオコーデック対応がバラバラコーデック H.264 ogg Theora FireFox Safari Chorome IE(9) Opera 今後コーデックコーデックの統一統一を期待期待したいしたい 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

7 マルチメディア機能 Canvas 要素図形描写機能動的に図形図形を描写描写できるグラフなどのなどの利用例高速描写でアニメーションアニメーションも可能 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

8 フォーム機能強化されたフォーム機能 placeholder 属性 autofocus 属性 autocomplete 属性 placeholder サンプル薄くヒントヒントを表示 autocomplete サンプルセキュリティを意識意識したした設定設定が可能 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

9 フォーム機能強化されたフォーム要素 input 要素の種別種別が増加従来は text,password radio,checkbox,button など input 要素サンプル HTML で記述するだけ!! 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

10 フォーム機能強化されたフォーム要素入力値のバリデーション required 属性入力必須 pattern 属性パターンパターンを正規表現正規表現で指定 min/max 属性最小値最小値と最大値最大値を指定指定する etc ブラウザがフォームフォーム送信時送信時に自動的自動的に入力値入力値チェックチェックを実行特殊な入力入力コントロールコントロールを HTML だけで実装実装できる!! 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page /2010 年度春

11 Web アプリケーションを支える機能クロスドキュメントメッセージング Web Sockets Web Workers アプリケーションキャッシュ Web Storage Web SQL Database ページ間通信クライアントサーバー間通信スレッドオフライン 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

12 Web アプリケーションを支える機能クロスドキュメントメッセージング異なるなるドメインドメインのページページ間の通信手段従来のブラウザブラウザは異なるなるドメインドメインに対して API による操作操作ができないメッセージの送受信送受信によってによって他ドメインドメインの API を実行 main.html 送信文字列の送受信が可能 ifream で組みこんだみこんだ別のドメインドメインのページ受信 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

13 Web アプリケーションを支える機能クロスドキュメントメッセージングメッセージ送信 iframe.contentwindow.postmessage("msg", " メッセージ受信受信と返信 window.addeventlistener("message", cb, false) Function cb(e) { // e.data 受信したメッセージ // e.origin 送信元ドメイン URL // e.source 送信元のオブジェクト受信処理セキュリティ対策対策が必要 } // 返信 e.source.postmessage("res", e.origin) 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

14 Web アプリケーションを支える機能 Web Workers バックグラウンドで動作する Javascript スレッド従来の Web ブラウザではすべての Javascript コードが UI スレッド上で実行実行されてしまうされてしまう最悪の場合場合フリーズフリーズも!! Worker を使うことで UI に影響影響を与えない!! 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

15 Web アプリケーションを支える機能 Web Workers Worker の生成 var worker = new Worker("worker.js"); Javascript ファイルを指定するだけ更に Worker とのメッセージメッセージ送受信送受信が可能!! Worker からのメッセージメッセージ受信 worker.onmessage = function(event) { // メッセージを処理 }; Worker へメッセージメッセージ送信 worker.postmessage(message); JavaScript オブジェクトマルチスレッドマルチスレッドを簡単簡単に実現!! 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

16 Web アプリケーションを支える機能 Web Sockets クライアントサーバー間で完全完全な双方向通信双方向通信を実現 Web Sockets プロトコルに準拠準拠したしたサーバーサーバーが必要接続 var ws = new WebSocket("ws://localhost:8005/echo"); メッセージ送信 ws.send("data"); メッセージ受信 ws.onmessage = function(event) { var data = event.data; // 受信処理 }; Ajax,comet にくらべて記述が簡単!! 切断 ws.close(); 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

17 Web アプリケーションを支える機能アプリケーションキャッシュオフラインで WEB アプリケーションを動作させるためリソースをローカルにキャッシュする機能 hello.manifest CASHE MANIFEST hello.thml hello.css hello.js キャッシュしたいしたいリソースリソースをマニフェストファイルに記述 main.html <html manifest="hello.manifest">... </html> メインページで宣言宣言するだけブラウザがマニフェストファイルマニフェストファイルの変更変更を検知検知し自動でアップデートアップデートしてくれる!! 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

18 Web アプリケーションを支える機能 Web Storage クライアントサイドにデータを永続化するための仕組みストレージの種類セッションストレージタブウィンドウウィンドウ単位単位でデータデータを保存タブウィンドウウィンドウを閉じられるまでじられるまで保存保存されその後は破棄破棄されるローカルストレージオリジン ( プロトコル + ドメイン + ポート ) 単位でデータデータを保存ブラウザを閉じてもじてもデータデータは破棄破棄されない今までは Cookie でしか実現できなかったサンプルコード var o = window.sessionstorage; var o = window.localstorage; o.setitem(key, value); Key-Value の形式で保存 value = o.getitem(key); 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

19 Web アプリケーションを支える機能 Web SQL Database クライアントサイドにデータを永続化するための仕組み SQL を用いたデータアクセスが可能しかし SQL 方言についてについて各ブラウザブラウザ間で合意合意が得られず仕様の策定策定が停止中停止中 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

20 まとめ今までプラグインや複雑な Javascript でしか実現できなかった技術が簡単に実装できる新たな時代を予感させる Web ページ = アプリケーション Web ブラウザ = OS 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page /2010 年度春

参考詳解! HTML 5 と関連 API の最新動向白鳥俊平 http://journal.mycom.co.jp/special/2009/html5-1/ HTML5, きちんと矢倉眞隆 http://www.

21 参考詳解! HTML 5 と関連 API の最新動向白鳥俊平 HTML5, きちんと矢倉眞隆 10/5/17 //Divic_ls/ 管理共有 / 共通 / 首都圏成果技術発表会 /2010 年度 page / 年度春

HTML5で変わるWebの世界

HTML5で変わるWebの世界 2010/12/2 白石俊平自己紹介白石俊平と申します HTML5開発者コミュニティ html5-developers-jp管理人 Google API Expert (HTML5) Twitter: @Shumpei 著書 HTML5&API入門本日の流れ HTML5の基礎知識 HTML5の3つの意義 HTML5の可能性を表すデモアプリたち HTML5の基礎知識