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