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

  • 7,390 views
Uploaded on

SwapSkills2010 vol.2 …

SwapSkills2010 vol.2
白石俊平

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,390
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
28
Comments
0
Likes
3

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