森 史憲2012: A Web Odyssey

自己紹介

名前• 森　史憲もり　ふみのり

職業• フリーランスのHTMLコーダー

主な仕事• HTML/CSSコーディング

• Wordpressオーサリング

• 技術記事＆書籍執筆

• 「森さんのコーディングの会」講師

自己紹介

告知

森が執筆したHTML5関連書籍が出版されます！

HTML5マークアップ入門

技術評論社

3月20日発売

電子書籍版も発売！

これであなたもHTML5マークアップが分かります！書けます！

✴HTML5、なぜ重要？

✴Google Chrome の状況

✴HTML5 ROCKS の紹介

目次

HTML5、なぜ重要？

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

•ドキュメントの検索

•メール

•メモ

•動画プレーヤー

Webアプリケーション？

•もともとはApple, Mozzila, Operaが集まって作った仕様

•Webアプリケーションの作り方（HTML+CSS+Javascript）を標準化する

•Webでの活動がもっと活発に！

HTML5のなりたち

Webアプリケーション、なにがそんなに魅力？

•アプリケーションはいつも最新状態

•OSやハードの制約から自由

•端末の記憶容量から自由

Webアプリケーション、デメリットも…

•処理速度はサーバに依存

•通信環境が必要

HTML5の目指すところ–W3CのAPI策定状況から–

★Javascript Interfaces Current Status - W3Chttp://www.w3.org/standards/techs/js#w3c_all

HTML5の目指すところ–W3CのAPI策定状況から–

OSでできることをブラウザでもできるようにする• ブラウザの外にあるソフトやハードを操る

• オフラインでもアプリケーションを操る

OSにもない新機能

OSでできることをブラウザでもできるようにする

• アドレス帳にアクセス（Contacts API）

• ファイル読み込み（File API）

• ファイル書き出し（FILE Writer: API）

• ドラッグ＆ドロップ(HTML5)

• ヴァイブレーション機能の利用（Vibration API）

• 緯度・経度情報の利用（Geolocation API）

• バッテリー状況の利用（Battery Status API）

• 複数のプログラムを動かせるようにする（Web Workers）

ブラウザの外にあるソフトやハードを操る

OSでできることをブラウザでもできるようにする

オフラインでもアプリケーションを操る• オンライン時のサーバーデータを記憶する（Offline Web Applications）

• ユーザーのデータを記憶する（Web Storage, IndexedDB API）

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%

• Chrome 16: 7.98%

• IE7: 4.23%

• Safari 5.1 : 4.06%

HTML5サポート• THE HTML5 TEST

• Google Chrome 17はHTML5のサポート度が最も高い！

Google Chromeをとりまく状況

HTML5 ROCKSの紹介

HTML5 ROCKS

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

HTML5 ROCKS

おおまかには４カテゴリー構成

• FEATURES　→　HTML5の機能紹介

• POST＆TUTRIALS　→　使ってみよう＆事例紹介

•スライド　→　HTML5関係のスライド集

•リソース　→　HTML5の情報をまとめているサイト集

まとめ

✴HTML5 は Web アプリケーションを簡単に作るための仕様書の集まり！

✴Google Chrome は HTML5 の対応が早い！

✴HTML5 は Google Chrome でHTML5 ROCKS を見ながら手を動かして勉強してみよう！

Thanks!