Windows Summit 2010 2017/3/9 こんにちは。Microsoft Windows Summit 2010 へようこそ。 © 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.

トランスクリプト付き日本語翻訳ファイルについて Windows Summit 2010 2017/3/9 トランスクリプト付き日本語翻訳ファイルについて この 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.

Internet Explorer 9 Overview (Update) Internet Explorer 9 の 概要 (更新情報) Windows Summit 2010 2017/3/9 Internet Explorer 9 Overview (Update) Internet Explorer 9 の 概要 (更新情報) レオン ブラギンスキと申します。IE9 シナリオ アダプション チームのシニア プログラム マネージャ をしています。今回は Internet Explorer 9 について、特に Internet Explorer 9 Platform Preview 3 の新機能についてご説明します。 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.

目的 Internet Explorer 9 Platform Preview 3 の新機能につい て理解する Windows Summit 2010 2017/3/9 目的 Internet Explorer 9 Platform Preview 3 の新機能につい て理解する このビデオの目的は、Internet Explorer 9 Platform Preview 3 の新機能を理解していただくことです。 © 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.

議題 最新の Platform Preview の新機能に関する考察 皆様へのお願い リソース パフォーマンス 同一のマークアップ Windows Summit 2010 2017/3/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.

Internet Explorer 9 の重点分野 Windows Summit 2010 2017/3/9 Internet Explorer 9 の重点分野 Internet Explorer 9 HTML5 以前にもお話ししましたが、Internet Explorer 9 はパフォーマンスに重点を置いて開発されました。 パフォーマンスというのは単に JavaScript のパフォーマンスだけではなく、ブラウザー全体のパ フォーマンスのことです。Internet Explorer を起動して新しいタブを開く時、ユーザーが気にするの はブラウザーの起動時間やページの読み込み時間の速さ、ブラウザーを閉じる時の速さなどです。それ が我々の言う "パフォーマンス" です。 前回 GPU アクセラレーションについてお話ししました。Internet Explorer 9 上の HTML5 はGPU に よって高速化されます。GPU アクセラレーションの高速化機能により、リッチメディア アプリケー ションの性能を最大限に引き出すことができます。また前回、同一のマークアップの説明もしました。 1 種類のブラウザーでしか稼働しない HTML を望む人はいません。一度テストすればどんなブラウ ザーでも動く同一のマークアップが求められています。 前回に引き続き Internet Explorer 9 Platform Preview の機能をご紹介します。今回紹介する Internet Explorer 9 Platform Preview 3 は、数日前にリリースされた新バージョンです。もちろん HTML5 の機能や同一マークアップの特徴にも触れます。それでは始めましょう。 アクセラレーション 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.

WebKit.org’s SunSpider v0.9.1 JavaScript パフォーマンスのベンチマーク、2010/06/21 作成 Windows Summit 2010 2017/3/9 WebKit.org’s SunSpider v0.9.1 JavaScript パフォーマンスのベンチマーク、2010/06/21 作成 ミリ秒 これは JavaScript 実行時のパフォーマンスのベンチマークです。パフォーマンス向上の推移を見てみ ましょう。一番左が Internet Explorer 8 です。IE9 プレビュー版のバージョンが上がるたびに、確実 にパフォーマンスが向上しているのが分かります。青のグラフで示された IE9 Platform Preview 3 は、 IE8 や　IE9 プレビュー版の下位バージョンよりもずっと高速であることが分かります。 3.0 GHz Core 2 Duo Intel プロセッサ、4 GB RAM、Intel Integrated Video を搭載した Windows 7 が動作する Dell Optiplex でのテスト © 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.

パフォーマンス - Web Timing パフォーマンスを測定するための、ブラウザー間 での相互運用が可能な手段 Windows Summit 2010 2017/3/9 パフォーマンス - Web Timing パフォーマンスを測定するための、ブラウザー間 での相互運用が可能な手段 パフォーマンス メトリックは、ドキュメント オブ ジェクト モデル (DOM) API の一部 ナビゲーションからページの読み込み時までのパ フォーマンス情報を入手可能 前回もパフォーマンスの話をしましたが、測定方法には触れませんでした。話は少しややこしくなりま す。開発者は、開発ツールやネットワーク監視ツールなど、Windows 上のツールを使って、自分のマ シン上でパフォーマンスを測定します。しかし開発者がユーザーのコンピューターを使って、パフォー マンスを測定することは難しいでしょう。実際に Web ページにアクセスするユーザーのマシンを使っ て測定するわけにはいきません。 開発時には、いくつかのフレームワークを用意してパフォーマンスを測定することもあるようです。し かし大抵こうしたフレームワークはオーバーヘッドと見なされます。そこで我々は IE9 Platform Preview に、Web Timing というリファレンス実装を導入しました。Web Timing の機能は開発途中 のため、まだ承認されていませんが、様々なブラウザーで相互運用が可能なパフォーマンス測定機能で す。パフォーマンス情報は DOM に含まれているため、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.

パフォーマンス window.msPerformance のインターフェイス Windows Summit 2010 2017/3/9 パフォーマンス window.msPerformance のインターフェイス インターフェイス 目的 window.msPerformance.navigation ナビゲーション情報: リダイレクト数 要求数 個別ドメイン数 window.msPerformance.timing イベント発生の絶対時間: connectStart connectEnd window.msPerformance.timingMeasures タスク完了までの所要時間 window.msPerformance は Web Timing の仕様に準拠した Microsoft のリファレンス実装で、3 種 類のインターフェースを持っています。1 つ目は msPerformance.navigation です。送信されたリク エスト数、ユニーク ドメイン数、リダイレクト回数など、基本的な情報を格納しています。 msPerformance.timing は 1970 年 1 月 1 日を起点にして、イベント発生時の絶対時間を提供します。 ブラウザーを起動し URL を入力して Enter キーを押すと、複数のイベントが発生します。表示されて いたページのアンロードや DNS によるドメイン名の解決、ソケット接続の確立など、様々なイベント です。 こうしたイベントが発生するたび、timing は発生タイミングをミリ秒単位の絶対時間で記録します。 この表に書いてある connectStart や connectEnd 以外にも、dnsresolutionStarts や dnsresolutionEnds など様々なイベントが存在します。msPerformance.timingMeasures を使うとタ スクの処理にかかった時間を計測することができます。例えばページのロードにかかった時間や接続確 立にかかった時間などです。それでは実際の動きを説明します。 © 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.

パフォーマンス timing と timingMeasures Windows Summit 2010 2017/3/9 パフォーマンス timing と timingMeasures URL の入力 window.load unloadStart unloadEnd その他の タイミング 時間軸 window.msPerformance.timing.navigationStart window.msPerformance.timing.loadEnd これはリクエストのタイムラインです。ユーザーが URL を入力し Enter キーを押すと、その瞬間に navigationStart の値がセットされます。他にも unloadStart や unloadEnd、connectionStart や connectionEnd など、様々なイベントの発生時にタイミングが記録されます。多すぎてこの図には書 ききれませんが、ページが完全にロードされた瞬間にはJavaScript が window.load イベントを受け取 ります。このロード完了のイベント発生時に、window.msPerformance.timing.loadEnd の値がセッ トされます。 先ほど説明したとおり timingMeasures はあるアクションにかかった時間を提供します。実は navigationStart と loadEnd の時間差が、timingMeasures.navigation の値になります。 それではサンプルコードで実際の動きを見てみましょう。 window.msPerformance.timingMeasures.navigation *すべてのタイミング イベントを網羅しているわけではありません © 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.

msPerformance サンプル コード Windows Summit 2010 2017/3/9 msPerformance サンプル コード var myBody; this.onload = function () { myBody = document.getElementById ("myBody"); if (window.msPerformance) myBody.innerHTML = 'navigationStart: ' + window.msPerformance.timing.navigationStart +'ms (' + Date (window.msPerformance.timing.navigationStart)+ ') <br>'; } return; }; 実装は非常にシンプルです。ここにコードの抜粋があります。ところで、ここで紹介するコードはすべ て、最後に紹介するリソースのサイトで入手し、実際に動かすことができます。IE9 Platform Preview で msPerformance.htm を開き、ご自分でスクリプトを実行してみてください。 それでは細かく見てみましょう。まずコーディングの基本テクニックとして、ブラウザーがこの機能に 対応しているかどうかを確認します。ブラウザーが msPerformance オブジェクトに対応していること を確認してから、ブログ上でこのスクリプトを実行しました。先ほどお話ししたとおり実装は非常に簡 単で、window.msPerformance.timing.navigationStart にアクセスするだけです。格納されているの はミリ秒単位の絶対時間ですので、JavaScript の Date 関数を使用して日時形式に変換しています。実 行結果が表示されたブラウザーが見えますね。ナビゲーションが開始された時間がミリ秒単位で表示さ れ、変換された日時も表示されています。またロードが終了した時の絶対時間と日時もあります。 続いて loadEnd と navigationStart の値の差を計算し、26 ミリ秒という結果を得ました。同時に timingMeasures.navigation の値が、同じ 26 ミリ秒であることも確認しました。この実行結果は、す べての要素が連携していることを示しています。次はもう少し複雑な例を紹介しましょう。 デモ ファイル: msPerformance.htm © 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.

デモ msPerformance Windows Summit 2010 2017/3/9 それでは msPerformance を使ってWeb ページのパフォーマンスを測定する方法をお見せします。 Internet Explorer 9 Platform Preview 3 を起動し、window.Performance のデモを開きます。この ようにページを読み込むと、msPerformance.timing や timingMeasures など複数のパフォーマンス 情報が確認できます。マウスを合わせると詳細が表示されます。画面を拡大しますね。先ほどお伝えし たように、msPerformance.timing はイベント発生時の絶対時間をミリ秒単位で提供します。ブラウ ザーに入力された URL にアクセスすると、様々なイベントが発生します。ナビゲーションの開始、 ページのアンロードやロード、ドメイン名の解決などです。これらはすべて絶対時間で測定されます。 timingMeasures にアクセスすれば実際にページのロードにかかった時間を確認できます。この部分で すね。 次はもう少し複雑な onload イベントのパフォーマンスを見てみましょう。タイミングの値が変わった のが確認できます。画面を拡大します。ロードにかかる時間が長くなったのが分かります。このように、 ご自分の 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.

同一のマークアップ – フォント Web Open Font Format (WOFF) Windows Summit 2010 2017/3/9 同一のマークアップ – フォント Web Open Font Format (WOFF) “Web 対応” フォントのみに限定する必要なし フォントを必要に応じてパッケージ化して配信 W3C の Fonts Working Group の取り組みの一環 <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> 時々 Web 開発者から、“Web 対応” フォントだけを使ってページを構築するのは難しいという意見を 聞きます。Web Open Font Format (WOFF) を使えば、非常に簡単に構築できます。Web 開発者は WOFF を利用し必要に応じてフォントをパッケージ化し配信できます。W3C の Font Working Group の取り組みの一環で、CSS3 と共同で標準化が進められています。どんなブラウザーでもフォントが同 じように表示されるよう、フォントをパッケージ化することができます。ですから Web 対応フォント でなくても構いません。さらに IE9 上で表示された場合、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.

同一のマークアップ - Canvas Canvas は描画用の動的な画面 グラフィカル要素 (パス、ボックス、円弧など) アニメーション Windows Summit 2010 2017/3/9 同一のマークアップ - Canvas Canvas は描画用の動的な画面 グラフィカル要素 (パス、ボックス、円弧など) アニメーション 画像 機能 Canvas SVG 描画モード 即時 保存 DOM サポート DOM の <CANVAS> 部分 SVG 要素のそれぞれが DOM の一部 アニメーション キャンバス内で 直接スクリプトを使用 DOM でオブジェクトを 操作 IE9 GPU アクセラレーション 可能 IE9 では同一マークアップの一部である Canvas 要素に対応しました。Canvas は非常に画期的な要素 です。Canvas とは、様々な要素を描画するための動的なサーフェイスです。パス、ボックス、円弧な ど多くのグラフィック要素を描画できます。またアニメーションを描画するのも面白いでしょう。画像 を描画することもできます。 前回 Scalable Vector Graphics (SVG) についてお話ししました。ここで Canvas と SVG を比較して みましょう。まず描画モードに違いがあります。Canvas は即時型の描画モードです。Canvas の API を呼び出せば、すぐに結果が反映されます。例えば arc API を使用すれば即座に Canvas 上に円弧が描 画されます。しかし SVG に要素を追加すると、DOM に追加され保持されます。次に DOM サポート ですが、Canvas の場合 Canvas 自体が DOM の一部として認識されます。一方 SVG では、各要素が 個別に DOM に追加されます。アニメーションでも同じことが言えます。Canvas の場合、直接スクリ プトを使用するか API を呼び出してアニメーションを操作します。一方 SVG では DOM 経由でオブ ジェクトを操作する必要があり、例えば DOM 内のオブジェクトを使って座標の変更、拡大縮小、移動 などを行います。 GPU についてはどうでしょうか。もちろん Canvas でも SVG でも GPU による高速化が適用されます。 IE9 上のすべての HTML5 は高速化されるということを覚えておいてください。GPU アクセラレー ションで高速化されることにより、Canvas や SVG を使ったリッチメディアの 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.

Canvas – 画像の追加 this.onload = function() { Windows Summit 2010 2017/3/9 Canvas – 画像の追加 this.onload = function() { var myCanvas = document.getElementById('myCanvas'); if (myCanvas.getContext){ var ctx = myCanvas.getContext("2d"); var img = new Image(); img.src = "IELogo.png"; img.onload = function(){ ctx.drawImage(img,0,0); } 次は Canvas 要素に画像を描画する方法を説明します。コードを見てみましょう。まず HTML ファイ ルの任意の場所に Canvas 要素を配置します。続いて getElementById 関数を呼び出しCanvas コン テキストを取り出します。ここでは、ブラウザーの種類に関わらずきちんと表示されるよう、Canvas コンテキストが取得できることを確認しています。getContext 関数を呼び出し Canvas 2D コンテキ ストを取得します。あとは JavaScript の Image オブジェクトを使って画像を生成するだけです。画 像のソースには PNG ファイルを使用しました。Canvas 要素に用意されている drawImage API を呼 び出して画像を描画します。こうして Web ページにCanvas 要素に描画された画像が表示されました。 あとから紹介するリソースにアクセスすれば CanvasImage.htm を入手できます。 デモ ファイル: CanvasImage.htm © 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.

Canvas - サンプル コード myCanvas = document.getElementById (“myCanvas”); Windows Summit 2010 2017/3/9 Canvas - サンプル コード myCanvas = document.getElementById (“myCanvas”); if (myCanvas.getContext) { ctx= myCanvas.getContext("2d"); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); } … <canvas id="myCanvas" width="500" height="500"> Canvas is not supported. </canvas> では、同じようなアプローチでもう少し複雑な例を紹介します。まず HTML ファイルの任意の場所に Canvas タグを配置し幅と高さを指定します。Canvas タグの間に “Canvas is not supported” とあり ます。これはブラウザーが Canvas 非対応の場合を想定した処理で、非対応の場合は Canvas のオープ ニングタグとクロージングタグの間にある文字列が画面に表示されます。 次に 同じ HTML ファイル内でも、外部の JavaScript ファイルでも構いませんが、getElementById 関数を使用して Canvas 要素を取り出します。もちろん Canvas を取り出す前にサポートされているか を確認しています。次に、円弧を描く beginPath などいくつかの API を呼び出し、ペンで絵を描くよ うにポインターを移動させてニコニコマークを描き出しました。Canvas.htm を開けばニコニコマーク が描画されるはずです。 デモ ファイル: Canvas.htm © 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.

Canvasアニメーション 2 種類のアニメーション フレームベース: オブジェク トを、更新のたびに同じピク セル数だけ移動 Windows Summit 2010 2017/3/9 Canvasアニメーション 2 種類のアニメーション フレームベース タイムベース フレームベース: オブジェク トを、更新のたびに同じピク セル数だけ移動 タイムベース: オブジェクト を、単位時間ごとに同じピク セル数だけ移動 ではアニメーションの説明に移ります。アニメーションにはフレームベースとタイムベースの 2 種類が あります。どちらの場合もオブジェクトを A 地点から B 地点へ移動させます。フレームベースの場合 はループ処理が実装されていて、オブジェクトはイテレーション毎に一定のピクセル数だけ移動します。 タイムベースの場合は少し違います。オブジェクトは一定のピクセル数だけ移動しますが、タイムベー スの場合は時間によって制御されます。この違いは非常に重要です。この違いがアニメーションに与え る影響は、あとから詳しく説明します。 © 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.

フレームベースのアニメーション 更新のたびに一定の距離を移動 マシン依存 実装は単純 マシンが高速であれば、アニメーションも高速 Windows Summit 2010 2017/3/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.

タイムベースのアニメーション 時間単位ごとに一定の距離を移動 マシン非依存 ゲームでの使用 - 一定時間内でのアニメーショ ンの完了を保証 Windows Summit 2010 2017/3/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.

Canvas フレームベースの アニメーション Windows Summit 2010 2017/3/9 Canvas フレームベースの アニメーション 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); } 先に実行結果をご覧になりたければ、CanvasAnimation.htm を開いてみてください。タイムベースと フレームベースのアニメーションが見られます。IE のロゴがページの上部から下りてきて画面上を回転 します。ご覧のとおりフレームベースの実装は非常にシンプルで、移動距離を設定し drawFrameBased 関数を呼び出すだけです。この drawFrameBased 関数の中で、画像の Y 座標の値 を変更し、Canvas 要素をクリアしたあと、新しい座標で画像を描写しています。3 ステップしかない 簡単な処理です。座標を変更し、画面をクリアし、新しい画像を描写するだけです。 次にタイムベースのアニメーションです。少し複雑になりますが、それほど難しくはありません。 デモ ファイル: CanvasAnimation.htm © 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.

Canvas タイムベースの アニメーション Windows Summit 2010 2017/3/9 Canvas タイムベースの アニメーション 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); } まず先ほどと同じように移動距離を設定し、drawTimeBased 関数を呼び出します。今回はタイムベー スのアニメーションですので、現在時刻を確認して差分を取る必要があります。差分とはひとつ前の画 像が描画された時間と現在時刻の差のことです。つまり経過時間ですね。数学の時間に習った公式のと おり、距離は速度かける時間で求められます。簡単ですね。次は座標を求めましょう。今回は速度を毎 秒 250 ピクセルに設定して、先ほど求めた差分時間をかけます。これで、次にこの関数が呼ばれた時 に、画像をどれだけ移動させればいいかを求めることができます。これで座標が求まりました。続いて Canvas 要素をクリアし、新しい座標で画像を描画します。このとおり、それほど難しくありません。 デモ ファイル: CanvasAnimation.htm © 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.

デモ Canvas Windows Summit 2010 2017/3/9 それでは Canvas 要素を使ったデモを見てみましょう。まず非常にシンプルな Canvas Pad からご紹 介します。Canvas Pad は非常によくできた教材です。Canvas API を使った JavaScript と、その結 果を確認できます。グラフィック要素は何でも構いません。色やスタイルや傾斜を変更できます。スク リプトを直接変更して色を変えることもできます。このとおり、色が変わりました。他にもテキストや、 様々な要素のスタイルを変更でき、Canvas の処理を学ぶのに最適のアプリです。アニメーションも見 ることができます。お伝えしたとおり Canvas は、アニメーションを使用したリッチな Web ページに も最適です。 それではもう少し複雑なデモを紹介します。1 つ目は Deep Zoom というデモです。この Deep Zoom のデモは Canvas 上に Seadragon Ajax を利用して実装されたもので、表示されている画像を拡大す ることができます。GPU アクセラレーションにより高速化されているため、1 秒 60 フレームのレスポ ンスが実現しています。拡大し続けると登山客を確認することもできます。レスポンスが速く、動きも 非常になめらかです。スムーズですね。 他のデモもご紹介しましょう。Amazon Shelf のデモです。Amazon Shelf は Amazon のサイトで 扱っている書籍を、本棚に並べて内容を確認できるというアプリケーションです。60 fps のなめらかな 動きが確認できます。 これらのデモではすべて同一マークアップで実装されています。つまりどのブラウザーでも同じように 表示されるはずです。試しに Amazon Shelf を Chrome で表示してみましょう。パフォーマンスは Chrome の方が遅いようです。IE9 の 1 秒 60 フレームに対し、Chrome は 1 秒 1 フレームです。違 いがはっきり実感できますね。この違いの理由は GPU アクセラレーションです。IE9 で表示される HTML5 はすべて GPU で高速化されるため、こうしたレスポンスが実現するのです。IE9 と比べて Chrome は反応が遅いですね。 © 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.

デモ Canvas (続き) Windows Summit 2010 2017/3/9 他にもいくつかデモをお見せします。次は Asteroid Belt です。これは Canvas 上のアニメーションで、 衛星の数を増やすことができます。60 fps の驚異的なレスポンスを確認できます。それでは他のブラウ ザーと比較してみましょう。同一マークアップですので、きちんと動きます。しかし今回もパフォーマ ンスに差が出ました。IE9 は GPU アクセラレーションにより 60 fps が実現されています。一方、高速 なブラウザーとして知られている Chrome は、1 fps となっています。かなりのパフォーマンスの差が 体感できますね。IE9 なら、もっと衛星の数を増やして、さらにリッチなサイトも構築できるでしょう。 エクスペリエンスの差は歴然です。 Canvas を使用した他のデモも見てみましょう。次は FishIE Tank です。この FishIE Tank も Canvas 上に画像が描画されたものです。魚の数を増やして、100 匹にしてみましょう。ここでも 60 fps でフレームが描画されるためなめらかな魚の動きを楽しめます。もちろん同一マークアップで実装 されているので、Chrome でも同じように表示されます。IE9 では魚が 250 匹いても 60 fps ですが、 Chrome では 20 匹で 25 ～ 30 fps です。魚の数を増やしましょう。100 匹にすると 6 fps に落ちま した。レスポンスが悪化すると思われるためこれ以上魚を増やすのは無理そうですね。こうした差は GPU アクセラレーションのためです。また IE9 では JavaScript がバックグラウンドでプリコンパイル されるため、ネイティブ コードが実行されるのも一因です。 次のデモに移ります。次は Mr. Potato Gun です。まず内容を説明させてください。このデモでは Mr. Potato を大砲で撃ちますが、フレームの描画速度に比例して風の抵抗が変化します。ブラウザーの描 画するフレーム数が多ければ多いほど風の抵抗が減るという仕組みです。実際に撃ってみると分かりま す。いろいろな物が跳ね回る処理では、物理的な計算を行っています。長い間、物が跳ね続けています が、これは 1 秒間に描画されるフレームの数に比例しています。 それではこのデモを、Chrome で試します。Mr. Potato はあまり遠くまで飛びません。1 秒に 20 フ レームしか描画されていないのが分かりますね。もう一度 IE9 でやってみましょう。それでは次のデモ に移ります。 © 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.

同一のマークアップ - Video HTML5 <video> 要素 MPEG-4/H.264 ビデオ Windows Summit 2010 2017/3/9 同一のマークアップ - Video HTML5 <video> 要素 MPEG-4/H.264 ビデオ ビデオと他の要素 (SVG や HTML) の合成 60 fps 対応の GPU ベースの実装 ハードウェア ビデオ デコーダーのサポート 同一マークアップは、様々なブラウザーで同様の処理を実現するのに非常に重要です。メディアリッチ なサイトの構築する様々な要素が HTML5 に導入されたため、同一マークアップの重要度はさらに高ま りました。同一マークアップの要素のひとつに video タグがあります。使い方はとても簡単です。業界 標準の MEPG-4 エンコーディングをサポートしており、SVG や HTML のような他の要素と組み合わせ ることができます。もちろん GPU で高速化されます。GPU アクセラレーションにより 60 fps という 速さを実現しました。もしあなたのマシンにハードウェア MPEG デコーダーが搭載されていれば、そ の機能も活用できます。また video 要素は、他の要素と組み合わせて、動画に様々な処理を施すことが できます。動画の再生中に、画面の移動や拡大縮小を行うこともできます。メディアリッチなサイトを 構築するのに最適な要素です。 <video src="video.mp4 autoplay controls> <!-- Only shown when browser doesn’t support video --> <!-- You could embed Flash or Silverlight video here --> </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.

Video - 再生のコントロール タグ属性 タグ メソッド autoplay: 準備の完了後直ちに再生を開始 Windows Summit 2010 2017/3/9 Video - 再生のコントロール タグ属性 autoplay: 準備の完了後直ちに再生を開始 controls: コントロールを表示 currentTime: 現在時刻 (秒単位) タグ メソッド play(): 特定の currentTime でビデオを再生 video タグはいくつかの属性を持っています。今回はすべての属性をご紹介することはしませんが、再 生に関する属性だけ見ておきましょう。まず autoplay 属性です。video タグでこの属性を使用すれば、 動画の準備が整い次第、すぐに再生が始まります。次に controls 属性を指定すると、動画の上にマウ スをのせた時、再生、一時停止、早送りなど動画の制御が行えます。 currentTime は、秒単位の現在時間を取得したりセットしたりできる属性です。また play メソッドは 動画の再生を開始するメソッドで、currentTime 属性で指定したタイミングで再生することも可能です。 それでは実際の動きを見てみましょう。 © 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.

Video サンプル <script language=javascript> function skipTo() { Windows Summit 2010 2017/3/9 Video サンプル <script language=javascript> function skipTo() { var myVideo = document.getElementById("myVideo"); if (myVideo.currentTime) { myVideo.currentTime = document.getElementById("time").value; myVideo.play(); } </script> <video id="myVideo" src="video.mp4" autoplay controls> Video is not supported. </video> Enter seconds to skip to: <input type=text id="time"> <input type=button value="Skip" onclick=skipTo()> これは私が実装した非常にシンプルなビデオプレイヤーです。この video.htm をダウンロードして、 HTML ファイルと同じフォルダに MPEG-4 ファイルを配置すればすぐに実行できます。それでは内容 を見てみましょう。 まず HTML ファイル内に video タグを配置し、getElementById でオブジェクトを取り出します。続 いてビデオの currentTime がアクセス可能なことを確認します。このページには他にもテキストボッ クスとボタンがあります。テキストボックスに動画をスキップする秒数を入力して、ボタンを押すと実 際にスキップされるという仕組みです。例えばテキストボックスに 20 秒と入力し、ボタンをクリック すると動画が 20 秒後から再生されます。それでは実装を見てみましょう。テキストボックスに入力さ れた秒数を currentTime 属性にセットし、play メソッドを呼ぶだけです。10 行以下のコーディング で簡単なビデオプレイヤーが完成しました。 デモ ファイル: video.htm © 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.

同一のマークアップ - Audio HTML5 <audio> 要素 Windows Summit 2010 2017/3/9 同一のマークアップ - Audio HTML5 <audio> 要素 MP3 および ACC (Advanced Audio Coding) の オーディオ DOM を介してスクリプトで完全に操作が可能 再生を制御するための VIDEO タグと同様の プロパティ audio タグも同一マークアップの一部です。audio タグは video タグと非常に似ていて、メディアリッ チなサイトの構築に最適です。業界標準の MP3 や AAC (Advanced Audio Coding) をサポートしており、 video タグと同じように DOM を介してスクリプトで制御できます。属性も video タグと似ています。 コードを確認しましょう。今回もコーディングの基本に則って、フォールバックを行っています。 audio タグ非対応のブラウザーでは、audio タグに挟まれた内容が画面に表示されます。代わりに Silverlight や Flash を指定することもできます。 <audio src="audio.mp3" id="audioTag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Flash or Silverlight audio here --> </audio> © 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.

Video と Audio の MIME Types Windows Summit 2010 2017/3/9 Video と Audio の MIME Types MPEG-4/H.264 ビデオ Content-Type: video/mp4 MPEG-3 オーディオ Content-Type: audio/mpeg AAC オーディオ Content-Type: audio/aac 1 つ注意が必要な点があります。サーバー上の MP4 や MP3 のファイルが再生できない場合、MIME タ イプを確認してください。MIME タイプを正しく設定しないと、サーバーはブラウザーに動画や音楽 ファイルを送信できません。画面にあるように Content-Type を正しく設定してください。 © 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.

デモ Video と Audio Windows Summit 2010 2017/3/9 それでは少し複雑なデモをご紹介し、video や audio タグを活かしたサイトの構築方法を紹介します。 それではこれから audio と video 要素を使ったメディアリッチなサイトの構築方法をご紹介します。 IMDb Video Panorama というデモを使います。表示されている様々な動画をクリックするとプレ ビューを見ることができます。なめらかですね。画面をクリックします。スクロールします。video タ グが他の要素と併用できることは先ほどお伝えしました。ここでも他の要素と組み合わせて変換を適用 することで、こうしたパノラマ表示を実現しています。もちろん同一マークアップですので他のブラウ ザーでも動きます。Chrome で確認しましょう。GPU アクセラレーションが導入されていないため、 パノラマをスクロールするとレスポンスにかなりの違いが見られます。Chrome では 17 fps ですが IE9 では 60 fps です。 デモをもう 1 つご紹介します。audio タグを使ったデモです。audio タグは audio ファイルを扱う Web アプリの作成に最適です。ではオーディオ プレイヤーのデモを見てみましょう。HTML と 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.

同一のマークアップ – 同一のスクリプト ECMAScript 5 の機能 Windows Summit 2010 2017/3/9 同一のマークアップ – 同一のスクリプト ECMAScript 5 の機能 2009 年 12 月に ECMA-262 第 5 版 (ES5)が承 認される Internet Explorer 9 の ES5 機能 新しい配列メソッド オブジェクト モデルの拡張 計算メソッドおよび関数 同一マークアップには、共通のスクリプトも含まれます。どんなブラウザーでも同じ動きをするよう、 共通のスクリプトで実装することが重要です。JavaScript の規格である ECMAScript の 第 5 版 (ES5) が、2009 年 12 月に承認されました。参考までに歴史をお話しすると、この規格が最後に更新された のは約 10 年も前のことです。 Internet Explorer 9 は ES5 の新機能を多く取り入れています。新しい配列メソッドや拡張されたオブ ジェクト モデル、新しく追加された計算メソッドなどは、かなり有効でしょう。それでは 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.

ECMAScript 第 5 版 新しい配列メソッド ES5 配列メソッドの詳細については、 ietestdrive.comを参照 Windows Summit 2010 2017/3/9 ECMAScript 第 5 版 新しい配列メソッド indexOf、lastIndexOf、forEach every、some map、filter、reduce、reduceRight ES5 配列メソッドの詳細については、 ietestdrive.comを参照 まず新しい配列メソッドです。ほとんどは indexOf や lastindexOf、forEach、every、some のよう に、読んで字の通り分かりやすいものです。ietestdrive.com で公開中のデモで、こうした新しいメ ソッドの機能を確認することができます。ここでは 3 つのメソッドを簡単に紹介します。 © 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.

ES5 配列メソッドのサンプル <body> Windows Summit 2010 2017/3/9 ES5 配列メソッドのサンプル <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> これはデモのために書いた簡単なコードです。この es5.htm ファイルは、リソースのサイトで入手で きます。それでは 1 行ずつ見ていきましょう。最初に myArray という配列を定義し 3 つの名前を格 納します。続いて関数を定義しています。名前の前と後ろに文字列を追加する関数です。実際には名前 の前に“ Hello ”という文字列が追加され、最後に br タグが追加されます。 配列の各要素にこの関数を適用するには、myArray の forEach メソッドを呼び出すだけです。簡単で すね。実行結果も表示してあります。メソッドを 1 つ呼び出すだけで、これらの文字列を表示すること ができます。コードが非常にシンプルになります。 デモ ファイル: es5.htm © 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.

ECMAScript 第 5 版 オブジェクト モデルの拡張 Windows Summit 2010 2017/3/9 ECMAScript 第 5 版 オブジェクト モデルの拡張 アクセサーのプロパティ ("getter/setter" プロパティ) オブジェクト コンストラクターの関数 プロパティによってアクセス可能 Object.defineProperty、Object.defineProperties その他多数 Platform Preview 3 では DOM オブジェクトに対 して上記のメソッドは未サポート また IE9 は拡張されたオブジェクト モデルにも対応しました。拡張されたオブジェクト モデルを使え ば、アクセサーのプロパティとして知られている setter や getter を使用できます。これらはオブジェ クト コンストラクターの関数プロパティを使ってアクセスできます。新しい ECMAScript の仕様書を 確認し、機能を確認することをお勧めします。ただし IE9 Platform Preview 3 では、DOM オブジェ クトについてはこれらのメソッドを完全にサポートしていません。もちろん正式版ではサポート予定で す。 © 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.

ECMAScript 第 5 版 計算メソッドおよび関数 Windows Summit 2010 2017/3/9 ECMAScript 第 5 版 計算メソッドおよび関数 String.prototype.trim Date.prototype.toISOString Date.parse、Date.now Array.isArray Function.prototype.bind 続いて新しく追加された計算メソッドを紹介します。String オブジェクトの trim は、文字列の前後の スペースを削除するメソッドです。ISO 標準フォーマットを適用する Date オブジェクトの toISOString や、パースを行う parse にも対応しています。他にも現在時刻を取得する Date.now や、 配列かどうかを確認する Array.isArray などがあります。少し説明が必要なのが bind メソッドです。 この bind メソッドを使うと、関数の中で参照できるオブジェクトを指定することができます。また、 関数の内部で使用される引数も指定できます。 © 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.

皆様へのお願い ブラウザー固有のコードではなく、同一のマークアッ プ = 機能に対するコードを使ってください。 Windows Summit 2010 2017/3/9 皆様へのお願い ブラウザー固有のコードではなく、同一のマークアッ プ = 機能に対するコードを使ってください。 Platform Preview を使い、皆様のサイトと新しいプ ラットフォーム機能をチェックしてください。 Microsoft Connect からフィードバックをお寄せくださ い。 https://connect.microsoft.comにアクセス フィードバック提供のためのサインアップ https://connect.microsoft.com/IE フィードバックの送信 https://connect.microsoft.com/IE/Feedback このセッションの発表について、 評価フォームへの記入をお願いいたします。 ここで皆様に簡単なお願いがあります。ぜひフィードバックをお寄せください。Internet Explorer 9 Platform Preview 3 について、またこのビデオについてのご意見をお待ちしています。ぜひブラウ ザー固有のコードではなく同一マークアップを使って実装してみてください。またご紹介したデモをダ ウンロードして IE9 Platform Preview 3 上で実行してみてください。 © 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.

Windows Summit 2010 2017/3/9 リソース Windows Summit 2010 プレゼンテーション SOW-T102: Internet Explorer 9 Overview (Internet Explorer 9 の概要) http://windowssummit.tri-digital.com/video-gallery/software/sow-t102.aspx ECMAScript 言語 仕様書 第 5 版 http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf Web Timing 仕様書 http://dev.w3.org/2006/webapi/WebTiming/ Web のフォント http://www.w3.org/Fonts/ それでは最後にリソースをご紹介します。Windows Summit 2010 には IE9 に関するビデオが公開さ れています。ECMAScript の仕様書はかなり量がありますが、JavaScript の仕様が詳しく記述されてい て面白いでしょう。Web Timing の仕様書や 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.

リソース (続き) Internet Explorer 9 Platform Preview の最新ビルド Windows Summit 2010 2017/3/9 リソース (続き) Internet Explorer 9 Platform Preview の最新ビルド http://www.IETestDrive.com Internet Explorer 9 に関する MIX プレゼンテーション http://live.visitmix.com/Sessions#/tags/InternetExplorer Internet Explorer 9 について述べられた MIX 基調講演 http://live.visitmix.com/MIX10/Sessions/KEY02 Internet Explorer 9 チーム ブログ http://blogs.msdn.com/ie/ 他にもいくつかサイトをご紹介します。ietestdrive.com では、IE9 Platform Preview の最新版を入 手できます。MIX プレゼンテーションのサイトには、コーディングに関するビデオが多く掲載されてい ます。他にも有効な情報を入手できるでしょう。また IE9 を紹介した MIX の基調講演や、Internet Explorer 9 Team Blog もご覧ください。ご静聴ありがとうございました。IE9 Platform Preview 3 をぜひお試しください。 © 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.

Windows Summit 2010 2017/3/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. © 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.