2. 自己紹介 主に Web 系の開発をしているソフトウェアエンジニア FxUG 名古屋実行委員会 ( 株 ) プレイウェル 森 真吾 Twitter: @sngmr (ShiNGo MoRi)

3. FxUG でなんで HTML5 ？ 仕事で Flex ばっかり使える幸運な人はあんまりいないよね？ そうすると勉強会のネタがなかなか無くなるよね。 Flex はメインにするけども、他の RIA 技術も知っといた方がいいかも。

4. HTML5 ってなに？ HTML5 CSS3 JavaScript API

5. HTML5 は何が変わったの？

6. 最小の構成はこんなに簡単 らしい

7. こんなタグが使えるように なったらしい

8. こんな属性も使えるように なったらしい

9. Canvas も使えるようになったね

10. CSS3 もちょっと見てみましょう

11. Linear Gradients

12. Border Radius

13. Text Shadow

14. Box Shadow

15. Rotation

16. Transition

17. JavaScript は何ができるようになったんだろう

18. 新しいセレクタ

19. Web Storage sessionStorage と localStorage Key/Value ストア 共通のインタフェースを持っている Cookie とは異なり、サーバーへ自動送信されない 使い分けは？ sessionStorage はトランザクションの独立を保たせる事ができる 複数のタブが同一処理を行った場合、 Cookie は全て同一の値が利用されるが、 sessionStorage なら値を独立させられる。 localStorage はローカル上にまとまった量のデータを保持し、トランザクションが変わっても使えるようなデータを保持するのに適している。

20. Web Storage の使い方

21. 何が保存できる？ テキスト ただしテキスト-> JSON オブジェクト , JSON オブジェクト->テキストへの変換が必要。 json.org からライブラリが提供されているので、それを使いましょう。 (http://www.json.org/json2.js) 現実的なのは・・・ JSON 構造化クローンアルゴリズムによってサポートされたデータタイプ (by HTML5 Reference) よく分からなかった

22. ノウハウとか Safari 系のブラウザで setItem で値の上書きを繰り返すと落ちる 2MB 程度はいけるようです。 Cookie の 4KB から比べると多い。 ここにすごくよくまとめられていました。 http://d.hatena.ne.jp/uupaa/20100106/1262781846 容量は？ removeItem して setItem で回避可能。 localStorage 関数はラップしておいた方が安心ですね。

23. Geo Location

24. Offline Application Cache 宣言 cache.manifest

25. Offline Application Cache API MIME TYPE 設定も忘れずに

26. ノウハウとか ファイルを更新したら cache.manifest も更新しないと、ファイルが更新されません！ バージョン番号を書いておいて、それを更新するのが一般的なようです。

27. その他の New API Web SQL Database Web Workers Web Sockets Notifications Drag and Drog

28. ブラウザ別対応状況 スマートフォンはほとんど OK ！ ブラウザ別対応状況まとめ http://www.findmebyip.com/litmus/ 意外とバラバラです

29. ここを見てました http://html5rocks.com http://www.html5.jp/ http://www.impressivewebs.com/css3-click-chart

30. まとめ コンシュマー向けサイトでは HTML5 オンリーという訳にはいかなさそう。 ブラウザが限定できるスマートフォン向けにはかなりいいのでは？ ブラウザ互換がしっかりしてくると幸せになれそう ブラウザ互換がうまくいかなかったら・・・

31. ありがとうございました