マイクロソフト ディベロップメント株式会社 Windows 開発統括部 プログラム マネージャー 五寳 匡郎 開発者のための Internet Explorer 9 セッション ID：T7-402.

Presentation on theme: "マイクロソフト ディベロップメント株式会社 Windows 開発統括部 プログラム マネージャー 五寳 匡郎 開発者のための Internet Explorer 9 セッション ID：T7-402."— Presentation transcript:

1

2 マイクロソフト ディベロップメント株式会社 Windows 開発統括部 プログラム マネージャー 五寳 匡郎 開発者のための Internet Explorer 9 セッション ID：T7-402

3 3 セッションの目的とゴール 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 (互換) 対応がポイントを押さえてできるように なる

4 4 アジェンダ Internet Explorer 9 とは? Platform Preview パフォーマンスの向上 GPU アクセラレーション Same Markup – Web 標準対応 HTML5、CSS3、DOM、SVG、JavaScript 等 互換性と対応 互換性について F12 Developer Tools の活用 Web アプリケーションの可能性

5 Platform Preview の位置付け Internet Explorer 9 とは?

6 6 Internet Explorer 9 とは？ 次世代 Web アプリケーション プラットフォーム パフォーマンス向上 相互運用性 信頼性

7 7 Internet Explorer 9 とは？ 開発者に何が提供されるのか？ Platform Preview ビルド 豊富なサンプル コード/DEMO と情報 機能追加された Developer Tools 革新的な機能とユーザビリティ

8 8 アジェンダ Internet Explorer 9 とは? Platform Preview パフォーマンスの向上 GPU アクセラレーション Same Markup – Web 標準対応 HTML5、CSS3、DOM、SVG、JavaScript 等 互換性と対応 互換性について F12 Developer Tools の活用 Web アプリケーションの可能性

9 9 Platform Preview Frame Process Internet Explorer 9 の構成 Tab Process Trident Development Tools UI (Address bar, tabs)UI

10 10 Platform Preview の構成 Parsing (HTML, CSS) Parsing (HTML, CSS) Extensibility (ActiveX, Behaviors) Extensibility (ActiveX, Behaviors) IE Networking Object Model (HTML DOM) Object Model (HTML DOM) Page Layout (CSS, flow) Page Layout (CSS, flow) AJAX (XMLHttpRequest) AJAX (XMLHttpRequest) JavaScript (Parser, Interpreter) JavaScript (Parser, Interpreter) Rendering and Printing Trident UI (simple user interface)UI Developer Tools Platform Preview

11 11 アジェンダ Internet Explorer 9 とは? Platform Preview パフォーマンスの向上 GPU アクセラレーション Same Markup – Web 標準対応 HTML5、CSS3、DOM、SVG、JavaScript 等 互換性と対応 互換性について F12 Developer Tools の活用 Web アプリケーションの可能性

12 12 Internet Explorer 9 とは? パフォーマンスの向上 新しい Chakra JavaScript エンジン Multi-Core CPU 処理に最適化 バックグラウンド コンパイラ Multi-Core CPU

13 13 Background Foreground Internet Explorer 9 とは？ JavaScript エンジンのバック グラウンド コンパイラ Source Code ParserParser AST* InterpreterInterpreterByteCodeByteCode Native Code Background Compiler Compiled JavaScript バックグラウンド処理 複数コアを利用 *AST: Abstract Syntax Tree ( 抽象構文ツリー )

14 14 Internet Explorer 9 とは? パフォーマンスの向上 新しい Chakra JavaScript エンジン Multi-Core CPU 処理に最適化 Background コンパイラ Document Object Model (DOM) と JavaScript の最適化 Multi-Core CPU

15 15 Internet Explorer 9 とは? JavaScript エンジンの Native 実装 VBScript DOM JScript 5.8 DOM COM JavaScript (Chakra) JavaScript (Chakra) DOM ES5 Internet Explorer 8Internet Explorer 9

16 16 アジェンダ Internet Explorer 9 とは? Platform Preview パフォーマンスの向上 GPU アクセラレーション Same Markup – Web 標準対応 HTML5、CSS3、DOM、SVG、JavaScript 等 互換性と対応 互換性について F12 Developer Tools の活用 Web アプリケーションの可能性

17 17 Internet Explorer 9 とは? Graphics Processing Unit (GPU) アクセラレーション

18 18 Internet Explorer 9 とは? GPU アクセラレーション デフォルトで DirectX API を利用 Direct2D と DirectWrite GPU-Powered HTML5 Video, Audio のデコード処理 HTML5 Canvas や SVG の描画処理 GPU レンダリング CSS3 の透過処理など WOFF の表示 カラー プロファイル対応

19 IETestDrive.com Platform Preview

20 20 アジェンダ Internet Explorer 9 とは? Platform Preview パフォーマンスの向上 GPU アクセラレーション Same Markup – Web 標準対応 HTML5、CSS3、DOM、SVG、JavaScript 等 互換性と対応 互換性について F12 Developer Tools の活用 Web アプリケーションの可能性

21 HTML5, CSS3, JavaScript, DOM, SVG への取組み Same Markup – Web 標準技術対応

22 22 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 の改善

23 23 Same Markup – Web 標準対応 HTML5 互換性の重視 HTML4 との互換性 次の HTML との互換性 ブラウザー間の互換性 アクセシビリティ重視 セマンティクスな要素 実用性の重視 機能の再利用 革新より発展 一般的に HTML5 に含められる API 類 W3C HTML5 Canvas 構文 要素 オフライン その他… Server-Sent Events Web Socket API Geolocation API File API Web Workers

24 24 Same Markup – Web 標準対応 HTML5 文書構造の解析が HTML5 準拠 HTML5 は IE9 標準モードのみで利用可能 認識できない要素は "generic" 要素とする シンプルな DOCTYPE 宣言を利用 application/xhtml+xml のサポート Inline SVG のサポート

25 25 Same Markup – Web 標準対応 HTML5 & 外部プラグイン なしで実装可能 再生コントロールがデフォルトで実装 動画や音声のデコードを GPU で処理

26 26 Same Markup – Web 標準対応 HTML5 Canvas Canvas 要素は、図などのフォーマットではなく、 グラフィックスを描画する領域を示す 指定した範囲内で、図形などの線画、画像などの 2D Graphics を自由に描画 Canvas の座標系 Canvas の描画領域 座標 (0, 0)(canvas. width, 0) (0, canvas. width) X 座標 Y 座標

27 27 Same Markup – Web 標準対応 HTML5 Canvas の実装 グラフィックスの描画が可能な領域を示す JavaScript で Canvas に描画するための、 2d 描画コンテキストを取得する var canvas = document.getElementById ("mycanvas"); var context = canvas.getContext("2d"); var canvas = document.getElementById ("mycanvas"); var context = canvas.getContext("2d");

28 28 Same Markup – Web 標準対応 HTML5 Canvas アニメーション 2 種類のアニメーション方法 Frame-based: オブジェクト Frame の Update 毎に同じ数だけ動く 動作させるマシンに依存 実装がシンプル Time-based: オブジェクト 時間毎に同じピクセル数だけ動く マシン依存がない

29 実装とコントロール Canvas アニメーション HTML5

30 30 Same Markup – Web 標準対応 Cascading Style Sheets, Level 3 (CSS3) 要望の多かったモジュールやプロパティを実装 Web デザイナーの創造の可能性が広がる Border-radius プロパティのサポート 透過処理のコントロール

31 Backgrounds & Borders CSS3 の活用

32 32 Same Markup – Web 標準対応 Document Object Model (DOM) addEventListener() メソッドのサポート 従来の attachEvent モデルからの解放 addEventListener, removeEventListener, createEvent, dispatchEvent が利用可能 useCapture でキャプチャ/ターゲット フェーズでの イベントの補足が可能 type には DOM Level 0 で使われていた "on" プレフィックスは必要ない 例 onclick -> click、onmouseover -> mouseover addEventListener(type, listener, useCapture)

33 33 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)

34 34 Same Markup – Web 標準対応 DOM ホワイト スペースの扱い スペース、タブ、改行もテキスト ノード ホワイト スペースの存在に影響されない手法で 要素を特定しましょう

35 addEventListener Keyboard Event DOM

36 36 Same Markup – Web 標準対応 Scalable Vector Graphics (SVG) SVG 画像は XML の構文に準拠したドキュメント SVG イメージの描き方 1.XML 宣言: 2.DOCTYPE 宣言: 3.最初の要素: … 4. の要素の間に、他の SVG 要素を入れる

37 37 Same Markup – Web 標準対応 IE9 の Scalable Vector Graphics (SVG) W3C SVG 1.1 2 nd Edition をベースに実装 中身は XML で、JavaScript などから簡単にアクセス可能 Inline HTML、Inline XHTML に対応,,, で実装可能 Colors!!

38 SVG の実装

39 39 Same Markup – Web 標準対応 ECMAScript 5th Edition (ES5) サポート IE9 Standard Document モードで利用 DOM とダイレクトにコミュニケーション DOM との連携が ES5 に最適化 IE9 で追加された新しい ES5 機能 新しい 9 つの配列メソッドの実装 オブジェクト モデルの拡張 その他の Computational メソッドと機能

40 互換性と開発者ツールの利用 互換性と対応について

41 41 アジェンダ Internet Explorer 9 とは? Platform Preview パフォーマンスの向上 GPU アクセラレーション Same Markup – Web 標準対応 HTML5、CSS3、DOM、SVG、JavaScript 等互換性と対応 互換性について F12 Developer Tools の活用 Web アプリケーションの可能性

42 42 互換性と対応 ブラウザー モードとドキュメント モード ブラウザー モード User Agent String で指定される 開発者向けに 4 つのモードを用意 (F12 Developer Tools で変更可能) IE9 利用者は互換ボタンで IE9 互換表示に切替 互換モード: UA string、version vector ならびに document mode が IE7 として動作する。 ドキュメント モード 新しい IE9 Standard Mode が追加 Trident が自動的に DOCTYPE などでモードを 判断する

43 43 互換性と対応 User-Agent String 短い User-Agent String をデフォルトで送信 IE8 の UA String からの 4 の変更点 1.Application version -> Mozilla/5.0 2.Version Token -> MSIE 9.0 3.Trident Token -> Trident/5.0 4..NET や MCE などの拡張された UA の表示はなし Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

44 44 互換性と対応 User-Agent String 対応 IE9 の互換モードの User Agent UA は IE7 Standard モードの扱いとなる Trident のバージョンで IE9 と判断できる 拡張された UA の利用 navigator.userAgent で拡張部分を取得 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0)

45 45 互換性と対応 Meta タグと HTTP ヘッダー Meta タグと HTTP ヘッダー IE9 で追加された値 content = "IE=______" 概要 EmulateIE9 doctype 宣言を使い、ドキュメント モードを決定 doctype または Quirks のどちらの記述もない場合は、 Quirks モード doctypeQuirks その他すべての doctype では、IE9 Standard モード IE9Doctype に関係なく、強制的に IE9 Standard モード Meta タグ HTTP ヘッダー 名前 :X-UA-Compatible 値: IE=EmulateIE9 優先順位DOCTYPE ＜ HTTP レスポンスヘッダー ＜ meta タグ

46 46 互換性と対応 IE9 での変更点・注意点 Web ページが IE7 互換を求める場合 EmulateIE を並べて記述することで、 IE8, IE9 両方に対応 iframe の扱い トップレベルのページが IE9 Standard モード の場合、すべての iframe ページは IE9 Standard モードで表示される ただし、Quirks モードを除く

47 47 アジェンダ Internet Explorer 9 とは? Platform Preview パフォーマンスの向上 GPU アクセラレーション Same Markup – Web 標準対応 HTML5、CSS3、DOM、SVG、JavaScript 等互換性と対応 互換性について F12 Developer Tools の活用 Web アプリケーションの可能性

48 48 互換性と対応 F12 Developer Tools の活用 Web 開発者向けのデバッガー IE8 から Integrate されて、F12 キーで起動 Visual なインタフェースを提供 素早い評価・検証を実現 変更した点がすぐに反映される IE 9 での新機能 Network 対応 (Fiddler のサブセットのような) JavaScript のプロファイリング 高速動作

49 モードの切り替え User Agent String の確認 互換性と対応

50 50 アジェンダ Internet Explorer 9 とは? Platform Preview パフォーマンスの向上 GPU アクセラレーション Same Markup – Web 標準対応 HTML5、CSS3、DOM、SVG、JavaScript 等 互換性と対応 互換性について F12 Developer Tools の活用 Web アプリケーションの可能性

51

52 52 Web アプリケーションの可能性 デバイスと CSS3 Media Queries 表示するデバイスの解像度によって、表示 内容のデザインを切り替える Mobile 向け 大画面向け Netbook 向け

53 53 Web アプリケーションの可能性 Web Open Font Format (WOFF) Web 専用のフォントフォーマットをサポート CSS3 @font-face 宣言で利用 従来からサポートしていた EOT や Raw TrueType に続いてのサポート @font-face { font-family:MyFontName; src: url('FontFile.woff'); } This will render using MyFontName in FontFile.woff @font-face { font-family:MyFontName; src: url('FontFile.woff'); } This will render using MyFontName in FontFile.woff

54 CSS3 Media Queries Web アプリケーションの 可能性

55 55 Internet Explorer 9 まとめ 次世代 Web のためのブラウザー 開発者には Platform Preview が提供される GPU、マルチコア CPU を活用した 高速なレンダリング HTML5 など Web 標準技術が中心に ! 皆様へのお願い ! まずは、インストール ! 革新的な機能や DEMO を堪能! さまざまなツールの恩恵を受ける! GPU パワーを活かしたコンテンツに挑戦 !

56 56 関連セッション

57 57 リファレンス HTML5 & API 入門 (白石 俊平 著) http://ec.nikkeibp.co.jp/item/books/P84220.html

58 ご清聴ありがとうございました。 T7-402

59 59 Appendix Platform Preview What’s New 1～3 日本語訳 Getting Started HTML5 HTML5 element と Sample HTML5 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 アクセラレーションの切り替え

60 60 Platform Preview What’s New 1 Canvas のサポート すべての Canvas element API と大部分の Canvas 2D Context API と Attributes を実装。 タグのサポート MP4 コンテナ H.264 をサポート。Windows 7 では、GPU が h.264 のデコードに対応して いれば、GPU を使う。Vista は Software でコーディング。 WebM (VP8) は、PP3 ではまだサポートしていない。 タグのサポート 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)

61 61 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 実装方法の追加:,, タグ リモート サーバーからの.SVGZ ファイルの表示をサポート (SVG は中身が XML なので、巨大なファイルも圧縮すると小さくできる) HTML5 における Parsing ルールのサポートを向上 SVG Text のサポート Fill, stroke, positioning (x,y,dx,dy,rotate), including for complex scripts XHTML XHTML の mime-type である "application/xhtml+xml" 外向けリクエストの Accept header にリ ストされた 一般的な XML の改善 ( "text/xml" と "application/xml" ) SVG と XHTML コンテンツが含まれる一般的なドキュメントもレンダリングされる 一般的な XML から作り出された DOM も元のマークアップに反映される 経由の XSLT MSXML3 から MSXML6 にエンジンがアップグレード SVG と XHTML ドキュメントで動作するのに加えて、一般的な XML ドキュメントでも動作

62 62 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 のバインドに: : を使う" ことを実装

63 63 Platform Preview What’s New 4 JavaScript で実装していないもの IE8 で実装した (http://msdn.microsoft.com/en- us/library/dd229916(VS.85).aspx) DOM オブジェクト用 のアクセサー プロパティ ECMAScript 5 の Strict Mode IE9 標準モードにおける ActiveXObject をリモート サー バー上に作成すること IE9 標準モードでの GetObject メソッド Developer Tools JavaScript のプロファイリング: JavaScript の function、 DOM 呼び出し、ビルトインライブラリ function のプロ ファイルを作成 Network 監査 - ダウンロードの確認: ネットワークリクエ ストにおけるネットワークパケットのソースを表示 XML の Parsing エラーがコンソールに表示される

64 64 Getting Started HTML5 body 要素の見出し section 要素の見出し blockquote の見出し 引用された内容が持つセクション

65 65 HTML5 element MPEG-4/H. 264 video をサポート 60 fps までのフレームレートに対応 再生コントロールをデフォルトで実装 スクリプトを使って DOM 経由で操作可能 タグの属性 src - 再生するファイル指定 Autoplay - 準備出来次第、再生 controls - コントロールを表示 preload - ページ Load 時に再生ファイルを読み出し loop - 繰り返し再生 height & width - 再生するプレーヤーの高さと幅

66 66 HTML5 element Sample このブラウザーは video タグをサポートしていません スキップする秒数を入力してください :

67 67 HTML5 element MP3 と Advanced Audio Coding (AAC) 再生コントロールをデフォルトで実装 スクリプトを使って DOM 経由で操作可能 タグの属性 src – 再生するファイルの指定 autoplay – 準備出来次第、再生する controls – コントロールを表示する preload – ページ ロード時に再生ファイルを読み出す

68 68 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); }

69 69 Demo file: CanvasAnimation.htm 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); }

70 70 Cascading Style Sheets, Level 3 (CSS3) CSS3 Color Module RGBA, HSL, HSLA color models *Alpha: 0.0 (透明) から 1.0 (不透明) の値 opacity プロパティ *Opacity: 0% (透明) から 100% (不透明) の値も可 Background-color: rgba( 赤, 緑, 青,alpha)

71 71 新しい JavaScript Engine "Chakra" 新しい JavaScript コンパイラ バックグラウンド処理 型 (Type) 情報の扱いの最適化 新しい インタプリタ スタックベースからレジスタベースに 中間コードの効率化と、Type の最適化 JavaScript ランタイム & ライブラリの向上 Strings, Arrays, Object, 正規表現 (RegExp) やライブラリをチューニング

72 72 ES5 配列 Methods のサンプル var myArray = ["Alice", "Bob", "John"]; var myFunc = function(value, index, myArray){ document.write("Hello" + value + " "); } var result=myArray.forEach(myFunc);

73 73 ドキュメント モード決定のダイアグラム 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 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 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-site- developers.aspx http://blogs.msdn.com/b/ie/archive/2010/06/16/ ie-s-compatibility-features-for-site- developers.aspx

74 74 DOM の改善点 DOM Range すべての DOM L2 Range API をサポート シンプルで一貫性のあるドキュメントからの抽 出方法を提供 HTML5 Text Selection API 元 DOM Style 属性のスタイルのプロパティをプログラムを経 由して設定したり取得したりする DOM Traversal NodeIterators と TreeWalkers を作成してド キュメント順にノードとノードの子をトラバー スするメソッド 74

75 Inline HTML ここに SVG のマークアップを記述... Inline XHTML ここに SVG のマークアップを記述... ここに SVG のマークアップを記述... タグ タグ ここに SVG のイメージファイルを指定.svg...... 現在利用可能な SVG の実装方法一覧 1

76 タグ タグ タグ タグ タグ タグ.svg ドキュメント ここに SVG のマークアップを記述 ここに SVG のマークアップを記述.svgz ドキュメント 現在利用可能な SVG の実装方法一覧 2

77 77 ネットワーク パフォーマンスの向上 ブラウザー キャッシュの改善 Long-Life キャッシュ ヘッダー Max-age value が 2 31 から 2 63 に Vary レスポンス ヘッダーの改善 リダイレクト キャッシング HTTPS キャッシュの改善 戻る・進む (ボタン動作) におけるキャッシュの 最適化 ヒューリスティック キャッシュの改善 インターネット一時ファイルの扱い 新しいブラウザー セッションでの再訪問時の キャッシュの利用改善

78 78 互換性と対応 ブラウザー モード ブラウザー モード内容 IE9 UA String, Version Vector, ドキュメント モードも、すべて IE9 のデフォルトの値を返す、最も標準準拠のモード IE9 Compatibility View UA String, Version Vector, ドキュメント モードにおいて、 すべて IE7 として振る舞う。 UA String の Trident/5.0 の表記で IE9 互換モードと判断。 ユーザーが互換モード ボタンを押した時の動作を検証。 IE8 UA String, Version Vector, ドキュメント モードにおいて、 すべて IE8 として振る舞う。 IE7 UA String, Version Vector, ドキュメント モードにおいて、 すべて IE7 として振る舞う。

79 79 互換性と対応 ドキュメント モード ドキュメント モード 内容 IE9 Standards IE9 で実装された最新の Web 標準準拠モード (Strict または Unknown DOCTYPE のデフォルト モード) IE8 Standards ブラウザー モードが IE8 の時の デフォルトの Web 標準準拠モード IE7 Standards ブラウザー モードが IE7 の時の デフォルトの Web 標準準拠モード Quirks DOCTYPE が無いまたは Quirks 指定の場合の互換モード IE5 または各バージョンの Quirks モードと同じ動作

80 80 IE6 ベースのコンテンツへの対応 標準モードでの動作確認 Quirks モード (IE5.5 互換) の表示を確認 デフォルトで Quirks 表示になるか ? も確認 強制的に Quirks モードにする場合 Web サーバー側で HTTP ヘッダーの X-UA-Compatible : IE=5 を追加 適切な Quirks 用の DOCTYPE 宣言をつける DOCTYPE がない場合 Quirks モードになる

81 81 IE7 ベースのコンテンツへの対応 デフォルトが Standard モードの場合 IE9 Standard から順に問題なく表示される モードを確認 Quirks モードの場合は IE6 対応と同様 混在する場合は EmulateIE7 を利用 Web サーバー側で HTTP ヘッダーの X-UA-Compatible : IE=EmulateIE7 を追加

82 82 IE8 ベースのコンテンツへの対応 基本的には DOCTYPE を利用 IE9 Standard モードでも問題ないはず IE9 Standard モードで問題がある場合 IE=EmulateIE8 を利用 フレームセットを使っている場合 フレームセットを宣言する DOCTYPE を確認 IE=EmulateIE8 を利用

83 83 Same Markup: コア ガイドライン 推奨 機能の検出: 機能を利用する前にブラウザーがサポートしているか？ 振る舞いの検出: 代替案を適用前に既知の問題をテストする 非推奨 特定のブラウザーの検出: 過去のやり方 関係のない機能を想定しない: 実際に利用する機能かどうか？ http://blogs.msdn.com/b/ie/archive/2010/04/13/running-today-s-different-markup.aspx

84 84 パフォーマンス コンポーネント コンポーネントの構成比率はサイト毎に異なる サブシステム同士の最適化が重要

85 85 Dell Optiplex with a 3.0 GHz Core 2 Duo Intel processor, 4 GB RAM, and Intel integrated vide; running Windows 7 IE8 より 10 倍以上速い！

86 86 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 にする [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 にする

87 © 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.