2010-10-2 fxug 名古屋勉強会 html5で遊んでみよう
TRANSCRIPT
![Page 1: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/1.jpg)
![Page 2: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/2.jpg)
自己紹介
主にWeb系の開発をしているソフトウェアエンジニア
FxUG名古屋実行委員会
( 株 ) プレイウェル
森 真吾
Twi tter: @sngmr (Shi NGo MoRi )
![Page 3: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/3.jpg)
FxUGでなんでHTML5?
仕事で Fl exばっかり使える幸運な人はあんまりいないよね?
そうすると勉強会のネタがなかなか無くなるよね。
Fl exはメインにするけども、他のRI A技術も知っといた方がいいかも。
![Page 4: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/4.jpg)
HTML5ってなに?
HTML5
CSS3
JavaScri pt API
![Page 5: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/5.jpg)
HTML5は何が変わったの?
![Page 6: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/6.jpg)
最小の構成はこんなに簡単らしい
![Page 7: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/7.jpg)
こんなタグが使えるようになったらしい
![Page 8: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/8.jpg)
こんな属性も使えるようになったらしい
![Page 9: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/9.jpg)
Canvasも使えるようになったね
![Page 10: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/10.jpg)
CSS3もちょっと見てみましょう
![Page 11: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/11.jpg)
Li near Gradi ents
![Page 12: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/12.jpg)
Border Radi us
![Page 13: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/13.jpg)
Text Shadow
![Page 14: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/14.jpg)
Box Shadow
![Page 15: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/15.jpg)
Rotati on
![Page 16: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/16.jpg)
Transi ti on
![Page 17: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/17.jpg)
JavaScri ptは何ができるようになったんだろう
![Page 18: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/18.jpg)
新しいセレクタ
![Page 19: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/19.jpg)
Web Storage
sessi onStorageと l ocal StorageKey/Val ueストア共通のインタフェースを持っているCooki eとは異なり、サーバーへ自動送信されない
使い分けは?sessi onStorageはトランザクションの独立を保たせる事ができる
複数のタブが同一処理を行った場合、Cooki eは全て同一の値が利用されるが、 sessi onStorageなら値を独立させられる。
l ocal Storageはローカル上にまとまった量のデータを保持し、トランザクションが変わっても使えるようなデータを保持するのに適している。
![Page 20: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/20.jpg)
Web Storage の使い方
![Page 21: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/21.jpg)
何が保存できる?
テキスト
→ただしテキスト JSONオブジェクト , JSON →オブジェクト テキストへの変換が必要。
j son.orgからライブラリが提供されているので、それを使いましょう。(http: //www. j son.org/j son2. j s)
現実的なのは・・・ JSON
構造化クローンアルゴリズムによってサポートされ たデータタイプ (by HTML5 Reference)
よく分からなかった
![Page 22: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/22.jpg)
ノウハウとか
Safari 系のブラウザで setI temで値の上書きを繰り返すと落ちる
2MB程度はいけるようです。Cooki eの 4KBから比べると多い。
ここにすごくよくまとめられていました。http: //d.hatena.ne. j p/uupaa/20100106/1262781846
容量は?
removeI temして setI temで回避可能。l ocal Storage関数はラップしておいた方が安心ですね。
![Page 23: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/23.jpg)
Geo Locati on
![Page 24: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/24.jpg)
Off l i ne Appl i cati on Cache
宣言
cache.mani fest
![Page 25: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/25.jpg)
Off l i ne Appl i cati on Cache
API
MI ME TYPE 設定も忘れずに
![Page 26: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/26.jpg)
ノウハウとか
ファイルを更新したらcache.mani fest も更新しないと、ファイルが更新されません!バージョン番号を書いておいて、それを更新するのが一般的なようです。
![Page 27: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/27.jpg)
その他の New API
Web SQL Database
Web Workers
Web Sockets
Noti f i cati ons
Drag and Drog
![Page 28: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/28.jpg)
ブラウザ別対応状況
ブラウザ別対応状況まとめ http: //www.f i ndmebyi p.com/l i tmus/
意外とバラバラです
スマートフォンはほとんどOK!
![Page 29: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/29.jpg)
ここを見てましたhttp: //html 5rocks.com
http: //www.html 5. j p/
http: //www. i mpressi vewebs.com/css3-cl i ck-chart
![Page 30: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/30.jpg)
まとめ
コンシュマー向けサイトではHTML5オンリーという訳にはいかなさそう。
ブラウザが限定できるスマートフォン向けにはかなりいいのでは?
ブラウザ互換がしっかりしてくると幸せになれそう
ブラウザ互換がうまくいかなかったら・・・
![Page 31: 2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう](https://reader033.vdocuments.net/reader033/viewer/2022061607/5595a0951a28ab14448b467f/html5/thumbnails/31.jpg)
ありがとうございました