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