開発者のための Internet Explorer 9

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

セッションの目的 InternetExplorer9 が、開発者にとってどのようなメリットをもたらすのか？をご理解いただく InternetExplorer9 の Web 標準技術への対応状況と、Windows プラットフォームとの組み合わせによるメリットをご理解いただく InternetExplorer9 の評価ポイントを押さえていただくセッションのゴール Internet Explorer 9 PlatformPreview を使って、評価に取り組む準備と計画ができるようになる InternetExplorer9 が対応予定の新しい Web 標準技術の基本を理解し、簡単なサンプルを DEMO コードをベースに作成・確認できるようになる InternetExplorer9PlatformPreview を使って、自身が担当する Web サイトの IE9(互換) 対応がポイントを押さえてできるようになるセッションの目的とゴールSessionObjectives and Takeaways

アジェンダ • InternetExplorer9 とは? • PlatformPreview • パフォーマンスの向上 • GPU アクセラレーション • SameMarkup–Web 標準対応 • HTML5、CSS3、DOM、SVG、JavaScript 等 • 互換性と対応 • 互換性について • F12DeveloperTools の活用 • Web アプリケーションの可能性

InternetExplorer9 とは? PlatformPreview の位置付け

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

InternetExplorer9 とは？ • 開発者に何が提供されるのか？ • PlatformPreview ビルド • 豊富なサンプルコード/DEMO と情報 • 機能追加された DeveloperTools • 革新的な機能とユーザビリティ

Internet Explorer 9 の構成 • Tab Process • Frame Process Navigation Development Tools UI (Address bar, tabs) Protected Mode Broker Tabs (State, cookies, recovery data) • Trident Platform Preview Markup Object Model Page Layout Extensibility XML Malware Detection Settings (User preferences) IE Networking JavaScript Rendering and Printing • Windows OS Services UI Services (Windowing, Themes, common controls) Registry (Settings, zones) Core OS Services (Threading, memory management, I/O, etc. ) XML (Parsing) Deployment (Component installation, updates) Networking (TCP sockets, etc. ) Security (Credentials, integrity levels, ASLR, DEP) Graphics Printing (D2D, DirectX, Windows codecs, XPS)

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

InternetExplorer9 とは?パフォーマンスの向上 • 新しい ChakraJavaScript エンジン • Multi-CoreCPU 処理に最適化 • バックグラウンドコンパイラ Multi-Core CPU

InternetExplorer9 とは？JavaScript エンジンのバックグラウンドコンパイラ Source Code Parser AST* ByteCode Interpreter Native Code Background Compiler Compiled JavaScript バックグラウンド処理複数コアを利用 *AST:AbstractSyntaxTree( 抽象構文ツリー )

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

InternetExplorer9 とは?JavaScript エンジンの Native 実装 VBScript InternetExplorer9 InternetExplorer8 COM DOM COM JavaScript (Chakra) JScript 5.8 DOMES5 DOM DOM

InternetExplorer9とは?GraphicsProcessingUnit(GPU)アクセラレーション

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

DEMO PlatformPreview IETestDrive.com

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

SameMarkup–Web 標準対応新しく対応した Web 標準技術 • HTML5 • CascadingStyleSheets,Level3(CSS3) • DocumentObjectModel(DOM)L2&3 • ScalableVectorGraphics(SVG) • ECMAScript5thEdition • WebOpenFontFormat(WOFF) • その他 • ICCv2 および v3 カラープロファイル • DataURI の改善

SameMarkup–Web 標準対応HTML5 • 互換性の重視 • HTML4 との互換性 • 次の HTML との互換性 • ブラウザー間の互換性 • アクセシビリティ重視 • セマンティクスな要素 • 実用性の重視 • 機能の再利用 • 革新より発展一般的に HTML5 に含められる API 類 W3CHTML5 構文要素 Canvas WebWorkers その他… オフライン <video> <audio> Server-SentEvents FileAPI その他… GeolocationAPI WebSocketAPI

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

SameMarkup–Web 標準対応HTML5<video> &<audio> • 外部プラグインなしで実装可能 • 再生コントロールがデフォルトで実装 • 動画や音声のデコードを GPU で処理 <video id="myVideo" src="video.mp4" autoplay controls></video>

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

SameMarkup–Web 標準対応HTML5Canvas の実装 • グラフィックスの描画が可能な領域を示す • JavaScript で Canvas に描画するための、2d 描画コンテキストを取得する <canvas id="mycanvas" width="100" height="200"></canvas> var canvas = document.getElementById ("mycanvas"); var context = canvas.getContext("2d");

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

DEMO HTML5 <video> 実装とコントロール Canvas アニメーション

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

DEMO CSS3 の活用 Backgrounds&Borders

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

SameMarkup–Web 標準対応DocumentObjectModel(DOM) • DOM L2 Events • MouseEvent(mouseenter/mouseleave) • DOM L3 Events • KeyboardEvent(keydown/keypress/keyup) • Compositionevents(compositionstart, compositionupdate, compositionend)

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

DEMO DOM addEventListener KeyboardEvent

SameMarkup–Web 標準対応Scalable Vector Graphics(SVG) • SVG 画像は XML の構文に準拠したドキュメント • SVG イメージの描き方 • 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>

SameMarkup–Web 標準対応IE9 の Scalable Vector Graphics(SVG) • W3CSVG1.12ndEdition をベースに実装 • 中身は XML で、JavaScript などから簡単にアクセス可能 • InlineHTML、InlineXHTML に対応 • <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>

DEMO SVG の実装

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

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

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

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

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

互換性と対応Metaタグと HTTP ヘッダー • Meta タグと HTTP ヘッダー • IE9 で追加された値

互換性と対応IE9 での変更点・注意点 • Web ページが IE7 互換を求める場合 • EmulateIE を並べて記述することで、IE8,IE9 両方に対応 • iframeの扱い • トップレベルのページが IE9Standard モードの場合、すべての iframe ページは IE9Standard モードで表示される • ただし、Quirks モードを除く <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">

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

DEMO 互換性と対応モードの切り替え UserAgentString の確認

開発者のための Internet Explorer 9