HTML5/Web標準オーバービュー

These slides are copyright © 2011 W3C (MIT, ERCIM & Keio). Stata Center photo by See-Ming Lee available under a Creative Commons Attribution Share-Alike 2.0 License

http://www.flickr.com/photos/seeminglee/3791607622/

HTML5/Web 標準オーバービュー

ver. 2011 年 8 月 15 日W3C/Keio

慶應義塾大学大学院特任助教深見嘉明@rhys_no1

Chrome+HTML5 Conference

〜第 20 回記念 HTML5 とか勉強会スペシャル〜



アンケートや情報共有にご協力ください！

• カンファレンス全体についてのアンケートo http://bit.ly/toka20

• HTML5/Web 標準オーバービューについてのアンケートo http://bit.ly/toka20-A1

• Twitter （実況中継用にお使いください）o #html5j

• Facebook ページ（質問用にお使いください）o http://www.facebook.com/html5j

http://bit.ly/toka20

http://bit.ly/toka20-A1

http://www.facebook.com/html5j



前半： HTML5 & Web 標準の基礎



HTML5,,,,,



HTML5!

• http://www.w3.org/TR/html5/



6

HTML5 を少し細かく見てみる

•HyperText•Markup•Language•(Ver. 5)

(C) 2011 慶應義塾大学 SFC 研究所次世代 Web 応用技術・ラボ



そもそも HTML とは

• ウェブサイトを構成する

を作成するための規格

ハイパーリンク付き

文章ファイル

ハイパーリンク

サイト A

サイト B



HTML の歴史HTML

HTML2

HTML3

HTML3.2

HTML4

HTML4.01

XHTML1.0

XHTML Basic

XHTML2.0

XHTML1.1

HTML5

1989 年

1994 年

1995 年

1997 年

1997 年

1999 年

2000 年

2001 年

2000 年

SGML→XML

携帯端末

IEFT 標準化

拡大機能集約

正しい HTML

モジュール化

XML らしく

Public 向けとして仕様化推進中。MS ， Opera, Mozila, Google, Apple などが中心に推進。2010 年１ 0 月に Draft 、 2012 年に CR を目指す。

2007 年開始

IBM を中心に、イントラネットやDB 用向けとして推進中。

※XHTML2.0 は、厳密な仕様化により、古い HTML コンテンツも許容するブラウザを提供すること難しく、 Public 用のブザウザでは実装されていない。

目的： Web 利用の容易化と拡張性の向上



HTML5 の正式な定義

• W3C で策定している–HTML4.01–XHTML1.0–DOM2 HTMLの次期バージョン



HTML5 の由来

• WHATWG による提案–Web Applications 1.0–Web Forms 2.0

アプリケーションの実行環境としての Web を実現



HTML5

• ウェブサイト記述のためのマークアップ規則– マシンリーダビリティの向上

（ HTML5 は XHTML の後継でもある）– 表現の幅を拡大

• API 仕様群–Web をアプリケーションの実行環境に

進化させる技術



HTML5,,,,,



13

新世代ウェブの構成要素

•HTML5•CSS3•JavaScript•WebGL




14

広義の HTML5

• ウェブアプリケーションの動作環境• リッチコンテンツの取扱が容易に• デバイスとの連携に用いられる多様な API

• 多様な端末（モバイル、そして、、、、）に適した UI の実現




HTML5!




ウェブ標準を作っている場所

WorldWide WebConsortium



HTML5!




HTML5!,,,,,!?



というわけで、

フルスペックのHTML5 が使える環境は

ありません



なぜなら現在策定中の規格だから



仕様策定プロセス

Working Group Interest Group Coordination Group

Working Draft

Last CallWorking Draft

CandidateRecommendation

ProposedRecommendation

Recommendation勧告

Incubator Group

AC による投票

Director の判断

他のグループとの整合性を取る

実装例を待つ

特徴：1, 実装主義2, Consensus 方式3, Director 判断



では、今日学べることは何なのか？



仕様策定プロセス

Working Group Interest Group Coordination Group

Working Draft

Last CallWorking Draft

CandidateRecommendation

ProposedRecommendation

Recommendation勧告

Incubator Group

AC による投票

Director の判断

他のグループとの整合性を取る

実装例を待つ

特徴：1, 実装主義2, Consensus 方式3, Director 判断



W3C 標準化プロセスの特徴

• W3C≠ デジュール標準• 実装主義

各社の採用・実装をコントロールしていない

実装が進んではじめて標準にいきつく



標準が必要な理由• 同じ仕様（データフォーマット、プロト

コル…………）を使わないと、互いにデータをやり取りできない

• 共通して用いられる仕様がないと、状況（ネットワーク環境、ハードウェア、ソフトウェア）が異なると、同じようにコンテンツが使えない

• ブラウザ戦争



キーワード

ネットワーク外部性



身近な例



メカニズム

みんなが使う

その仕様を採用する



ウェブ標準とは？• Loyalty Free/ Open Usage• Open Process• One Web, One Network• 設計書であり、ルールでもある• 策定中、だけど実装済み• 強制力なし、でも実効力がある



ポイント• 実装主義だから、みんなが使う仕様

が標準になっていく。• 既に広く使われている仕様＝

勧告になる可能性が高い• ポイントを抑えることが大切



後編： HTML5 の APIが

実現すること



よりセマンティックなコンテンツ

プラットフォーム+

よりリッチなアプリケーションプラットフォーム

HTML5=



よりセマンティックなコンテンツプラットフォーム• HTML5 の新要素で <div> だらけの Web ページとはおさら

ば！o セクション要素（ section/article/aside/nav... ）o その他の新要素（ header/footer/time/command... ）o 既存要素の意味も変化（ strong/small/b/i/address/

menu... ）• HTML5 Forms で、よりセマンティックかつリッチな入力

フォームが実現する• マイクロデータなどのリッチスニペット技術



詳しくはこのあと、羽田野さんのセッションで！



よりリッチなアプリケーションプラットフォーム• JavaScript API が次々に考案、標準化され、プラットフォー

ムが拡大しつつある。o →API とは？



API って、なんだ？

• →Application Programming Interface• 低レベルのレイヤの機能を利用するための、機能の入り口

（＝インターフェース）のこと



Web アプリにできることが、なぜ少なかったか？• →APIが足りなかったから



どんな API が増える？何が出来るようになる？

• Web アプリをオフラインでも利用可能になる。• デバイスの機能をフル活用できるようになる。• より高速で自由度の高いネットワーク処理が可能になる。• マルチメディアを自由自在に操れるようになる。• Web ページの表現力が大幅に向上する。



オフライン Web アプリケーション

• アプリケーションキャッシュ・・・オフライン利用可能なキャッシュ（デモ）

• Web Storage ・・・簡単に利用出来るストレージ API• Indexed Database API ・・・ブラウザ組み込みの KVS• File API ・・・ファイルの読み書き

http://tidocs.com/mobile/1.6.0/



デバイスの機能へのアクセス• Contacts API ・・・アドレス帳へのアクセス• Calendar API ・・・カレンダーへのアクセス• Media Capture ・・・メディアデータの取り込み• Messaging API ・・・ SMS/MMS/E-mail の送信• Battery Status API ・・・バッテリー状態へのアクセス• Network Information API ・・・ネットワーク情報へのアクセス• DeviceOrientation Events ・・・デバイスの向きや傾きを検知する（

デモ）• Gallery API ・・・メディアギャラリーへの

アクセス• Geolocation API ・・・位置情報取得（デモ）• 音声入力・・・音声でテキスト入力を行える

（デモ）

http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html

http://ie.microsoft.com/testdrive/HTML5/Geolocation/Default.html

http://twitter.com/%23!/



より高度なネットワーキング

• WebSocket ・・・リアルタイム性の高い、新たな通信形式• Server-Sent Events ・・・ HTTPベースのサーバプッシュ• Cross Document Messaging ・・・Web ページ間のメッセージ通信• Cross Origin Resource Sharing ・・・オリジンを超えた HTTP呼び出

し• Cross-Origin Resource Embedding Exclusion ・・・ img,script などに対するクロスオリジン機能を制限する仕様

• XMLHttpRequest Level2 ・・・パワーアップ！！（デモ）

http://localhost:8080/dt-html5-samples/xhr2/sample1/sample1.html



マルチメディア• video 要素・・・動画再生• audio 要素・・・音声再生• API for Media Resource 1.0 ・・・メディアのメタデータを取得する

API• Audio Data API ・・・ Firefox で実装済みの音声操作 API• Web Audio API ・・・ Chromium で実装済みの音声操作 API• HTML Media Capture ・・・ <input type="file"> を拡張して、メディア

取り込みを可能に• Media Capture API ・・・ JavaScript でメディア取り込み• Web VTT ・・・動画に字幕やトラック

情報を付与するためのフォーマット• Peer Connection ・・・ P2P接続も可能に



マルチメディアの取り扱いも容易に

• 音声や動画を Web ページ上で取り扱うのが非常に容易に• CSS や JavaScript とも組み合わせて、高度な表現を簡単に

実現• デモ : Picture in Picture (HTML5Rocks)• デモ :字幕入り動画のデモ

http://studio.html5rocks.com/%23PiP

http://people.opera.com/danield/html5/websrt/



Web ページをよりグラフィカルに

• canvas 要素・・・ビットマップグラフィックの描画領域（デモ）• HTML5 Canvas 2D Context ・・・ canvas に 2 次元グラフィックを描画する API

• WebGL ・・・ canvas に 3 次元グラフィックを描画する API• SVG ・・・ベクターグラフィック API• requestAnimationFrame API ・・・ JavaScript アニメーションをより

効率よく行うための API

http://mariuswatz.com/works/abstract01js/index_auto.html



その他も続々増加中

• Navigation Timing/Resource Timing ・・・Web ページやリソースの読み込みに要した時間を取得する API

• Web Workers ・・・バックグラウンドスレッドを実現する API• setImmediate ・・・ setTimeout(fn, 0); をより効率的に実行• Page Visibility ・・・Web ページの表示状態を取得するための

API• Web Notifications ・・・通知メッセージを表示するための API• フルスクリーン API ・・・Web ページのフルスクリーン化を可

能にする API



HTML5 の各要素を組み合わせると、こんなことができる！



Blowing apart fragments of Video

• 使用している HTML5 要素o Videoo Canvas

1. video 要素と canvas 要素 2 つ（作業用と表示用）を準備し、タイルに分割

2.一定時間ごとに、不可視のvideo から canvas に画像を表示

3.マウスクリックされたら、タイルの座標を再計算して canvasを再表示

http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/



Flight of the navigator

• 使用している HTML5 要素o WebGLo Video/Audioo Audio Data API

https://mozillademos.org/demos/flight-of-the-navigator/demo.html



ありがとうございました。

深見嘉明 @rhys_no1白石俊平 @Shumpei



アンケートや情報共有にご協力ください！

• カンファレンス全体についてのアンケートo http://bit.ly/toka20

• HTML5/Web 標準オーバービューについてのアンケートo http://bit.ly/toka20-A1

• Twitter （実況中継用にお使いください）o #html5j

• Facebook ページ（質問用にお使いください）o http://www.facebook.com/html5j

http://bit.ly/toka20

http://bit.ly/toka20-A1

http://www.facebook.com/html5j

HTML5/Web標準オーバービュー

Documents

Transcript of HTML5/Web標準オーバービュー