HTML5 - sic.shibaura-it.ac.jpyamaken/docs/nw09_html5.pdf · 1.1 html5 の目的 html5...

HTML5

ネットワークプログラミング特論資料 [山崎]

2015年 11月 18日

HTML5の概要について説明する．第 1章は，HTML5と HTML4の違いを述べる．第 2 章は，HTML5の仕

様書の目次である．第 3章以降では，同 draftから幾つかの重要なトピックを抜き出して説明する．

なお，有名な以下のような技術は，HTML5には入っていない．(元々は入っていたのに，標準化の過程で別に

されたものもある．)

• Microdata (15章)

• Web Messaging (16章)

• Web Sockets (17章)

• Server-Sent Events (18章)

• Web Workers (19章)

• Service Workers (20章)

• Web Storage (21章)

• Indexed Database (22章)

• Web Components (23章)

• WebRTC (未調査): ブラウザ間で直接通信する機能．個人的には疑問．

• Device API (未調査): センサーなど端末デバイスを利用する機能．これが使えるのはサービス上は大きい

が，技術としては特にない．

• File API (未調査): ローカルファイルにアクセスする機能

• Streams (未調査): XHRのようなデータ全体をイベント扱うのでなく，ストリームデータとして扱うため

の API．Promiseを使って記述する．

これらについての多くは，WHATWG で検討されている．WHATWG の ”HTML: The Living Standard”

(https://developers.whatwg.org/) には検討中の機能一覧がある．HTML5のドキュメントは，W3C管理の

ものと，WHATWG管理のものに分かれてしまっている．整合性がどの程度あるかは，よく分からない．W3C

は後追いかというとそうでもなく，W3CのWebPlatform WGや DeviceAPI WGなどでは新機能の検討が続い

ている．(http://www.w3.org/WebPlatform/WG/PubStatusなども参照．)

なお，文中の◆は要注目点で原文にはない．この資料は現時点でのW3CのWorking Draftをベースにしてい

るが，資料の原案は何年も前から更新しているものなので，古い記述が残っているかもしれない．また，あくまで

Working Draftなので今後も変更されうる．最終的には自分で確認すること．

1 HTML5の HTML4からの相違点

HTML5 differences from HTML4, W3CWorking Draft 28 May 2013 (http://www.w3.org/TR/html5-diff/)

の要約．ただし，このドキュメントはもう更新されてない．

1

1.1 HTML5の目的

• HTML5 という一つの仕様にする (HTML4, XHTML4, DOM level2 HTML などのさまざまな言語を一

つの言語で置き換える)

• processing modelsをきちんと決める

• ドキュメントのマークアップの改良• Web applicationsへの対応 (APIなど)

1.2 Impact on Web Architecture

この節だけは昔 (2009年頃?) の版にあったリスト．2013年の版にはないが，分かりやすいので掲載する．

• DOM をベースとして考える．規定されているものは DOM．HTML5 は一つの表現法．実際，規格では

DOM interfaceとして定義されている．

• browsing contextという概念を導入する

• authorへの要求と user agentへの要求を分ける．authorは昔の機能を使ってはいけない．UAは昔の機

能をサポートし続けないといけない．

• 手続き的に定義を書き下す．(抽象的に書かない)

• (blockと inlineの概念に代わる) 新しい content model

• 新しい機能については，accessibilityを最初から考える

• 意味をきちんと定義する• server-Sent event機能

• datagrid要素

• originの概念

• オフラインWebアプリケーションキャッシュ

• browsing contextを navigateするアルゴリズム，セッションヒストリ移動アルゴリズム

• content-typeと character encodingを sniffした (?)

• パーサーの定義を明確にした• 2つの構造化ストレージ

• contentEditable機能，UndoManager機能

• ドラッグ・ドロップ，コピー・ペースト• クロスドキュメントメッセージ (postMessage)

• iframeに新しいサンドボックス機能 (iframeに sandbox属性をつけて，iframe内の popup禁止等の制御

ができる)

1.3 Syntax

HTML5のシンタックスは HTML4と XHTML1に互換である．ただし，SGMLには従わない部分もある．現

在のブラウザ実装にできるだけ合わせる．

<!doctype html>

で良くなった．HTML5は SGMLベースではないので，あの長い記述は不要．

MathMLや SVGが直接書けるようになった．SVGの例:

<svg xmlns="http://www.w3.org/2000/svg"

2

xmlns:xlink="http://www.w3.org/1999/xlink">

<circle cx="100" cy="100" r="100" fill="red" />

<rect x="150" y="150" width="300" height="200" fill="blue" />

<line x1="0" y1="0" x2="300" y2="200" stroke="black"/>

<text x="50" y="50">sample text</text>

</svg>

1.4 Language

1.4.1 新要素

文の構造を表す要素の導入

section, article, main, aside, header, footer, nav, figure, figcaption

その他の要素

• video, audio: マルチメディアコンテンツ (プラグイン無しで)

• track: video要素の文章トラック

• embed: プラグインの起動

• mark: マークされたテキスト

• progress: 進行状況の表示

• meter: 測定量

• time: 日付と時刻

• data: 任意のデータ [HTML5.1]

• dialog: ダイアログの表示

• ruby, rt, rp: ルビを振る

• bdi: 双方向テキスト形式化用のテキスト

• wbr: 改行可

• canvas: ビットマップ

• details: 必要に応じて入手できる情報

• datalist: inputと一緒に使って comboboxを作る

• keygen: 鍵生成 (セキュリティ)

• output: scriptを実行して，その結果を出力する

• input: 以下の type属性

tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color

1.4.2 新属性

• aと area要素に download属性を追加．

• area要素に hreflang，type，rel属性を追加．

• base要素に target属性を追加．

• meta要素に charset属性を追加．

• input,select,textarea,button要素の autofocus属性を追加．◆ (以下も)

• input, textarea要素に placeholder属性を追加．デフォルト値を書ける．

• input,output,select,textarea,button,label,object,fieldset要素に form属性を追加．

• input,select,textarea要素に required属性を追加．

• fieldset要素に disabled属性を追加．fieldsetを禁止できる．

3

• input要素に autocomplete, min, max, multiple, pattern,step属性を追加．

• input, textarea要素に dirnameを追加．

• textarea要素に maxlengthと wrapを追加．

• form要素に novalidate属性を追加．

• input,button 要素に formaction, formenctype, formmethod, formnovalidate, formtarget 属性を追加．

◆

• style要素に scoped属性を追加．scoped style sheetができる．◆

• script要素に async属性を追加．◆

• html要素にmanifest属性を追加．◆

• link要素に sizes属性を追加．

• ol要素に reversed属性を追加．

• iframe要素に sandbox,srcdoc属性を追加．◆すべての要素に利用可能な属性 (global attribute) を追加．

• object要素に typemustmutch属性を追加

• img/video/audio要素に crossorigin属性を追加 (CORSの許可)◆

• contenteditable: エディット可能であることを示す．◆

• data-*: コンテンツを書く人が自由に使って良い属性．

• hidden: 素素を表示しない

• role, aria-*: 元々障害者用だっだが，ドキュメントの構造記述に使われつつある

• spellcheck: スペルチェック対象の指定

• translate: 翻訳すべき対象の指定

[山崎注: img の crossorigin 属性は，canvas の中でイメージをクロスオリジンでアクセスするために使う．

(HTML4では別オリジンの imgの中身は一切見えない．)]

1.4.3 要素の意味変更

• address要素のスコープの定義

• b要素は styleを平文と変えるだけで，意味は伴わない．

• cite要素は何らかの結果，成果だけを示し，人を示すものではない．

• dl要素は名前と値のペアを表す．dialogueのためのものではない．

• hr要素は段落の区切り．

• i要素は平文とは区別すべき意味をもつことを示す．

• label要素があってもフォーカスをラベルからコントロールに移さない．

• noscript要素の解釈

• s要素は，あまり正確でない部分を表わす．

• script要素をスクリプトの指示に使えるようになった．

• small要素は小さい表示．

• strong要素は，意味的に重要であることを表す．

• u要素は発音されないテキスト．

1.4.4 変更された属性

• inputの accept属性に，audio/*, video/*, image/*が書ける

• accesskey属性に複数の文字が書ける

• formの action属性の URLがないのは禁止

• tableの border属性は”1”か空文字のみが許される

4

• tdと thの colspan属性は 0より大きいこと

• areaの coords属性は，パーセント radiusは禁止

• objectの data属性は，相対的でない．

• scriptの defer属性は，そのページのパース完了時に実行される

• dir属性は，auto値が書ける

• formの encrypt属性は，text/plainが書ける

• img, iframe, objectの width属性と height属性は，パーセント表現は禁止．またアスペクト変更も禁止．

• linkの href属性の URLがないのは禁止

• baseの href属性は相対 URLでも良い

• URLを取るすべての属性は，ドキュメントが UTF-8/16なら IRIをサポートする．

• metaの http-equiv属性をサーバーは解釈しない．UAが pragmaとして使うだけ．◆

• id属性は任意の値でよい．

• lang属性は通常の idに加え空文字列で良い

• linkの media属性は，media queryを受けつける．

• イベントハンドラー属性は，常に javascriptとして解釈される．

• li要素の value属性や ol要素の start属性を使って良い．

• style属性は常に CSSを利用する

• tabindex属性は負の値でもよい

• a, areaの target属性を使って良い

• script,style要素の type属性が一部不要になった．

• imgの usemap属性は URLを取らず，ハッシュ値を取る．

• 以下はできるだけ使わないこと．imgの border, scriptの language, aの name, tableの summary．

1.4.5 削除された要素

(推奨されない要素)

• basefont, big, center, font, strike, tt

• frame, frameset, noframes

• acronym, applet, isindex, dir

1.4.6 削除された属性

省略

1.5 Content Model Changes

HTML5では，block-levelや inlineという分類はしない．(CSSとの誤解を避けるため．) もっと細かく分類す

る．下図 (W3Cの HTML5 Editor’s Draftより引用) 参照．

• Metadata content: link, script

• Flow content: span, div (HTML4の blockと inlineを併せた概念)

• Sectioning content: aside, section

• Heading content: h1

• Phrasing content: span, img (HTML4の inlineに近い)

• Embedded content: img, iframe, svg

• Interactive content: a, button, label (これらはネストできない)

5

これに伴い，以下の要素について変更がある．address, headの object, bodyの linkと meta, noscript, table,

thead, tbody, tfoot, tr, ol, ul, dl, table, caption, th, a, ins, del, object, map, fieldset.

1.6 APIs

1.6.1 新しい API

• video, audioの再生制御 API

• formの制約条件をチェックする API

• オフラインWebアプリ (application cache) API◆

• Webアプリケーションをプロトコルに登録する API

• 編集用 API (contenteditable属性と共に利用)◆

• ドキュメント URI取得 API，navigateや redirectの API

• 履歴を参照したり追加したりする API◆

• base64変換

• タイマーコールバック API

• ユーザの入力を促す API

• ドキュメント印刷 API

• 検索プロバイダを扱う API

• Windowオブジェクトが定義された

HTML5ではないがWHATWGが定義する APIには以下がある．

• microdata

• ビットマップグラフィクス (canvasの 2d)

• クロスドキュメントのメッセージ (PostMessage(), MessageChannel)

• バックグラウンドでのスクリプト実行 (Worker, SharedWorker)

• クライアントサイドのストレージ (localStorage, sessionStorage)

• 双方向通信 (WebSocket)

• サーバからクライアントへのプッシュ (EventSource)

1.6.2 変更された API

• document.title: 略

• document.domainが代入可能になった (ドメイン制約を緩められる)

• document.open(): 略

• document.close(), document.write(), document.writeln(): 利用推奨しない．

• document.getElementsByName()は nameがマッチした HTML要素全体を返す

• HTMLFormElementの elements: 略

6

• HTMLSelectElementの add(), remove(): 略

• aと area要素: 略

• click(), focus(), blur(): すべての HTML要素で使える

1.6.3 Documentの拡張

以下については，HTMLDocumentインタフェースから Documentインタフェースに移した．すべてのドキュ

メントが Documentインタフェースを利用しているので，すべてから利用可能になる．

• location, lastModified, readyState

• dir, head, embeds, plugins, scripts, commands

• activeElement, hasFocus

• designMode, execCommand(), queryCommandEnabled(), queryCommandIndeterm(), queryCommand-

State(), queryCommandSupported(), queryCommandValue()

• すべてのイベントハンドラーの IDL属性

なお，window.HTMLDocument は Document インタフェースのオブジェクトを返すようになったので，

HTMLDocumentを使っていた既存スクプリトは動作する．

1.6.4 HTMLElementの拡張

HTMLElementも拡張された．

• translate, hidden, tabIndex, dropzone, contentEditable, spellcheck, style: コンテンツの属性を表す

• dataset: data-*属性を扱うための機能

• click(), focus(), blur(): click, focus, blurをシミュレートできる

• accessKeyLabel: ショートカット

• isContentEditable: 要素がエディット可能か

• forceSpellCheck(): スペルチェック

• すべてのイベントハンドラーの IDL属性

幾つかのメンバーは，HTMLElementから Elementに移した．(id, className, classListなど)

1.6.5 その他の拡張

いろんなインタフェースがいろいろ拡張された．メンバーの追加が多い．HTMLIFrameElement に con-

tentWindowメンバーが追加されたなど．また，制約条件チェック API関係も多い．(省略)

1.7 Changelogs

省略 (興味のある人は読んでみて下さい)

例えば，globalでの thisが，今まではWindow オブジェクトだったが，HTML5 ではWindowProxyオブジェ

クトになった．

7

2 HTML5

HTML5 A vocabulary and associated APIs for HTML and XHTML, W3C Recommendation 28 October

2014 の目次

(RecommendationとはW3Cの標準化の最終段階なので，これで確定したいということ．)

なお，目次だけは最新だが，本文の記述は更新してない部分が多い．必ず http://www.w3.org/TR/html5/ な

らびにWHATWGの Living Standard (https://html.spec.whatwg.org/multipage/) を参照のこと．

Table of Contents1 Introduction1.1 Background1.2 Audience1.3 Scope1.4 History1.5 Design notes1.6 HTML vs XHTML1.7 Structure of this specification1.8 Privacy concerns1.9 A quick introduction to HTML1.10 Conformance requirements for authors1.11 Suggested reading2 Common infrastructure2.1 Terminology2.2 Conformance requirements2.3 Case-sensitivity and string comparison2.4 Common microsyntaxes2.5 URLs2.6 Fetching resources◆2.7 Common DOM interfaces2.8 Namespaces3 Semantics, structure, and APIs of HTML documents3.1 Documents3.2 Elements4 The elements of HTML4.1 The root element4.2 Document metadata4.3 Sections4.4 Grouping content4.5 Text-level semantics4.6 Edits4.7 Embedded content4.8 Links4.9 Tabular data4.10 Forms◆4.11 Scripting4.12 Common idioms without dedicated elements4.13 Disabled elements4.14 Matching HTML elements using selectors5 Loading Web pages5.1 Browsing contexts◆5.2 The Window object5.3 Origin5.4 Sandboxing5.5 Session history and navigation◆5.6 Browsing the Web5.7 Offline Web applications◆6 Web application APIs◆6.1 Scripting6.2 Base64 utility methods6.3 Dynamic markup insertion6.4 Timers6.5 User prompts6.6 System state and capabilities7 User interaction◆7.1 The hidden attribute7.2 Inert subtrees

8

7.3 Activation7.4 Focus7.5 Assigning keyboard shortcuts7.6 Editing8 The HTML syntax8.1 Writing HTML documents8.2 Parsing HTML documents8.3 Serializing HTML fragments8.4 Parsing HTML fragments8.5 Named character references9 The XHTML syntax9.1 Writing XHTML documents9.2 Parsing XHTML documents9.3 Serializing XHTML fragments9.4 Parsing XHTML fragments10 Rendering10.1 Introduction10.2 The CSS user agent style sheet and presentational hints10.3 Non-replaced elements10.4 Replaced elements10.5 Bindings10.6 Frames and framesets10.7 Interactive media10.8 Print media10.9 Unstyled XML documents11 Obsolete features11.1 Obsolete but conforming features11.2 Non-conforming features11.3 Requirements for implementations12 IANA considerations12.1 text/html12.2 multipart/x-mixed-replace12.3 application/xhtml+xml12.4 application/x-www-form-urlencoded12.5 text/cache-manifest12.6 web+ scheme prefix

3 Common infrastructure

3.1 Terminology (2.1節)

HTML属性 (attribute)，XML属性，IDL属性はしばしば同じ意味で用いられる．

コンテンツ属性とは，HTML属性と XML属性のことを指す．IDL属性は，IDLインタフェースで定義される

属性を指す．「プロパティ」は，JavaScriptオブジェクトのプロパティと CSSのプロパティの両方を指す．

3.2 Fetching resources (2.6節)

これは後述．

3.3 Common DOM interfaces (2.7節)

data-foo-barという HTML属性は，element.dataset.fooBarという名前の IDL属性になる．（datasetという

名前は固定で，fooBarが変わる部分．）

Transferableオブジェクトとは，オブジェクトをコピーし，コピー元のそれは使えなくすること．つまり，所

有権を移転できる．

4 Forms (HTML5 4.10節)

【ソースコード→ form.html】

9

• input, select, textarea, button要素の autofocus属性を追加．

ページが表示されたらすぐにその autofocusされた要素への入力が可能な状態にする

• input,output,select,textarea,butto,fieldset要素に form属性を追加．

その要素がどの form要素に対応するかを明示するための属性

• input要素に autocomplete, min, max, pattern,step属性を追加．

autocomplete: onのときはブラウザが過去の入力を使って勝手に初期入力をしてもよい．

min, max, step: 最小値，最大値，最小単位の指定

pattern: 入力が従うべき正規表現

valueAsDate: 入力が日付でなければならない

valueAsNumber: 上に同じく数値

formaction, formmethod 等を追加．action と method は，form 全体で共通だった．formaction と

formmethodを使うと，ある buttonだけ違う action/methodといった指定が可能．

コントロールタイプとして，email, url, datetime, data...などが増えた

【→ form.html】

5 canvas要素

これは第 4回で説明した通り．【→ 04 js dom/canvas.html】

なお，Canvasに 2次元の絵を描くための API Canvas 2D APIは，HTML5の一部ではない．

6 Video&Audio

• これまでの方法は NPAPI/ActiveX等

• HTML5からはブラウザがもっている

• ただし，コンテナやコーデックはブラウザごとにばらばら• JSから操作したり JSにイベントをあげたりもできる

例:

<video src="myvideo.mov"></video>

7 ドキュメントの構造化

以下のような要素を使って，ドキュメントの構造的な意味を与えることができる．

section, article, aside, header, footer, nav, figure, figcaption address, time+pubdate

8 Scripting (HTML5 4.11節)

script要素で，scriptの動かし方が増えた．

<script src="～.js"></script>

<script src="～.js" defer></script>

<script src="～.js" async></script>

上から順に，一旦ページのパースを停止して実行，ページをパースし終わってから実行，いつでも実行可能なとき

に (パース等と関係なく)非同期に実行．

script禁止の時だけ意味をもつ noscript要素が加わった．

10

template要素が新たに入った (23章)．

9 style要素

scope属性を使うと，サブツリーに対してのみ有効なスタイルを定義できる．下の例だと，article (とその子供)

に対してのスタイルが定義される．

例:

<article>

<style scoped>

div { margin: 1em auto; position: relative; width: 400px; height: 300px;}

～

</style>

<div>

～

</div>

</article>

10 Drag and Drop (HTML5 7.7節)

● Drag and Dropは，2014年 9月に Proposed Recommendationになる時に，削除された模様．【ソースコー

ド→ dnd.html】

11 contenteditable属性 (HTML5 7.6節)

【ソースコード→ richtext.html】

contenteditable="true"

contenteditable="false"

contenteditable

contenteditable 属性はすべての要素に指定できる．値を指定しないとその上の要素の contenteditable を

inheritする．ページ全体を指定するときは，ドキュメントに対して designModeを (JSから) 指定する．

execCommand()という関数を使うと，現在の選択領域や現在のカーソル位置に対して編集コマンドを実行でき

る．編集コマンドはかなりたくさんあるが，例えば insertText, delete, redo, undoなどなど．編集した結果を取

り出したければ，innerHTMLなどを使う．

Editing APIは別に議論されている模様．https://w3c.github.io/editing/

12 iframe要素 (HTML5 4.7.2節，5.4節も関連)

sandbox属性が加わった．

<iframe sandbox="値1 値2 ...">

sandboxを付けると，そのコンテンツは完全に孤立したオリジンと見なされる．iframeの中と外は一切通信で

きなくなり，その中では，プラグイン，JavaScript，formの submitができない．

値i に以下のオプションを使うことで，個別に許可できる．

• allow-forms: formの発行の許可

11

• allow-pointer-lock: マウスの Pointer Lockを許可

• allow-popups: ポップアップの許可

• allow-same-origin: 孤立したオリジンとはしないための指定．2つのケースがある:

同じオリジンで指定した時: script だけをサンドボックス化して，その DOM へはアクセスしたい時に使

う．

別のオリジンに対して指定した時: 元のオリジンへの通信を許可しつつも，ポップアップなどを禁止したい

時に使う．

• allow-top-navigation: top-level browsing contextへの navigateだけは許可する

• allow-scripts: スクリプトの実行の許可

13 セッションヒストリ (HTML5 5.5節)

browsing contextにおける documentの列を session historyと呼ぶ．これは window.historyで得ることがで

きる．

historyの今の entryと forwardの間に state objectを挿入できる．戻ろうとしたときに，state objectのスク

リプトが起動される．

window.history.go(delta) → 任意数のページを戻った先送りしたり．(forward()/back()もある)

window.history.pushState(data, title [, url]) → data を state object として session history にプッ

シュする．state objectの TITLEが titleになり，URLが urlになる．(この urlは，今の scriptと same origin

でなければ駄目．)

後で history を traverse (forward や backward) して，そのページのエントリに戻って来たときに，popstate

というイベントが発行される．そのイベントの state属性に pushStateの第一引数の dataが入って来る．(この

値は，window.history.stateにも入る．)

従って，プログラムの骨格は次のような感じになる．

window.addEventListener("popstate",

function(event){

var myState = event.state;

restore_state(myState); // これは自分で定義した関数

}, false);

myState = ～;

newURL = ～;

window.history.pushState(myState, "title", newURL);

newURLに状態をエンコーディングして入れておくなら，pushStateの第一引数は不要である．(urlを再パー

スする必要がないので第 1 引数を使った方が少し速いという違いはある．) しかし，今だけのWeb アプリケー

ションの状態を取っておくときなどは，第 1引数を使う (べきである)．

なお，stateを入れ換えるメソッド replaceStateもある．

state objectが挿入されたページが discardされる時は，state objectは破棄される．一方，fragment idの形で

状態をエンコーディングした URLをもっている entryは削除されない．これがたぶん state objectと fragment

idでやる方法の一番の違い．

Locationインタフェース:

window.location.href → 現在のページの URL

window.location.assign(url) → その urlへ navigateする．

12

location.reload() → 再ロード

等々

14 Offline Web applications (HTML5 5.7)

【第 10回の図 Offline Web Applications 参照】

【ソースコード→ ofl/】

ただし，LANケーブルを抜いたり，無線 LANを切ったりしないと実験できない．

httpキャッシュと何が違うか．

• そもそも httpのキャッシュは HTML定義の外の話

• 一回もフェッチしたことないリソースも，manifestに書いてあれば取ってくる．

• fallback機能

• 複数リソースの一部だけ捨てられたりしない．consistentに管理される．

14.1 manifestの書き方

オフラインにしたいWeb アプリ側で自分の manifest を指定しなければならない．このためには，そのWeb

ページ内に次のように書く．

<html manifest="～.appcache">

manifestの例:

CACHE MANIFEST # 必ずこの行が必要

CACHE: # CACHEセクション開始．ただしこの行は省略可．

images/sound-icon.png

images/background.png

NETWORK: # NETWORKセクション開始

comm.cgi

CACHE: # CACHEセクションの続き

style/default.css

FALLBACK: # FALLBACKセクション開始

images/big1.png images/noimg.png



一行目は以降は，セクションヘッダ名とそのセクションの指定（複数行）の繰返しである．セクションヘッダに

は，CACHE:，NETWORK:，FALLBACK:，SETTINGS:がある．

CACHEはキャッシュしたいリソース指定，NETWORKはキャッシュしたくないリソース指定，FALLBACK

はオフライン時の代替リソース指定（上の例だと左の画像はキャッシュせず，右の画像を代わりに使う）である．

SETTINGSに次のように書くと，オンライン時にはキャッシュを利用しないように指定できる．

SETTINGS:

prefer-online

13

14.2 サーバーの準備

ブラウザは，manifestかどうかをヘッダのMIMEタイプで判断する．このため/etc/mime.typesに，

text/cache-manifest appcache

という行を追加する．appcache拡張子のコンテンツを送信するとき，text/cache-manifestというMIMEヘッ

ダを付けてくれる．(ただし，一部のブラウザではこれをやらなくても大丈夫かも．)

14.3 動作の概要

オフラインを実現するために，ブラウザの動作の様々な個所が修正されている．HTML5の仕様書にはこれが

正確に記述されており，本稿でも次節でこれを説明する．ただし，全体像が余りにもわかりにくいため，まず概要

を述べる．次節と照らし合わせながら読むとよい．

まず，キャッシュも何もない状態で，hyperlink をクリックしてあるページを見ようとしたとする．すると，

top-level bcに navigateされる．ページに navigateした時の動作が Navigating across documents (5.6.1) であ

る．そのステップ 14において，appropriate application cache (があればそこ) からリソースを得る．ここでは，

application cacheを利用するだけであり，manifestのチェックなどはまだしない．

上記で cache がない時は，リソースをフェッチする．リソースのフェッチについては，Fetching resources

(2.6) に定義されている．ただし，この一部はオフライン対応するために修正されており，browsing context に

application cache が関連付けられているときは，changes to the networking model (5.7.6) に書かれた動作と

なる．

今はまだ関連付けられていないので，普通に fetch して 5.6.1 に戻る．そのステップ 23 で text/html の処理

を行う．この場合，Parsing HTML document (8.2) に行く．ここで<html manifest=URL> を検出 (8.2.5.4.2)

し，application cache selection algorithm (5.7.5) を実行する．これによって，browsing contextが application

cacheに関連付けられる．

関連付けがなされた以降に fetch した場合は，5.7.6 に記述されたステップを実行することになる．つまり，

キャッシュに入っている場合は，そっちからもってくるようになる．

15 Microdata

http://www.w3.org/TR/microdata/ (29 Oct. 2013)

https://html.spec.whatwg.org/multipage/#toc-microdata

Microdata を用いると，より深い意味を与えることができる

メモ: 対立 (?)する提案として RDFaがある (http://www.w3.org/TR/rdfa-core/)．

例:

<div itemscope>

<p>My name is <span itemprop="name">Elizabeth</span>.</p>

I was born on <time itemprop="birthday" datetime="2009-05-10">May 10th 2009</time>.

</div>

これは

My name is Elizabeth.

I was born on May 10th 2009.

14

と表示されるだけ．しかし，同時に name属性が”Elizabeth”で，birthday属性が”2009-05-10”のデータを定義し

ている．

itemscope属性は microdataを作成する．この時，そのデータの種別 (item type) をユニークに指定したい場

合は，itemtype属性を指定する．itemtypeは (1つ以上の) URLで指定する．例:

<div itemscope itemtype="http://microformats.org/profile/hcard">

幾つかの URLについては既に定義されており，例えば上の例では，有名な vCard というデータフォーマット

を microdataで定義している．これが参照している，microformat.orgは，元々 microformatというのを定義

しようとしていたグループのサイト．microdataとの関係はよく分からない．

DOM APIでアクセスできる．

例:

document.getItems(itemtype名)

を実行すると，その itemtype の microdata のリストを得ることができる．その値を見るには，itemValue() を

使う．

microdataの利用方法としては，検索エンジンが利用するのがメインだろう．外からロードした JSライブラリ

が利用するというパターンもあるかもしれない．

16 Web Messaging

【第 10回の図 Cross-document messaging 参照】

http://www.w3.org/TR/webmessaging/ (19 May 2015)

https://html.spec.whatwg.org/multipage/comms.html

ウィンドウ間通信，worker間通信 (Web Workers)，サーバー (Server-Sent Event)との通信は，すべて同一の

APIで書ける．

メッセージの受信

window.addEventListener("message", listener_fn, false);

でリスナー listener_fnを張り付けておく．(第 3引数については javascript.texを参照)

same origin policyの制約は受けないので，受け取ってよい originかのチェックは次のように自分でやる．

function listener_fn(event){

if (event.origin == "http://hogehoge") {

...

}

}

メッセージの送信 (特にクロスドキュメント)

var iframe = document.getElementById(IFrameId);

iframe.contentWindow.postMessage(MESSAGE，TARGET_ORIGIN);

MESSAGE には JS のオブジェクトを書ける．TARGET ORIGIN には，送り先 (上の例では iframe) の

Windowオブジェクトと same originの URLを書くか，”*”と書く．(TARGET ORIGINは，確認のため?)

15

channel message

上の方法では，(messageという)イベントは一つしかないので，複数の通信相手が混在した複雑なコードは書

きにくい．直接通信するには channelを使う．

通信路一つに対して channelを張って，channelの出口 (ポート) にリスナーを張り付けておくような形でプロ

グラミングする．これを実現するためには，ポートを相手に渡すことが必要だが，これには postMessageの第 3

引数を使う．(以降は省略．興味がある人は自分で．)

17 Web Sockets

【→ websocket/server.js, client.html】

http://www.w3.org/TR/websockets/ (20 Sep. 2012)


上記はブラウザの APIの仕様である．プロトコルは IETF．

Web Socketの作成

var ws = new WebSocket(URL[, PROTOCOLS]);

ただし，URLは，”ws://～” または ”wss://～”．wssは secure web socketのこと．また，URLは origin以

外でも良い．

送信

var result = ws.send(メッセージ);

メッセージは文字列の他に，Blob，ArrayBuffer，ArrayBufferViewオブジェクトも送れる (ArrayBufferView

は，ArrayBuffer内のバイト列を自由に語長を変えて参照できる)．

受信

ws.addEventListener("message",

function(ev){console.log(ev.data);},

false);

ev.originで送信者のオリジンが分かるので，ちゃんとチェックする．なお，”message”イベントの他に，”open”

や”close”のイベントがある．

プロトコル

websocketは httpの上に乗せているのではなく，新しいプロトコルである．このため IETFで標準化している

(RFC 6455)．

httpから websocketによる通信に移ることを upgradeと呼ぶ．upgradeするには，クライアントから次のよう

なメッセージを送ることでハンドシェークを開始する．(これは当然 HTTPに従っている．)

GET /chat HTTP/1.1

Host: server.example.com

Upgrade: websocket

16

Connection: Upgrade

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

Origin: http://example.com

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Version: 13

^n:ds[4U

サーバーは次のようなメッセージを返す．

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

Sec-WebSocket-Protocol: chat

8jKS’y:G*Co,Wxa-

これによりハンドシェークが確立し，データ通信が始まる．この通信は双方向で，いつでも自由にデータを送れ

る．(ここが httpとの一番の違い．)

実際は，データをただ送るのではなく，フレーム構造が定義されている．これによって，blobやArrayBufferView

などが送れるようになっている．

HTTP ではないので，WebSocket のサーバ側にも変更が必要．Apache の場合は，mod pywebsocket を入れ

て，Pythonで記述する．または，Node.jsや JettyなどのWebサーバを使う方法もある．

WebSocketのクローズは，Closeフレームを互いに交換した後で，TCPを閉じる．

18 Server-Sent Events

【第 10回の図 Server-Sent event 参照】

【ソースコード→ sse/】

http://www.w3.org/TR/eventsource/ (03 Feb. 2015)


サーバから UAにイベントを送ることができる．普通は，UAがリクエストを出してサーバーがレスポンスす

るだけなのに注意．サーバから送る方法は HTML4まではなかった (従来は Comet技法などを使っていた)．

作成

まずクライアント側で以下を実行する．

var evs = new EventSource(URL);

ここで URLは，CORS可能な url，またはスクリプトと same originな urlである．多くの場合は，”xxx.cgi”な

どと書くはず．これにより，クライアントとサーバーの間にストリームが張られる．

イベント受信

evs.addEventListener("message",

function(ev){console.log(ev.data);},

17

false);

この後でサーバーからクライアントに対して，イベントが送られると，クライアントはこれを messageイベント

として受け取り処理する．

個々のイベントにはイベント IDが付与されるので，イベントの重複や抜けを検知しての処理も可能である．

messageイベントオブジェクトの各属性は次の通り．

• data属性: イベントのデータ

• origin属性: サーバのオリジン

• lastEventId属性: イベント ID

なお，サーバ側で event名を指定すれば，message以外のイベントを生成することも可能である．

サーバー側のプログラム (CGI等) を書くには，ブラウザ APIだけでなく，プロトコルを理解する必要がある

ため，次に簡単に説明する．

プロトコル

EventSourceオブジェクト内では，reconnection timeと last event IDが保持される．ここで，last event ID

は最初は空文字列．EventSourceの引数で指定された URLに対して http GETを送るとき，last event IDが空

でないときは，その値を Last-Event-IDヘッダに入れて送る．

リソース取得が，通常の close (山崎注: サーバーは一定時間通信のない http コネクションをクローズすること

がある) や予期せぬ closeで完了したら，reconnection time経過後に接続を再確立する．

ストリームは UTF-8で送る．MIMEタイプは，”text/event-stream”である．一行が一つの単位であり，次の

ような形をしている．

フィールド:値

なお，コロン無しのときは値は””．コロンで開始する行はコメント．フィールドは，以下のどれかで，それ以外

は無視．

event: 値 → event名を値にセット

data: 値 → データバッファに値をアぺンド

id: 値 → 値を last event IDとしてセットする

retry: 値 → 値を 10進数と解釈して，reconnection timeにセット

空行 → イベントをディスパッチする．

:任意文字 → コメント (コネクションの自動切断防止に使う)

【→ sse/sse.c, sse/sse.html】

sse.cは，sse.cgiとしてコンパイルする．sse.cgiが終了すると，httpがクローズされるので，一定期間後にまた

sse.cgi が再オープンされる．cgi側で Last-Event-IDを見れば，続きができる．

getenv("HTTP_LAST_EVENT_ID")

で参照できる．

WebSocketと Server-Sent Eventとの違い

• SSEは http．(wsも 80番ポートだが httpでないので通らない可能性あり)

• SSEはサーバがイベントを一方的に送ってくる．

• SSEはコネクション切断時の再開 (Event IDの再送信を含め) まで UAがやってくれる．

• WebSocketは双方向．任意のデータが送れる．

18

• WebSocketは UAでなくプログラマが苦労する．

19 Web Workers

【ソースコード→ worker.html, worker.js】

http://www.w3.org/TR/workers/ (24 Sept. 2015)

https://html.spec.whatwg.org/multipage/workers.html

Web workesを使うと，バックグラウンドでの処理ができる．親と子の間はメッセージで通信する．ただし，子

からは DOMは見えず，純粋な計算処理だけしかできない．

ワーカの作り方

var worker = new Worker("worker.js");

Workerの引数の URLは same originでないといけない．

ワーカとの通信 (親→子)

子 (worker.js): addEventListener("message", 関数, false);

親: worker.postMessage(メッセージ);

ワーカとの通信 (子→親)

親: worker.addEventListener("message", 関数, false);

子 (worker.js): postMessage(メッセージ);

子のグローバルスコープは，dedicatedWorkerGlobalScopeインタフェースをもつオブジェクトである (window

オブジェクトではない)．上の postMessageもそのインタフェースに対して定義されている．

(same originの) 複数のコードが一つの workerを共有して利用できる shared workerもある．

20 Service Workers

http://www.w3.org/TR/service-workers/ (25 June 2015)

AppCacheは失敗（と言われているらしい）．ブラウザ側で処理することが多くて，それから外れたことができ

ない．プッシュ通信もできない．Service Workerはこの反省から，できるだけ低レベルにして，道具だけを提供

するという考え方．

Service Workerとは，Web Workerの一つ．ただし，一旦登録すると，ブラウザが動いている限りは，バック

グランドで動き続ける．（DOMに触れないのは全Worker共通．）次のようにして，service workerをスクリプト

URLとスコープ URLに対して登録する．なお，httpsでないと登録できない．（以下も，実験済みのコードでは

ない．）

例:

navigator.serviceWorker.register(’sw.js’, {scope: "/"}).then(

function(reg){ console.log("registered"+reg);},

function(err) {console.log("failed"+err); }

);

19

sw.jsの方は次のように書く．

this.addEventListener("install", function(e){...});

this.addEventListener("activate", function(e){...});

this.addEventListener("fetch", function(e){...});

this.addEventListener("message", function(e){...});

このように登録しておくと，このサイトのうち scope（つまり”/”）で始まるページをフェッチした時に，fetch

イベントが発生する．scopeが違えば，同じオリジンに複数の worker登録が可能．

Cache APIを使うと，コンテンツをキャッシュできる．ただし，キャッシュの中を探したり，キャッシュを更

新したりするのも，全部プログラムでやる．

関連する機能として，以下がある．

• HTTP Push，https://tools.ietf.org/html/draft-ietf-webpush-protocol-01

• Push API，http://www.w3.org/TR/push-api/ (27 Apr. 2015)

• Notifications API, https://notifications.spec.whatwg.org/

HTTP Pushは，HTTP/2の server push機能を使って，プッシュ通信を行うプロトコル．Publish-Subscribe

型のスキームを提供する．

Push API は HTTP Push の上に定義された API．Service Worker に対して，インタフェースを追加してい

る．pushManager.subscribe()メソッドで subscriptionを登録する．プッシュメッセージが来ると，promiseが

実行される．

Notificationsは利用者に通知するための APIの規定．Webブラウザを最小化していても，利用者に通知をす

ることを可能とする．どのような通知するかはブラウザの実装依存，OS にも依存．例えば，タスクバーを使う

などが考えられる．そのような通知を登録したり，解除したりするための API がある．Service Worker の中で

notificationを表示するための showNotification()メソッドなど．

21 Web Storage

http://www.w3.org/TR/webstorage/ (09 Jun. 2015)

https://html.spec.whatwg.org/multipage/webstorage.html

UAにデータを保存する方法は，これまでクッキーしかなかった．HTML5では，2つの方法が増えた．session

storageと local storageである．クッキーは毎回全データを送るのに対して，session/local storageは送らない．

このため，巨大なデータを保存できる．

クッキーはサイトに対しての保存データなので，例えば，同じサイトを同時にアクセスして違う飛行機チケット

を買うことはできない．チケット購入手続き中に保存したクッキーが互いに見えてしまうので，同じチケットを 2

枚買ったり，エラーになったりする．session storageはセッションごとに分かれたデータなので，このような混

乱は生じない．

session storage は，top-level browsing context (以下 tlbc) に対して存在するストレージ．個々の tlbc は，

session storageの集合をもつ．個々の session storageは origin毎に作られる．tlbcが終わると，session storage

も捨てられる．

cloningや，スクリプトや，利用者がリンクを辿ったことにより，ある tlbcから新たに tlbcが作られると，そ

の originの session storageがコピーされる．ただし，その後の修正に対しては独立した storageとなり，枝分か

れしたようになる．tlbcが破壊されるとき，session storageも破壊される．

local storageは，originごとに作られ，自動的に消されることはない． tlbc とは関係ないので，例えば iframe

中で作れば，その originで作られる．(クッキーと同じように) そのような 3rd-party local storageを UAは禁止

するようにしても良い．

20

session storageには sessionStorage属性で，local storageには localStorage属性でアクセスできる．

従って，session storageを使った例は次のようになる．

sessionStorage.setItem("key", "value"); // データの保存

var x = sessionStorage.getItem("key"); // データの取り出し

sessionStorage.removeItem("key"); // データの削除

storageが書き換わった時 (setItemや removeItem) にはイベントが発行されるので，これを利用することもで

きる．

22 Indexed Database

http://www.w3.org/TR/IndexedDB/ (08-Jan-2015)

これはWHATWGでなく，W3CのWebApps WGのみで議論されている．

【ソースコード→ indexdb.html】

Originごとに複数のデータベースをもてる．origin内でデータベースは，名前で識別される．各データベース

はバージョン番号をもつ．(バージョン番号が変えられるのは，versionchangeトランザクションだけである．) 一

つのデータベースは，複数の接続 (connection) をもてる．

データベースとは，object storeの集合である．この集合を変更できるのは，versionchangeトランザクション

だけである (このトランザクションは，upgradeneeded イベントの結果，実行される)．object store とは，key

value pair (= record) のリストである．リストは keyで昇順にソートされている．object store は名前で識別さ

れる．

keyは，Number, String, Date, Arrayでなければならない．(Array同士の大小関係は，0番目の要素から比較

して行って，最初に異なった値の大小関係で決まる．)

key rangeオブジェクトは，キーの範囲を表す．lowerと upper属性で範囲を指定する．

cursorオブジェクトは，key rangeを使って範囲を指定したとき，その中の一つ一つの record を取り出すに使

う．このオブジェクトの advanceメソッドを呼ぶと，次の recordへと cursorを進めることができる．

key pathは文字列であり，”attribute1.attribute2.～” などのように書く．これは，オブジェクトの attribute1

のその attribute2の～という意味である．key pathは，keyの値を示す pathである．(key path が Arrayの場

合もあるが省略．)

indexオブジェクトは，普通とは逆に，object storeの中の recordを valueの属性によって探すためのものであ

る．indexは，参照 (referenced) object storeをもつ．参照 object storeが更新/削除等されると，すぐに index

に反映される．

参照 object store中のレコードが，キー Xと値 Aをもっていたとする．インデックスの key pathを Aに対し

て実行した結果が Yだったとする．すると，インデックスのレコードは，キーが Yで値が Xである．つまり，中

身の値 Yからそのキー X を求めたことになる．

この場合の値 Aのことを参照値 (referenced value)と呼ぶ．(X経由で参照 object storeを間接参照し，参照値

を得る．参照値がそのまま indexに入るわけではない．)

例: ある indexの参照オブジェクトストアが，キー 123，値{first: "Alice", last:"Smith"}というレコー

ドをもっていたとする．また，indexの key pathが”first”だったとする．この indexは，keyが”Alice”で，値が

123というレコードをもつことになる．

transactionは，databaseの読み書きをするために必須のものである．transactionは，connectionを通して作

成され，対象となる (複数の) object storeをもつ．これを scopeという．

transactionには abortメソッドはあるが，commitはない．transactionが activeでなくなった時に，自動的

に commitされる．通常は，すべてのリクエストが実行完了し，新たなリクエストがなくなった時に activeで無

くなる．

21

transactionには，readonlyと readwriteと versionchangeの 3種類がある．前 2者は transactionメソッドで

作る．versionchangeのみが，object storeや indexの追加削除ができる．upgradeneededイベントの結果として

自動的に作られるものであり，それ以外の方法では作れない．

APIは，すべて非同期動作である．

主な API:

●データベースのオープン:

WindowとWorkerUtilsインタフェースは，IDBEnvironmentインタフェースを実装する．IDBEnvironment

は，indexedDBという名前の属性をもつ (インタフェースは IDBFactory)．IDBFactoryの openメソッドを呼

ぶことで，データベースを作成する．引数はデータベース名．例を参照．(openの第 2引数でバージョンを指定

できる．新しいバージョンを指定すると，versionchangeイベントが起きる．データベースの構成を変更できるの

は，このイベントの中でだけ．)

● Databaseオブジェクト

メソッド close(): クローズする

メソッド createObjectStore(OS名): OS名の objectstoreを作成して戻す．これは versionchangeトランザク

ション中でのみ実行できる．

メソッド transaction(OS名): トランザクションを非同期で作成する．

● Object Storeオブジェクト

メソッド createIndex(Index 名, keyPath): Index 名のインデックスを作成する．versionchange トランザク

ションの中でのみ実行可能．

メソッド delete(キー): recordを削除する．

メソッド get(キー): OSから値を得る (キーは省略可能)．

メソッド put(値，キー): recordを OSに追加する (キーは省略可)．

● indexオブジェクト: 省略

● cursorオブジェクト: 省略

● transactionオブジェクト:

メソッド abort(): トランザクションを中止する

注意: commitというメソッドはない．

例は，indexdb.htmlを参照．

メモ: firefoxの indexedDBは，以下にある．これを削除すればよい．

C:\users\XXXX\AppData\Roaming\Mozilla\Firefox\Profiles\YYYY.default\indexedDB

23 Web Components

http://www.w3.org/TR/components-intro/ (24 July 2014)

http://www.w3.org/TR/custom-elements/ (16 Dec. 2014)

http://www.w3.org/TR/html-imports/ (11 Mar 2014)

http://www.w3.org/TR/shadow-dom/ (06 Oct 2015)

http://www.w3.org/wiki/WebComponents/ 今は，こちららしい．

Web ComponentsはWebApps WGで議論されている．まだ議論の真最中であり，昨年と比べても大きく仕様

が変わっている．ただこの考え方は，必ず入ると思われるので，簡単に紹介する．

HTMLで繰返し同じパターンが出てくることがある．HTMLの記述を再利用したい．実は，これは既存の JS

ライブラリを使えば可能 (例えば dojo toolkitにもそのような機能がある)．複雑な HTMLのパターンにマクロ

のように独自の名前を付けることができ，後はこの名前を使えば記述を大幅に簡略化できる．しかし，実行時にマ

クロは本当の DOMに展開されてしまうから，HTMLの記述と JSから見えるデータ構造がまったく別物になっ

22

てしまう．これを何とかしたい．

Web Componentsというのは概念で，実際は 3つの要素から構成される．

• Custom Elements: 自分独自の要素を定義する

• Shadow DOM: DOMの部分木をカプセル化する

• HTML Imports: 上記をパッケージ化する

この 3 つの機能は互いにまったく関係ない．それぞれが別個に議論中である．更にこの 3 つに加えて，html5

の template要素を使うことで，Web Componentsが使えるようになる．

Template要素 (HTML5 4.11.3節)

例:

<template id="mytemp">

<div>

sample

</div>

</template>

templateは表示されない．表示せずに DOMだけを作成できる．もちろん，スクリプトで操作しなければ意味

がない．例:

var temp = document.getElementById("mytemp");

var elem = temp.content.cloneNode(true);

document.body.appendChild(elem);

content属性で templateの中身（div）を取り出している．そのまま appendChildしても，何も表示されない

のが templateの元々の仕様なので，何も表示されない．

Custom Elements

Custom elementsによって，オリジナルの要素を定義することができる．custom elementを登録するには，次

のようにする:

document.registerElement(’x-foo’, {

prototype: Object.create(HTMLParagraphElement.prototype, {

firstMember: {

get: function() { return "foo"; },

enumerable: true,

configurable: true

},

// specify more members for your prototype.

// ...

}),

extends: ’p’

});

23

この例では，x-fooという名前の custom elementを登録している．(なお，この名前にはハイフンを含まなけ

ればならない．今後新規に追加される html要素と名前が衝突するのを避けるためである．)

prototypeは，オブジェクトに対するメソッドの委譲先の指示である（つまり，普通の JavaScriptのプロトタ

イプの指定）．

extendsを書かなければ，x-fooという新タグを定義することになる．つまり，

<x-foo>Sample</x-foo>

のように書けるようになる．上の例のように extendsを書いた場合は，既存の要素名 (この場合は”p”) に対する

拡張となる．この場合は，

<p is="x-foo">Paragraph of amazement</p>

このように，isを使って custom elementの名前を指定する．custom elementの機能がないブラウザでは無視さ

れるので，ただの p要素となる．（isは，新設の属性．）

上記は，既に htmlにある要素 (上の例では p) を拡張した例だが，まったく新たにオリジナルの要素を作成し，

<original-element>

～

</original-element>

などのようにすることもできる．

custom elementでは，様々なタイミングで callbackが呼ばれるが省略する．

なお custom elementsは，まだ一部のブラウザでしか実行できない．

Shadow DOM

custom elementsを使うと，オリジナルの要素を作成できるが，DOMとしては置き換えられてしまう．DOM

の内部構造も含めて，オリジナルの定義をするには，Shadow DOMを利用する．

DOMは木構造のデータで，その根は documentである．DOMはそのまま表示にも使われるので，JavaScript

で DOM を操作すると直ちに表示が変わる．Shadow DOM を使うとデータ構造としての DOM の裏に表示用

のデータ構造をもつことができる．表の DOMを document treeと呼び，表示用の DOMを composed tree と

呼ぶ．

document tree において，裏の DOM をもつノードを shadow host と呼ぶ．また，その裏の DOM のことを

shadow treeと呼ぶ．ある shadow hostは，shadow treeを複数もつことができる．

(http://www.w3.org/TR/shadow-dom/の Fig.1を参照．)

shadow hostを shadow treeで展開することで，document treeから composed treeを作成することができる．

(木の挿入方法や発生するイベントの定義などは省略する．)

shadow treeを作るには例えば次のようにする．

var e=document.getElementById("test");

var r = e.createShadowRoot();

r.appendChild(～);

要素 eに新たに shadow treeが追加される．その根である rに，appendChild等で要素を追加することで，shadow

treeを作成できる．

これだけだと，shadow treeと document treeは別の世界であり，いつも決まった shadow treeが表示される

だけである．shadow hostの子 (これは表の話) を引数のように shadow treeに渡し，shadow treeの中にその引

数を埋め込めれば，多様な表現が可能となる．(多様な，というか，それができなければオリジナルの要素定義と

24

は言えないが．)

これをするのが content 要素である．shadow tree の中のデータ埋め込み場所 (insertion point) を指定する．

(http://www.w3.org/TR/shadow-dom/ の Fig.3を参照．)

HTML Imports

link要素に，新たに importというリンクタイプが加わった．

<head>

<link rel="import" href="/imports/heart.html">|

</head>

基本的には same origin．CORS 対応していればクロスオリジンも可能．import してきた DOM は表示されな

い．次のようなプログラムで importした DOMにアクセスできる．

var link = document.querySelector(’link[rel=import]’);

var heart = link.import;

25

HTML5 - sic.shibaura-it.ac.jpyamaken/docs/nw09_html5.pdf · 1.1 html5 の目的 html5...

Documents

Transcript of HTML5 - sic.shibaura-it.ac.jpyamaken/docs/nw09_html5.pdf · 1.1 html5 の目的 html5...