IE9とHTML5(+ Open Web Platform)
2010-09-23 小山田 晃浩

HTML5への対応はFirefox、Opera、Webkit系の各ブラウザーで既に対応が始まっています。さらに、現在開発中のIE9でもHTML5のマークアップ、video、audio、canvas、DOM、CSS3の一部、SVG1.1など様々な技術へ対応が進められています。
IE9の登場はHTML5やその周辺技術を利用するうえでの重要なターニングポイントとなるでしょう。そこでIE9をベースにHTML5やその周辺技術について、コードを見ながら解説します。

CSS Nite in SHIZUOKA(おやまだ あきひろ)

小山田 晃浩(株)ピクセルグリッド
フロントエンドエンジニア

twitter@yomotsu

このセッションの流れ
1.

HTML5？

2.

IE9とHTML5

3.

IE9が新対応する主な技術

HTML5CSS3
SVG1.14.

IE6と疑似HTML55.

まとめIEのこと、好きじゃない人？

これから紹介するdemo

http://goo.gl/Q3MJHTML5ってなに?
 HTML4.01を拡張したHTML追加される要素型<article> <aside> <audio> <canvas><command> <datalist> <details><embed> <figcaption> <figure><footer> <header> <hgroup> <keygen><mark> <math> <meter> <nav><output> <progress> <rp> <rt><ruby> <section> <source><summary> <svg> <time> <track><video> <wbr>いろいろ強化 タグによる意味付けの強化<section><article><aside>など
 埋め込みオブジェクトの強化<audio><video><canvas><svg>など
 フォームの強化<input type="range">など

様々な技術の受け皿でもある

HTMLを取り巻く技術はとても多い

HTMLの周りにある様々な技術
CSS, SVG, WAI-ARIA, MathML,ECMAScript, 2D Context, WebGL, Device
API, Drop & Drag API, File API, Web
Storage, Indexed Database, Offline Web
Applications, Web Workers, Web Sockets
Protocol/API, Geolocation, Server-Sent
Events, Element Traversal, DOM Level 3
Events, Media Fragments,
XMLHttpRequest, Selectors API, CSSOM
View Module, Cross-Origin Resource
Sharing, File API, RDFa, Microdata, WOFF,HTTP …

どこまでやればいいの？

目安のひとつはIE9

各ブラウザーの技術対応度

各ブラウザーの技術対応度

各ブラウザーの技術対応度

各ブラウザーの技術対応度

Webkit, Firefox, Operaに続きIE9も新技術に対応

 他のブラウザにかなり近づいた すべて対応ではない
 安定している技術に対応

IE9は技術のベースラインとなる

IE9の技術対応度

ロゴが変わりましたね！

Test Drive

特に見た目に関する技術が多い

Internet Explorer 9 Beta
Guide for Developers

Internet Explorer 9 Beta
Guide for Developers

http://msdn.microsoft.com/enus/ie/ff468705.aspx

IE9で新たに対応する技術
 HTML5<video><audio><canvas>も CSS3

selector, background, border など
 SVG1.1

描画系、構造系、情報用の要素
 その他

IE9で新たに対応する技術
 HTML5<video><audio><canvas>も CSS3

selector, background, border など
 SVG1.1

描画系、構造系、情報用の要素
 その他
 (残念ながらAPI関連はまだ...。Silverlightに注力?)

IE9の範囲からHTML5を始めてみよう

IE9が新対応する技術
 HTML5 (Formsを除く)
 CSS3 (安定している一部)
 SVG1.1 (8割くらい)
 その他

HTML5:DOCTYPEとか

HTML5:
DOCTYPEとか<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">2. <html lang="ja">3.
<head>
4.
<meta http-equiv=“Content-Type“
content="text/html; charset=utf-8">
5.
<title>sample</title>
6.
</head>7.
<body>
8.
こんにちは世界9.
</body>10. </html>
1.

HTML5:
DOCTYPEとか
1. <!DOCTYPE html>
2. <html lang="ja">3.
<head>
4.
<meta charset="utf-8">
5.
<title>sample</title>
6.
</head>7.
<body>
8.
こんにちは世界9.
</body>10. </html>

HTML5:<audio>HTML5:<audio>

1. <audio controls="controls">
2.
<source src="***.mp3">
3.
<source src="***.ogg">
4. </audio>

HTML5:<video>HTML5:<video>

1. <video controls="controls"

width="720" height="406">2.
<source src="***.mp4">
3.
<source src="***.webm">
4. </video>

HTML5:<canvas>HTML5:<canvas>
1. <canvas width="600" height="600"></canvas>
1. document.querySelector('canvas').getContext('2d');…

HTML5:<canvas>

1. toDataURL()などはサポートしておらず全てではない。
2. WebGLはサポートしていない

HTML5:<svg>

HTML5:<svg>
1. <!DOCTYPE html>
2. <html>
3.
(snip)
4.
<body>
5.
<svg width="500" height="500">
6.
<path d="M475,…(snip)"/>7.
</svg>
8.
</body>9. </html>

CSS3:
Selectors

HTML5:Selectors

1. li:nth-child(2n){2.
background:#FC9;
3. }ほかにもE:root, E:nth-child(n), E:nth-last-child(n),E:nth-of-type(n), E:nth-last-of-type(n),E:last-child, E:first-of-type, E:last-oftype, E:only-child, E:only-of-type,
E:empty, E:target, E:enabled, E:disabled,
E:checked, E:indeterminate, E:not(s),E::selection

CSS3:
Values and Units (rem?, calc()…)

CSS3:
Values and Units (calc())

1. div.sample {2.
font-size:calc(1em * 2 - 10px);
3.
margin-top:calc(1em - 10px);
4. }CSS3:
Backgrounds(multiple-backgrounds, box-shadow…)

CSS3:
Backgrounds (multiple-backgrounds).block1{
background-image: url(bg_top.png),url(bg_bottom.png),url(bg_middle.png);2.
background-repeat: repeat-x,repeat-x,repeat-x;
3.
background-position: 0 0,0 100%,0 0;
4. }1.

CSS3:
Borders (border-radius)

CSS3:
Borders (border-radius)

1. div.sample {2.
border-radius: 30px;
3. }CSS3:
Fonts (@font-face,WOFF)CSS3:
Fonts (@font-face,WOFF)
1. @font-face {2.
font-family: 'MyFont';
3.
src: url(testfont.woff) format('woff');
4. }5. div.sample{
6.
font-family:'MyFont';
7. }SVG1.1:
Basic Shapes and FillingSVG1.1:Basic Shapes and Filling1.

<svg xmlns="http://www.w3.org/2000/svg"
width="500" height="500">

2.

<rect x="20" y="20"
width="350" height="150"
fill="#000" stroke="#f19" stroke-width="6"/>3.

<circle cx="350" cy="150" r="100"fill="rgba(0,150,255,.5)"
stroke="#09f" stroke-width="6"/>4.

</svg>

SVG1.1:LinesSVG1.1:Basic Shapes and Filling
1. <svg xmlns="http://www.w3.org/2000/svg"

width="500" height="500">2.

<path d="M10,160 C50,0 210,0 250,160
S450,320 490,160" (snip...)/>

3. </svg>

SVG1.1:
Transformations

SVG1.1:Transformations••••<g transform="scale(0.3)"><g transform="translate(-200,100)"><g transform="rotate(45 250,250)"><g transform="skewY(20) skewX(40)">

SVG1.1:
CSS

SVG1.1:CSS
1. <defs>2.
<style>3.
#postit path{4.
fill:#09f;
5.
stroke:#000;
6.
stroke-width:6px;
7.
}8.
</style>9. </defs>

SVG1.1:CSS demoSVG1.1:
Interactivity (DOM + events)

SVG1.1:
Interactivity demoIE6とIE9
 IE6,7の存在は根強い
 すぐにはIE9へ移行しないだろう...

IE6でHTML5を再現
 疑似的にIE6の能力を引き上げる JScript
 VBScript Behaviors (HTC) CSS Filter
 EOT (WebFonts)
 VML
 HTML+TIME
 ActiveX
 FlashHTML5 : <section>、<video>、<audio>…
 一般の要素には「html5.js」
http://remysharp.com/2009/01/07/html5-enabling-script/

 埋め込み系要素はいろいろ(ここではhtml5media.jsを利用
http://github.com/etianen/html5media
現在うまくダウンロードできないがリソースは以下から確認可能 :http://static.etianen.com/html5media/html5media/ )HTML5:<video>
1. <script src="html5media/html5media.js"></script>
1. <video controls="controls"

width="640" height="360">2.
<source src="bunny.mp4">
3.
<source src="bunny.webm">
4. </video>HTML5:<audio>
1. <script src="html5media/html5media.js"></script>
1. <audio controls="controls">
2.
<source src="audio.mp3">
3.
<source src="audio.ogg">
4. </audio>CSS3 : border-radius, box-shadow…
 「PIE」がおすすめ
http://css3pie.com/

CSS3

1. div.sample{
2.
border-radius: 30px;
3.
behavior: url(/css/PIE.htc);
4. }SVG1.1 : <path/>, <rect/>, <circle/>…
 「SIE」など(最良といえるライブラリはなし…今後に期待)
http://sie.sourceforge.jp/

SVG1.1
1. <!--[if lt IE 9]>
2. <script src="sie.js"></script>
3. <script src="svginhtml.js"></script>
4. <!-- [endif] -->1. <body>
2. <svg width="500" height="500">
3.
<path d="(snip)"/>4. </svg>
5. </body>まとめ IE9は見た目に関する新対応が多い
 見た目から始めてみよう！
 IE9基準でIE6～8をパワーアップさせる
 HTML5は機能面に注目されがちだが、デザイナーもデベロッパーも「見た目」の技術を抑えておこう！

ちなみに 普段の仕事で安全なHTML5を利用しています。

ご清聴ありがとうございました小山田 晃浩
Twitter:@yomotsu