HTML5 Conference 2012で実施された株式会社ディー・エヌ・エー紀平 拓男さんによるセッションが、とても楽しかったのでまとめてみる。
セッション概要
セッション概要には、次のような説明が記載されていた。
スマートフォンにおけるHTML5を用いた開発における現在の最前線の話をDeNAにてHTML5の技術開発を総括している立場より、具体的なノウハウを交えてお話しします。
DeNAの紀平さんはExGameを作った人。
ExGameは、FlashをHTML5のCanvasとJavaScriptへの自動変換してくれるライブラリ。
再現率は他のライブラリよりも高いらしい。
そんな人が、DeNAでHTML5を統括しているから、間違いなく実践的な話になると期待していたし、
実際に期待以上だった。
株式会社ディー・エヌ・エー 紀平 拓男さん
- Twitter：http://twitter.com/tkihira
- Blog：http://nmi.jp/
- 参考サイト：http://nmi.jp/ds/
- セッション動画：http://www.youtube.com/watch?v=BojW3dCUjN0
なぜ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の様々なバッドノウハウの蓄積が進んでいます。
- ExGame
- Pex
- gCore on HTML
- Arctic.js
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の生命線になっていくし、プロダクトで使える品質に達していると自負している。