the forefront of html5 implementation

Developers Summit 2012

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

CTO室

17-A-3

スマートフォンにおけるスマートフォンにおけるスマートフォンにおけるスマートフォンにおける

HTML5実装の最先端実装の最先端実装の最先端実装の最先端


自己紹介自己紹介自己紹介自己紹介

� 紀平拓男

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

Documents