今からハジメるHTML5プログラミング

7,876 views

Published on

SwapSkills2010 vol.2
白石俊平

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,876
On SlideShare
0
From Embeds
0
Number of Embeds
337
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

今からハジメるHTML5プログラミング

  1. 1. 今すぐハジメる HTML5プログラミング 2010/4/29 白石俊平@OpenWeb
  2. 2. 自己紹介 白石俊平と申します。 HTML5開発者コミュニティ、html5-developers-jp管理人 先日、OpenWeb Technology(openweb.co.jp)という会社を立ち 上げました! 現在、自社プロダクトを鋭意製作中
  3. 3. 本が出ました HTML5 & API入門(日経BP) 「HTML5 API 本」で検索すればヒットします! 売れ行き好調、らしい。
  4. 4. 本日の流れ HTML5と関連APIの概要 HTML5&APIが可能にするWebアプリケーションの未来形 今すぐ試すHTML5・・・Web Storageの紹介 Web Storageを用いたワークショップ
  5. 5. HTML5と関連APIの概要 どこまでがHTML5?
  6. 6. "HTML5"って単語は、あいまいだ。
  7. 7. "Open Web Platform"
  8. 8. HTML5&APIが可能にする Webアプリケーションの未来形 HTML5 & APIでできること
  9. 9. HTML5 & APIが可能にすること 2D & 3Dグラフィック 動画・音声の再生 オフラインWebアプリケーション クロスドメイン通信 クライアントサイドストレージ バックグラウンド処理 a サーバプッシュ・双方向通信 OSとのより緊密な連携 ...
  10. 10. HTML5 & APIが可能にすること 2D & 3Dグラフィック HTML5 <canvas> element and API, SVG 動画・音声の再生 HTML5 <video>/<audio> element and API オフラインWebアプリケーション HTML5 <html manifest=attribute> and ApplicationCache クロスドメイン通信 HTML5 Cross Document Messaging, XHR Level2 クライアントサイドストレージ Web Storage, Web SQL Database, Indexed Database API バックグラウンド処理 Web Workers サーバプッシュ・双方向通信 Server-Sent Events, Web Sockets OSとのより緊密な連携 File API, Drag & Drop API ...
  11. 11. 2D & 3Dグラフィック HTML5 <canvas> element,SVG
  12. 12. SVG
  13. 13. 動画・音声の再生 HTML5 <video>/<audio> element
  14. 14. オフラインWebアプリケーション HTML5 <html manifest=attribute> and ApplicationCache
  15. 15. クロスドキュメント メッセージング
  16. 16. クライアントサイドストレージ Web Storage, Web SQL Database, Indexed Database API
  17. 17. バックグラウンド処理 Web Workers
  18. 18. サーバプッシュ・双方向通信 Server-Sent Events, Web Sockets
  19. 19. OSとのより緊密な連携 File API, Drag & Drop API
  20. 20. 今すぐ試すHTML5 Web Storageの紹介
  21. 21. Web Storage(ローカルストレージ) 以下のような特徴を持つ、キー・値型のストレージ サイズ制限なし(仕様上) 永続期間無制限(仕様上) JavaScriptの仕様ともマッチしていて、異常に簡単に扱える。 ウィンドウと同じ生存期間・スコープを持つ「セッションストレー ジ」というストレージもある
  22. 22. Web Storage(ローカルストレージ) 「localStorage」「sessionStorage」というグローバルオブジェクトに 対し、プロパティの読み書きをするだけで、値が永続化される Cookieよりも簡単。。 // ストレージへの書き込み localStorage.key1 = "value1"; // ストレージからの読み込み alert(localStorage.key1); 値は任意のJavaScriptオブジェクトを指定出来る
  23. 23. ローカルストレージを使ったデモ  フォントサイズの設定はローカルストレージに保存され、 ブラウザを再起動しても適用されます。 こちらからダウンロード
  24. 24. ローカルストレージを使ったワークショップ 1. サンプルをダウンロードし、動作を確認してく ださい。 リロードしても、 ブラウザを再起動してもデータが消えない 2. 解説を聞き、プログラムの動きを理解してくだ さい。 3. 現在の設定値をデバッグ表示するボタンを . 追加してください
  25. 25. ご清聴ありがとうございました Contact: twitter: @Shumpei blog: http://d.hatena.co.jp/Syunpei mailto: shumpei.shiraishi [at] gmail.com mailto: shumpei.shiraishi [at] openweb.co.jp

×