html5 by gis tec

HTML5ってどんなこと？

若狹　正生

流れ• 自己紹介

• HTML5 とは何もの？

‣簡単な歴史/どんなもの？/HTML5の存在/etc..

• どんなことができるの？

• まとめ

自己紹介• 若狹　正生（わかさ　まさお）　

• 株式会社コネクティ

• 広く浅くのWebの隙間産業

• OSGeo財団日本法人の運営委員

自己紹介第0回HTML5プログラミング・クリエイティブコンテストアスキーアートを使った何か優秀作品賞

HTML5 とは何もの？

簡単な歴史

W3C WHATWG

199720002002

2004

200720082012

WWWに関わる標準化を推進

Apple,Mozilla,Operaによって設立

HTML4 ドラフトXHTML1.0 ドラフトXHTML2.0 ドラフト

HTML4を進化させようとW3Cに提案するも却下

設立HTML5の共同策定HTML5の共同策定

HTML5 ドラフトHTML5 勧告(予定)

※細かいところは割愛してるのでざっくりです・・

W3C WHATWG

199720002002

2004

200720082012








現状よく使われている仕様は10年前のもの

W3C WHATWG

199720002002

2004

200720082012








理想と現実とのギャップによりブラウザ業界より提案

現状よく使われている仕様は10年前のもの


どんなもの？

• なんかすごいらしい。• Flashとか無くてもリッチなサイトができるらしい。

• ローカルにデータが保存できたり色々できるらしい。

別に、現状でもブラウザでできてるし、Flashで出来るならいらないじゃないか。。。

それって・・・

HTML5の存在


• ばらばらで出来ていたことを標準化する <= 各環境ごとに作り込むを極力減らす

• HTML4と互換をもたせる <= IE6で見たら悲惨は避けるレベル

• ばらばらで出来ていたことを標準化する <= 各環境ごとに作り込むを極力減らす

• HTML4と互換をもたせる <= IE6で見たら悲惨は避けるレベル

明確にAPIとして定義その機能を自由に活用できる

APIを定義？HTML5って

HyperText Markup Language 5

の略じゃないの？


APIを定義？HTML5って

HyperText Markup Language 5

の略じゃないの？


言語の事はどこに？

実は根本の考えが変わってる！

DTD (Document Type Definition)↓

DOM (Document Object Model)


実は根本の考えが変わってる！

DTD (Document Type Definition)↓

DOM (Document Object Model)


文書構造がというのではなくどう解釈されたのか。が重要

言語自体も発展はしてる！<nav><article><section>...

音声読み上げブラウザなどでも便利に！


言語自体も発展はしてる！<nav><article><section>...

音声読み上げブラウザなどでも便利に！


ただ、あまり話題に…

ちまたで話題なHTML5というものは

定義されたAPI群の事を言っている。らしい。


HTML5というものは...

HTML5

WebSockets API

Web StorageGeolocation API

WebWorkers

Web SQL Database

..............

..............

たくさんのAPIと進化したマークアップ言語

SVG

余談：<legend>

余談：<legend>

• 注釈の中で要約というものに使うもの

余談：<legend>


• 日本人的には「伝説」とか、酒の名前とか。

余談：<legend>


• 日本人的には「伝説」とか、酒の名前とか。

• 個人的には<legend>オレ</legend>とこっそりいれてみたい衝動

HTML5 vs Flash ？


• HTML5の機能ではFlashとなりえない <= Webカメラアクセスや開発ツールなど

• FlashはAdobe１社が主導権を持ってる <= 決定から実装が早い

• HTML5の機能ではFlashとなりえない <= Webカメラアクセスや開発ツールなど

• FlashはAdobe１社が主導権を持ってる <= 決定から実装が早い

FlashはクオリティHTML5は汎用性

など考え方の棲み分け

ただし、開発環境構築としてHTML5 とは何もの？

• Flash Flash , FlexSDK , etc...

• HTML5 テキストエディタ , eclipse , etc...

HTML5は開発する敷居が低い

HTML5 vs アプリ？


• HTML等を意図したキャッシュができる <= 常時接続環境じゃなくても動く

• バックグラウンド処理ができる <= 別スレッド的な書き方ができる

• ローカルにデータ保持できる <= ブラウザ内に多くのデータ保持

• HTML等を意図したキャッシュができる <= 常時接続環境じゃなくても動く

• バックグラウンド処理ができる <= 別スレッド的な書き方ができる

• ローカルにデータ保持できる <= ブラウザ内に多くのデータ保持

簡易アプリのような存在

どんなことができるの？説明するよりDEMO

• データ表示• デバイス• データ処理

まとめ

まとめ• デバイス等からの情報を取得できる


• ブラウザがアプリケーション化できる



• モバイルでもPCでもブラウザがあれば動作する




• 手軽に実験や作成することができる




• 手軽に実験や作成することができる

ただし、ブラウザのAPI実装がまちまちなので要注意

ご静聴ありがとうございました。

→

html5 by gis tec

Technology