【デブサミ2012】17-A-3 レポート HTML5でどこまでできる? その実力とスマホ向けアプリ開発のポイント

CodeZine / 2012年3月9日 14時0分

デモ初披露となったMobageの人気ゲームタイトル「忍者ロワイヤル」のHTML5バージョン(開発中)

 本稿では、「Developers Summit 2012」(デブサミ2012)において、2月17日に行われた株式会社ディー・エヌ・エー 紀平拓男氏によるセッション「スマートフォンにおけるHTML5実装の最先端」の内容を紹介する。

 次世代Web標準として仕様が固まりつつあるHTML5。とりわけスマートフォンなどのモバイルデバイスにおいては、ネイティブアプリと遜色ないリッチなWebアプリを実現するキーテクノロジーとして期待を集めている。本セッションでは、DeNAでスマートフォン向けゲームエンジン「ngCore」のHTML5版開発などを手がける紀平拓男氏が、実際に現在のHTML5で実現できることや、スマートフォン向けWebアプリ開発のポイントなどを解説した。

株式会社ディー・エヌ・エー CTO室 紀平拓男氏


■描画能力が大幅に向上、Flashに匹敵するアニメーションも可能に

 膨大な数の仕様で構成されるHTML5は幅広い意味を持ち、一言で定義するのは難しいが、紀平氏はセッションの冒頭で「今回はスマートフォンの話に限定する(PCブラウザに関しては触れない)」と断ったうえで、次のように述べた。

 「HTML5はHTMLとJavaScriptの複合体。それ自体はHTML4と大きく変わっているわけではない。もっとも重要な違いは、今までに比べてAPIが非常に豊富になったこと」

 この豊富なAPIにより、HTML5では描画能力が大きく向上している。例えば、Canvasを使えばドット単位の描画が可能であり、ベクターグラフィックスを扱えるSVGによって曲線のある図形も描画できる。さらに、アニメーションもFlash並のクオリティが実現できるようになった。

 ここで紀平氏は、同じ内容のアニメーションを2つの画面で同時に再生するデモを実施。一方はFlash、もう一方はHTML5で作成されたものだが、実際に会場のスクリーンで見ても見分けがつかなかった。しかし、HTML5は「残念ながらアプリ(ネイティブアプリケーション)に敵わないところもある」と紀平氏は続け、劣っている点として「3D」「音楽」「速度」の3つを挙げた。

 まず3Dについては、スマートフォン標準搭載のブラウザでOpenGLが利用できないという制約がある。現時点でOpenGLをHTML5で使うための規格であるWebGLをサポートしているのは、Android用のFirefox for mobileのみだ(※注意)。音楽についても、音のタイミング調整が非常にシビアであるため「音ゲー」などに使うのは難しいという。ほかにも、画面タッチのタイミングでのみ音楽再生が可能(iPhone)、同時に2つの音源を鳴らせない(iPhone、WindowsPhone)など、制限が多い。そして、速度については、描画(レンダリング)の遅さ、JavaScript実行の遅さという、2つの問題を抱えている。

※注意
 講演後の2月27日、Opera mobileもWebGLに対応しました。



 続いて紀平氏は、描画手段の使い分けについて説明した。HTMLの描画手段としては、Canvas(ラスターグラフィックス)、SVG(ベクターグラフィックス)、CSS3(変形やアニメーション)の3つがあるが、このうちSVGはAndroid 2系でサポートされていないため、CanvasとCSS3の2つを取り上げた。ちなみに、SVGは工夫すればCanvasで代用可能だという。

 「これまでの経験から、CanvasはAndroidで速度が問題になることはほとんどない。そのため、基本的にiPhoneでのfpsを上げることを考えて開発している。特に、iOS4ではdrawImageが遅いので、オンメモリのCanvasを利用してキャッシュに載せ、いかにdrawImageの回数を減らすかが重要」(紀平氏)

 iOS5ではGPUのサポートが入ったことで、drawImageの重さが解消されてかなり速くなったが、別のAPIで重くなっているものもある。その回避のためには、やはりオンメモリのCanvasを利用するのが有効だ。

 また、意外と見過ごされがちなこととして、紀平氏は「DOM構造でCanvasの上にさらにDOM要素を載せると重くなる。できるだけCanvasですべて処理して、DOM要素を上に載せないようにするべき」と指摘した。

 紀平氏によると、Canvasは「じゃじゃ馬」のようなもので、特性を理解して使いこなせば優秀だが、それまでが大変なのだそうだ。一方、CSS3については「悪女」と表現した。そのココロは「とっつきやすいが、いきなり裏切る」というもの。

 「CSS3はGPUサポートがあるので、最初はサクサク動作するが、同時に動く物体数が増えると急激に重くなる。そのため、デモでは快適に動いていたのが、ある日突然、使い物にならないほど重くなるようなことも起こりがち」(紀平氏)

 また、CSS3は、特にAndroidでブラウザや端末間での互換性がないことが多い。変形の機能ではある程度の互換性が期待できるものの、アニメーションの機能についてはトラブルが散見されるという。こうした特性から、「シチュエーションに応じて変わるゲーム的なアニメーションや、同時に動くものが多いときはCanvas、1枚もののアニメーションで同時に動くものが少ないときはCSS3」(紀平氏)といった使い分けが効果的だ。

会場では、HTML5とFlashでそれぞれ作成した同じアニメーションを同時に再生



CodeZine

トピックスRSS

ランキング