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

1,609 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,609
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 2. 自己紹介 主に Web 系の開発をしているソフトウェアエンジニア FxUG 名古屋実行委員会 ( 株 ) プレイウェル 森 真吾 Twitter: @sngmr (ShiNGo MoRi)
  2. 3. FxUG でなんで HTML5 ? 仕事で Flex ばっかり使える幸運な人はあんまりいないよね? そうすると勉強会のネタがなかなか無くなるよね。 Flex はメインにするけども、他の RIA 技術も知っといた方がいいかも。
  3. 4. HTML5 ってなに? HTML5 CSS3 JavaScript API
  4. 5. HTML5 は何が変わったの?
  5. 6. 最小の構成はこんなに簡単 らしい
  6. 7. こんなタグが使えるように なったらしい
  7. 8. こんな属性も使えるように なったらしい
  8. 9. Canvas も使えるようになったね
  9. 10. CSS3 もちょっと見てみましょう
  10. 11. Linear Gradients
  11. 12. Border Radius
  12. 13. Text Shadow
  13. 14. Box Shadow
  14. 15. Rotation
  15. 16. Transition
  16. 17. JavaScript は何ができるようになったんだろう
  17. 18. 新しいセレクタ
  18. 19. Web Storage sessionStorage と localStorage Key/Value ストア 共通のインタフェースを持っている Cookie とは異なり、サーバーへ自動送信されない 使い分けは? sessionStorage はトランザクションの独立を保たせる事ができる 複数のタブが同一処理を行った場合、 Cookie は全て同一の値が利用されるが、 sessionStorage なら値を独立させられる。 localStorage はローカル上にまとまった量のデータを保持し、トランザクションが変わっても使えるようなデータを保持するのに適している。
  19. 20. Web Storage の使い方
  20. 21. 何が保存できる? テキスト ただしテキスト-> JSON オブジェクト , JSON オブジェクト->テキストへの変換が必要。 json.org からライブラリが提供されているので、それを使いましょう。 (http://www.json.org/json2.js) 現実的なのは・・・ JSON 構造化クローンアルゴリズムによってサポートされたデータタイプ (by HTML5 Reference) よく分からなかった
  21. 22. ノウハウとか Safari 系のブラウザで setItem で値の上書きを繰り返すと落ちる 2MB 程度はいけるようです。 Cookie の 4KB から比べると多い。 ここにすごくよくまとめられていました。 http://d.hatena.ne.jp/uupaa/20100106/1262781846 容量は? removeItem して setItem で回避可能。 localStorage 関数はラップしておいた方が安心ですね。
  22. 23. Geo Location
  23. 24. Offline Application Cache 宣言 cache.manifest
  24. 25. Offline Application Cache API MIME TYPE 設定も忘れずに
  25. 26. ノウハウとか ファイルを更新したら cache.manifest も更新しないと、ファイルが更新されません! バージョン番号を書いておいて、それを更新するのが一般的なようです。
  26. 27. その他の New API Web SQL Database Web Workers Web Sockets Notifications Drag and Drog
  27. 28. ブラウザ別対応状況 スマートフォンはほとんど OK ! ブラウザ別対応状況まとめ http://www.findmebyip.com/litmus/ 意外とバラバラです
  28. 29. ここを見てました http://html5rocks.com http://www.html5.jp/ http://www.impressivewebs.com/css3-click-chart
  29. 30. まとめ コンシュマー向けサイトでは HTML5 オンリーという訳にはいかなさそう。 ブラウザが限定できるスマートフォン向けにはかなりいいのでは? ブラウザ互換がしっかりしてくると幸せになれそう ブラウザ互換がうまくいかなかったら・・・
  30. 31. ありがとうございました

×