InfoTalk#17 1st
37
アプリケーションプラットホームへと 進化するHTML5 若狹 正生
-
Upload
wakasa-masao -
Category
Education
-
view
1.473 -
download
0
Transcript of InfoTalk#17 1st
アプリケーションプラットホームへと進化するHTML5
若狹 正生
流れ• 自己紹介
• HTML5 とは 何もの？
• 利用者から考える
• 開発者から考える
• まとめ
自己紹介• 若狹 正生 （わかさ まさお）
• 株式会社コネクティ
• JavaScript -> perl -> Flash -> PHP -> JAVA -> コンサル
• 広く浅くの隙間産業
• OSGeo財団日本法人の運営委員
HTML5 とは 何もの？
簡単な歴史
W3C WHATWG
199720002002
2004
200720082012
WWWに関わる標準化を推進
Apple,Mozilla,Operaによって設立
HTML4 ドラフトXHTML1.0 ドラフトXHTML2.0 ドラフト
HTML4を進化させようとW3Cに提案するも却下
設立HTML5の共同策定HTML5の共同策定
HTML5 ドラフトHTML5 勧告(予定)
※細かいところは割愛してるのでざっくりです・・
HTML4は捨てて、XHTMLへと進化。そしてXHTML2へ、との道のりは正しい。
だが、現実はどうだろう。
• img , br などを廃止して違うものに=> 現役バリバリのIE6では表示が不可能
結局、コンテンツ作成者はXHTML2は選べない
W3C WHATWG
199720002002
2004
200720082012
WWWに関わる標準化を推進
Apple,Mozilla,Operaによって設立
HTML4 ドラフトXHTML1.0 ドラフトXHTML2.0 ドラフト
HTML4を進化させようとW3Cに提案するも却下
設立HTML5の共同策定HTML5の共同策定
HTML5 ドラフトHTML5 勧告(予定)
※細かいところは割愛してるのでざっくりです・・
HTML5 とは 何もの？
どんなもの？
• お絵描きができる！• ビデオが再生できる！• Localストレージがもてる！
FlashとかGearsを使えばブラウザで出来るんじゃ・・
別にHTML5が無くたって現状リッチアプリケーションは成立しています。
ただし、プラグインの組み合わせは開発者泣かせ。
そうなんです！
HTML5が必要な理由
HTML5 とは 何もの？
• ばらばらで出来ていたことを標準化する
• HTML4と互換をもたせる <= IE6で見たら悲惨は避けるレベル
明確に標準化することで、機能を自由に活用できる
例：オフラインで動くWebアプリを作る
• FlexでAIRアプリ？DLさせるの？
• GearsとFlashとJavaScriptの駆使？
• プラグインから全部独自開発！
HTML5のAPIで！
ちなみに、HTML5には別で標準化されているAPIが大量にあり、今回はそれらを含めて
HTML5としています。
HTML5
WebSockets API
Web StorageHTML5 2D Context
WebWorkers
Web SQL DatabaseServer-Sent Events..............
..............
利用者から考える
フォームデータ処理描画
GPS付き画像をアップロードブラウザ サーバ
＋GPSGPS緯度経度
ユーザの声ブラウザ サーバ
＋GPSGPS緯度経度GPSのデータってついてる？
今開いてるフォルダにあるのに・・
撮影場所あってる？
確認画面で戻ったら画像選択からに戻った・・
画像サイズが大きすぎ？
リサイズしたらGPSのデータが消えた・・
サーバの声ブラウザ サーバ
＋GPSGPS緯度経度
いっぱい送ってきても緯度経度しか使わないよ
確認画面の為に一時保存させたりロジックが・・
Network負荷が大きいんですが。
そんな巨大な画像じゃなくてもいいのに
緯度経度は同時にくれば何でもいいよ
フォームDEMO
•http://wakasa.org/sample/infotalk17/dd/•http://html5demos.com/offlineapp
ブラウザじゃなきゃこうできるのに等の違和感などが減る事に。
アプリケーションとウェブの境目がより無くなります。
GPS付き画像をアップロードブラウザ サーバ
緯度経度
緯度経度
ブラウザで好きなように加工
データを保管してシェア
ローカルで加工により複数送ってもNetwork負荷減
お絵描きDEMO•http://webbie.bz/~usami/clock.html•http://html5demos.com/video-canvas•http://people.mozilla.com/~prouget/demos/tracker/tracker.xhtml
•http://people.mozilla.com/~vladimir/webgl/spore/sporeview.html
•http://code.google.com/p/quake2-gwt-port/
ゲーム等でインストールが必須だったものがサイトにアクセスするだけで遊べるように。
今まで敷居が高かったものが非常に低くなった
と、まぁ・・利用者側から見れば、今まで他で
できたようなことがブラウザで出来るだけで
変わりはないただ、ビデオカードを使ったりローカルに保持したり
操作感というところで体感速度があがったりする部分は多々あります
開発者側から考えるタグ
ローカルにデータ保存バックグラウンド処理
デバイス情報
HTML5でタグが強化、再定義された。<b><em><strong>などの意味合いも再定義され、装飾ではなく意味を持つ要素とされた。
<section>タグなどコーダー能力＋文章能力が大きく問われるものが増えた。
見た目が・・ではなく意味を考えて使う必要性
めんどくさいんだが、細かい再定義がされているということは・・意味があってればいろんな人のものが再利用！
http://d.hatena.ne.jp/amachang/20090915/1252999677
タグDEMO
余談：<legend>
• 注釈の中で要約というものに使うもの
• 日本人的には<legend>オレ</legend>
と使いたくなるのは私だけ？
Web Database ,Web WorkersなどAPIを駆使するとバックグラウンドで処理させたり、
データをローカルに保持させたりが可能に。
API DEMO•http://people.mozilla.com/~prouget/demos/worker_and_simulatedannealing/index.xhtml
•http://ayuta.co.jp/html5-samples/database/simple/database1.html
実は、Web Workersは別の用途で魅力的。JSONなどの通信はバックグラウンドで同期処理を走らせてというのが可能
サーバ間通信のコードを同期処理で上から下に
ブラウザなのに位置情報やデバイスの状態が取得できます
デバイス DEMO•http://tsuyobi.heteml.jp/html/firefox/orientation_event/index2.html
•http://html5demos.com/geo
ユーザの端末の状態の情報をブラウザで取得が可能です。
PCではなくモバイル端末で使うことで申請が・・などいらずに、簡単に
GPSアプリが作れます
その後にWebKitを搭載させたアプリで被せれば普通のアプリとすることも可能です。
まとめ• 利用者に負荷少なく利用してもらえる
=> プラグインの強要とか必要がない
• 必要な複数のAPIを容易に組み合わせれる
• 今まで敷居が高いと思ってた事を容易に実装できる=> 3Dとか縁が無くても気づいたら使ってる=> 開発環境もテキストエディタとかで
• 現在、HTML5対応ブラウザというものがAPIすべてを実装してるわけではない=> 今日のデモは使い分けてます。
• 実装されてもVideoコーデック、WebSQLDatabase等の仕様が未だ統一ならず
• IE9がどこまで対応するのか未知数
• IE6が△×◎■・・・
ただし・・
で、今回のプレゼンは終了します。ご興味のある方向けに
参考図書などをお教えしておきます。
若狹 正生[email protected]
本日のスライドhttp://wakasa.org/sample/infotalk17/slide.pdf
http://goo.gl/Hs1H (えいち えす いち えいち)
