HOME > 開発者向けBLOG > Sencha Blog >  Microsoft Surface 対 iPad 4: HTML5スコアカード

Technology Note 開発者向けBLOG

Sencha Blog

Microsoft Surface 対 iPad 4: HTML5スコアカード

こんにちは、ゼノフィkotsutsumiです。

この記事は、US Sencha社ブログ “Microsoft Surface vs. the iPad gen 4: The HTML5 Scorecard”を翻訳したものです。

今週中我々は第4世代iPadとMicrosoft Surfaceタブレットの両方を使って、 HTML5のプラットフォームにどう対応しているかをテストしました。 HTML5は次世代のWebテクノロジーで、一度書くだけで複数のオペレーティングシステム、ブラウザー、デバイス上で動作するアプリケーションを開発するためにますます使われています。 HTML5を包括的にハイパフォーマンスでサポートすることは、今や新しいモバイルデバイスにとって「欠くことのできない」機能です。 エンドユーザーにとっては、どちらのデバイスでもデザイン性の高いHTML5アプリのしっかりしたユーザーエクスペリエンスを実現して欲しいところです。

テストの結果、嬉しいことに両方のタブレットはしっかりしたHTML5プラットフォームだと言えます。 Microsoft SurfaceにはInternet Explorer 10とWindows 8が入っていて、iPadにはモバイルSafariとiOS 6が入っています。 SurfaceのInternet Explorer 10のHTML5機能セットは幅広く、よく実装されていて、モバイルSafariと比べてほとんど遜色がなく、Safariを超えるところもあります。 パフォーマンス面では、iPad 4はJavascript、DOM操作とCanvasのパフォーマンスで上回っていて、Surfaceはベクターグラフィック(SVG)の速さで上回っています。

当初は第3世代のiPadとWindows8の開発ハードウェアで分析していました。 春にiPad 3のレビューをした時には、 iPadのパフォーマンスにがっかりしました。 普通のウェブページやHTML5のアプリケーションは明らかに吃りがあってタイリングが見えました。 生のJavascriptのパフォーマンスは、iPad 2よりiPad 3の方が実は弱かったのです。 我々から見ると、このデバイスはパワーは不足でしたので、 ハードウェアスペックが非常に向上したiPad 4が登場したときにも、さほど驚きませんでした。 Microsoftについて、 去年の秋にIE10を初めて見た時、 そのHTML5の機能に感激しましたが、 そのパフォーマンスがタブレットクラスのハードウェアでも維持されるかどうかは疑問だと思いました。 その答えはこの続きにあります。


Microsoft Surface

すでにSurface タブレットについて一般のユーザー用のレビューが沢山ありますから、 一般的な機能の説明にはあまり時間を割きませんが、ただ言えるのは

  • Windows 8が進めているキーボードとタッチをミックスしたインターフェースは正解です。
  • コントロールやナビゲーションをするときのベゼルのジェスチャーはすぐ身につけらます(たまに思わぬ動きをすることがありますが)。
  • 統合された(とても丈夫な)キックスタンドはタブレットの標準機能になるべきです。

もう一つ、もしご自分でSurfaceを評価する場合は、 プリインストール済みのOffice Previewも含めた全てのアップグレードをインストールしてからにしましょう。 アップグレードする前では、Officeでもブラウザーベースの入力フィールドでも、 文字の入力がバカみたく予測不能なぐらいダメダメでした。

Surfaceのトラフィックを探す場合のユーザーエージェントは次の通りです: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; ARM; Trident/6.0; Touch)

Surfaceはマルチタッチをサポートをしていて、5つの同時タッチが一つひとつトラッキングされています。 バッテリー駆動の時のJavaScriptのタイマー精度はWindows基準の16ms(または毎秒64ティック)になっています。 コンセント接続時はタイマーは4ms(AndroidのChromeやiOSと同じ)精度に上がりますが、この精度ではタイマーのノイズが多すぎて、実際の精度はどれぐらいか正確に立証できませんでした。 以前に書いた通り、アニメーション動作のペースを決めるためにsetTimeoutに0をセットして使っているようなアニメーションの場合は、Surfaceがコンセントに繋がっているかどうかで、動作速度が変わってしまいます。 JavaScriptアニメーションには、時間を明示するかrequestAnimationFrameを使うことを強く推奨します。

IE10にはCSSプロパティの新しいコレクションがあり、タッチイベントのハンドリングをコントロールするイベントがあります。 アプリの中でタッチイベントがOSに先取りされないように、すべてのHTML5アプリ(そしてブートするWebページ)では、ms-touch-action: noneを使いましょう。 WebKitスタイルのtouchstart、touchendなどは、利用できません。 その代わりに、マウスとタッチ・イベントをひとつ屋根の下に統一する、Microsftの新しいpointerEventsがあります。 これはジェスチャー抽象化ライブラリやクラスプラットフォームWebアプリを構築するために不可欠なフルフレームワークで使えます。 Surfaceはposition: fixedが岩のように固く実装し、モバイルSafriでは未だに無視されている、background-attachment: fixedをサポートするというはらはらするような試みまでしています。


HTML5機能の利用可能範囲

Modernizrを使ってHTML5機能の存在をテストしました。 SurfaceのIE10にはHTML5機能が沢山あります。 そこには、indexedDB、CSSアニメーション、 2Dと3Dトランスフォーム、グラデーション、トランジション、 Web Workers、WebSocket、ビデオやオーディオの再生、ファイルAPIファイルが含まれます。 iPad 4を飛び越えて、IE10には「CSS RegionsとCSS Exclusionsの実装」があります。 これは出荷されているモバイルHTML5ブラウザーとしては初めてだと思います。 未来永劫IEだけの機能にに見える機能、Grid Layoutもサポートされています。

iPad4と比べると明らかに省かれたり足りなかったりする部分があります。 inputタグは(iOS6で導入された)カメラやビデオキャプチャーに対応していません。 flexboxの実装は古い時代遅れのバージョンです。 border-imageのサポートもありません(確かにモバイルSafariのborder-imageの対応も完璧に正確とは言えませんが)。

どちらのプラットフォームもWebGLをサポートしてませんが、Microsoftは前々から対応しないと発表していました。 同じように、colorのなどのより秘伝的なHTML5 inputタグもサポートされていません。 通知とサーバー送信イベントも同じように両方のプラットフォームにありませんでした。


JavaScript パフォーマンス

iPad 4とSurfaceの両方でSunspiderとグーグルのV8ベンチマークを走らせてみました。 Sunspiderは不十分なテストですが、履歴で比較できるところが素晴らしいところです。 この数字はiPad 2 = 1.0としたSurfaceとiPad 4のパフォーマンスです。 ご覧のように、両方のプラットフォームの生のJavaScriptのパフォーマンスは大体iPad 2の二倍になっています。iPad 4はSurfaceより平均して20%高いという、パフォーマンスでのアドバンテージがあります。 V8ベンチマークのバージョン7 ではパフォーマンスの違いはもっと明確でした。 iPad 4の1565対Surfaceの775(高い方が良い)で、iPadにはは二倍ものアドバンテージがありました。

ただし、iPad 4のUIWebViewでアプリを動かしている場合は、モバイルSafariの30%のスピードしかないpre-Nitroのエンジンのせいで、JavaScriptの動きが非常に遅く感じられるでしょう。


SVGサポートとパフォーマンス

IE10にはハードウェアアクセラレートされたSVG実装があるので、SVGのパフォーマンスを調べることにしました。 はじめに、回転や図形の重ね合わせを組み合わせたDavid Daileyのdecahedra demoを実行してみました。 Surfaceは問題なくしっかりしたパフォーマンスでスクリーン全体に表示された50個の図形を処理しました。 対して、iPad 4は15個ほどの図形で明らかにフレームのトランジションが見えてきました。 より動的な疑似3Dの通路ナビゲーションゲームでは、Surfaceは大体18fps、対するiPad 4は12 fpsでした。

SurfaceのIE10のSVGの実装はリッチで、完全なSVG機能が揃っています。 素晴らしいのは、例えば、色チャンネル操作のようなSVGフィルターの効果が幅広くサポートされている点です。 細かい不具合にも気づきました。 テストしたライティングエフェクトのパフォーマンスはとても弱く(10s+)feSpotlight プリミティブはサポートされていませんでした。 ライティングエフェクトでは、SVGテストイメージよりも明らかに暗く、 またModernizrはSMIL対応を報告していましたが、どのように宣言してもSVGアニメーションをうまく実行することはできませんでした。 モバイルSafariでもSVGフィルターエフェクトは不十分で、これを使う場合はしっかりとしたテストとクロスブラウザの標準化が必要になるでしょう。


Canvasのパフォーマンス

とても印象的なHTML5のプラットフォームとしてMicrosoft SurfaceとiPad 4はiPad2とRIM Playbook 2と同様になった。

このMindcatの生のCanvasのベンチマークはSurfaceと比べてiPad4が2倍のアドバンテージがあるように見えます。 我々のベンチマークではiPad4の点数は1.81でSurfaceは0.90でした。 さまざまなCanvasのテストアプリケーションでSurfaceは完璧に十分なパフォーマンスを発揮しました。 これは canvas color cycling(一時はこれをやると必ずモバイルブラウザに死亡フラグが立ちました)やさまざまなImpactJSベースのゲームを含めてです。 一方、Canvasを使ってビデオフレームを取ってきて処理する Craftymind videosをスムースに実行できたのはSurfaceだけでした。 iPad 4ではビデオ再生が全く表示されませんでした。 Canvasとビデオを組み合わせた他のデモもSurfaceでは完璧に実行できましたが、iPadでは動作しませんでした。

テストアプリケーション以上に、Microsoft自身のfishbowl demoは実際のキャンバスの用途のとても良いストレステストでした。 このデモは多様な別々のキャンバスコンテキストをバックグラウンドビデオの上に合成し、効果音は別のAudioエレメントに配置されます。 またCSSトランスフォームとCSS透明度(opacity)も使われています。 基本的なスプライトのアニメーション以外は全ての効果を無効にした状態で、60fpsのスプライトアニメーションを、Surfaceでは大体110個処理でき、iPad 4ではおよそ135個でした。 極端に、沢山のエフェクト(マスク、バックグラウンド、シャドウなどなど)を有効にしたらiPad 4は大丈夫でしたがSurfaceでは青息吐息でした。 バックグラウンドの水のビデオ、シャドウとオーディオ以外のエフェクトを全て有効な設定にした状態で、iPad 4は60fpsのスプライトアニメーションをおよそ100個同時に処理できて、Surfaceではたったの10個でした。 iPadに比べるとSurfaceにとってはCanvasの総合はとても難しいグラフィック処理のようです。


CSS、DOMと他のパフォーマンス

出始めの頃のモバイルプラットフォームはCSSのパフォーマンスについて問題がありましたが、このテストではトランジションやアニメーション効果で良いCSSパフォーマンスを発揮しました。 Webkitじゃないバージョンをハックしなければなりませんでしたが、5つ以上のアニメーションが並列動作する揺れるボートのCSSアニメーションの再生も、スムースでもたもたしませんでした。 動く部分の境界のアンチエイリアスは(デスクトップのChromeにではとても難しかった部分)両方のプラットフォームともに割と良かったのですが、ただまだ改善の余地はある感じです。 両方のプラットフォームともにグラデーションはスムーズで階調飛びもありませんでした。ビデオの再生にも問題はありませんでした。

最後に、dromaeo benchmarkベンチマークのDOM操作とCSSセレクターの部分ではiPad 4がSurfaceに大勝しました。 長い間DOM操作の速さではWebkitがIEのエンジンよりも優位に立ってましたが、未だにこれだけ広いパフォーマンスの差が残っていることに驚きました。 一般的にはアプリケーションにおいてはDOM操作が消費する時間は微々たる物ですが、非常にダイナミックなアプリケーションの場合は、この部分でパフォーマンスにペナルティがあると予想されます。


(higher is better) iPad gen 4 Surface iPad Advantage
DOM Attributes 161.84 37.5 4.3 x
DOM Modification 136.5 13.9 9.8 x
DOM Query 4560.0 356.6 12.8 x
DOM Traversal 138.3 4.9 28.2 x
CSS Selector (Avg) 1654.7 458.7 3.5 x

An Embarrassment of Tablet Riches

とても印象的なHTML5のプラットフォームとしてMicrosoft SurfaceとiPad 4はiPad2とRIM Playbook 2と同様になりました。 この2つはiPad 2(HTML5アプリにとってのこれまでのベストタブレット)と比べてとても進化しています。 Microsoftがステップアップしていて、 総合的でパフォーマンスが良いHTML5実装をデリバリしているのを見ると心強く思います。 もちろんまだやる事は残っています。 両社からの次世代のタブレットでは、ネイティブグラフィックパフォーマンスのSVGが表示できると嬉しく思います。 そして Webページからカメラやビデオへアクセスできるようにするのは、SurfaceのTODOリストの重要項目です。 ハイパワーインテルプロセッサのSurface Proタブレットのレビューが楽しみです。


SUMMARY FINDINGS Apple iPad (gen 4) Microsoft Surface (WinRT)
JavaScript Performance Excellent (2x iPad 2) Good (1–2x iPad 2)
DOM & CSS Interaction Excellent Poor
Graphics & Fonts Good (no webgl, svg perf -) Good (no webgl, SMIL)
Audio & Video Fair (limited manipulation) Good
CSS3 Styling Excellent Excellent
CSS3 Position & Layout Good (no grid) Good (old flexbox)
CSS Animations Excellent Excellent
Input & Semantic Elements Excellent Excellent
Multi-Touch Excellent (10 touch points) Good (5 touch points)
Timer Resolution Excellent (4ms) Good (16ms)
Database, File & Workers Fair (no IndexedDB) Good (no WebSQL)
Communications Good Good
Device access Good (no streaming) Poor (geo only)
Experimental features Poor Fair (Regions & Exclusions)

PAGETOP