HTML5 Conference 2012レポート

HTML5によるタフなモバイルアプリ開発の最前線

2012/09/14

　2012年9月8日に慶應義塾大学で開催された「HTML5 Conference 2012」から、ディー・エヌ・エーの紀平拓男氏によるセッションについてレポートする。

　紀平氏は「インストールが嫌い、インストールのない世界にしたい」という思想の持ち主で、「ネイティブアプリではなく、Webにアクセスしてすぐに遊べるコンテンツが理想」という言葉からセッションを始めた。

ディー・エヌ・エーの紀平拓男氏

　同氏は、「なぜ、今HTML5なのか」を、Flashと対比しながら説明した。FlashはモバイルOSからはなくなっていく一方だという現状を踏まえ、それに代わる技術としてHTML5が台頭してきている。今までFlashで実現していた表現は、ほぼHTML5でも実現できる状況であることを、自社コンテンツのアニメーションを紹介しながら説明した。

　このデモは、同じゲーム中の同じアニメーションを、画面左側はFlash、右側にはHTML5で表示するというものだ。片方の動きが遅くなるようなこともなく、言われるまでどちらがFlashなのか分からなかったほどだった。

　しかし、HTML5にはまだ、ネイティブアプリにはかなわない点が3つあると紀平氏は述べた。「3Dの描画」「音楽」「速度」だ。

　このうち、速度のキモとなる「描画」を改善するために、DeNAでは以下のようなツールを提供しているという。

ExGame……フィーチャーフォン向けSWFコンテンツを、スマートフォン向けコンテンツにスムーズに変換できるSWF変換エンジン
Pex（Post Ex Game）……Flashを利用したHTML5ツール。ExGameでフィーチャーフォンとの互換性を保つためにパフォーマンスを犠牲にしていた部分をスマートフォンに特化させ、アニメーション表現などがよりリッチになり、HTML5ベースでの開発も可能になった
ngCore on HTML5……ネイティブアプリと比べて遜色のないゲームの実現に向けて日々アップデートされているゲームエンジン
Arctic.js……Mobageの人気ゲームタイトルで使用されているHTML5開発支援フレームワーク

　さらに同氏は、「HTML5によるタフなモバイル開発」に向けて、「速度」「メモリ」「電池」という3つの課題に取り組んでいるという。

　速度の高速化は、iOSでのCanvasのGPUサポートで実現された。今後は、「いかにキャッシュさせるか」が大きなポイントになるという。

　メモリに関連しては、例えばガベージコレクションひとつ取っても、長期保存するメモリと短期間で消えるメモリを区別するなどの細かな調整を行っている。また、使用メモリを最小化する場合、デバイスによって「どこでメモリが増えるか」がそれぞれ異なるため、実機を用いた調査が必要になる。OSごとの調査方法として、Chrome Developer Tool:Heap Snapshotは「神ツール！」（紀平氏）だそうだ。

　消費する電池を最小限に抑えるには、「どこでCPUが使用されているか」がキモになり、CPU使用率が高い描画に関しての細かなTIPSの説明があった。ポイントは、「描画しないくていい場合はとにかく描画しない」こと。いかにも当たり前なのだが、それを地道に、詳細に詰めていくことこそが、パフォーマンスの向上につながるそうだ。

　最後に、紀平氏は、現状のモバイルアプリ市場は、GmailやGoogle Mapsがまだ登場していなかったころのPCブラウザの状況と似ていると発言し、「優れたWebアプリの出現によって状況はガラリと変わる」と強調した。「現在、HTML5のWebアプリ状況は、世界と比べても日本の方が優れている！これからモバイルアプリで日本が世界をリードしていきたい」という言葉で締めくくった。