The forefront of html5 implementation

スマートフォンにおける
実装の最先端
HTML5実装の最先端

17-A-3 紀平拓男
株式会社ディー・エヌ・エー
CTO室

Developers Summit 2012

自己紹介

紀平拓男
DeNA CTO室所属
@tkihira http://nmi.jp/

会社を2つ設立した、シリアルアントレプレナー
HTML5によるFlash Player『ExGame』を製作
「インストール」が大嫌い


今回の話題はスマートフォンに限ります
PCブラウザに関する話は一切しません。

現在出来ることについて話します
将来こうなるかもしれない、ということは
別途その旨はっきりとお伝えします。


とは?
とは
HTML5とは

HTML + JavaScript
今までに比べて豊富なAPI
ドット単位の描画が可能なCanvas
ベクターグラフィックスを扱えるSVG
アニメーションなど豊富な表現力を持つCSS3
クライアントにデータを保存出来るlocalStorage
etc…


描画能力の向上

曲線のある図形を描画することが出来るよ
うになった

アニメーション能力も非常に高くなっている

HTML5でFlash並のアニメーションが達成可
能に


アプリ機能の拡充
Webアプリ機能の拡充

ApplicationCache機能
一度アクセスすれば、二度目からはキャッシュ
を利用することが可能

localStorage機能
スマートフォン端末の中に、アプリケーション特
有のデータを保存することが可能


iPhone専用
http://nmi.jp/ds/

しかしアプリには敵わない

アプリにくらべて劣っている点
３D
音楽
速度


と音楽
3Dと音楽

OpenGLが使えない
WebGLはFirefox for mobileのみサポート
音楽に制限が多い
音のタイミング調整が非常にシビア
iPhoneは、画面がタッチされたタイミングでのみ
音楽の再生が可能
WindowsPhoneとiPhoneは、同時に2つの音
源を鳴らせない


速度

HTML5の実行速度は、遅い

描画が遅い
JavaScriptの実行が遅い


描画手段

HTML5の描画手段
Canvas: ラスターグラフィックス
SVG: ベクターグラフィックス
CSS3: 変形やアニメーション

SVGはAndroid 2系列でサポート外
うまくやればCanvasで代用可能


Canvas

Android > iPhone
iOS4
drawImageが遅い、いかに回数を減らすか
キャッシュに綺麗に乗せたら勝ち
DOM構造でCanvasの上に物をのせない
iOS5: GPU support！

じゃじゃ馬使いこなせば優秀だがそれまでが大変

CSS3

悪女とっつきやすいが、いきなり裏切る

基本的にGPUサポート
同時に動く物体数が増えると急激に重くなる
特にAndroidで、ブラウザバージョン間、端
末間の互換性がないことが多い
変形に関してはある程度互換性が期待できる
アニメーションに関しては、、、

メリット・デメリット

Canvasが効力を発揮するのは
シチュエーションに応じて変わるアニメーション
同時に動くものが多い時

CSS3が効力を発揮するのは
1枚もののアニメーション
同時に動くものが少ない時


JavaScript Engine

JavaScriptが重い理由
アルゴリズムが重い
JITが重い
GCが重い

JITが重い＝eval、クロージャの生成を疑う


Garbage Collection

AndroidにおいてFull GCが走ることがある
走るとシャレにならないほど止まる

V8は世代別GCを利用している
なるべく新世代にいるうちに参照を切る

iOSは、メモリが足らなくなると落ちる


メモリとの戦い：王道編
メモリとの戦い：王道編

何度も使うメモリをあらかじめ確保する
頻繁に使う画像は、最初に全部ロードしておく

上限の決まっているオブジェクトは、初期化
時に上限まで確保しておく
オブジェクトの生成の回数を減らす


メモリとの戦い：邪道編
メモリとの戦い：邪道編
の戦い：邪道

何とか実機上でのメモリ使用量を確認する
どの部分がどれだけメモリを消費するか

注意：iPhone Simulatorは信用できない
UIWebViewも信用できない


実機でのプロファイル

ExGameなどでは自作プロファイルを使用
関数単位で count, total, self を取得
どの関数のプロファイルを取るかを指定
CanvasなどのビルトインAPIも指定可能
プロファイルのタイミングを設定可能
最初から、もしくは二本指タッチで開始・終了など
結果をサーバに送信


実機でのデバッグ

JsConsole
http://jsconsole.com/
nmi.jpでも紹介しています

console.log
iPhoneでも設定を操作すれば参照可能
console.error hack


ngCore on HTML5


の将来
HTML5の将来

インストールソフトの時代は終わる
歴史はくりかえす

将来あるべき姿はどのようなものか
10年後に通用するエンジニアであるために


御清聴ありがとうございました。

紀平拓男
@tkihira
http://nmi.jp/


The forefront of html5 implementation

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to The forefront of html5 implementation (20)

The forefront of html5 implementation