今からハジメるHTML5プログラミング
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 8,968 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
8,968
On Slideshare
8,650
From Embeds
318
Number of Embeds
4

Actions

Shares
Downloads
28
Comments
0
Likes
3

Embeds 318

http://swapskills.info 256
http://www.slideshare.net 53
http://paper.li 8
http://127.0.0.1 1

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