互換性と対応 - Microsoft
Download
Report
Transcript 互換性と対応 - Microsoft
セッション ID：T7-402
開発者のための
Internet Explorer 9
マイクロソフト ディベロップメント株式会社
Windows 開発統括部
プログラム マネージャー
五寳 匡郎
セッションの目的とゴール
Session Objectives and Takeaways
セッションの目的
Internet Explorer 9 が、開発者にとってどのようなメリットをも
たらすのか？をご理解いただく
Internet Explorer 9 の Web 標準技術への対応状況と、Windows
プラットフォームとの組み合わせによるメリットをご理解いただく
Internet Explorer 9 の評価ポイントを押さえていただく
セッションのゴール
Internet Explorer 9 Platform Preview を使って、評価に取り組む
準備と計画ができるようになる
Internet Explorer 9 が対応予定の新しい Web 標準技術の基本を
理解し、簡単なサンプルを DEMO コードをベースに作成・確認で
きるようになる
Internet Explorer 9 Platform Preview を使って、自身が担当する
Web サイトの IE9 (互換) 対応がポイントを押さえてできるように
なる
3
アジェンダ
Internet Explorer 9 とは?
Platform Preview
パフォーマンスの向上
GPU アクセラレーション
Same Markup – Web 標準対応
HTML5、CSS3、DOM、SVG、JavaScript 等
互換性と対応
互換性について
F12 Developer Tools の活用
Web アプリケーションの可能性
4
Internet Explorer 9 とは?
Platform Preview の位置付け
Internet Explorer 9 とは？
次世代 Web アプリケーション
プラットフォーム
パフォーマンス向上
相互運用性
信頼性
6
Internet Explorer 9 とは？
開発者に何が提供されるのか？
Platform Preview ビルド
豊富なサンプル コード/DEMO と情報
機能追加された Developer Tools
革新的な機能とユーザビリティ
7
アジェンダ
Internet Explorer 9 とは?
Platform Preview
パフォーマンスの向上
GPU アクセラレーション
Same Markup – Web 標準対応
HTML5、CSS3、DOM、SVG、JavaScript 等
互換性と対応
互換性について
F12 Developer Tools の活用
Web アプリケーションの可能性
8
Internet Explorer 9 の構成
Frame Process
Tab Process
Development Tools
UI
Trident
(Address bar, tabs)
Platform Preview
9
Platform Preview の構成
Platform Preview
UI
Developer Tools
(simple user interface)
Trident
Parsing
(HTML, CSS)
Object Model
(HTML DOM)
Extensibility
(ActiveX, Behaviors)
IE Networking
10
Page Layout
(CSS, flow)
AJAX
(XMLHttpRequest)
JavaScript
(Parser, Interpreter)
Rendering and
Printing
アジェンダ
Internet Explorer 9 とは?
Platform Preview
パフォーマンスの向上
GPU アクセラレーション
Same Markup – Web 標準対応
HTML5、CSS3、DOM、SVG、JavaScript 等
互換性と対応
互換性について
F12 Developer Tools の活用
Web アプリケーションの可能性
11
Internet Explorer 9 とは?
パフォーマンスの向上
新しい Chakra JavaScript エンジン
Multi-Core CPU 処理に最適化
バックグラウンド コンパイラ
Multi-Core CPU
12
Internet Explorer 9 とは？
JavaScript エンジンのバック グラウンド コンパイラ
Foreground
Source
Code
Parser
AST*
ByteCode
Background
Compiler
Background
Compiled JavaScript
バックグラウンド処理
Interpreter
Native
Code
複数コアを利用
*AST: Abstract Syntax Tree ( 抽象構文ツリー )
13
Internet Explorer 9 とは?
パフォーマンスの向上
新しい Chakra JavaScript エンジン
Multi-Core CPU 処理に最適化
Background コンパイラ
Document Object Model (DOM) と
JavaScript の最適化
Multi-Core CPU
14
Internet Explorer 9 とは?
JavaScript エンジンの Native 実装
VBScript
Internet Explorer 9
8
JavaScript
(Chakra)
DOM
ES5
15
DOM
COM
COM
DOM
JScript 5.8
DOM
アジェンダ
Internet Explorer 9 とは?
Platform Preview
パフォーマンスの向上
GPU アクセラレーション
Same Markup – Web 標準対応
HTML5、CSS3、DOM、SVG、JavaScript 等
互換性と対応
互換性について
F12 Developer Tools の活用
Web アプリケーションの可能性
16
Internet Explorer 9 とは?
Graphics Processing Unit (GPU) アクセラレーション
17
Internet Explorer 9 とは?
GPU アクセラレーション
デフォルトで DirectX API を利用
Direct2D と DirectWrite
GPU-Powered HTML5
Video, Audio のデコード処理
HTML5 Canvas や SVG の描画処理
GPU レンダリング
CSS3 の透過処理など
WOFF の表示
カラー プロファイル対応
18
Platform Preview
IETestDrive.com
アジェンダ
Internet Explorer 9 とは?
Platform Preview
パフォーマンスの向上
GPU アクセラレーション
Same Markup – Web 標準対応
HTML5、CSS3、DOM、SVG、JavaScript 等
互換性と対応
互換性について
F12 Developer Tools の活用
Web アプリケーションの可能性
20
Same Markup
– Web 標準技術対応
HTML5, CSS3, JavaScript, DOM,
SVG への取組み
Same Markup – Web 標準対応
新しく対応した Web 標準技術
HTML5
Cascading Style Sheets, Level 3 (CSS3)
Document Object Model (DOM) L2&3
Scalable Vector Graphics (SVG)
ECMA Script 5 th Edition
Web Open Font Format (WOFF)
その他
ICC v2 および v3 カラー プロファイル
DataURI の改善
22
Same Markup – Web 標準対応
HTML5
一般的に HTML5 に含められる API 類
W3C HTML5
Web
Workers
Canvas
<video>
<audio>
File API
Geolocation
API
23
構文
要素
その他…
HTML4 との互換性
次の HTML との互換性
ブラウザー間の互換性
アクセシビリティ重視
セマンティクスな要素
オフライン
その他…
互換性の重視
Server-Sent
Events
Web Socket
API
実用性の重視
機能の再利用
革新より発展
Same Markup – Web 標準対応
HTML5
文書構造の解析が HTML5 準拠
HTML5 は IE9 標準モードのみで利用可能
認識できない要素は "generic" 要素とする
シンプルな DOCTYPE 宣言を利用
<!DOCTYPE html>
application/xhtml+xml のサポート
Inline SVG のサポート
24
Same Markup – Web 標準対応
HTML5 <video> & <audio>
外部プラグイン なしで実装可能
<video id="myVideo" src="video.mp4" autoplay controls>
</video>
再生コントロールがデフォルトで実装
動画や音声のデコードを GPU で処理
25
Same Markup – Web 標準対応
HTML5 Canvas
Canvas 要素は、図などのフォーマットではなく、
グラフィックスを描画する領域を示す
指定した範囲内で、図形などの線画、画像などの
2D Graphics を自由に描画
Canvas の座標系
座標 (0, 0)
Y 座標
(0, canvas. width)
26
X 座標
Canvas の描画領域
(canvas. width, 0)
Same Markup – Web 標準対応
HTML5 Canvas の実装
グラフィックスの描画が可能な領域を示す
<canvas id="mycanvas" width="100" height="200">
</canvas>
JavaScript で Canvas に描画するための、
2d 描画コンテキストを取得する
var canvas = document.getElementById ("mycanvas");
var context = canvas.getContext("2d");
27
Same Markup – Web 標準対応
HTML5 Canvas アニメーション
2 種類のアニメーション方法
Frame-based: オブジェクト
Frame の Update 毎に同じ数だけ動く
動作させるマシンに依存
実装がシンプル
Time-based: オブジェクト
時間毎に同じピクセル数だけ動く
マシン依存がない
28
HTML5
<video> 実装とコントロール
Canvas アニメーション
Same Markup – Web 標準対応
Cascading Style Sheets, Level 3 (CSS3)
要望の多かったモジュールやプロパティを実装
Web デザイナーの創造の可能性が広がる
透過処理のコントロール
Border-radius プロパティのサポート
30
CSS3 の活用
Backgrounds & Borders
Same Markup – Web 標準対応
Document Object Model (DOM)
addEventListener() メソッドのサポート
従来の attachEvent モデルからの解放
addEventListener, removeEventListener,
createEvent, dispatchEvent が利用可能
addEventListener(type, listener, useCapture)
useCapture でキャプチャ/ターゲット フェーズでの
イベントの補足が可能
type には DOM Level 0 で使われていた
"on" プレフィックスは必要ない
例 onclick -> click、onmouseover -> mouseover
32
Same Markup – Web 標準対応
Document Object Model (DOM)
DOM L2 Events
MouseEvent
(mouseenter/mouseleave)
DOM L3 Events
KeyboardEvent
(keydown/keypress/keyup)
Composition events
(compositionstart, compositionupdate,
compositionend)
33
Same Markup – Web 標準対応
DOM ホワイト スペースの扱い
スペース、タブ、改行もテキスト ノード
ホワイト スペースの存在に影響されない手法で
要素を特定しましょう
34
DOM
addEventListener
Keyboard Event
Same Markup – Web 標準対応
Scalable Vector Graphics (SVG)
SVG 画像は XML の構文に準拠したドキュメント
SVG イメージの描き方
1.
2.
3.
4.
XML 宣言: <?xml version=“1.0” ?>
DOCTYPE 宣言: <!DOCTYPE svg PUBLIC … >
最初の要素: <svg> … </svg>
<svg> の要素の間に、他の SVG 要素を入れる
<?xml version=“1.0” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=“” height=“”>
<!– ここにその他の要素を入れる
</svg>
36
-->
Same Markup – Web 標準対応
IE9 の Scalable Vector Graphics (SVG)
W3C SVG 1.1 2nd Edition をベースに実装
中身は XML で、JavaScript などから簡単にアクセス可能
Inline HTML、Inline XHTML に対応
<object>, <embed>, <iframe>, <img> で実装可能
<svg width="200" height="100">
<circle cx="50" cy="50" r="45" fill-opacity=".5" fill="red"/>
<circle cx="100" cy="50" r="45" fill-opacity=".5" fill="yellow"/>
<circle cx="75" cy="100" r="45" fill-opacity=".5" fill="blue"/>
<text x="40" y="70" fill="white">Colors!!</text>
</svg>
37
SVG の実装
Same Markup – Web 標準対応
ECMAScript 5th Edition (ES5) サポート
IE9 Standard Document モードで利用
DOM とダイレクトにコミュニケーション
DOM との連携が ES5 に最適化
IE9 で追加された新しい ES5 機能
新しい 9 つの配列メソッドの実装
オブジェクト モデルの拡張
その他の Computational メソッドと機能
39
互換性と対応について
互換性と開発者ツールの利用
アジェンダ
Internet Explorer 9 とは?
Platform Preview
パフォーマンスの向上
GPU アクセラレーション
Same Markup – Web 標準対応
HTML5、CSS3、DOM、SVG、JavaScript 等
互換性と対応
互換性について
F12 Developer Tools の活用
Web アプリケーションの可能性
41
互換性と対応
ブラウザー モードとドキュメント モード
ブラウザー モード
User Agent String で指定される
開発者向けに 4 つのモードを用意
(F12 Developer Tools で変更可能)
IE9 利用者は互換ボタンで IE9 互換表示に切替
互換モード: UA string、version vector ならびに
document mode が IE7 として動作する。
ドキュメント モード
新しい IE9 Standard Mode が追加
Trident が自動的に DOCTYPE などでモードを
判断する
42
互換性と対応
User-Agent String
短い User-Agent String をデフォルトで送信
Mozilla/5.0 (compatible; MSIE 9.0; Windows
NT 6.1; Trident/5.0)
IE8 の UA String からの 4 の変更点
1.
2.
3.
4.
43
Application version -> Mozilla/5.0
Version Token -> MSIE 9.0
Trident Token -> Trident/5.0
.NET や MCE などの拡張された UA の表示はなし
互換性と対応
User-Agent String 対応
IE9 の互換モードの User Agent
UA は IE7 Standard モードの扱いとなる
Trident のバージョンで IE9 と判断できる
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT
6.1; Trident/5.0)
拡張された UA の利用
navigator.userAgent で拡張部分を取得
44
互換性と対応
Meta タグと HTTP ヘッダー
Meta タグと HTTP ヘッダー
Meta タグ
<meta http-equiv="X-UA-Compatible" content="IE=9">
HTTP ヘッダー
名前 :X-UA-Compatible
優先順位
値: IE=EmulateIE9
DOCTYPE ＜ HTTP レスポンスヘッダー ＜ meta タグ
IE9 で追加された値
content =
"IE=______"
概要
EmulateIE9
doctype 宣言を使い、ドキュメント モードを決定
• doctype または Quirks のどちらの記述もない場合は、
Quirks モード
• その他すべての doctype では、IE9 Standard モード
IE9
45
Doctype に関係なく、強制的に IE9 Standard モード
互換性と対応
IE9 での変更点・注意点
Web ページが IE7 互換を求める場合
EmulateIE を並べて記述することで、
IE8, IE9 両方に対応
<meta http-equiv="X-UA-Compatible"
content="IE=EmulateIE7; IE=EmulateIE9">
iframe の扱い
トップレベルのページが IE9 Standard モード
の場合、すべての iframe ページは IE9
Standard モードで表示される
ただし、Quirks モードを除く
46
アジェンダ
Internet Explorer 9 とは?
Platform Preview
パフォーマンスの向上
GPU アクセラレーション
Same Markup – Web 標準対応
HTML5、CSS3、DOM、SVG、JavaScript 等
互換性と対応
互換性について
F12 Developer Tools の活用
Web アプリケーションの可能性
47
互換性と対応
F12 Developer Tools の活用
Web 開発者向けのデバッガー
IE8 から Integrate されて、F12 キーで起動
Visual なインタフェースを提供
素早い評価・検証を実現
変更した点がすぐに反映される
IE 9 での新機能
Network 対応 (Fiddler のサブセットのような)
JavaScript のプロファイリング
高速動作
48
互換性と対応
モードの切り替え
User Agent String の確認
アジェンダ
Internet Explorer 9 とは?
Platform Preview
パフォーマンスの向上
GPU アクセラレーション
Same Markup – Web 標準対応
HTML5、CSS3、DOM、SVG、JavaScript 等
互換性と対応
互換性について
F12 Developer Tools の活用
Web アプリケーションの可能性
50
Web アプリケーションの
可能性
Web アプリケーションの可能性
デバイスと CSS3 Media Queries
表示するデバイスの解像度によって、表示
内容のデザインを切り替える
Mobile 向け
52
Netbook 向け
大画面向け
Web アプリケーションの可能性
Web Open Font Format (WOFF)
Web 専用のフォントフォーマットをサポート
CSS3 @font-face 宣言で利用
従来からサポートしていた EOT や Raw
TrueType に続いてのサポート
<style type="text/css">
@font-face {
font-family:MyFontName;
src: url('FontFile.woff');
}
</style>
<div style="font: 24pt MyFontName, sans-serif;">
This will render using MyFontName in FontFile.woff
</div>
53
Web アプリケーションの
可能性
CSS3 Media Queries
Internet Explorer 9 まとめ
次世代 Web のためのブラウザー
開発者には Platform Preview が提供される
GPU、マルチコア CPU を活用した
高速なレンダリング
HTML5 など Web 標準技術が中心に !
皆様へのお願い !
まずは、インストール !
革新的な機能や DEMO を堪能!
さまざまなツールの恩恵を受ける!
GPU パワーを活かしたコンテンツに挑戦 !
55
関連セッション
T7-403：最新 OS WES7/WEC7/.NET Micro Framework によるク
ラウド時代のデバイス UX 開発
56
リファレンス
Internet Explorer 9 Platform Preview の入手と各種 DEMO (英語)
http://ie.microsoft.com/testdrive/
Internet Explorer 9 開発者向けガイド (英語)
http://msdn.microsoft.com/en-us/ie/ff468705.aspx
日本語版 IE Blog
http://blogs.msdn.com/ie_jp/
徹底解説 HTML5 マークアップ ガイド ブック (羽田野 太巳 著)
http://www.futomi.com/books/html5markup/index.html
HTML5 & API 入門 (白石 俊平 著)
http://ec.nikkeibp.co.jp/item/books/P84220.html
57
ご清聴ありがとうございました。
T7-402
アンケートにご協力ください。
Appendix
Platform Preview What’s New 1～3 日本語訳
Getting Started HTML5
HTML5 <video> element と Sample
HTML5 <audio> element
Frame-Based Canvas アニメーション
Time-Based Canvas アニメーション
Cascading Style Sheets, Level 3 (CSS3)
新しい JavaScript Engine “Chakra”
ES5 配列 Methods サンプル
ドキュメント モード 決定のダイアグラム
その他の DOM の改善点
IE9 での SVG イメージの実装方法 1 と 2
ネットワーク パフォーマンスの向上
互換性と対応 ブラウザー モード
互換性と対応 ドキュメント モード
IE6 ベースのコンテンツへの対応
IE7 ベースのコンテンツへの対応
IE8 ベールのコンテンツへの対応
Same Markup: コア ガイドライン
パフォーマンス コンポーネント
WebKit.org’s SunSpider v0.9.1 結果一覧
GPU アクセラレーションの切り替え
59
Platform Preview
What’s New 1
Canvas のサポート
すべての Canvas element API と大部分の Canvas 2D Context API と Attributes を実装。
<video> タグのサポート
MP4 コンテナ H.264 をサポート。Windows 7 では、GPU が h.264 のデコードに対応して
いれば、GPU を使う。Vista は Software でコーディング。
WebM (VP8) は、PP3 ではまだサポートしていない。
<audio> タグのサポート
MP3 と AAC をサポート
window.msPerformance API の実装
まだ W3C メンバーと協議中。PP3 で "ms" を付けた形で実装中。
HTML5 準拠の whitespace のハンドリング
従来の IE の特殊な扱いから、完全に Web 標準準拠。(IE9 標準モードのみ)
CSS3
Values and Units のサポート: CSS のプロパティが受け入れる値や単位を規定する。
(例: Font のサイズ em, ex, px とか)
Background and Borders のサポート: すべての background プロパティのサポートと、SVG
を背景画像として描画できる。 (複数も可)
Web フォント フォーマット
EOT、WOFF
Raw installable fonts (TrueType, OpenType)
60
Platform Preview
What’s New 2
DOM
Full DOM Level 2 と Level 3 の Event をサポート
DOM Core
adoptNode, compareDocumentPosition, CDATASection, importNode, inputEncoding,
isDefaultNamespace, isEqualNode, isSameNode, isSupported, lookupNamespaceURI, lookupPrefix,
replaceWholeText, textContent, xmlEncoding, xmlStandalone, xmlVersion, wholeText
SVG
Presentation Element と対応する Attributes と DOM をサポート
gradients, patterns, masking, clipping, markers, linking and views
実装方法の追加: <embed>, <iframe>, <img> タグ
リモート サーバーからの .SVGZ ファイルの表示をサポート
(SVG は中身が XML なので、巨大なファイルも圧縮すると小さくできる)
HTML5 における Parsing ルールのサポートを向上
SVG Text のサポート
XHTML
Fill, stroke, positioning (x,y,dx,dy,rotate), including for complex scripts
XHTML の mime-type である "application/xhtml+xml" 外向けリクエストの Accept header にリ
ストされた
一般的な XML の改善 ( "text/xml" と "application/xml" )
SVG と XHTML コンテンツが含まれる一般的なドキュメントもレンダリングされる
一般的な XML から作り出された DOM も元のマークアップに反映される
<? xml-stylesheet …? > 経由の XSLT
MSXML3 から MSXML6 にエンジンがアップグレード
SVG と XHTML ドキュメントで動作するのに加えて、一般的な XML ドキュメントでも動作
61
Platform Preview
What’s New 3
Canvas では以下の属性などをサポートしていません。
globalCompositeOperation: 既存の描画とほかの描画の合成処理を実施
DOM Exceptions: Canvas 2D Context の DOM Exception (Script などでの例外エ
ラー) に未対応
drawFocusRing(): フォーカスされたエレメントに対して、円を描画させる -> まだど
のブラウザーも実装していない。
CSS3 Fonts
font-size-adjust (フォント同士のサイズのバラつきを調整) と advanced font features
(Font-stretch など? ) はサポートしていない
JavaScript で実装したもの
Enhanced Object Model
Accessor properties (JavaScript のオブジェクトのプロパティやメソッドにアクセスするための
演算子): Object.defineProperty, Object.defineProperties, Object.create,
Object.getPrototypeOf, Object.getOwnPropertyDescriptor,
Object.getOwnPropertyDescriptor, Object.keys, Object.seal, Object.freeze,
Object.isSealed, Object.isFrozen, Object.preventExtensions, Object.isExtensible
新しい配列のメソッド
indexOf, lastIndexOf, forEach, every, some, map, filter, reduce, reduceRight
その他の演算メソッドと Function
String.prototype.trim, Date.prototype.toISOString, Date.parse, Date.now, Array.isArray,
Function.prototype.bind
部分的に、" Event のバインドに: : を使う" ことを実装
62
Platform Preview
What’s New 4
JavaScript で実装していないもの
IE8 で実装した (http://msdn.microsoft.com/enus/library/dd229916(VS.85).aspx) DOM オブジェクト用
のアクセサー プロパティ
ECMAScript 5 の Strict Mode
IE9 標準モードにおける ActiveXObject をリモート サー
バー上に作成すること
IE9 標準モードでの GetObject メソッド
Developer Tools
JavaScript のプロファイリング: JavaScript の function、
DOM 呼び出し、ビルトインライブラリ function のプロ
ファイルを作成
Network 監査 - ダウンロードの確認: ネットワークリクエ
ストにおけるネットワークパケットのソースを表示
XML の Parsing エラーがコンソールに表示される
63
Getting Started HTML5
<body>
<h1>body 要素の見出し</h1>
<section>
<h1>section 要素の見出し</h1>
<blockquote>
<h1>blockquote の見出し</h1>
<section>
<h1>引用された内容が持つセクション</h1>
</section>
</blockquote>
</section>
</body>
64
HTML5 <video> element
MPEG-4/H. 264 video をサポート
60 fps までのフレームレートに対応
再生コントロールをデフォルトで実装
スクリプトを使って DOM 経由で操作可能
タグの属性
src - 再生するファイル指定
Autoplay - 準備出来次第、再生
controls - コントロールを表示
preload - ページ Load 時に再生ファイルを読み出し
loop - 繰り返し再生
height & width - 再生するプレーヤーの高さと幅
65
HTML5 <video> element Sample
<! – JavaScript で DOM 経由の再生コントロールを記述 -->
<video id="myVideo" src="video.mp4" autoplay controls>
このブラウザーは video タグをサポートしていません
<!-- 代替えとして Silverlight などを埋め込みます-->
</video>
スキップする秒数を入力してください: <input type=text id="time">
<input type=button value="Skip" onclick=skipTo()>
66
HTML5 <audio> element
MP3 と Advanced Audio Coding (AAC)
再生コントロールをデフォルトで実装
スクリプトを使って DOM 経由で操作可能
タグの属性
src – 再生するファイルの指定
autoplay – 準備出来次第、再生する
controls – コントロールを表示する
preload – ページ ロード時に再生ファイルを読み出す
67
Frame-Based Canvas Animation
var distance = 5, lastFrameTime = 0;
setInterval(drawTimeBased,16);
function drawFrameBased() {
y1 += distance;
ctx.clearRect(0,0,ctx.canvas.width,
ctx.canvas.height);
ctx.drawImage(img,x1,y1,imgWidth,
imgHeight);
}
68
Time-Based Canvas Animation
var speed = 250, lastFrameTime = 0;
setInterval(drawTimeBased, 16);
function drawTimeBased() {
// time since last frame
var now = new Date().getTime();
dt = (now - lastFrameTime) / 1000;
lastFrameTime = now;
y2 += speed * dt;
ctx.clearRect(x2, 0, ctx.canvas.width,
ctx.canvas.height);
ctx.drawImage(img, x2, y2, imgWidth, imgHeight);
}
69
Demo file: CanvasAnimation.htm
Cascading Style Sheets, Level 3 (CSS3)
CSS3 Color Module
RGBA, HSL, HSLA color models
Background-color: rgba(赤,緑,青,alpha)
*Alpha: 0.0 (透明) から 1.0 (不透明) の値
opacity プロパティ
<div style="background:navy; opacity:0.2;"></div>
<div style="background:navy; opacity:40%;"></div>
*Opacity: 0% (透明) から 100% (不透明) の値も可
70
新しい JavaScript Engine "Chakra"
新しい JavaScript コンパイラ
バックグラウンド処理
型 (Type) 情報の扱いの最適化
新しい インタプリタ
スタックベースからレジスタベースに
中間コードの効率化と、Type の最適化
JavaScript ランタイム & ライブラリの向上
Strings, Arrays, Object, 正規表現 (RegExp)
やライブラリをチューニング
71
ES5 配列 Methods のサンプル
<body>
<script language="javascript" type="text/javascript">
var myArray = ["Alice", "Bob", "John"];
var myFunc = function(value, index, myArray){
document.write("Hello" + value + "<br/>");
}
var result=myArray.forEach(myFunc);
</script>
</body>
72
ドキュメント モード決定のダイアグラム
Internet Explorer 8
IEBlog: How IE8 Determines Document Mode
http://blogs.msdn.com/b/ie/archive/2010/03/02/
how-ie8-determines-document-mode.aspx
Internet Explorer 9
直 SVG file へのリンク:
http://ieblog.members.winisp.net/misc/How%20I
E9%20Determines%20Document%20Mode.svg
IEBlog: IE’s Compatibility Features for Site
Developers
http://blogs.msdn.com/b/ie/archive/2010/06/16/
ie-s-compatibility-features-for-sitedevelopers.aspx
73
DOM の改善点
DOM Range
すべての DOM L2 Range API をサポート
シンプルで一貫性のあるドキュメントからの抽
出方法を提供
HTML5 Text Selection API 元
DOM Style
属性のスタイルのプロパティをプログラムを経
由して設定したり取得したりする
DOM Traversal
NodeIterators と TreeWalkers を作成してド
キュメント順にノードとノードの子をトラバー
スするメソッド
74
7
現在利用可能な SVG の実装方法一覧 1
Inline HTML
Inline XHTML
<object> タグ
<!DOCTYPE html>
...
<svg width=“120” height=“90”>
ここに SVG のマークアップを記述
</svg>
...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
...
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="120" height="90">
ここに SVG のマークアップを記述
</svg>
...
</body>
</html>
...
<object data=“ここに SVG のイメージファイルを指定.svg"
width="100" height="100"
type="image/svg+xml"></object>
...
現在利用可能な SVG の実装方法一覧 2
<embed> タグ
<embed src="rect2.svg/>
<iframe> タグ
<iframe src="rect2.svg"/>
<img> タグ
<img src="rect2.svg"/>
.svg ドキュメント
<?xml version=“1.0” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg xmlns=“http://www.w3.org/2000/svg” version=“1.1”>
ここに SVG のマークアップを記述
</svg>
.svgz ドキュメント
<img src="rect2.svgz"/>
ネットワーク パフォーマンスの向上
ブラウザー キャッシュの改善
Long-Life キャッシュ ヘッダー
Max-age value が 231 から 263 に
Vary レスポンス ヘッダーの改善
リダイレクト キャッシング
HTTPS キャッシュの改善
戻る・進む (ボタン動作) におけるキャッシュの
最適化
ヒューリスティック キャッシュの改善
インターネット一時ファイルの扱い
新しいブラウザー セッションでの再訪問時の
キャッシュの利用改善
77
互換性と対応
ブラウザー モード
ブラウザー モード
内容
IE9
UA String, Version Vector, ドキュメント モードも、すべて
IE9 のデフォルトの値を返す、最も標準準拠のモード
UA String, Version Vector, ドキュメント モードにおいて、
IE9
すべて IE7 として振る舞う。
Compatibility View UA String の Trident/5.0 の表記で IE9 互換モードと判断。
ユーザーが互換モード ボタンを押した時の動作を検証。
78
IE8
UA String, Version Vector, ドキュメント モードにおいて、
すべて IE8 として振る舞う。
IE7
UA String, Version Vector, ドキュメント モードにおいて、
すべて IE7 として振る舞う。
互換性と対応
ドキュメント モード
ドキュメント
モード
内容
IE9 Standards
IE9 で実装された最新の Web 標準準拠モード
(Strict または Unknown DOCTYPE のデフォルト モード)
IE8 Standards
ブラウザー モードが IE8 の時の
デフォルトの Web 標準準拠モード
IE7 Standards
ブラウザー モードが IE7 の時の
デフォルトの Web 標準準拠モード
Quirks
DOCTYPE が無いまたは Quirks 指定の場合の互換モード
IE5 または各バージョンの Quirks モードと同じ動作
79
IE6 ベースのコンテンツへの対応
標準モードでの動作確認
Quirks モード (IE5.5 互換) の表示を確認
デフォルトで Quirks 表示になるか ? も確認
強制的に Quirks モードにする場合
<meta http-equiv="X-UA-Compatible"
content="IE=5">
Web サーバー側で HTTP ヘッダーの
X-UA-Compatible : IE=5 を追加
適切な Quirks 用の DOCTYPE 宣言をつける
DOCTYPE がない場合 Quirks モードになる
80
IE7 ベースのコンテンツへの対応
デフォルトが Standard モードの場合
IE9 Standard から順に問題なく表示される
モードを確認
Quirks モードの場合は IE6 対応と同様
混在する場合は EmulateIE7 を利用
<meta http-equiv="X-UA-Compatible"
content="IE=EmulateIE7">
Web サーバー側で HTTP ヘッダーの
X-UA-Compatible : IE=EmulateIE7 を追加
81
IE8 ベースのコンテンツへの対応
基本的には DOCTYPE を利用
IE9 Standard モードでも問題ないはず
IE9 Standard モードで問題がある場合
IE=EmulateIE8 を利用
フレームセットを使っている場合
フレームセットを宣言する DOCTYPE を確認
IE=EmulateIE8 を利用
82
Same Markup: コア ガイドライン
推奨
機能の検出: 機能を利用する前にブラウザーがサポートしているか？
振る舞いの検出: 代替案を適用前に既知の問題をテストする
非推奨
特定のブラウザーの検出: 過去のやり方
関係のない機能を想定しない: 実際に利用する機能かどうか？
http://blogs.msdn.com/b/ie/archive/2010/04/13/running-today-s-different-markup.aspx
83
パフォーマンス コンポーネント
Time Spent Per Subsystem
コンポーネントの構成比率はサイト毎に異なる
サブシステム同士の最適化が重要
HTML Parser
100%
CSS Parser
80%
Collections
JavaScript
60%
Marshalling
40%
Native OM
Formatting
20%
Block Building
0%
Layout
News News News News News
Site 1 Site 2 Site 3 Site 4 Site 5
84
Rendering
WebKit.org’s SunSpider v0.9.1
4000
3500
3000
IE8 より
10 倍以上速い！
2500
2000
1500
1000
500
0
85
Dell Optiplex with a 3.0 GHz Core 2 Duo Intel processor,
4 GB RAM, and Intel integrated vide; running Windows 7
GPU アクセラレーションの切り替え
ソフトウェア処理に切り替えるレジストリ
[HKEY_CURRENT_USER\Software\Microsoft\Internet
Explorer\Main\FeatureControl\FEATURE_FORCE_D2D_SOFTWARE]
"iepreview.exe"=dword:00000001
[HKEY_CURRENT_USER\Software\Microsoft\Internet
Explorer\Main\FeatureControl\FEATURE_FORCE_D3D_WARP_DEVICE]
"iepreview.exe"=dword:00000001
* ハードウェア処理に戻すときは、dword 値を 0 にする
86
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should
not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS,
IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.