0
今すぐハジメる
HTML5プログラミング
2010/4/29 白石俊平@OpenWeb
自己紹介

白石俊平と申します。
HTML5開発者コミュニティ、html5-developers-jp管理人
先日、OpenWeb Technology(openweb.co.jp)という会社を立ち
上げました!
  現在、自社プロダクトを鋭意...
本が出ました




  HTML5 & API入門(日経BP)
「HTML5 API 本」で検索すればヒットします!
       売れ行き好調、らしい。
本日の流れ

HTML5と関連APIの概要
HTML5&APIが可能にするWebアプリケーションの未来形
今すぐ試すHTML5・・・Web Storageの紹介
Web Storageを用いたワークショップ
HTML5と関連APIの概要

   どこまでがHTML5?
"HTML5"って単語は、あいまいだ。
"Open Web Platform"
HTML5&APIが可能にする
Webアプリケーションの未来形
  HTML5 & APIでできること
HTML5 & APIが可能にすること
 2D & 3Dグラフィック

 動画・音声の再生
 オフラインWebアプリケーション

 クロスドメイン通信

 クライアントサイドストレージ

 バックグラウンド処理
   a
 サーバプッシュ・双方...
HTML5 & APIが可能にすること
 2D & 3Dグラフィック
     HTML5 <canvas> element and API, SVG
 動画・音声の再生
     HTML5 <video>/<audio> element a...
2D & 3Dグラフィック
HTML5 <canvas> element,SVG
SVG
動画・音声の再生
HTML5 <video>/<audio> element
オフラインWebアプリケーション
HTML5 <html manifest=attribute>
    and ApplicationCache
クロスドキュメント
 メッセージング
クライアントサイドストレージ
Web Storage, Web SQL Database,
     Indexed Database API
バックグラウンド処理
 Web Workers
サーバプッシュ・双方向通信
Server-Sent Events, Web Sockets
OSとのより緊密な連携
File API, Drag & Drop API
今すぐ試すHTML5

Web Storageの紹介
Web Storage(ローカルストレージ)

 以下のような特徴を持つ、キー・値型のストレージ
    サイズ制限なし(仕様上)
    永続期間無制限(仕様上)
 JavaScriptの仕様ともマッチしていて、異常に簡単に扱える。




...
Web Storage(ローカルストレージ)

 「localStorage」「sessionStorage」というグローバルオブジェクトに
 対し、プロパティの読み書きをするだけで、値が永続化される
     Cookieよりも簡単。。


...
ローカルストレージを使ったデモ 




  フォントサイズの設定はローカルストレージに保存され、
      ブラウザを再起動しても適用されます。
          こちらからダウンロード
ローカルストレージを使ったワークショップ

1. サンプルをダウンロードし、動作を確認してく
   ださい。
    リロードしても、
    ブラウザを再起動してもデータが消えない
2. 解説を聞き、プログラムの動きを理解してくだ
   さい...
ご清聴ありがとうございました

Contact:
  twitter: @Shumpei
  blog: http://d.hatena.co.jp/Syunpei
  mailto: shumpei.shiraishi [at] gmail....
Upcoming SlideShare
Loading in...5
×

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

7,472

Published on

SwapSkills2010 vol.2
白石俊平

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

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

No notes for slide

Transcript of "今からハジメる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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×