2010-10-2 fxug 名古屋勉強会 html5で遊んでみよう

自己紹介

主に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オンリーという訳にはいかなさそう。

ブラウザが限定できるスマートフォン向けにはかなりいいのでは？

ブラウザ互換がしっかりしてくると幸せになれそう

ブラウザ互換がうまくいかなかったら・・・

ありがとうございました