Embed Size (px)
DESCRIPTION
SwapSkills2010 vol.2 白石俊平
Citation preview
今すぐハジメる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サーバプッシュ・双方向通信
OSとのより緊密な連携
...
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 SocketsOSとのより緊密な連携
File API, Drag & Drop API...
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よりも簡単。。
値は任意のJavaScriptオブジェクトを指定出来る
// ストレージへの書き込みlocalStorage.key1 = "value1";// ストレージからの読み込みalert(localStorage.key1);
ローカルストレージを使ったデモ
フォントサイズの設定はローカルストレージに保存され、ブラウザを再起動しても適用されます。
こちらからダウンロード
ローカルストレージを使ったワークショップ
1. サンプルをダウンロードし、動作を確認してください。
リロードしても、ブラウザを再起動してもデータが消えない
2. 解説を聞き、プログラムの動きを理解してください。
3. 現在の設定値をデバッグ表示するボタンを .追加してください
ご清聴ありがとうございました
Contact:twitter: @Shumpeiblog: http://d.hatena.co.jp/Syunpeimailto: shumpei.shiraishi [at] gmail.commailto: shumpei.shiraishi [at] openweb.co.jp
![HTML5 - W3C...HTML4 + CSS 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS E o que ficou de fora do HTML5?](https://img.pdfslide.tips/doc/110x75/5f9769938559bc0a406dee44/html5-w3c-html4-css-56-html5-futuro-da-web-futuro-da-web-html5-html.jpg)
