Your SlideShare is downloading. ×
0
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,436

Published on

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

No Downloads
Views
Total Views
1,436
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.  
  • 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. ありがとうございました

×