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

1. 2012: A Web Odyssey 森 史憲

2. 自己紹介
名前
• 森 史憲
もり ふみのり
職業
• フリーランスのHTMLコーダー

3. 自己紹介
主な仕事
• HTML/CSSコーディング
• Wordpressオーサリング
• 技術記事＆書籍執筆
• 「森さんのコーディングの会」講師

4. 告知
森が執筆した
HTML5関連書籍が出版されます！
HTML5マークアップ入門
技術評論社
3月20日発売
電子書籍版も発売！
これであなたもHTML5マークアップが
分かります！書けます！

5. 目次
✴HTML5、なぜ重要？
✴Google Chrome の状況
✴HTML5 ROCKS の紹介

6. HTML5、なぜ重要？

7. Webアプリケーション制作を標準化するから。

8. Webアプリケーション？
•ドキュメントの検索
•メール
•メモ
•動画プレーヤー

9. HTML5のなりたち
• もともとはApple, Mozzila, Operaが集まって作った仕様
• Webアプリケーションの作り方
（HTML+CSS+Javascript）を標準化する
• Webでの活動がもっと活発に！

10. Webアプリケーション、なにがそんなに魅力？
•アプリケーションはいつも最新状態
•OSやハードの制約から自由
•端末の記憶容量から自由

11. Webアプリケーション、デメリットも…
•処理速度はサーバに依存
•通信環境が必要

12. HTML5の目指すところ–W3CのAPI策定状況から–
★Javascript Interfaces Current Status - W3C
http://www.w3.org/standards/techs/js#w3c_all

13. HTML5の目指すところ–W3CのAPI策定状況から–
OSでできることをブラウザでもできるようにする
• ブラウザの外にあるソフトやハードを操る
• オフラインでもアプリケーションを操る
OSにもない新機能

14. OSでできることをブラウザでもできるようにする
ブラウザの外にあるソフトやハードを操る
• アドレス帳にアクセス • 緯度・経度情報の利用
（Contacts API） （Geolocation API）
• ファイル読み込み（File API） • バッテリー状況の利用
（Battery Status API）
• ファイル書き出し
（FILE Writer: API） • 複数のプログラムを動かせるように
する（Web Workers）
• ドラッグ＆ドロップ(HTML5)
• ヴァイブレーション機能の利用
（Vibration API）

15. OSでできることをブラウザでもできるようにする
オフラインでもアプリケーションを操る
• オンライン時のサーバーデータを記憶する（Offline Web Applications）
• ユーザーのデータを記憶する（Web Storage, IndexedDB API）

16. OSにもない新機能
•サーバとの新しい通信方法（Web Socket）
HTTP (http://, https://)
→ Web Socket (ws://, wss://)
✴HTTPとの違い
TCP接続がつなぎっぱなしなので
サーバの反応が早い。

17. Google Chromeの状況

18. シェアは伸びてる。HTML5の実装も早い。

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. Google Chromeをとりまく状況
HTML5サポート
• THE HTML5 TEST
• Google Chrome 17はHTML5のサポート度が最も高い！

21. HTML5 ROCKSの紹介

22. HTML5 ROCKS
★Google が HTML5 についてまとめているWebサイト。
このサイトを見ればHTML5をよく知ることができます。

23. HTML5 ROCKS
おおまかには４カテゴリー構成
• FEATURES → HTML5の機能紹介
• POST＆TUTRIALS → 使ってみよう＆事例紹介
• スライド → HTML5関係のスライド集
• リソース → HTML5の情報をまとめているサイト集

24. まとめ
✴HTML5 は Web アプリケーションを簡単に
作るための仕様書の集まり！
✴Google Chrome は HTML5 の対応が早い！
✴HTML5 は Google Chrome で
HTML5 ROCKS を見ながら手を動かして勉
強してみよう！

25. Thanks!