Windows Summit 2010 2018/9/21 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.

Presentation on theme: "Windows Summit 2010 2018/9/21 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be."— Presentation transcript:

1 Windows Summit 2010 2018/9/21 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

2 トランスクリプト付き日本語翻訳ファイルについて
Windows Summit 2010 2018/9/21 トランスクリプト付き日本語翻訳ファイルについて この PowerPoint ファイルには、「ノート」 セクションにセッションの講師が話している内容を書き起こしたもの (トランスクリプト) を入力しています。 ノートを参照するには、PowerPoint の表示モードを [標準] または [ノート] に設定してください。[標準] の場合は、スライド表示ウィンドウの下 (ノート ペイン) に表示されます。 ノート表示モードで見た際に、ノートが 1 ページに収まりきらない場合は、該当するスライドを複製し、複数ページにわたってノートを入力しています。そのため、オリジナルの英語版ファイルと比較して、スライド番号やスライドの枚数が異なる場合があります。 ノートを印刷するには、[印刷プレビュー] または [印刷] 画面において、[印刷対象] を [ノート] に指定してください。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

3 Internet Explorer 9 Overview (Internet Explorer 9 の 概要)
Windows Summit 2010 2018/9/21 Internet Explorer 9 Overview (Internet Explorer 9 の 概要) 皆さん、こんにちは。ご視聴ありがとうございます。Windows Summit へようこそ。私は Leon Braginski です。Windows PC エコシステム チームのプログラム マネージャーとして Internet Explorer シナリオ導入を担当しています。このセッションでは、Internet Explorer 9 の概要をご説明します。 Leon Braginski Senior Program Manager Microsoft Corporation © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

4 目的 Internet Explorer 9 の新機能を理解する
Windows Summit 2010 2018/9/21 目的 Internet Explorer 9 の新機能を理解する Internet Explorer 9 Platform Preview を紹介する このセッションの目的は、Internet Explorer 9 の新機能と、Internet Explorer 9 Platform Preview のご紹 介です。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

5 議題 Internet Explorer 9 の重点領域 Platform Preview に関する考察 皆様へのお願い リソース
Windows Summit 2010 2018/9/21 議題 Internet Explorer 9 の重点領域 Platform Preview に関する考察 皆様へのお願い リソース まず最初に、Internet Explorer 9 の主要分野をご説明し、次に Platform Preview の概要と、セッション 後にチェックしていただきたいリソースをご紹介します。そして最後に、Internet Explorer 9 導入に関 する皆様へのお願いを申し上げます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

6 ユーザーのブラウザー使用時間 Windows Summit 2010 2018/9/21
ブラウザーの使用 時間が 80% 以上の ユーザーは 20% ブラウザーの使用 時間が 30% 以下のユーザーは 20% 大半のユーザーは、ブラウザーの 使用時間が 35 ～ 75% (平均 = ～ 50%) 本題に入る前に、ユーザーによるブラウザー使用時間を確認してみましょう。クリック数や消費時間な どのさまざまなデータを測定した結果、ユーザーによる平均のブラウザー使用時間は 50% ほどである ことが分かりました。非常に長いですね。開発者には、快適なブラウズ エクスペリエンスを提供するこ とが求められます。ブラウズはユーザーの中心的な活動であるため、優秀なブラウザーと快適なエクス ペリエンスを提供することが最も重要と言えます。これが本日のテーマです。では、Internet Explorer 9 とそのブラウズ エクスペリエンスについてご説明しましょう。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

7 Internet Explorer 9 の重点領域
Windows Summit 2010 2018/9/21 Internet Explorer 9 の重点領域 Internet Explorer 9 HTML5 Internet Explorer 9 は、これまでのブラウザーと多くの点が異なります。Internet Explorer 9 で特に重視 したのは、HTML 5 の活用とパフォーマンスです。Internet Explorer 9 はとても高速です。マイクロソフ トはこのパフォーマンスが非常に重要と考えています。パフォーマンスとは、単に JavaScript のパ フォーマンスのことだけではありません。SunSpider テストでブラウザーの速度をチェックしているよ うな人はあまりいないと思いますが、一般のユーザーでも、ブラウザーの起動の速さを意識している人 は少なくありません。タブを新規作成した場合にどのくらいの速さで表示されるか、ブラウザーを終了 するとどのくらいの速さで消えるか、メールをチェックしたりニュースを閲覧する際に、Web サイトの レンダリングとレイアウトにどのくらい時間がかかるかということも、すべてパフォーマンスに関連し ています。ここでは GPU アクセラレーションについてもお話しします。HTML 5 ではメディアリッチな Web が実現します。メディアリッチな Web で快適なエクスペリエンスを提供するには、コンピュー ターに備わるすべてのハードウェアを活用する必要があります。そこで重要なのが GPU アクセラレー ションとなります。また、同じマークアップについてもお話しします。多くの開発者に意見を伺ったと ころ、特定のブラウザーでしか動作しないようなコードを書くのではなく、すべての主要ブラウザーで 動作するコードを書きたいという声が圧倒的でした。同じマークアップとは、まさにそのことです。さ らに、Internet Explorer 9 Platform Preview についてもご紹介します。開発方法と、開発した Web サイ トが Internet Explorer 9 でどのように表示されるのかをリリース前にテストする方法をご説明します。 GPU アクセラレーション Internet Explorer 9 Platform Preview パフォーマンス 同じマークアップ © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

8 パフォーマンス コンポーネント Windows Summit 2010 2018/9/21
それでは、パフォーマンスの説明から始めましょう。先ほど触れたように、パフォーマンスには多くの 要素が関連しています。マイクロソフトは計画の段階で、ブラウザーの各サブシステムがパフォーマン スにどのように影響するかを徹底的に調査しました。具体的には、さまざまなワークロードにおいてブ ラウザーのプロファイリングを行いました。たとえば、数件のニュース サイトをレンダリングしたり、 Office Online の Excel Web アプリケーションを使ってアプリケーションの読み込み状況を観察しました。 その結果、ワークロードの違いによって、ブラウザーの異なる部分に負荷がかかることがわかりました。 もちろん、灰色の部分が示しているとおり、JavaScript のパフォーマンスに左右されている Web サイト も多くあります。すべてのシナリオを見るとわかりますが、レイアウトもパフォーマンスに大きく影響 しています。この問題を解決する必要があります。マイクロソフトは次の取り組みを行いました。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

9 パフォーマンスに関する投資 新しい JavaScript エンジン
Windows Summit 2010 2018/9/21 パフォーマンスに関する投資 新しい JavaScript エンジン ドキュメント オブジェクト モデル (DOM) と JavaScript の統合の最適化 レイアウトの最適化 Internet Explorer 9 では、JavaScript エンジンを設計し直し、先ほどのグラフにあったすべてのシナリオ におけるレイアウトを最適化しました。また、ドキュメント オブジェクト モデル (DOM) と JavaScript の統合も最適化しました。先ほど申し上げたとおり、パフォーマンスには JavaScript だけではなく、ブ ラウザー エクスペリエンスを構成するすべての要素が影響するのです。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

10 マルチコア処理 Windows Vista および Windows 7 ユーザーのCPU コア数 マルチコア CPU 日付 CPU 数
Windows Summit 2010 2018/9/21 マルチコア処理 Windows Vista および Windows 7 ユーザーのCPU コア数 次にマイクロソフトが行った、ユーザーにおけるコンピューティング エコシステムの実態調査の結果を ご説明します。2010 年 2 月の Windows エクスペリエンス インデックスによると、標準的なコン ピューターには 2 個以上の CPU が搭載されていることがわかりました。つまり、これは Internet Explorer 9 で利用できる演算処理能力が備わっていることを意味しています。 マルチコア CPU 日付 CPU 数 2010 年 2 月 1 日 2.3 Windows エクスペリエンス インデックスの報告による © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

11 JavaScript エンジン バックグラウンド コンパイラ
Windows Summit 2010 2018/9/21 JavaScript エンジン バックグラウンド コンパイラ フォア グラウンド ソース コード パーサー AST バイト コード インター プリター バックグラウンド バックグラウンド コンパイラ ネイティブ コード Internet Explorer 9 では、別の CPU コアを利用する JavaScript バックグラウンド コンパイラを導入しま した。通常、ブラウザーが Web サイトに移動する際には、ソース コードの読み込み、解析、JavaScript の変換に必要な領域と命令の作成、変換という動作が行われます。しかし、Internet Explorer 9 ではこ の方法が少し異なります。動作そのものは同じですが、Internet Explorer 9 では別のコアで JavaScript を コンパイルします。スクリプトをコンパイルしてネイティブ コードにした後、それをフォアグラウンド スレッドに戻して実行させます。 この方法には多くのメリットがあります。第一に、フォアグラウンド スレッドはバックグラウンドでの コンパイルの完了を待つ必要がありません。そしてコードを受け取ったら、すぐに変換を開始できま す。その後バックグラウンド コンパイルが完了すると、フォアグラウンド スレッドはネイティブ コー ドを実行するようになり、動作が高速化します。こうしたバックグラウンドでの変換とコンパイルがき わめて有効に作用するコードの例として、詰まったループがあります。アニメーションでよく使われる ような詰まったループを使用すると、ループのたびに変換するよりも、ネイティブ コードの実行によっ てはるかに高速化できます。後ほどデモで、その違いをご覧いただきます。 バックグラウンド コンパイラ ネイティブ コード © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

12 Windows Summit 2010 2018/9/21 Webkit.org’s SunSpier v0.9.1 JavaScript Performance Benchmark, generated May 5, 2010 テスト結果はこちらです。これは最近実行した SunSpider の JavaScript テストの結果です。Internet Explorer 8 と Internet Explorer 9 Platform Preview では、大きな差があることがわかります。後ほ ど詳しく説明しますが、Internet Explorer 9 Platform Preview は完全なブラウザーではありません。 開発者の皆様がアプリケーションを Internet Explorer 9 でプレビューできるように、HTML の解析や レンダリングなどの機能を備えたコンポーネントである Trident をご提供するものです。マイクロソフ トは最初の Internet Explorer 9 Platform Preview をリリースした後、5 月上旬に第 2 弾をリリース しました。その後は 8 週間おきに Platform Preview の新バージョンをリリースしています。グラフの とおり、Internet Explorer 9 のパフォーマンスは Internet Explorer 8 からほぼ 7 倍向上しています。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

13 Internet Explorer 9 の パフォーマンス
Windows Summit 2010 2018/9/21 デモ Internet Explorer 9 の パフォーマンス ではここで、パフォーマンスの向上によってブラウズ エクスペリエンスがどのように変化したかをデモ でご覧いただきましょう。では始めます。 このデモでは Internet Explorer 9 と Internet Explorer 8 のパフォーマンスの違いをご覧いただきます。 Internet Explorer 9 は、Platform Preview です。では始めましょう。Internet Explorer 8 を起動し、こち らに配置します。Platform Preview はこちらに配置しましょう。まず、Flickr Explorer を使用します。 Flickr に接続し、特定のタグが付いた写真を検索します。既定のタグは California です。California がタ グ付けされたすべての写真が表示され、ズームやパンを実行できるようになっています。Internet Explorer 9 Platform Preview では、ご覧のように滑らかに操作できます。1 秒あたり約 60 フレームが プッシュされ、非常にパフォーマンスが高いです。一方、左の画面では、Internet Explorer 8 がほとん ど動作していません。画像数があまりに多く、ズームや拡大縮小に必要な計算量も多いため、ひどく時 間がかかっているのです。画像に動きはありますが、なかなか展開されません。実は、1 秒に 1 フレー ムしか処理できておらず、パフォーマンスが良いとは言えません。画像が完全に展開されるまでは、ク リックすることもできません。一方 Platform Preview のエクスペリエンスは非常に快適です。動きが速 く、移動やズームも自由自在でとても素晴らしいです。Internet Explorer 8 がやっと動き始めました。 ズーム インしてみますが、滑らかとは言い難いですね。Platform Preview とは比べ物になりません。 別のデモもご覧いただきましょう。Flying Images というアプリケーションを使用します。Flying Images とは何かというと、基本的にはとても単純なもので、ロゴのイメージ ファイルをいくつか表示するだけ です。これは、詰まったループで処理されています。プリコンパイルの点では、この詰まったループが 非常に有効であり、左または右へ移動しながら z オーダーを変更し、各イメージの位置を計算していき ます。これらの処理はすべて従来のレイアウト HTML で行われ、HTML 5 は使用していません。このア プリケーションはどんなブラウザーでも動作します。使われているのは HTML と JavaScript だけです。 IE9 では、1 秒あたり 64 フレームが処理されています。IE8 でも見てみましょう。見てのとおり、エク スペリエンスはまったく異なり、1 秒あたり 5 フレームを処理するのも困難です。このブラウザーでは、 このアプリケーションはあまり使いたくないですね。処理能力を超えているのは明らかで、使い物にな りません。一方、IE9 では非常にスムーズです。画像の数を増やして、64 個にしてみましょう。ズーム インしても、1 秒あたり 60 フレームの速さを保っています。いったんこちらは停止して、Internet Explorer 8 でも画像数を増やしてみましょう。やはり、1 秒あたり 3 フレームを処理するのも厳しいよ うです。画像を 64 個にしましたが、動きがかなり鈍いです。これでエクスペリエンスの違いを実感し ていただけたのではないでしょうか。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

14 Internet Explorer 9 の パフォーマンス (続き)
Windows Summit 2010 2018/9/21 デモ Internet Explorer 9 の パフォーマンス (続き) 次は別のブラウザーで試してみましょう。Google Chrome です。Chrome は高速ブラウザーとして知ら れています。Chrome が Internet Explorer 8 より速いかどうか確認してみましょう。Chrome を起動して、 IE9 と比較します。ご覧のとおり、Chrome は Internet Explorer 8 と大差ありません。画像は 36 個です が、1 秒あたり 4 フレームも処理できていません。ズーム インしてみますが、やはりゆっくりです。 まったく変わりませんね。IE9 の方は相変わらず、いろんな動作が可能です。画像数をさらに増やして も問題ありません。100 個にしましたが、1 秒あたり 50 ～ 55 フレームを保っています。素晴らしいで すね。以上、パフォーマンスのデモをご覧いただきました。 それではプレゼンテーションに戻り、今ご覧いただいたパフォーマンスがどのように実現されているか、 その仕組みを詳しく検証していきましょう。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

15 プロセッサの分散 Internet Explorer 9 Internet Explorer 8 時間 CPU CPU フォアグラウンド
Windows Summit 2010 2018/9/21 プロセッサの分散 Internet Explorer 9 時間 CPU CPU フォアグラウンド 時間 CPU バックグラウンド デモは楽しんでいただけたでしょうか。ではここで、そのパフォーマンスの仕組みについて詳しくご説 明しましょう。このグラフは Internet Explorer 8 でのプロセッサの分散状況を示しています。バックグ ラウンド スレッドとフォアグラウンド スレッドがあります。ご覧のとおり、ほとんどの処理はフォア グラウンドで実行されています。緑がコードの変換、その次がレイアウト、その次が画面への表示を表 しています。一方、バックグラウンド スレッドでの処理はごくわずかです。バックグラウンドの赤い部 分は、先ほどの画像が回転するデモと直接的な関係はありません。マルウェア フィルターやその他のタ スクを介して Web サイトを実行する場合も、レンダリングには関係しません。ご覧のとおり、多くの 処理をフォアグラウンド スレッドで実行する必要があります。 では、Internet Explorer 9 ではどうでしょうか。バックグラウンド スレッドでの処理が増えていますね。 これは、新しい JavaScript エンジンにバックグラウンド コンパイラが導入されたためです。これにより、 すべてのコンパイル処理がバックグラウンドで実行されます。グラフの緑色の部分です。なお、フォア グラウンド スレッドでもある程度コンパイルが実行されています。先ほど触れたとおり、コードのコン パイルが完了するまでは、従来どおりフォアグラウンドでスクリプトを変換する必要があります。コン パイルが完了すると、フォアグラウンドはネイティブ コードの実行を開始します。そのため、Internet Explorer 9 ではこのような結果となります 時間 Internet Explorer 8 緑 - 解釈 オレンジと青 - レイアウト 紫と黄 - 画面への表示 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

16 Flying Images - 1 つのアニメーション
Windows Summit 2010 2018/9/21 Flying Images - 1 つのアニメーション Internet Explorer 8 CPU 時間 Internet Explorer 9 時間 CPU さらに詳しく分析するために、1 つのアニメーションに着目してみましょう。このグラフは、すべての ロゴが1 回転するときの 1 回のアニメーション サイクルを表しています。1 回転するのに約 0.5 秒か かっています。0.5 秒でアニメーションが 1 回転というのは、先ほどのデモの様子と一致します。おそ らく 1 秒あたり 2 ～ 4 フレームだったはずです。これほど時間がかかれば、プッシュできるフレーム数 も少なくなりますね。すべての値を計算して、画面にレイアウトする必要があるからです。これは Internet Explorer 8 の場合でした。 Internet Explorer 9 ならどうでしょうか。わずかな処理で済んでいます。その理由は、コンパイル済み の JavaScript、つまりネイティブ コードを使用していることにあります。アニメーションを動かしてい るのは詰まったループです。ループ期間ごとに変換処理を行う必要がなく、ネイティブ コードを実行す ることで非常に高速になります。また、レイアウトと画面への表示に関連する処理も非常に少なくなっ ています。これらすべてが GPU で処理されています。Internet Explorer 9 では、GPU によって HTML 全 体を高速化しています。GPU による HTML の高速化をご説明するには絶好のタイミングですが、その前 に GPU によって HTML を高速化することになった経緯を理解しやすいように、Web の進化の歴史を振 り返ってみたいと思います。最初に登場した Web 1.0 は非常に静的な Web でした。HTML や CSS、鮮 やかな色やフォントもありましたが、それほどアクティブな Web ではありませんでした。インター ネット アクティビティが本当の意味でスタートしたのは 10 年ほど前です。Ajax Web の登場がきっかけ です。Ajax によってアクティブな Web が導入されました。これにより、ユーザーが Web フォームを送 信すると、サーバーはフォーム全体を取得しなくても、検証してエラーを戻すことができるようになり ました。各フィールドを個別に検証することも可能です。たとえば Web 上でスライドショーを鑑賞す る際、次のスライドに切り替えるたびに、サーバーはページ全体をプッシュする必要はなく、更新部分 だけを送信できます。いわゆる対話型の Web でしたが、多彩なグラフィックスの Web ではありません でした。多彩なグラフィックスの Web を本当に実現したのが、HTML 5 です。この Web には、大量の メディア タグがあります。ビデオ タグ、オーディオ タグ、そして JavaScript でのアニメーションが可 能なスケーラブル ベクター グラフィックスです。多彩なグラフィックスの Web と快適なエクスペリエ ンスを提供するには、コンピューターに備わるすべての要素を活用することが重要です。GPU を活用し てハードウェアの能力を活かし、多彩なグラフィックスのあるエクスペリエンスをユーザーに提供する 必要があります。 緑 - 解釈 オレンジと青 - レイアウト 紫と黄 - 画面への表示 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

17 AJAX Web: JavaScript + DOM + 非同期要求
Windows Summit 2010 2018/9/21 Web の進化 HTML5 Web: グラフィックの高品位性 AJAX Web: JavaScript + DOM + 非同期要求 Web "2.0" GPU による HTML の高速化をご説明するには絶好のタイミングですが、その前に GPU によって HTML を高速化することになった経緯を理解しやすいように、Web の進化の歴史を振り返ってみたいと思いま す。最初に登場した Web 1.0 は非常に静的な Web でした。HTML や CSS、鮮やかな色やフォントもあ りましたが、それほどアクティブな Web ではありませんでした。インターネット アクティビティが本 当の意味でスタートしたのは 10 年ほど前です。Ajax Web の登場がきっかけです。Ajax によってアク ティブな Web が導入されました。これにより、ユーザーが Web フォームを送信すると、サーバーは フォーム全体を取得しなくても、検証してエラーを戻すことができるようになりました。各フィールド を個別に検証することも可能です。たとえば Web 上でスライドショーを鑑賞する際、次のスライドに 切り替えるたびに、サーバーはページ全体をプッシュする必要はなく、更新部分だけを送信できます。 いわゆる対話型の Web でしたが、多彩なグラフィックスの Web ではありませんでした。多彩なグラ フィックスの Web を本当に実現したのが、HTML 5 です。この Web には、大量のメディア タグがあり ます。ビデオ タグ、オーディオ タグ、そして JavaScript でのアニメーションが可能なスケーラブル ベ クター グラフィックスです。多彩なグラフィックスの Web と快適なエクスペリエンスを提供するには、 コンピューターに備わるすべての要素を活用することが重要です。GPU を活用してハードウェアの能力 を活かし、多彩なグラフィックスのあるエクスペリエンスをユーザーに提供する必要があります。 コンテンツ Web: HTML と CSS Web "1.0" © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

18 Windows エクスペリエンス インデックスの結果 - GPU
Windows Summit 2010 2018/9/21 Windows エクスペリエンス インデックスの結果 - GPU GPU マルチコア CPU GPU アーキテクチャ Windows Vista および Windows 7 ユーザーのグラフィック スコア Windows エクスペリエンス インデックス 4% % % % % % マイクロソフトでは Internet Explorer 9 を計画するにあたり、CPU と同様、エコシステムの現状を把握 することに努めました。GPU と聞くと、多くの人はゲーム用コンピューターで使う特別なものを想像す るようですが、実はそれは間違いです。GPU はあらゆるコンピューターに備わっています。Windows エクスペリエンス インデックスは、多くのユーザーのマシンに高性能 GPU が装備されていることを示 しています。Windows エクスペリエンス インデックスで 4 ～ 5 番目に上位の GPU を搭載したコン ピューターは、32% にも上ります。つまり、十分な演算処理能力が存在するわけです。GPU と CPU と は何なのか、またその違いは何かと言うと、CPU は非常に汎用的なシリコン部品であるのに対し、GPU はシェーダーや浮動小数点計算など、特定のタスクを効率的に処理する特殊なファブリックを組み込ん でいます。すべてのグラフィックスを GPU で処理するとデバイスの効率性が向上するのはそのためで す。また、バッテリ寿命の点でも優れています。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

19 GPU の力を活用した HTML 5 DOM レイアウトとレンダリング Alpha 値の色と不透明度 角丸処理と複数の背景
Windows Summit 2010 2018/9/21 GPU の力を活用した HTML 5 DOM レイアウトとレンダリング Alpha 値の色と不透明度 角丸処理と複数の背景 HTML5 に統合されたスケーラブル ベクター グラフィックス (SVG) JPEG-XR による <img> 要素、 カラー プロファイル Internet Explorer 9 は、この GPU を最大限に活用しています。HTML 5 全体が GPU によって高速化しま す。Web サイト開発者が行うべき作業はほとんどありません。スクリプトで実行すべき処理もありませ ん。Internet Explorer 9 で HTML をレンダリングすると、GPU によって高速化されます。開発者の方々 からは、非常にシンプルな質問をされることがあります。「開発中の Web サイトはニュース サイトの ような簡単なものなので、多彩なグラフィックスを使うことはほぼないのだが、それでも GPU アクセ ラレーションが必要か」というご質問です。答えは「はい」です。たとえばこの画像は 2 つの div タグ を組み合わせたものですが、わずか 2 ～ 3 分で作成しました。一方の div タグでは CSS 3 の roundBorder を使用し、もう一方では透明な背景を使用しています。このようなものが含まれている Web サイトなら、GPU アクセラレーションによるメリットが必ずあります。もちろん GPU アクセラ レーションでは、JPEG-XR 形式のほか、各種 JPEG カラー プロファイルもサポートされます。基本的に はすべての Web サイトで GPU アクセラレーションのメリットを得られます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

20 HTML5 のメディア統合 HTML5 <video> 要素 HTML5 <audio> 要素
Windows Summit 2010 2018/9/21 HTML5 のメディア統合 HTML5 <video> 要素 MPEG-4/H.264 ビデオ 他の要素 (SVG、HTML) と合成したビデオ 60 fps 対応の GPU ベースの実装 ハードウェア ビデオ デコーダーのサポート HTML5 <audio> 要素 MP3 および高品位オーディオ コーディング (AAC) の サポート 先ほどお話ししたように、HTML 5 ではリッチ メディア統合が実現されます。今後、業界標準の MPEG 4 ビデオ要素をサポートする予定です。Internet Explorer 9 Platform Preview ではまだ組み込まれていま せんが、今後のリリースで対応する予定です。興味深いことに、ビデオ タグは他の要素と合成すること ができます。たとえば div を使ってビデオを合成することもできます。HTML で SVG を使用する場合、 アニメーション ビデオの再生中にその要素をポイントすると、その要素がアニメーションで再生される というような、面白い効果が可能です。また GPU アクセラレーションによって、コンピューターに接 続されている場合、ハードウェア ビデオ デコーダーもサポートされます。もちろん、1 秒あたり 60 フ レームでのネイティブなビデオ再生が可能です。さらに、HTML 5 オーディオ要素もサポートされます。 業界標準の MP3 はもちろん、高品位オーディオ コーディング形式もサポートされます。Web ページに ビデオ要素を追加する方法はきわめて簡単です。基本的に、わずか数行のコードを書くだけで追加する ことができます。 <video width="800" height="450" src="myvideo.mp4" autoplay> No video for you </video> © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

21 デモ GPU アクセラレーション Windows Summit 2010 2018/9/21
それでは、GPU アクセラレーションのデモを進めながら、最新のシナリオ向けに Web ブラウズ エクス ペリエンスがどれほど向上しているか確認しましょう。 このデモでは、再び Internet Explorer 9 Platform Preview と Internet Explorer 8 を使って、最近多くの Web サイトに使われている機能を検証していきたいと思います。今日の Web サイトには、高度にレン ダリングするテキストがそれほどありません。ここでは、テキストの大きさを変更してみます。始めま しょう。左側が Internet Explorer 8 です。フォント サイズを大きくします。動きがぎこちないですね。 次に、Platform Preview で同じ操作をしてみましょう。こちらはスムーズですね。ズーム インしてみま す。Internet Explorer 8 のテキストは、かなりギザギザした感じですよね。b と p の間のダッシュを見 ると、ギザギザしているのがはっきりわかります。Internet Explorer 9 の方は滑らかです。この違い は、DirectX API を使用しているかどうかにあります。具体的には、DirectWrite の使用に関係していま す。DirectWrite API を使うと、サブピクセル ポジショニングが可能になります。大きいサイズでレンダ リングしたテキストを拡大しても、滑らかなままです。 では次のデモに移りましょう。このデモでは、多くの Web サイトで応用できる操作をご覧いただきま す。テキストの配置変更です。では始めましょう。文字の間隔を広げてみます。Internet Explorer 8 の 方はぎくしゃくしていますね。一方 Internet Explorer 9 では非常にスムーズです。もう一度やってみま しょう。比較すると大きな差があるのがわかります。これは、Internet Explorer 9 では GPU によって HTML 全体を高速化しているためです。 では最後にグラフィックスに関するデモをご覧いただきます。多くのユーザーが日常的に利用している 簡単なシナリオです。地図で特定の場所にズーム インする操作です。地図で道順を調べて目的の場所に ズーム インしたり、位置を変えたり、再びズームアウトしたりする操作は、私もよくやります。それを 見ていきましょう。まず Internet Explorer 8 で地図をズーム インしてみましょう。悪くないですね。そ れなりにスムーズです。Internet Explorer 9 はどうでしょうか。まったく違いますね。ズームが滑らか で、ずっとスピーディです。現在多くの Web サイトで使われている一般的なシナリオでも、Internet Explorer 9 の良さがひときわ目立ちます。反復の回数も Internet Explorer 9 の方が多く、処理が高速であ ることがわかります。エクスペリエンスが格段に向上しています。これは、HTML 全体が GPU で高速化 されているおかげなのです。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

22 Windows Summit 2010 2018/9/21 同じマークアップ - HTML5 同じマークアップにより、ブラウザーが異なっ ても HTML、CSS、および JavaScript を同様 に解釈 コア プラットフォームの相互運用性が必要 HTML5 への Microsoft の取り組み W3C への参加 W3C テスト スイートへの貢献 次にご説明するのは、同じマークアップについてです。開発者の方々からよく聞くのは、特定のブラウ ザーでしか動作しないようなコードは書きたくないというご意見です。どんなブラウザーにも対応する 共通のコードを書きたいというのが本音のようです。それが、同じマークアップの基本概念です。同じ マークアップとは、どのブラウザーでも、HTML、CSS、JavaScript が同じように解釈されることを意味 します。ブラウザーが異なっても同じサイトが同じように動作するよう、コア プラットフォームが相互 運用できなくてはなりません。もちろん、ブラウザーの進化のペースはそれぞれ違うので、基本的な要 素は同じでも周辺部分が変化することは考えられますが、コード自体は相互運用可能である必要があり ます。マイクロソフトは Internet Explorer 9 で同じマークアップをサポートするために、相当の努力を 重ね、HTML 5 にも全力で取り組んでいます。CSS のときと同様に W3C にも参加し、テスト スイート を寄贈してすべての人が使用できるようにしています。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

23 同じマークアップ - API の使用 API ランク サイトでの使用率 indexOf 1 94% getElementById 13
Windows Summit 2010 2018/9/21 同じマークアップ - API の使用 マイクロソフトは同じマークアップに対する取り組みを組織的に行ってきました。その中で、さまざま な Web サイトでどのような API が使用されているかを分析するためのツールを作成しました。まず、 7000 件のサイトをプロファイリングし、使用されている JavaScript API をランク付けしました。1 位に ランクされたのは indexOf であり、94% のサイトで使用されています。addEventListener API は 27 位で、 65% のサイトで使用されています。この API は Internet Explorer 8 にはありませんでしたが、Internet Explorer 9 にはあります。したがって、同じマークアップを使用できます。Internet Explorer 6 と 7 では、 まったく別のマークアップが使用されていました。同じマークアップへの取り組みは、Internet Explorer 8 から始まりましたが、本当の意味で実現となるのは Internet Explorer 9 からです。 API ランク サイトでの使用率 indexOf 1 94% getElementById 13 80% addEventListener 27 65% getComputedStyle 62 26% © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

24 同じマークアップ – 標準 カテゴリ 特徴 #stripes tr:nth-child(odd) { background: red; }
Windows Summit 2010 2018/9/21 同じマークアップ – 標準 カテゴリ 特徴 マークアップ HTML のインライン SVG XHTML/XML CSS インフラ ストラクチャ CSS3 セレクター CSS3 名前空間 DOM コア イベント スタイル レンジ HTML5 Selection #stripes tr:nth-child(odd) { background: red; } #stripes tr:nth-child(even) background: white; #left border-radius: 10px; background: blue; 最新の Platform Preview では、同じマークアップの要素として、インライン スケーラブル ベクター グ ラフィックスや XHTML がサポートされています。今後、CSS3 セレクターや CSS3 名前空間のほか、 HTML 5 レンジ、イベント、コアなどの要素もサポートする予定です。右側に簡単なコード例がありま す。n 番目の子要素セレクターなど、CSS3 セレクターの性能を示すために作成しました。仕組みをご説 明しましょう。画面下の小さなテーブルの各行には、偶数か奇数かによって別の色が使われています。 このテーブルがすごいのは、スクリプトや手動によって行の追加や削除を行っても、各行に常に正しい 色が適用される点です。CSS3 の n 番目の子要素セレクターと 6 行のコードによって、これが実現され ます。Internet Explorer 9 では、このような素晴らしい仕掛けが可能になります。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

25 同一のマークアップ – スケーラブル ベクトル グラフィックス (SVG)
Windows Summit 2010 2018/9/21 同一のマークアップ – スケーラブル ベクトル グラフィックス (SVG) 実は XML DOM 内に存在 クライアント側のデバッグが 容易 スクリプトによる操作が簡単 HTML 5 との統合 <svg width="400" height="200" xmlns=" <rect fill="red" x="0" y="0" width="247" height="146" rx="50" border="solid" stroke="black" stroke-width="4"/> <rect fill="green" x="50" y="50" width="247" height="146" opacity=".5" /> </svg> 同じマークアップは、スケーラブル ベクター グラフィックスをサポートすることで実現します。ス ケーラブル ベクター グラフィックスは簡単に使用できます。実際は XML であり、XML ドキュメントと して記述できるので、デバッグしやすく、簡単に作成できます。すべての SVG 要素が DOM、すなわち ドキュメント オブジェクト モデルに集約されるので、簡単かつ自由にスクリプトで操作できるほか、 完全に HTML 5 と統合します。前のスライドで、これと似た画像をご覧いただきました。これは、SVG で作成したものです。この画像を作るために、画面のような 6 行のコードを書きました。とても簡単で した。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

26 同じマークアップ 特定のブラウザーに特化しない
Windows Summit 2010 2018/9/21 同じマークアップ 特定のブラウザーに特化しない if( navigator.userAgent.indexOf('MSIE') != -1 ) { // Code written for browser X } else // Code written for browser Y 同じマークアップに関して Web サイト側で重要なのは、ブラウザーの検出です。使用されているブラ ウザーを、適切なコードで検出する必要があります。画面のように、特定のブラウザーを探すコードに するのはやめましょう。これは悪い見本です。Internet Explorer を想定して、存在するか否かを判断す るのは間違いです。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

27 同じマークアップ 特定のブラウザー機能に特化する
Windows Summit 2010 2018/9/21 同じマークアップ 特定のブラウザー機能に特化する if( window.addEventListener ) { window.addEventListener("load", fn, false); } else if( window.attachEvent ) window.attachEvent("onload", fn); ブラウザーではなく、このように、ブラウザーの機能を探すコードにします。これなら、あらゆるブラ ウザーに対応します。このコードの場合、addEventListener API が存在するなら、その API が使用され ます。存在しなければ、そのブラウザーは Internet Explorer 8 かもしれません。その場合、Internet Explorer 8 の attachEvent が使用されます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

28 同じマークアップ ブラウザーの機能にバグがあったらどうなるか?
Windows Summit 2010 2018/9/21 同じマークアップ ブラウザーの機能にバグがあったらどうなるか? // see jQuery detection of getElementById behavior // Run a test that targets a known issue function runTest() { // create and insert element with specific id in DOM // try to retrieve document using id // Check if element correctly retrieved // set variable result to true if yes, false otherwise return result; } if( !runTest() ) // If not, apply a workaround ここで、次のような問題が予想されます。特定の機能にバグがあった場合、どうなるかという問題です。 その場合、jQuery と同じようなアプローチを使用できます。特定の機能について、バグがあるかどうか 新しいテストを実行します。これは getElementById に関する例ですが、jQuery のプログラミングを見 ると、これと似たコードがあるはずです。その要素を DOM に挿入できます。特定の ID があるので、 その ID の取得を試み、うまくいくかどうかを確認します。この方法でバグの有無を判断したうえで、 問題を回避するコードを記述します。そのときも、特定のブラウザーではなく、特定の機能を探すよう にしてください。機能に問題があれば、その問題を回避するコードを記述します。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

29 同じマークアップ CSS の利点を活用 .roundBorder { border-radius: 50px;
Windows Summit 2010 2018/9/21 同じマークアップ CSS の利点を活用 さらに、CSS を利用することもできます。たとえば border-radius と roundBorder の実装方法は、ブラ ウザーによって異なります。それでもこの 3 行のコードを記述すれば、すべてのブラウザーで正しく roundBorder を表示できます。Mozilla には Mozilla 拡張機能、WebKit には WebKit 拡張機能を使用しま す。また、標準の border-radius も使用します。CSS を利用して同じマークアップを作成することもで きます。 .roundBorder { border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; } © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

30 Internet Platform 9 Platform Preview
Windows Summit 2010 2018/9/21 Internet Platform 9 Platform Preview Platform Previewの詳細については、 次のサイトを参照: リリース 年 5 月 5 日 8週間おきに新リリースを発表 次に、Internet Explorer 9 Platform Preview の概要をご説明しましょう。Internet Explorer 9 Platform Preview は先ほどデモでも使用しましたね。Platform Preview は完全なブラウザーではありません。ブラ ウザーとして使用するためのものではなく、開発者が新しいブラウザーを徹底的にチェックして、新し い機能を試したり、Web サイトの表示を確認するためのものです。そして最も重要なのは、マイクロソ フトにフィードバックを提供していただくことにあります。開発者の皆様からのフィードバックはマイ クロソフトにとって大変貴重なものです。Platform Preview を徹底的にチェックして、ぜひそのフィー ドバックをお寄せください。詳しい方法は後ほどご説明します。 最初の Platform Preview は MIX カンファレンスで発表されました。2 番目のリリースは 5 月上旬に発表 され、その後 8 週間おきに新しいリリースが発表されています。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

31 Platform Preview の構成 Platform Preview Trident ユーザー インターフェイス Trident
Windows Summit 2010 2018/9/21 Platform Preview の構成 ユーザー インターフェイス Trident 開発者ツール Platform Preview 解析 (HTML、CSS) 拡張性 (ActiveX、動作) Internet Explorer の ネットワーキング オブジェクト モデル (HTML DOM) ページ レイアウト (CSS、フロー) AJAX (XMLHttpRequest) JavaScript (パーサー、 インタープリター) レンダリングと印刷 Trident Internet Explorer のアーキテクチャをご存知の方なら、この図を見れば Platform Preview の構成はおわ かりかと思います。Platform Preview は基本的に、解析およびレイアウト エンジン コンポーネントであ る Trident に、ユーザー インターフェイスと開発者ツールを追加したものです。ユーザー インターフェ イスに関しては、まだ完全な機能は備わっていません。[戻る] ボタンがないので、戻りたい場合は少し 面倒になります。また URL の入力も簡単ではなく、メニューを使用する必要があります。リリース前に 開発者の皆様に Internet Explorer 9 を使っていただく機会を設けることは非常に重要だと考えていま す。皆様からいただいたフィードバックを、開発に活かすことができるからです。ぜひ存分にお試しく ださい。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

32 開発者ツール プラットフォームへの視覚的インターフェイス 高速実験 Internet Explorer 9 の新機能 変更を即座に確認
Windows Summit 2010 2018/9/21 開発者ツール プラットフォームへの視覚的インターフェイス 高速実験 変更を即座に確認 Internet Explorer 9 の新機能 ネットワーク アクティビティ JavaScript プロファイル パフォーマンスの 高速化 先ほどのスライドで言及した開発者ツールは Internet Explorer 8 のものですが、Internet Explorer 9 Platform Preview では優れた新機能が搭載されています。開発者ツールを使うと何ができるかという と、DOM 3 を実際に見ながら操作できるため、開発サイクルを迅速化することができます。サーバー に変更を保存してブラウザーを更新するという手間をかけずに、HTML や SVG、スクリプトをすばやく 変更できます。開発者ツールで行った変更は瞬時に確認できるようになっています。Internet Explorer 9 の開発者ツールに追加された新機能の １ つがネットワーク アクティビティです。ネットワークの活動 を監視したり、デバッグするための優れたツールです。また、JavaScript プロファイルもサポートされ ます。Platform Preview リリース 2 には含まれていませんが、今後サポートされる予定です。また、パ フォーマンスが向上したのは言うまでもありません。デバッグを開始すれば、パフォーマンス以外にも さまざまなメリットを実感していただけると思います。複数のステートメントにブレークポイントを設 定するなどの作業も可能になっています。ぜひ開発者ツールをお試しください。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

33 デモ 開発者ツール Windows Summit 2010 2018/9/21
ではここで、開発者ツールで何ができるのか実際にご覧いただきたいと思います。このデモでは、コー ドがブラウザーでどのように実行されるか、HTML の属性の変更とコードの書き換え、そして開発者 ツールによるメリットをいくつかご紹介します。 デモ用のサンプルを作成しました。これは SVG 要素です。小文字の “e” に輪がついたもので、 JavaScript を使って回転させています。アニメーションを一時停止すると、ラベルが変化します。アニ メーションを再開します。デバッグ ツールを開き、このツールで何ができるか、そしてどんなメリット があるのかご覧いただきましょう。 F12 キーを押して開発者ツールを起動します。スクリプトを開きます。このスクリプトがアニメーショ ンを動かしています。JavaScript によって一定の間隔で呼び出される update 関数があります。この update 関数がさまざまな変換を計算します。y と少しずつ異なる x を使ってこの要素を拡大縮小します。 これをループ処理しているので、回転しているように見えます。それでは、開発者ツールで何ができる かご覧いただきましょう。素晴らしいことに SVG は DOM に追加されているので、他の要素とまったく 同じように、アニメーションの実行などのさまざまな仕掛けが可能です。変換を適用したり、さまざま な場所に移動したり、このようなアニメーションを作成することができます。ここで、update ループを トリガーする間隔をクリアして、回転を止めてみましょう。これはデバッグ モードであり、このウィン ドウがコンソールの役割を果たすので、JavaScript コマンドを入力すると、すぐに実行されます。ご覧 のとおりです。コードを見ると、一定時間ごとにループがトリガーされていることがわかります。今そ の間隔をクリアしたので、アニメーションが停止しました。次は、アニメーションをさっきよりずっと 速いスピードで再開してみましょう。コマンドを入力します。interval ID を割り当てます。update 関数 を呼び出し、5 ミリ秒間隔で動かしてみましょう。ご覧のとおり、アニメーションの動きが速くなりま した。このように、開発者ツールの優れた点は、スクリプトを変更してサーバーに保存し、ウィンドウ を更新するという作業が必要ないことにあります。開発者ツールを使えば、開発サイクルを大幅に短縮 することができます。変更を加えたら、すぐにその結果の動作を確認できるからです。従来よりもはる かに迅速な開発シナリオになります。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

34 デモ 開発者ツール (続き) Windows Summit 2010 2018/9/21
開発者ツールのメリットをもう 1 つお見せします。アニメーションは止めましょう。要素を選択します。先 ほども説明しましたが、この “e” は SVG 要素です。これが輪です。ソース コードが非常に長いですね。も ちろん、このソース コードは開発者向けに公開しています。色を緑に変えてみましょう。すぐに変更が反映 されました。属性も変更できます。変換要素を追加し、移動や拡大縮小を実行します。この場合もやはり、 ソース コードの変更、サーバーへの保存、ウィンドウの更新をする必要はなく、結果を直ちに確認できます。 スケーラブル ベクター グラフィックスを操作するには理想的な方法です。次は “e" の文字を小さくしてみ ましょう。スケールを使います。x と y のサイズを半分にすると、ご覧のとおりです。今度は場所を移動し てみましょう。平行移動を実行します。x 方向へ 200、y 方向へ 200 と指定すると、移動しました。このよ うに、属性の追加や削除も可能です。 別の要素でも試してみましょう。この背景も実は SVG 要素です。四角形で、rx は角丸半径のことです。こ の rx を削除するとどうなるでしょうか。四隅が直角になりました。rx を戻しましょう。半径を 100 にする と、先ほどよりも丸みを帯びています。200 だとさらに丸くなります。スケーラブル ベクター グラフィッ クスとその相互作用を学ぶのに理想的なツールです。変更をすぐに確認できますよね。 次に、Internet Explorer 9 で追加された新機能、[ネットワーク] タブをご紹介します。この機能を使えば、 ネットワーク上のやり取りを確認できます。まずキャッシュをクリアします。これは、キャッシュからの要 求ではなく、ネットワークから受信した要求だけにするためです。[ネットワーク] タブを表示し、キャプ チャを開始します。F5 キーを押して状態を更新します。すると、2 個のネットワーク パケットがキャプ チャされました。何のパケットでしょうか。アニメーションを停止して、こちらのウィンドウを開きます。 最初の get 要求ですね。活動や応答など、すべての情報が集められています。この場合は XHTML を要求し たので、XHTML に加えて XML を設定する必要がありました。これも良い学習ツールですね。応答を見るこ とができます。この HTML ファイルは先ほど説明したとおり SVG 要素です。概要ビューに戻れば別の要求 も見ることができます。アニメーションを実行する JavaScript ファイルの通常の要求です。もちろんタイミ ングも確認できます。各要求を送信するのにかかった時間や、読み込みイベントがトリガーされるまでに実 行された処理など、すべて確認できます。Web サイトで何が起こっているかを理解するために最適なツール です。また、複数のリンクがある、画像が表示されない、リンク切れなど、何らかのエラーがある場合、こ こで確認すれば、応答エラーをすべてチェックすることができます。概要ビューに戻れば、200 個はないに しても、いくつかエラーが確認されます。ここまで Internet Explorer 9 の新しい開発者ツールをご紹介しま した。開発者の皆様は、すぐにでもこれらのツールをお試しいただくことができます。 デモはいかがでしたか。開発プロセスにぜひこの開発者ツールを役立ててください。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

35 皆様へのお願い 同じマークアップ (ブラウザー限定ではない、標準的 なコード) をお使いください。
Windows Summit 2010 2018/9/21 皆様へのお願い 同じマークアップ (ブラウザー限定ではない、標準的 なコード) をお使いください。 Platform Preview で、皆様のサイトと新しいプラット フォーム機能をチェックしてください。 Microsoft Connect からフィードバックをお送りくださ い。 次のサイトにアクセス: フィードバック提供のためのサインアップ フィードバックの送信 このセッションの発表について、 評価フォームへの記入をお願いいたします。 それでは、セッションのまとめに入ります。Internet Explorer 9 の導入に際して、皆様へのお願いを申 し上げます。まず、同じマークアップを使用してください。そして、適切な方法でブラウザーを検出し てください。特定のブラウザーではなく、特定の機能を探すコードを作成します。また、Platform Preview のさまざまな機能をチェックしてください。このプレゼンテーションに含まれる Web サイトを ご利用ください。Internet Explorer 9 Platform Preview をインストールして、開発中の Web サイトがど のように表示されるかご確認ください。もちろん、フィードバックもお待ちしています。フィードバッ クの送信方法は簡単です。Connect サイトにアクセスし、フィードバックのための登録を行い、フィー ドバックを送信してください。このセッションに対するご意見もお待ちしています。ぜひ評価フォーム へのご記入をお願いします。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

36 リソース Internet Explorer 9 Platform Preview ビルドのダウン ロード
Windows Summit 2010 2018/9/21 リソース Internet Explorer 9 Platform Preview ビルドのダウン ロード MIX における Internet Explorer 9 に関するプレゼン テーション Internet Explorer 9 を取り上げた MIX の基調講演 Internet Explorer 9 チームのブログ ここには、開発に役に立つリソースをご用意しています。1 つ目は、Internet Explorer 9 Platform Preview ビルドです。サイト名は IETestDrive.com なので覚えやすいですね。サイトに接続すると、 Internet Explorer 9 を使用していない場合はボタンが表示されるので、ご希望であればクリックしてイ ンストールを開始してください。MIX カンファレンスで行われたプレゼンテーションもぜひご覧くださ い。MIX の基調演説のテーマは Internet Explorer 9 でした。他には、Internet Explorer 9 チーム ブログ もチェックしてみてください。ブログでは最新情報のほか、プログラミングに役立つヒントをご紹介し ています。 ご視聴いただきありがとうございました。このプレゼンテーションが開発に役立つことを期待していま す。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.

37 Windows Summit 2010 2018/9/21 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.