1. 31 Jul.2012
HTML5の冒険

2. HTML5とは
Webコンテンツ作成に使う基本言語の第5版であり
コンテンツを利用する際の
エクスペリエンス向上を目的として制定
2014年までの正式勧告を目指し
策定がおこなわれている最中である

3. HTML5による変化

4. 何がかわるのか
HTML5でかわるのは大別して2つ
API
（Application Program Interface）
各種APIの標準化と追加
Markup
新たなタグの追加などによる情報構造の強化

5. どうかわるのか
API、Markupこの2つの強化によりHTML5は
1. よりインタラクティブに
2. よりセマンティックな文書構造に
そして
Webサイト内での情報伝達としての
機能だけでなくブラウザ以外での利用や
情報のより有効な活用が可能になり
様々なシーンで活用されるようになります

6. HTML5の特徴

7. HTML5 Logo
2011年2月、W3Cから発表された
「 HTML5のロゴ」で
その特徴が表現されています
http://www.w3.org/html/logo/

8. ロゴがあらわすHTML5（1）
SEMANTICS
様々なタグの追加により
プログラムにとってもユーザにとっても
より有効なデータ駆動型のウェブを実現

9. ロゴがあらわすHTML5（2）
OFFLINE & STORAGE
インターネットに接続していない状態においても
ウェブアプリケーションを素早く起動し
稼働することが可能となる

10. ロゴがあらわすHTML5（3）
DEVICE ACCESS
ローカルデータ（オーディオ、ビデオ入力、
マイク、カメラ、連絡先、予定など）
の利用が可能となる

11. ロゴがあらわすHTML5（4）
CONNECTIVITY
Web Sockets、Server-Sent Eventsの
利用によりデータ取得のレスポンスの向上を実現
Web Sockets：HTTPを介さずサーバーとクライアントを接続する技術
Server-Sent Events：サーバーからデータをプッシュする技術

12. ロゴがあらわすHTML5（5）
MULTIMEDIA
プラグインを利用することなく
動画・音声の再生が可能となる

13. ロゴがあらわすHTML5（6）
3D, GRAPHICS
EFFECTS
SVG、Canvas、WebGL、CSS3などの利用により
ビジュアルをブラウザ内でネイティブに
レンダリングすることが可能となり表現の幅が広がる
SVG：ベクター画像記述言語 WebGL：ブラウザ上に3D図を描画するための仕様
Canvas：ブラウザ上に図を描画するための仕様 CSS3：Webページのデザインやレイアウトを定義するための仕様

14. ロゴがあらわすHTML5（7）
PERFORMANCE
INTEGRATION
Web Workers、XMLHttpRequest 2などの
利用によりWebアプリケーションや
動的なWebコンテンツのスピード向上を実現
Web Workers：JavaScriptの並列処理仕様
XMLHttpRequest 2：異るドメイン間での通信を可能とする仕様

15. ロゴがあらわすHTML5（8）
CSS3
幅広いスタイルやエフェクトをの追加や
Web Open Font Format（WOFF）による
フォント表現の強化

16. 本日の勉強会について

17. 本日の勉強会の対象
いままでご覧いただいた通りHTML5は
他のフロントサイドの技術（JavaScript、CSS）と
連携して活用されるものです
HTML5 + CSS3 + JavaScript
ですので本日はHTML5を軸とした
フロントサイドの技術全般を
対象として進行させていただきます

18. なぜHTML5なのか

19. なぜHTML5なのか（1）
いままでのHTML（XHTML）との違い
いままで以上に動的なことが可能になった
（ローカルでの機能強化によりサーバ負荷軽減も図れる）
動的なアプリケーションとして活用できる可能性が増えた
様々な技術がオフィシャルで定義された

20. なぜHTML5なのか（2）
デバイス、OS、ブラウザを選ばず動く
「ワンソース・マルチプラットフォーム」である

21. なぜHTML5なのか（3）
デバイスの多様化に伴う外出先や屋外での
インターネット利用の拡大、目的に多様化により
新たな技術・表現が要求されている

22. HTML5を取り巻く状況

23. Topic（1）
Amazon
Kindleシリーズ向けの新ファイル形式
Kindle Format 8 (KF8) を発表
レイアウトに関する要素を中心にHTML5、CSS3に対応
（JavaScript、動画、音声には未対応）
http://www.amazon.com/gp/feature.html?docId=1000729511

24. Topic（2）
Microsoft
Windows8のアプリケーション構築にHTML5を対応
これにあわせ開発ツールの
Visual Studio、Expression Blendも同様に対応

25. Topic（3）
Adobe
HTML5、JavaScript、CSS3による
アニメーション制作ソフト「Edge preview」を発売
Androidの次期バージョン4.1に
「FlashPlayer」を対応させないことを発表
Android版「FlashPlayer」の新規提供を8月で終了
Android 4.1にアップグレードした端末では
「Flash Player」のアンインストールを勧告
http://www.adobe.com/jp/aboutadobe/pressroom/pressreleases/20120629_flashplayer_android.html

26. Topic（4）
ネイティブアプリからWebアプリへ
Financial Timesが2011年7月
Webアプリ「FT Web App」を公開
アプリ内課金の際の
Appleによる手数料徴収回避
複数プラットフォーム対応への
アプリ開発負担・コストの軽減

27. Topic（5）
スマートテレビでの利用へ
「Symposium on Web and TV 2012」
IPTVフォーラムHTML5ワーキンググループが
HTML5ベースのスマートテレビ実現
に向けて策定を進めている
© Impress Watch Corporation
IPTVフォーラム：Internet Protocol（IP）を使用した動画配信の仕様の標準化と普及を目的とした民間の標準化団体

28. Topic（6）
移動体への進出
General Motorsが2011年11月 米LAオートショーで
HTML5ベースの次世代型テレマティクス
「CUE（キュー）」を発表
テレマティクス：自動車、バイクなどにスマートフォンなどを連携させ情報サービスを提供すること

29. HTML5の課題

30. HTML5の課題（1）
デバイス、OS間での差異
スマートフォンをとってみても
Android、iOS、ブラウザでの
表示・挙動の違いが生じている

31. HTML5の課題（2）
スピード
ネイティブアプリに比べ
Webアプリは遅い
JavaScriptの処理速度は過去数年で
数十倍あがっているといわれ今後も改善が見込まれ
また「Web Workers」による効果も期待できる

32. HTML5の課題（3）
セキュリティ
他サイトからデータを
取得・利用できるようになったが
クロスサイトスクリプティング (Cross Site
Scripting) の危険性が生じている

33. HTML5の課題（4）
著作権
DRM（Digital Rights Management）
に関する定義がないため
著作権保護の観点で問題がある
W3Cに対しGoogle、Microsoft、Netflixの3社は
暗号化された動画や音楽のHTML5での再生を
可能にするためのAPI
「Encrypted Media Extensions」の標準化を申請
W3CサイドはこのAPIがプラグインに近い仕様のためフラグメント化を懸念し反対（？）

34. HTML5の課題（5）
仕様の分断化？
2012年7月 WHATWGの「Living Standard」と
W3Cが推進する仕様（WHATWG曰く「Snapshot」）
に発展的（？）な分担がなされた
Living
Standard
Web Applications 1.0 HTML5
WHATWG 2007 2012
Snapshot
W3C
WHATWG（ワットダブルジー）：Apple、Mozilla、Operaのブラウザベンダーによって設立されたグループ

35. HTML5の機能とその活用例

36. ジオロケーション
GPS、ネットワークのIPアドレスや
無線LANのアクセスポイントから取得した
ユーザの位置情報を扱う技術

37. ジオロケーション：事例（1）
Walmart
周辺の店舗検索、ネイティブアプリケ
ーションと連動したルート検索に加え
各店舗のセールス情報なども提供
位置情報利用の際には
ユーザの許可が必要
http://mobile.walmart.com

38. ジオロケーション：事例（2）
iGS
ガソリン価格比較サイト
「gogo.gs」のガソリン価格情報
をもとに日本全国の現在位置周辺
のガソリンスタンド情報と価格情
報の確認ができる
http://gogo.gs/
http://itunes.apple.com/jp/app/igs/id409521642?mt=8

39. ジオロケーション：事例（3）
TeleNav Scout
HTML5ベースの音声ガイド付き
ナビゲーションサービス
※米国外での利用不可
http://www.scout.me

40. Web Storage
ブラウザが持つ簡易データベースの機能で
各種データや画像等の保存が可能になる
cookieと比較し
多量のデータを保存することが可能
cookie：4kbytes（20個まで）
localStorage：5MBytes（ユーザの同意により容量を増やすことが可能）

41. Web Storage：事例
日本経済新聞SP beta
オフラインの環境においても
記事の閲覧が可能となってい
るWebサイト
保存できる容量はデフォルト
で5MBytesだがユーザの同意
により増やすことが可能
http://sp.nikkei.com

42. Web Storage：事例
オフラインGmail
Googleカレンダー
Googleドライブ
オフライン環境で利用が可能なChromeアプリ
Google カレンダー、Google ドライブも提供されている

43. 参考
対応ブラウザとそのシェア

44. HTML5対応ブラウザ
（）内は2012年7月現在の最新版のバージョン
Firefox 3.1 Chrome 3.0 Safari 3.0
（14.0.1） （20.0.1） （5.1.7）
Opera 9.6 Internet Explorer 9
（12.00） （9.0.8）※一部実装されていない機能あり

45. HTML5対応ブラウザのシェア（Japan）
2012/1∼7月
7割弱のブラウザがHTML5に対応
StatCounter Global Stats：http://gs.statcounter.com

46. HTML5対応ブラウザのシェア（Worldwide）
2012/1∼7月
8割のブラウザがHTML5に対応
StatCounter Global Stats：http://gs.statcounter.com

47. モバイルデバイスのHTML5対応状況一覧
Mobile HTML5
http://mobilehtml5.org/
モバイルブラウザでの各機能の
対応が一覧で確認できる

48. 様々な機能が追加されたことによりHTMLはPC、ブラウザ
の枠を超え様々なシーンで活用されうる言語となりました
そして「ワンソース・マルチプラットフォーム」という
強みにより開発のコストや期間の軽減
ローカル処理の強化によるサーバへの負荷軽減や
オフラインでの稼働など様々なメリットをもたらします
また、当然のことながらHTMLの本来の目的
「文書の構造の明確化」の強化により
データの活用範囲もさらに広がることになります

49. http://1pac.jp