20090925 html5の過去、現在、未来

2009-09-25, 情報処理学会デジタルドキュメント研究会

HTML 5 HTML5の過去、現在、未来

国島丈生（岡山県立大学）[email protected]

http://tk.kunilab.org/ja

1


XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 52009-07-02: Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C's position regarding the future of HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to HTML. Learn more about the HTML Activity.

-- http://www.w3.org/News/2009#item119

2

http://www.w3.org/2007/03/XHTML2-WG-charter




http://www.w3.org/html/wg/

http://www.w3.org/html/wg/

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

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

http://www.w3.org/2009/06/xhtml-faq.html

http://www.w3.org/2009/06/xhtml-faq.html

http://www.w3.org/MarkUp/Activity

http://www.w3.org/MarkUp/Activity


HTML5一巡り• HTML4, XHTML1, DOM2 HTMLと後方互換• DOMによるデータ構造の規定• MIME typeと厳格に対応した2つのビュー：

{HTML, XHTML} syntax• Webアプリケーションのための機能・クライア

ント側API群• Application Cache, Drag&Drop API, Web

Storage, Web Database, Web Workers, …• microdata：標準装備のメタデータ記述方式

3


HTML5の過去

4


HTML• Tim Berners-Leeにより設計

• 1993-06: HTML 1.0 (IETF Internet Draft)

• 1995-11: HTML 2.0 (RFC1866)

• 1997-01: HTML 3.2 (W3C勧告)

• 1999-12: HTML 4.01 (W3C勧告)1) http://en.wikipedia.org/wiki/HTML2) http://www.kanzaki.com/docs/html/htminfo-ex1.html

5


HTML 4.01の例<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html lang=”ja”> <head> <meta http-equiv=”content-type” content=”text/html; charset=utf-8”> <title>HTML 4.01文書の例</title> </head> <body> <h1>HTML 4.01文書の例</h1> <p>最初の段落<p>次の段落 </body></html>

SGMLベースの構文

3種類のDTD: Strict,

Transitional, Frameset

6


XHTML• 2000-01: XHTML 1.0 (W3C勧告)

• XML構文によるHTML 4.01の再定義

• 2001-05: XHTML 1.1 (W3C勧告)

•文書スキーマのモジュール化

• XHTML 2 (W3C Working Draft)

7


XHTML 1.0の例<?xml version=”1.0” encoding=”utf-8”?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html lang=”ja” xml:lang=”ja” xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> <title>XHTML 1.0文書の例</title> </head> <body> <h1>XHTML 1.0文書の例</h1> <p>最初の段落</p><p>次の段落</p> </body></html>

XHTML 1.0 = HTML 4.01のXML構文版

XHTML 1.1 ≓ XHTML 1.0 Strict

8


XHTML 2<?xml version=”1.0” encoding=”utf-8”?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 2.0//EN” “http://www.w3.org/MarkUp/DTD/xhtml2.dtd”><html xml:lang=”ja” xmlns=”http://www.w3.org/2002/06/xhtml2/”> <head> <title>XHTML 2文書の例</title> </head> <body> <section> <h>XHTML 2文書の例</h> <p>最初の段落</p><p>次の段落</p> </section> </body></html>

新たな名前空間

階層的文書構造スキーマのモジュール化XForms, XML Events, RDFa, etc.の組込み

HTML, XHTML1との互換性はなし

9


XHTML WGの目標This document type is designed to be portable to a broad collection of client devices, and applicable to the majority of Internet content.

-- http://www.w3.org/TR/xhtml11/introduction.html

It is designed for Web clients that do not support the full set of XHTML features; for example, Web clients such as mobile phones, PDAs, pagers, and settop boxes.

-- http://www.w3.org/TR/2000/REC-xhtml-basic-20001219

10


最初は順調だった?• 2000-12: XHTML Basic 1.0 (W3C)

• 2001-10: XHTML Mobile Profile 1.0

• wapforum.org, XHTML Basic 1.0の拡張

• NTT DoCoMo, au, Softbankいずれもこれらをベースに拡張

11


しかし

ブラウザのベンダがほとんど参加してない!!

2006年以降動きがない!!

http://www.w3.org/TR/2006/WD-xhtml2-20060726

12


XHTML2挫折の原因• HTMLとの後方互換性のなさ

• XHTMLの普及があまり進まなかった

• well-formedでもない「自称XHTML」

• Webの現状の軽視

• Web用マークアップ言語から汎用文書記述マークアップ言語へ

• Webブラウザでの実装の軽視

13


W3C is pleased to announce the new HTML Working Group, chartered to create the next HTML standard with the active participation of browser vendors, software developers, and content designers. "It's time to revisit the standard and see what we can do to meet the current community needs, and to do so effectively with commitments from browser manufacturers in a visible and open way," said Tim Berners-Lee, W3C Director.

-- http://www.w3.org/QA/2007/03/new-html-working-wg.html

新HTML WG

WHATWG (The Web Hypertext Application Technology Working Group)と共同で作業

14


WHATWG

• 2004年にApple, the Mozilla Foundation, Opera Softwareに所属の個人により設立

• 目的：相互運用性を持つWebアプリケーションのためのHTML周辺技術の標準策定

“The new technologies being developed by the W3C ... are often designed to address other needs and only consider Web Applications in a peripheral way.”

-- http://www.whatwg.org/news/start

15


WHATWG発の仕様• Web Forms 2.0

• XHTML 1.0のform機能の拡張(≠XForms)

• Webブラウザでの実装を意識

• HTML5仕様に吸収

• Web Applications 1.0 (後のHTML5)

• Web Workers

16


HTML5の現在

17


HTML5• W3C Working Draft

• 2009/08/25 版が最新

• Editor: Ian Hickson (Google, 元Opera), David Hyatt (Apple)

• 更新が非常に激しいため、以下の説明は 2009/09/16版のEditor’s Draftを基にしている

18


This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

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

19


HTML5とその周辺

HTML5

Web Workers

Web Database

Web Storage

Web SocketsGeolocation

API

CSS

JavaScript

暗に想定

20


HTML syntax<!DOCTYPE html><html lang=”ja”> <head> <meta charset=”utf-8”> <title>HTML5文書の例</title> </head> <body> <h1>HTML5文書の例</h1> <p>最初の段落</p><p>次の段落 </body></html>

条件が揃えば終了タグは省略

可能

空要素の最後の / はあってもなくてもよい

21


XHTML syntax (XHTML5)

<?xml version=”1.0” encoding=”utf-8”?><html lang=”ja” xml:lang=”ja” xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>XHTML5文書の例</title> </head> <body> <h1>XHTML5文書の例</h1> <p>最初の段落</p><p>次の段落</p> </body></html>

構文上の制約はXMLのものだけ。XHTML独自の制約(例: 文書型宣言)は廃止

名前空間はXHTML1と同じ

22


主役はDOM• 全ての要素にDOM HTMLのインタフェースが定

義されている

• HTML文書=DOMインスタンスを直列化したもの

http://www.w3.org/TR/html5/semantics.html#the-title-element-0

23


MIME typeHTML XHTML

text/html application/xhtml+xml

HTML

parser

XML

parser

HTML

document

XML

document

• HTTP Content Header中のMIME typeによってparserを選択

• XHTML + text/html でもHTML parserになる!

• HTMLとXMLの違いはCSSやAPIの動作に影響

24


DTDとの訣別• 文書型は定義されていない

• DOCTYPE ＝ parsingのための目印

• DOCTYPEの記述によってparserのモードが変わる [1]

• parsingでもDTDは使われない

• 文字実体参照(áなど)は仕様中で直接定義（HTML syntaxでのみ利用可能）

[1] http://hsivonen.iki.fi/doctype/

25


HTML syntax ≠

SGML

26


内容モデル• 公式の文書スキーマは現在なし (*1)

• 要素のカテゴリにより内容モデルを定義

• 例：p の内容モデル = phrasing content

http://www.w3.org/TR/2009/WD-html5-20090825/

(*1) 有志による非公式スキーマがある。http://syntax.whattf.org/

27


階層的な文書構造<article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <section> <h3>Sweet</h3> <p>Red apples are sweeter than green ones.</p> </section> </section> <section> <h2>Color</h2> <p>Apples come in various colors.</p> </section></article>

見出し(heading)のグルーピング

sectioning content (article,

aside, nav, section)による階層構造

28


MathML, SVGの埋め込み

• math要素、svg要素を新たに導入

• 内容はMathML, SVGと解釈される

<figure> <math> <mi>a</mi> <mo>=</mo> <msqrt> <msup><mi>b</mi><mn>2</mn></msup> <mi>+</mi> <msup><mi>c</mi><mn>2</mn></msup> </msqrt> </math> <legend> Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of a triangle with sides <var>b</var> and <var>c</var> </legend></figure> http://www.w3.org/TR/html5/text-level-semantics.html#the-var-element

29


ルビ• Ruby Annotation [1] のsimple ruby markup (with parenthesis) を導入

• complex ruby markupは難しそう<ruby> 漢 <rp>(</rp><rt>かん</rt><rp>)</rp> 字 <rp>(</rp><rt>じ</rt><rp>)</rp></ruby>

[1] http://www.w3.org/TR/ruby/

http://www.w3.org/TR/html5/text-level-semantics.html#the-rp-element

30


実装を意識した仕様

• DOM2 HTMLの拡張

• DOMを基にしたアルゴリズムを詳細に定義

• parsing, renderingのアルゴリズムを詳細に定義

31


Webアプリ向け拡張• canvas要素: ビットマップキャンバス

• video要素、audio要素: 動画、音声の埋め込み

• フォーム機能の強化

• Drag & Drop API

• Application Cache (オフラインWebアプリケーション)

• cross-document messaging

32


canvas要素<canvas id=”canvas1” height=”150” width=”300”>canvasが使えないUser Agentの場合は内容を表示</canvas>

var canvas = document.getElementById(‘canvas1’);var context = canvas.getContext('2d');context.fillRect(0,0,50,50);

• DOM API: HTMLCanvasElement

33

video, audio要素<audio src=”music.mp3”></audio>

<video>  <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'></video>

• DOM API: HTMLMediaElement etc.

34


フォームの強化• input要素の種類の増加

• datetime, number, email, urlなど

• 入力値の妥当性検査(required属性etc.)

• オートコンプリート機能(autocomplete属性)

• 入力のヒント (placeholder属性)

35


Drag & Drop API• DOM API: DragEvent, DataTransfer

<div id=”text1” draggable=”true”>ドラッグできるテキスト</div>

36


Application Cache

<!DOCTYPE html><html manifest=”clock.cache”> <head> <title>clock application</title> <script src=”clock.js”></script> </head> <body>...</body></html>

clock.html

function clock {...}...clock.js

CACHE MANIFESTclock.htmlclock.js

clock.cache

キャッシング

37


cross-document messaging

http://example.com

window.addEventListener('message', receiver, false);function receiver(e) { if (e.origin == 'http://example.com') { if (e.data == 'Hello world') { e.source.postMessage('Hello', e.origin); } else { alert(e.data); } }}

iframe (http://b.example.com)

var o = document.getElementsByTagName('iframe')[0];o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

http://www.w3.org/TR/html5/comms.html#crossDocumentMessages

38


関連API• W3C Web Apps WGによる

• Web Workers: スレッドによるバックグラウンド実行API

• Web Storage: key-value pairのストレージへのAPI

• Web Database: クライアント内のSQLデータベースAPI

• Web Sockets: 非HTTPによるサーバとの双方向通信API

• W3C Geolocation WGによる

• Geolocation API: デバイスの地理的位置情報へのAPI

39


メタデータ埋込みの現状• XML名前空間を用いたメタデータボキャブラリ

の取り込み

• RDF/XMLなど

• XHTML Syntaxでは引き続き利用可能

• HTMLの要素・属性によるメタデータの表現

• microformats, RDFaなど

• HTML5での新たな記法：microdata

40


microformats<div class="vcard"> <a class="url" href="http://tk.kunilab.org/ja" title="国島丈生のサイトへ"> <span class="fn n"> <span class="family-name">国島</span> <span class="given-name">丈生</span> </span> </a> <a class="email" href="mailto:[email protected]" title="国島丈生にメールする”>[email protected]</a> <div class="adr"> 〒<span class="postal-code">719-1197</span> <span class="region">岡山県</span> <span class="locality">総社市</span> <span class="street-address">窪木111</span> <span class="extended-address">岡山県立大学情報工学部</span> </div> <div class="tel">0866-94-2141</div></div>

class属性の値でメタデータの属性名

を定義

要素の階層 = メタデータの属性の階層

メタデータの語彙は文書プロファイル(XMDP)で定義

41


microformatsの問題点(by I.Hickson)• class属性値の名前空間が単一

• 複数のボキャブラリ間で衝突し得る

• スタイル定義のためのクラス名とメタデータボキャブラリが区別し難い

• XMDP自体もmicroformats

• 実体の識別子が暗黙的にしか指定できないhttp://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-May/019681.html

42


RDFモデル• 主語、述語、目

的語の3つ組(triple)の集合

• 主語と述語は資源(URI)

• 目的語は資源(URI)かリテラル(文字列)

http://www.w3.org/TR/rdf-primer/

43


RDFaの例<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:dc="http://purl.org/dc/elements/1.1/" > <head> <title>My home-page</title> <meta property="dc:creator" content="Mark Birbeck" /> <link rel="foaf:topic" href="http://www.formsPlayer.com/#us" /> </head> <body> This document is licensed under a <a xmlns:cc="http://creativecommons.org/ns#" rel="cc:license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/"> Creative Commons License</a>. </body></html>

主語:文書自身述語:rel属性

目的語:content属性, href属性

主語:content, href述語:rev

目的語：文書自身

http://www.w3.org/TR/rdfa-syntax/

44


RDFaの例<html xmlns="http://www.w3.org/1999/xhtml" xmlns:cal="http://www.w3.org/2002/12/cal/ical#" > <head><title>Jo's Friends and Family Blog</title></head> <body> <p> I'm holding <span property="cal:summary"> one last summer Barbecue </span>, on September 16th at 4pm. </p> </body></html>

主語:文書自身述語:property属性目的語:要素の内容,

content属性


45


RDFaの例<html xmlns="http://www.w3.org/1999/xhtml" xmlns:biblio="http://example.org/" xmlns:dc="http://purl.org/dc/elements/1.1/" > <head> <title>Books by Marco Pierre White</title> </head> <body> I think White's book '<span about="urn:ISBN:0091808189" typeof="biblio:book" property="dc:title"> Canteen Cuisine </span>' is well worth getting since although it's quite advanced stuff, he makes it pretty easy to follow. </body></html>

about属性:主語の明示typeof属性:主語のクラス


46


RDFaの問題点(by I.Hickson)

•述語の記述が統一的でない

• XML名前空間(CURIE)に依存

•例: 文書の一部をcopy&pasteしたときに名前空間宣言のcopy&pasteを忘れがち

• CURIEを使わないと冗長http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-May/019681.html

47


その他の要件•メタデータ処理のためのAPI

• クライアント側だけで処理できる

• XSLTをいちいち書くべきじゃない

•他の形式(JSON, RDF, XMLなど)に容易に書き出せる

http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-May/019681.html

48


microdata• RDFaに類似したデータモデル

• XML名前空間を利用しない

•Microdata DOM API

• JSON, RDF, Atomなどへの書き出しアルゴリズム

49


microdataの例<div item="vcard"> <span itemprop="fn">国島丈生</span> <a itemprop="url" href="http://tk.kunilab.org/ja" title="国島丈生のサイトへ"> 国島丈生 </a> <a itemprop="email" href="mailto:[email protected]" title="国島丈生にメールする”>[email protected]</a> <div itemprop="adr" item> 〒<span itemprop="postal-code">719-1197</span> <span itemprop="region">岡山県</span> <span itemprop="locality">総社市</span> <span itemprop="street-address">窪木111</span> <span itemprop="extended-address">岡山県立大学情報工学部</span> </div> <div itemprop="tel">0866-94-2141</div></div>

プロパティ=(名前, 値), itemprop属性

アイテム=プロパティの集合, item属性

50


type• アイテムやプロパティのボキャブラリの指定

• 組込み (vCard, iCalendar, ...)

• URL<div item=”http://example.com/person#”>

• reversed DNS labels<div item=”com.example.person”>

51


プロパティ名のscope<section item="org.example.animal.cat"> <h1 itemprop="name">Hedral</h1> <p itemprop="desc">Hedral is a male american domestic shorthair, with a fluffy <span itemprop="com.example.color">black</span> fur with <span itemprop="com.example.color">white</span> paws and belly.</p> <img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"></section>

org.example.animal.cat.name

http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-May/019681.html（一部改変）

52


文書構造と独立な構造

<p>The two lamps are <span item id=a><span itemprop="com.example.name">A</span></span> and <span item id=b><span itemprop="com.example.name">B</span></span>. The first is <span subject="a" itemprop="com.example.price">$20</span>, the second <span subject="b" itemprop="com.example.price">$30</span>. The first is <span subject="a" itemprop="com.example.power">5W</span>, the second <span subject="b" itemprop="com.example.power">7W</span>.</p>

アイテムの識別子 = id属性アイテムの参照 = subject属性

http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-May/019681.html（一部改変）

53


Microdata DOM API

var cat = document.getItems('org.example.animals.cat')[0];var colors = cat.properties['com.example.color'].contents;var result;if (colors.length == 0) { result = 'Color unknown.';} else if (colors.length == 1) { result = 'Color: ' + colors[0];} else { result = 'Colors:'; for (var i = 0; i < colors.length; i += 1) result += ' ' + colors[i];}

type ‘org.example.animals.cat’を持つ要素集合(NodeList)を返す

type ‘com.example.color’を持つプロパティの値(Collection)を返す

http://www.w3.org/TR/html5/microdata.html#using-the-microdata-dom-api

54


HTML5の未来(?)

55


今後の展望•仕様も実装もまだまだこれから

• 2010年Q3にW3C勧告を目指す

•実装状況もブラウザごとにまちまち

•Microsoftもようやく取り組みを活発化(2009-08)

56


雑感• 現段階の仕様から是非を議論するのは早計

• 文書設計者向けのガイドラインも作成される?

• 文書スキーマ etc. は需要次第でそのうち?

• 文書から(Webのための)データ構造へ

• コミュニティの空気

• Webアプリ側の人が多い?

57


日本語リソース集• HTML5.JP (http://www.html5.jp)

• html5-developers-jpメーリングリスト (http://groups.google.co.jp/group/html5-developers-jp)

• マイコミジャーナルの特集(白石俊平氏)

• 新タグ&API編 (http://journal.mycom.co.jp/special/2009/html5-1/)

• Webアプリ開発編 (http://journal.mycom.co.jp/special/2009/html5-2/)

58