Internet Explorer 9

Internet Explorer 9 春 井 良 隆 マイクロソフト 株 式 会 社 デベロッパー&プラットフォーム 統 括 本 部 UX&クライアントプラットフォーム 推 進 部

本 セッションでは 現 在 開 発 中 の 製 品 を 取 り 扱 ってい ます 仕 様 および 機 能 は 変 更 される 可 能 性 があります

WebブラウジングがPCの 最 のタスク PCの 稼 働 時 間 の57%がブラウザーに 使 われている 3

ブラウザーは 劇 場 4

主 役 はWebコンテンツ 5

開 発 コンセプト Webをアプリケションのように 速 洗 練 信 頼 相 互 運 性 6

速 1. 新 設 計 のJavaScriptエンジン 2. レイアウトエンジン DOMの 最 適 化 3. GPU-Powered HTML5 4. ネットワーク キャッシュの 扱 いの 向 上 7

速 Chakra #1 新 しい JavaScript コンパイラ マルチコア 対 応 バックグラウンド 処 理 型 (Type) 情 報 の 扱 いの 最 適 化 新 しい インタプリタ スタックベースからレジスタベースに 中 間 コードの 効 率 化 と Type の 最 適 化 JavaScriptランタイム&ライブラリの 向 上 ECMA Script 5のサポート 8

速 Chakra #2 Foreground Source Code Parser AST* Byte Code Interpreter Background Background Compiler Native Code Compiled JavaScript In The Background Using Multiple Cores *AST: Abstract Syntax Tree ( 抽 象 構 ツリー) 9

速 Chakra #3 Internet Explorer 8 VB Script DOM COM JScript 5.8 DOM DOM JavaScriptエンジンはIEの 外 部 に 複 数 のDOMがシステム 全 体 にまたがっている プログラミングモデルが 旧 式 ブラウザーとスクリプト 間 のコミュニケーションが 遅 い 10

速 Chakra #4 Internet Explorer 9 VB Script COM DOM DOM ES5 JavaScript (Chakra) JavaScriptエンジンがIEの 内 部 に つのDOMをブラウザとJavaScriptで 共 有 HTML5のためのECMAScriptプログラミングモデル スクリプトの 処 理 能 を 躍 的 に 改 善 11

速 GPU-Powered HTML5 #1 DirectX APIを 利 -Direct2DとDirectWrite ハードウェアが 追 いつかない 場 合 はソフトウェアで GDI 処 理 ではなく DirectX のソフトウェア 処 理 <canvas> CSS 3 Media Queries SVG Web Fonts CSS 3 Opacity <video> CSS 3 HSLA/RGBA <audio> 12

DEMO 13

洗 練 Webが 際 つユーザーインターフェース ワンクリック ナビゲーション Windows 7への 最 適 化 14

洗 練 Windows 7への 最 適 化 15

DEMO 16

信 頼 業 界 最 準 のセキュリティ 抜 群 の 安 定 性 ユーザーによるプライバシー 管 理 90% 80% 70% 60% 50% 40% 30% 20% 10% 0% 85% Malware Block Rate Source: NSS Labs Socially Engineered Malware Test Report 29% 29% 17% 0.5% 17

相 互 運 性 W3Cへの 協 W3Cが 定 めるWeb 標 準 に 準 拠 HTML5 CSS 3 DOM Level 2/3 SVG 1.1 ICC Color Profile 18

相 互 運 性 W3C ワーキング グループメンバー HTML5, DOM, CSS, SVG, WebFonts HTMLワーキング グループ W3Cメンバー (40) 参 加 者 (400) 招 聘 された 専 門 家 (280) メーリングリスト (9) テスティング タスクフォース メンバー SVG Testing, HTML Testing, Accessibility Testing 19

相 互 運 性 HTML5 <canvas> 描 画 メソッドはpaths, boxes, circles, text and rasterized images アニメーションはFrame-basedとTime-based <video> H.264をサポート HTMLやSVGとのビデオ 合 成 GPU Poweredで60fpsまでのフレームレートに 対 応 <audio> MP3とAACをサポート 20

相 互 運 性 CSS3 21

相 互 運 性 CSS3 Selectors 少 ないスクリプトでシンプルなマークアップを Namespaces XHTMLでの 名 前 空 間 をStyle elementsで 利 Media Queries 表 するデバイスの 解 像 度 によって レイアウトを 切 り 替 え Color rgba()やhsla()でのアルファ 指 定 opacity propertyによる 透 明 度 のコントロール Backgrounds and Borders Border-radiusプロパティによる 角 丸 の 指 定 エレメントごとに 複 数 背 景 を 指 定 Web Fonts WOFF (Web Open Font Format) 22

相 互 運 性 DOM DOM Level 2とLevel 3のEventをフルサポート DOM Range すべての DOM L2 Range API をサポート シンプルで 貫 性 の あるドキュメントからの 抽 出 法 を 提 供 HTML5 Text Selection API 元 DOM Style 属 性 のスタイルのプロパティをプログラムを 経 由 して 設 定 したり 取 得 したりする DOM Traversal NodeIterators と TreeWalkers を 作 成 してドキュメント 順 にノー ドとノードの をトラバースするメソッド DOM Whitespace の 扱 い 過 去 のIEとは 異 なり HTML5 に 準 拠 23

相 互 運 性 SVG SVG 1.1 2nd Edition Inline HTML Inline XHTML に 対 応 <object><embed><iframe><img>で 実 装 24

相 互 運 性 Image ICC version 4とICC version 2 イメージに 埋 め 込 まれているカラープロファイルを 認 識 して 正 しい で 表 JPEG XR JPEGよりも 圧 縮 JPEGと 同 じファイルサイズでも 品 質 ロスレス 圧 縮 をサポート TIFF 汎 性 の いイメージフォーマット 25

DEMO 26

F12 開 発 者 ツール Web 開 発 者 向 けのデバッガー IE8 から 搭 載 F12 キーで 起 動 IE9の 新 機 能 Network 対 応 (Fiddler のサブセットのような) JavaScript のプロファイリング 動 作 の 速 化 27

Internet Explorer 9 速 PCのハードウェア リソースを 最 活 洗 練 主 役 はブラウザーでは なくWebサイト 信 頼 安 全 性 安 定 性 プライバシーの 向 上 相 互 運 性 同 のマークアップ を 実 現 新 設 計 のJavaScriptエンジン レイアウトエンジン DOMの 最 適 化 GPU-Powered HTML5 Web が 際 つ 新 しいユーザー インターフェース ワンクリック ナビゲーション Windows 7 に 最 適 化 業 界 最 準 のセキュリティ 抜 群 の 安 定 性 ユーザーによるプライバシー 管 理 W3Cとの 協 業 W3Cが 定 めるWeb 標 準 に 準 拠 HTML5 CSS 3 DOM Level 2/3 SVG 1.1 ICC Color Profile 28

必 要 システム コンピューター 本 体 233MHz 以 上 のプロセッサを 搭 載 したパーソナル コンピュータ 本 語 版 オペレーティング システム Windows Vista 32/64bit SP2 以 降 Windows 7 32/64bit Windows Server 2008 32/64bit SP2 以 降 Windows Server 2008 R2 64bit SP2 以 降 メモリ 512MB 以 上 の 実 装 メモリ ハードディスク Windows Vista Windows 7 32bit : 70MB Windows Vista Windows 7 64bit : 120MB Windows Server 2008 32bit : 150M Windows Server 2008/2008 R2 64bit : 200M ディスプレイ 800x600 以 上 の 解 像 度 256 以 上 のカラー 表 をサポートするディスプレイ グラフィック Windows Display Driver Model (WDDM) 1.1ドライバー DirectX 10 以 降 に 対 応 した GPUを 推 奨 29

リソース Internet Explorer 9 Beta 版 のダウンロード http://windows.microsoft.com/en-us/internet-explorer/download/ie- 9/worldwide Internet Explorer 9 Platform Preview 5のダウンロード http://ie.microsoft.com/testdrive/default.html The Beauty of the Web http://www.beautyoftheweb.com/ Internet Explorer デベロッパーセンター http://msdn.microsoft.com/ja-jp/ie/default.aspx Internet Explorer ブログ ( 本 語 ) http://blogs.msdn.com/ie_jp/ Internet Explorer ブログ http://blogs.msdn.com/ie/default.aspx 30

2010 Microsoft Corporation. All rights reserved. 本 資 料 の 第 三 者 開 はご 遠 慮 くださいますようお 願 いいたします 製 品 情 報 製 品 機 能 内 容 開 発 スケジュール マーケティング 施 策 などの 全 ての 情 報 は 予 告 無 く 変 更 されることがあります あらかじめご 了 承 ください 31

ジャンプリストの 実 装 <head>タグにmetaタグで 指 定 Task1を 定 義 している 例 <meta name= msapplication-task content= name=(タスクに 表 さ れるリスト 名 );action-uri=(url) ;icon-uri=(ファビコンのurl)"/> <meta name="msapplication-task" content="name=task 1;actionuri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/> 32

ジャンプリストに 独 カテゴリを 追 加 カテゴリを 指 定 window.external.mssitemodecreatejumplist('list1'); アイテムを 指 定 window.external.mssitemodeaddjumplistitem('item 1', 'http://host/item1.html', 'http://host/images/item1.ico'); リストを 表 window.external.mssitemodeshowjumplist(); リストをクリア window.external.mssitemodeclearjumplist(); 33

ファビコンのサイズ 基 本 : 16x16 お 奨 め:16x16 32x32 48x48 機 能 バージョン 96 dpi 120 dpi 144 dpi 新 しいタブ IE9 32x32 40x40 *40~48の 可 変 48x48 ピンドモード: タスクバー スタートメニュー ピンドモード: トップフレーム IE9 32x32 48x48 64x64 IE9 24x24 32x32 48x48 タブとファビコン IE8/9 16x16 24x24 24x24 34

ピンドモード 時 のフレーム の 変 更 を 指 定 している 例 <meta name="msapplication-navbutton-color" content= ( )"/> <meta name="msapplication-navbutton-color" content= red"/> 35