「HTML5によるタフなモバイル開発の最前線」by DeNA @tkihira

HTML5 Conference 2012で実施された株式会社ディー・エヌ・エー紀平 拓男さんによるセッションが、とても楽しかったのでまとめてみる。

セッション概要

セッション概要には、次のような説明が記載されていた。

スマートフォンにおけるHTML5を用いた開発における現在の最前線の話をDeNAにてHTML5の技術開発を総括している立場より、具体的なノウハウを交えてお話しします。  

DeNAの紀平さんはExGameを作った人。
ExGameは、FlashをHTML5のCanvasとJavaScriptへの自動変換してくれるライブラリ。
再現率は他のライブラリよりも高いらしい。
そんな人が、DeNAでHTML5を統括しているから、間違いなく実践的な話になると期待していたし、
実際に期待以上だった。

株式会社ディー・エヌ・エー 紀平 拓男さん

なぜHTML5?

インストールが大嫌い。インストールの無い世界にしたい。

モバイル開発では、これまではフィーチャーフォンではFlashしか選択肢がなかったので、
Flashを使わざるおえなかった。

方やスマートフォンではFlashの選択肢がなかった。
ジョブスがiPhoneでのFlash対応を拒否し、HTML5押しだったのが決め手。
現時点では、スマートフォンはiPhoneとAndroidの二強。
その片翼のiPhone非対応って選択はあり得ないから。

さらに8月に、Android版のFlashプレイヤーの配布が終了した。
今後出てくる端末にはFlashプレイヤーが無い。

HTML5への流れは必然。
個人的にはインストールが大嫌いなので標準で対応できるのはWelcome。

HTML5がうれしいのは、ブラウザ間の互換性を保って使える機能が増えたこと

描画性能が向上した。
曲線のある図形を描画することができるようになった。
アニメーション対応も非常によくなっている。HTML5でFlash並みのアニメーションが達成可能

Webアプリケーションの機能が向上
applicationCache機能。
電波が入らなくてもゲームをすることができる
localStorage/WebSQL
スマートフォンの端末の中にアプリケーション特有のデータを保存することが可能。
参考:http://nmi.jp/ds/

HTML5対応をするとでてくる3つの問題点

次の3点はネイティブアプリにはかなわない。

  • 3D
  • 速度
  • 音楽

この3点は、ネイティブアプリに劣っている。

HTML5はネイティブの速度には絶対敵わないのは当たり前の話ですが、その中でも描画速度が一番問題になります。

CanvasとCSS3を制するものはモバイルHTML5を制する

使えるのであれば、Canvasを使った方が良い。
CSS3とは、ほんのわずかな速度差しかないので、心が折れないのであればCanvasを書いてください。
でも心が折れますね…。

Canvasのメリット

CanvasはJavaScriptで書き換えられるため自由度が高い。
iOS5からGPU描画をサポートしたので高速で動くようになった。
APIがシンプルで、端末間の誤差も小さい。

Canvasのデメリット

毎フレームちまちま描画しないといけないので、ちょっとしたアニメーションをするためにも相当の行数を書かないといけない。

Canvasは非常に優れているが、作るのが非常に難しい。

CSS3のメリット

CSS3にDOM要素の変形とアニメーションが追加されました。
Canvasより優れているのは、3D変形に対応していること。
比較的書きやすい印象。

CSS3は基本的にGPUサポートがあり、CSSの延長なのでデザイナーが欠ける。

CSS3のデメリット

細かいアニメーション同期には、JavaScriptに頼らないといけない。
基本的に高速だけど、はまると何故かわからないけど急激に遅くなる。
端末互換は絶望的に無い。

端末別の考え方

iOSは端末間の誤差が非常に少ないので、CSS3を使用。
iOS4/iOS5に、iPhone3Gs、iPhone4、iPhone4sの6種類程度に対応すればいい。

Androidは、Flashを使うってのが今までの解でした。
でも、Flash Playerの配布は終了したので、今後はFlashでは対応できない。

DeNAでの取り組み

次のツールはすべてCanvasを使用しているツールで、社内に提供しています。
DeNAにはCanvasの様々なバッドノウハウの蓄積が進んでいます。

Canvasでの問題点

DeNAのゲームは長い時間使っていただけるので、Canvasが常時動き続けることになるので、
結果的に問題が表面化しやすい。

Canvasにかかわる問題は多岐にわたるが、結局は次の3種類に集約できる。
社内のバグトラッキングも、次の3つに集約されています。

  • 速度
  • メモリ
  • 電池

Canvasの速度

オンメモリのCanvasの有効活用。
GPUのサポートが入ってからdrawImage関数が高速になりました。
DOMに属さないCanvas要素をcreateElementで作成し、キャッシュとして利用すると高速化につながる。

GC対策が重要。
Androidは世代別GCを使用しているので、Stop the worldが発生する。
フルGCが発生するタイミングで0.5秒プチフリーズする。
だいたい30フレーム。
Androidは、ある日急に導入されました。
なので、iPhoneも間違いなく、ある日急に導入されると考えていた方が良い。

世代別GC対応としては、
可能な限りオブジェクトをプールしておき、メモリ確保回数自体を減らしておくことが重要。
メモリ確保のタイミングを減らせばいい。
GCを起こさせないという解はない。

Canvasのメモリ

Canvasを使い込んでいくと次はメモリの問題が起こる。
メモリを使いすぎるとブラウザが落ちる。
実機でのメモリ使用量を動的に調査する必要がある。

iPhoneでは、iOS6で可能になるらしいけど、本当に搭載されるかは怪しいかも?
お勧めも推奨もできないし、電波法に触れる可能性もあるけど、ジャイルブレイクとか。

Androidであれば、adb shell ‘dumpsys meminfo _package-name_’ が簡単。

メモリリークを検知しましょう。
神ツールは、Chrome Developer Tool:Heap Snapshot機能を使ってあげると簡単に調査できる。
注意が必要なのは、console.log。
console.logで、デバッグ中だけメモリリークしちゃう。
特にオブジェクトをChromeで表示するとリークしやすい。

電池の問題

電池の問題がシビアです。
電池の消耗は、CPU使用率と相関関係にあります。
電池の消耗を防ぎたい場合は、CPU使用率を下げる。無駄に使うことが多いのは描画。
スムーズな描画でもCPU使ってる。
前のフレームで描いた描画結果を利用して描画範囲を絞る。

描画範囲を細かく見ることが重要。
例えば、モビルスーツがふわふわ浮いているだけの画像の一番上と一番下は、
ほとんどかわっていないので再利用したら30%削減できた。

まとめ

HTML5らしいツールとしては、iPhone版のGmail、Twitterなどはすぐれているので参考にしてね。
Webアプリケーションの復権はくる。
優れたWebアプリの登場によって、状況は簡単にひっくり返ると思う。

次世代アプリは、iPhone/Android/WinPhone全部で動いて、ページ船医がほとんど泣く、
瞬時に起動しオフラインでも快適に動作するモバイルアプリが、次世代Webアプリだと思います。
さぁ、皆さん一緒に次世代のwebwプリを世界に普及させましょう。

モバイルHTMLは日本が世界にに抜き出ていて、
日本の環境はサンフランシスコのくそなインフラに比べると優位。
今、鼻差で勝ってるから勝ち続けましょう!

Q&A

JSXについて

JSXには、メモリリークテストが組み込まれる予定。
プロファイラーはすでに出ている。
DeNAが提供するツールは順次jsxに書き換えていく。
ExGame/Pex/ngCore on HTML5/Arctic.jsなども順次対応していくことになっている。
DeNAの生命線になっていくし、プロダクトで使える品質に達していると自負している。