タグだけじゃない HTML5の実力

佐川　夫美雄 @albatrosary 株式会社ゼノフィ

佐川　夫美雄

HTML5Expert.jpコントリビュータ HTML5 fun !html5jエンタープライズ部 副部長 html5j Web Platform部 knockoutjs Japan UG（仮） Sencha UG CO-ORGANIZER AngularJS Japan User Group

http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/

(Fumio SAGAWA)

Webの歴史

SGML(standard Generalized Markup Language) 1986年

HTML(HyperText Markup Language) 1989年

HTML 4.0(HyperText Markup Language) 1997年

XML(eXtensible Markup Language) 1998年

XHTML(eXtensible HyperText Markup Language) 2000年

HTML 5.0(HyperText Markup Language) 2012年

CSS 1 1996年

CSS 2 1998年

CSS 2.1 2004年

CSS 3 2011年

HTTP 1.1 1999年

HTTP 1.0 1996年

HTTP 0.9 1993年

SPDY 2011年

XHTML 2.0(eXtensible HyperText Markup Language) 2010年

HTTP 2(draft) 2012年

Webの歴史

HTML5が2014年に正式勧告

HTML5のタグ

HTML4 HTML5

どうかわるか

カレンダーやデートピッカー 月の入力 週の入力 時刻の入力 詳細な日時や時刻の入力 自分のいる地域の日付と時刻

inputタイプの種類

検索ボックス スピンボックス スライダ カラーピッカー 電話番号 Webページのアドレス メールアドレス

ブラウザはどうなっているか

http://html5test.com/

ブラウザ

HTML5と通信

より早く双方向に

クライアントとサーバが接続し続ける 双方向通信

WebSocket

既存のHTTPを拡張 複数のリクエストを送受信することが可能

Geolocation

Geolocation

Geolocation APIによる位置情報通知

Geolocation

https://developers.google.com/maps/documentation/javascript/examples/map-geolocation?hl=ja

Webなのに Offline Web Application

Webなのに Offline Web Application

Application Cache Web Strage Indexed Databace API File API

キーと値でブラウザにデータを保持 するデータベース

Indexed Database API

クッキーを巨大にしたkey/Valueの入れ物

WebStorage

Application Cache

ユーザーがオフラインのときでもサイトにアクセス

アプリケーションを開発するには

JavaScriptフレームワーク

http://backbonejs.org/

http://angularjs.org/

http://www.sencha.com/

すでにJavaScriptフレームワークは数十種類ある 自分のプロジェクトにあったものを選ぶ

http://knockoutjs.com/

altJS

http://coffeescript.org/2009年

http://www.typescriptlang.org/2012年

http://html5experts.jp/clockmaker/2183/

altJSの言語の多くはクラス機構のサポート JavaScriptの抱える問題の多くを解決

CSS Preprocessor

http://sass-lang.com/http://compass-style.org/

http://lesscss.org/

http://learnboost.github.io/stylus/

膨大なCSSをどう整理するか

開発環境

http://yeoman.io/

http://www.sencha.com/products/sencha-cmd/download

多くのアーキテクチャをどうやって開発するか

https://www.microsoft.com/ja-jp/dev/default.aspx

具体的な実例

http://html5experts.jp/albatrosary/3191/

Thanks.