Download to read offline
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
- 1.
- 2. 自己紹介 主に Web系の開発をしているソフトウェアエンジニア FxUG 名古屋実行委員会 ( 株 ) プレイウェル 森 真吾 Twitter: @sngmr (ShiNGo MoRi)
- 3. FxUG でなんで HTML5？ 仕事で Flex ばっかり使える幸運な人はあんまりいないよね？ そうすると勉強会のネタがなかなか無くなるよね。 Flex はメインにするけども、他の RIA 技術も知っといた方がいいかも。
- 4. HTML5 ってなに？ HTML5CSS3 JavaScript API
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 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.
- 24. Offline Application Cache宣言 cache.manifest
- 25. Offline Application CacheAPI MIME TYPE 設定も忘れずに
- 26. ノウハウとか ファイルを更新したら cache.manifestも更新しないと、ファイルが更新されません！ バージョン番号を書いておいて、それを更新するのが一般的なようです。
- 27. その他の NewAPI 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.