[IE9 Platform Preview 7 デモ紹介 vol.7] ~JavaScriptなのに、こんなに速い その2~

マイクロソフトの田中達彦です。公開された Internet Explorer 9 Platform Preview 7 のデモについて、紹介していきます。IE9 PP7のインストールについては、下記ブログをご参照ください。http://blogs.msdn.com/b/ttanaka/archive/2010/11/18/ie9-platform-preview-7.aspx 前回のデモ紹介もJavaScriptエンジンの性能について紹介しました。今回も、JavaScriptの実行速度のデモを紹介します。今回紹介するデモは、「シェークスピアのタグ クラウド」というデモです。シェークスピアの書いた文章を解析し、使用している単語の頻度をカウントして表示するというものです。 この例は、ハムレットの文章をタグ クラウドとして表示させた例です。右側に タグ クラウドが表示されています。この文章の中に4548の単語が使われています。単語の種類としては、2728種類の単語が使われています。その中で使用頻度が高い単語を150抽出し、画面右側にタグ クラウドとして表示しています。この処理に22.8ミリ秒 (0.0228秒) しかかかっていません。ちなみに、このハムレットの文章をWordにコピペすると、225ページにもなります。 左側にあるコンボボックスでWrite your own sonnetを選び、その下にあるテキストボックスに文章を入力することにより、任意の文字列を入力して試すこともできます。ただ、日本語を入力しても下記のエラーが出てしまいます。英語しか対応していないようです。 IE9PP7をご使用の方は、Speed Demosの欄にあるShakespeare’s Tag Cloudをクリックしてください。HTML5に対応した他のブラウザをご使用の方は、下記リンクをクリックして、そのWebブラウザのJavaScriptの速さをご確認ください。http://ie.microsoft.com/testdrive/Performance/ShakespearesTagCloud/Default.html [今までの IE9 Platform Preview デモ紹介]SVGヘリコプターHTML5 / CSS3 box-shadowのテストあのブラウザって、こんなに遅かったっけ?HTML5 の video element と rotateIE9 PP7の速さJavaScriptなのに、こんなに速い マイクロソフト田中達彦


[IE9 Platform Preview 7 デモ紹介 vol.6] ~JavaScriptなのに、こんなに速い~

マイクロソフトの田中達彦です。公開された Internet Explorer 9 Platform Preview 7 のデモについて、紹介していきます。IE9 PP7のインストールについては、下記ブログをご参照ください。http://blogs.msdn.com/b/ttanaka/archive/2010/11/18/ie9-platform-preview-7.aspx IE9はGPUを活用しているため描画スピードが大幅に向上しています。それ以外にも、JavaScriptの実行速度も大幅に向上しています。今回紹介するデモは、GPUをほとんど使っていない、JavaScriptだけの速さを実感できるデモです。 数独またはナンバープレース(ナンプレ)と呼ばれているパズルがあります。その数独を行うデモが、新しく追加されました。このデモは、HTML5を使用して、数独を実現させています。 上の図は数独を解いている途中の図です。これだけだと、どこが速いのか、どこが凄いのかがまったくわかりません。 このデモの神髄は、左側にある [SOLVE GAMES] と書かれたボタンにあります。このボタンをクリックすると、ボタンの上のコンボボックスの中に書かれている個数のパズルを、JavaScriptを使って解き始めるのです。 試しに5000個のパズルを解いてみました。 このように、5000個の数独を解くのに要した時間が、ボタンの下に表示されます。この例では、数独5000個を解くのに要した時間は、たったの1.196秒です。JavaScriptと言えども、このような速さで実行することができるのです。 IE9PP7をご使用の方は、Speed Demosの欄にあるHTML5 Sudokuをクリックしてください。HTML5に対応した他のブラウザをご使用の方は、下記リンクをクリックして、そのWebブラウザのJavaScriptの速さをご確認ください。http://ie.microsoft.com/testdrive/Performance/Sudoku/Default.html [今までの IE9 Platform Preview デモ紹介]SVGヘリコプターHTML5 / CSS3 box-shadowのテストあのブラウザって、こんなに遅かったっけ?HTML5 の video element と rotateIE9 PP7の速さ本連載は、途中まで “IE9 Platform Preview 6 デモ紹介” というタイトルでしたが、Platform Preview 7の公開に伴いタイトルを変更しました。 マイクロソフト田中達彦


[IE9 Platform Preview 7 デモ紹介 vol.5] ~IE9 PP7 の速さ~

マイクロソフトの田中達彦です。公開された Internet Explorer 9 Platform Preview 7 のデモについて、紹介していきます。IE9 PP7のインストールについては、下記ブログをご参照ください。http://blogs.msdn.com/b/ttanaka/archive/2010/11/18/ie9-platform-preview-7.aspx Platform Preview 6からわずか3週間で出てきたPlatform Preview 7は、パフォーマンスの面が向上し、JavaScriptの処理速度が速くなっています。 その速度を体感していただくデモが、今回紹介するギャラクティックです。 このデモは、JavaScriptとHTML5のCanvasを使用したデモで、3Dのレンダリングを行っています。太陽の周りを公転しているいくつかの惑星と、地球の周りを公転している月を表現しています。+ キーを押すとスピードが速くなり、- キーを押すとスピードが遅くなります。 IE9PP7をお持ちの方は、PP7を起動したときに表示されるInternet Explorer Test DriveのページのSpeed DemosのところにあるGalacticをクリックしてください。下図の赤い矢印の部分です。もし、PP7を立ち上げたときの画面がこのような画面でないときは、f5キーを押してページを再読み込みしてください。 IE9以外のHTML5に対応したWebブラウザをご使用の方は、下記リンクをクリックしてください。http://ie.microsoft.com/testdrive/Performance/Galactic/Default.html [今までの IE9 Platform Preview デモ紹介]SVGヘリコプターHTML5 / CSS3 box-shadowのテストあのブラウザって、こんなに遅かったっけ?HTML5 の video element と rotate マイクロソフト田中達彦


[IE9 Platform Preview 6 デモ紹介 vol.4] ~HTML5 の video element と rotate ~

マイクロソフトの田中達彦です。先日公開された Internet Explorer 9 Platform Preview 6 のデモについて、紹介していきます。IE9 PP6のインストールについては、下記ブログをご参照ください。http://blogs.msdn.com/b/ttanaka/archive/2010/10/29/ie9-platform-preview-6.aspx 今回紹介するデモは、video elementを使用した万華鏡です。キャンバス上に複数の動画を表示させて、さらにそれらを傾けています。HTML5のvideoとrotateを使用したときのパフォーマンスを見ることができます。 他のWebブラウザをご使用の方は、下記リンクをクリックしてください。http://ie.microsoft.com/testdrive/Graphics/VideoKaleidoscope/ このページを表示させて、左側に表示されているビデオ一覧の中から好きなビデオを選ぶと、そのビデオを万華鏡のように表示させます。画面の中央より少し右下に、角が丸い水色の四角で囲まれているところがあります。この囲まれている部分が、傾けていないオリジナルのビデオです。このビデオを含めて、全部で10個の同じビデオを同時に再生しています。オリジナルのビデオ以外は、すべて傾いています。さらに、背景として円状になっている部分も、再生中のビデオの一部です。どのくらいのパフォーマンスを発揮できるかを試してみてください。 [今までの IE9 Platform Preview 6 デモ紹介]SVGヘリコプターHTML5 / CSS3 box-shadowのテストあのブラウザって、こんなに遅かったっけ? マイクロソフト田中達彦


[IE9 Platform Preview 6 デモ紹介 vol.3] ~ あのブラウザって、こんなに遅かったっけ? ~

マイクロソフトの田中達彦です。先日公開された Internet Explorer 9 Platform Preview 6 のデモについて、紹介していきます。IE9 PP6のインストールについては、下記ブログをご参照ください。http://blogs.msdn.com/b/ttanaka/archive/2010/10/29/ie9-platform-preview-6.aspx 今回紹介するデモは、ブラウザの速さを体験するためのSpeed Readingというデモです。IE9 PP6を起動されている方は、[Speed Demos] のところにある [Speed Reading] と書かれたリンクをクリックしてください。他のWebブラウザをご使用の方は、下記リンクをクリックしてください。http://ie.microsoft.com/testdrive/Performance/SpeedReading/ しばらく待つと、以下の図のように [Start Speed Reading] というオレンジ色のボタンが表示されますので、そのボタンをクリックしてください。 僕の環境には、ChromeとFirefoxを入れています。それぞれのWebブラウザで動かしてみました。Chromeとかは速さで定評があるにも関わらず、ちょっとびっくりした結果でした。ちなみに、試したChromeのバージョンは7.0.517.44です。 IE9 PP6とChromeやFirefoxとのスピードの比較をさせる方は、必ずIE9のほうを先に試してください。ChromeやFirefoxだと、なかなかデモが終わりません…あくまでも今日現在の結果なので、おそらく他のWebブラウザもバージョンが上がれば速く動かせるようになるでしょう。 [今までの IE9 Platform Preview 6 デモ紹介]SVGヘリコプターHTML5 / CSS3 box-shadowのテスト マイクロソフト田中達彦


[IE9 Platform Preview 6 デモ紹介 vol.2] ~ HTML5 / CSS3 box-shadowのテスト ~

マイクロソフトの田中達彦です。先日公開された Internet Explorer 9 Platform Preview 6 のデモについて、紹介していきます。IE9 PP6のインストールについては、下記ブログをご参照ください。http://blogs.msdn.com/b/ttanaka/archive/2010/10/29/ie9-platform-preview-6.aspx 今回紹介するデモは、HTML5への準拠を見るための A New Day というデモです。このデモでは、CSS3 box-shadowをどれだけ正確に実装しているかを調べることができます。CSS3 box-shadowについては、W3Cの以下のWebサイトをご参照ください。http://www.w3.org/TR/css3-background/ (英語) IE9 PP6をインストールされている方は、トップメニューの [HTML5 Demos] のところにある [A New Day] というリンクをクリックしてください。リンクをクリックすると、2つの画像が表示されます。右の画像がお手本の画像で、左の画像が右のお手本に近いほど、CSS3 box-shadowを忠実に実装していることになります。 ちなみに、手元にあるHTML5に対応した、IE9ではない2つのWebブラウザで試してみました。 某WebブラウザA 某WebブラウザB なお、上記の結果はあくまでもPCにインストールしていた某Webブラウザの例です。それぞれ最新のバージョンを使っているはずですが、さらに新しいバージョンのWebブラウザがあるかもしれないので、最新版をお持ちの方はお手元のWebブラウザでお試しください。 下記のリンクをクリックすると、お手元のWebブラウザでお試しいただけます。http://ie.microsoft.com/testdrive/HTML5/DayNight/Default.htmlHTML5に対応していない場合は、左の画像が真っ黒になることがあります。HTML5に対応したWebブラウザでお試しください。 [今までの IE9 Platform Preview 6 デモ紹介]SVGヘリコプター マイクロソフト田中達彦


[IE9 Platform Preview 6 デモ紹介 vol.1] ~ SVGヘリコプター ~

マイクロソフトの田中達彦です。先日公開された Internet Explorer 9 Platform Preview 6 のデモについて、紹介していきます。IE9 PP6のインストールについては、下記ブログをご参照ください。http://blogs.msdn.com/b/ttanaka/archive/2010/10/29/ie9-platform-preview-6.aspxまだIE9 PP6をインストールされていない方は、ぜひこの機会にインストールしてみてください。なお、IE9 PP6をインストールしても、既存のWebブラウザーをそのまま使うことができます。 新しく公開されたデモは8種類です。これらのデモや、すでに公開されているデモの中から特徴的なデモを紹介します。今回は、IE9のパフォーマンスを見るためのSVG Helicopterというゲームを紹介します。このゲームは単純で、マウスのボタンを使用してヘリコプターを操縦し、なるべく遠くまで進むというゲームです。上下の壁や、障害物にぶつかるとゲーム終了です。 操作方法は、マウスのクリックだけです。マウスをクリックしている間、ヘリコプターは上昇します。マウスをクリックしていないと、ヘリコプターは下降します。現れる障害物を、マウスのクリックだけでよけていくという、単純ながら難しいゲームです。 このゲームはHTML5で書かれていて、SVG(Scalable Vector Graphics)を使用しています。ゲームそのもののスピードと、どれだけ滑らかに描画しているかという点が、このデモのポイントです。 IE9以外のHTML5に対応したWebブラウザをお持ちの方は、下記シェアをクリックしてIE9と他のブラウザのパフォーマンスを比較してみてください。http://ie.microsoft.com/testdrive/Performance/Helicopter/Default.html マイクロソフト田中達彦