Successfully reported this slideshow.

2012: A Web Odyssey

0

Share

Loading in …3
×
1 of 25
1 of 25

More Related Content

Viewers also liked

Related Books

Free with a 14 day trial from Scribd

See all

2012: A Web Odyssey

  1. 1. 2012: A Web Odyssey 森 史憲
  2. 2. 自己紹介 名前 • 森 史憲 もり ふみのり 職業 • フリーランスのHTMLコーダー
  3. 3. 自己紹介 主な仕事 • HTML/CSSコーディング • Wordpressオーサリング • 技術記事&書籍執筆 • 「森さんのコーディングの会」講師
  4. 4. 告知 森が執筆した HTML5関連書籍が出版されます! HTML5マークアップ入門 技術評論社 3月20日発売 電子書籍版も発売! これであなたもHTML5マークアップが 分かります!書けます!
  5. 5. 目次 ✴HTML5、なぜ重要? ✴Google Chrome の状況 ✴HTML5 ROCKS の紹介
  6. 6. HTML5、なぜ重要?
  7. 7. Webアプリケーション制作を標準化するから。
  8. 8. Webアプリケーション? •ドキュメントの検索 •メール •メモ •動画プレーヤー
  9. 9. HTML5のなりたち • もともとはApple, Mozzila, Operaが集まって作った仕様 • Webアプリケーションの作り方 (HTML+CSS+Javascript)を標準化する • Webでの活動がもっと活発に!
  10. 10. Webアプリケーション、なにがそんなに魅力? •アプリケーションはいつも最新状態 •OSやハードの制約から自由 •端末の記憶容量から自由
  11. 11. Webアプリケーション、デメリットも… •処理速度はサーバに依存 •通信環境が必要
  12. 12. HTML5の目指すところ–W3CのAPI策定状況から– ★Javascript Interfaces Current Status - W3C http://www.w3.org/standards/techs/js#w3c_all
  13. 13. HTML5の目指すところ–W3CのAPI策定状況から– OSでできることをブラウザでもできるようにする • ブラウザの外にあるソフトやハードを操る • オフラインでもアプリケーションを操る OSにもない新機能
  14. 14. OSでできることをブラウザでもできるようにする ブラウザの外にあるソフトやハードを操る • アドレス帳にアクセス • 緯度・経度情報の利用 (Contacts API) (Geolocation API) • ファイル読み込み(File API) • バッテリー状況の利用 (Battery Status API) • ファイル書き出し (FILE Writer: API) • 複数のプログラムを動かせるように する(Web Workers) • ドラッグ&ドロップ(HTML5) • ヴァイブレーション機能の利用 (Vibration API)
  15. 15. OSでできることをブラウザでもできるようにする オフラインでもアプリケーションを操る • オンライン時のサーバーデータを記憶する(Offline Web Applications) • ユーザーのデータを記憶する(Web Storage, IndexedDB API)
  16. 16. OSにもない新機能 •サーバとの新しい通信方法(Web Socket) HTTP (http://, https://) → Web Socket (ws://, wss://) ✴HTTPとの違い TCP接続がつなぎっぱなしなので サーバの反応が早い。
  17. 17. Google Chromeの状況
  18. 18. シェアは伸びてる。HTML5の実装も早い。
  19. 19. Google Chromeをとりまく状況 ブラウザシェア • StatCounter Feb 2012 • IE8: 26.22% • IE9: 21.51% • Firefox 10: 10.16% • Chrome 17: 8.74% • Chrome 16: 7.98% • IE7: 4.23% • Safari 5.1 : 4.06%
  20. 20. Google Chromeをとりまく状況 HTML5サポート • THE HTML5 TEST • Google Chrome 17はHTML5のサポート度が最も高い!
  21. 21. HTML5 ROCKSの紹介
  22. 22. HTML5 ROCKS ★Google が HTML5 についてまとめているWebサイト。 このサイトを見ればHTML5をよく知ることができます。
  23. 23. HTML5 ROCKS おおまかには4カテゴリー構成 • FEATURES → HTML5の機能紹介 • POST&TUTRIALS → 使ってみよう&事例紹介 • スライド → HTML5関係のスライド集 • リソース → HTML5の情報をまとめているサイト集
  24. 24. まとめ ✴HTML5 は Web アプリケーションを簡単に 作るための仕様書の集まり! ✴Google Chrome は HTML5 の対応が早い! ✴HTML5 は Google Chrome で HTML5 ROCKS を見ながら手を動かして勉 強してみよう!
  25. 25. Thanks!

×