• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
今からハジメるHTML5プログラミング
 

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

on

  • 8,545 views

SwapSkills2010 vol.2

SwapSkills2010 vol.2
白石俊平

Statistics

Views

Total Views
8,545
Views on SlideShare
8,229
Embed Views
316

Actions

Likes
3
Downloads
27
Comments
0

4 Embeds 316

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 今すぐハジメる 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 Sockets OSとのより緊密な連携 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よりも簡単。。 // ストレージへの書き込み localStorage.key1 = "value1"; // ストレージからの読み込み alert(localStorage.key1); 値は任意のJavaScriptオブジェクトを指定出来る
    • ローカルストレージを使ったデモ  フォントサイズの設定はローカルストレージに保存され、 ブラウザを再起動しても適用されます。 こちらからダウンロード
    • ローカルストレージを使ったワークショップ 1. サンプルをダウンロードし、動作を確認してく ださい。 リロードしても、 ブラウザを再起動してもデータが消えない 2. 解説を聞き、プログラムの動きを理解してくだ さい。 3. 現在の設定値をデバッグ表示するボタンを . 追加してください
    • ご清聴ありがとうございました Contact: twitter: @Shumpei blog: http://d.hatena.co.jp/Syunpei mailto: shumpei.shiraishi [at] gmail.com mailto: shumpei.shiraishi [at] openweb.co.jp