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

2012: A Web Odyssey

1,050 views
977 views

Published on

2012-03-10 九州GTUG in 鹿児島でのHTML5&Google Chromeについての発表

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,050
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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!

×