The forefront of html5 implementation

スマートフォンにおける実装の最先端HTML5実装の最先端17-A-3 紀平拓男株式会社ディー・エヌ・エー CTO室 Developers Summit 2012

自己紹介紀平拓男 DeNA CTO室所属 @tkihira http://nmi.jp/ 会社を2つ設立した、シリアルアントレプレナー HTML5によるFlash Player『ExGame』を製作「インストール」が大嫌い Developers Summit 2012

今回の話題はスマートフォンに限ります PCブラウザに関する話は一切しません。現在出来ることについて話します将来こうなるかもしれない、ということは別途その旨はっきりとお伝えします。 Developers Summit 2012

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

描画能力の向上曲線のある図形を描画することが出来るようになったアニメーション能力も非常に高くなっているHTML5でFlash並のアニメーションが達成可能に Developers Summit 2012

Developers Summit 2012

アプリ機能の拡充Webアプリ機能の拡充 ApplicationCache機能一度アクセスすれば、二度目からはキャッシュを利用することが可能 localStorage機能スマートフォン端末の中に、アプリケーション特有のデータを保存することが可能 Developers Summit 2012

iPhone専用http://nmi.jp/ds/ Developers Summit 2012

しかしアプリには敵わないアプリにくらべて劣っている点３D 音楽速度 Developers Summit 2012

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

速度 HTML5の実行速度は、遅い描画が遅い JavaScriptの実行が遅い Developers Summit 2012

描画手段 HTML5の描画手段 Canvas: ラスターグラフィックス SVG: ベクターグラフィックス CSS3: 変形やアニメーション SVGはAndroid 2系列でサポート外うまくやればCanvasで代用可能 Developers Summit 2012

Canvas Android > iPhone iOS4 drawImageが遅い、いかに回数を減らすかキャッシュに綺麗に乗せたら勝ち DOM構造でCanvasの上に物をのせない iOS5: GPU support！じゃじゃ馬使いこなせば優秀だがそれまでが大変 Developers Summit 2012

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

メリット・デメリット Canvasが効力を発揮するのはシチュエーションに応じて変わるアニメーション同時に動くものが多い時 CSS3が効力を発揮するのは 1枚もののアニメーション同時に動くものが少ない時 Developers Summit 2012

JavaScript Engine JavaScriptが重い理由アルゴリズムが重い JITが重い GCが重い JITが重い＝eval、クロージャの生成を疑う Developers Summit 2012

Garbage Collection AndroidにおいてFull GCが走ることがある走るとシャレにならないほど止まる V8は世代別GCを利用しているなるべく新世代にいるうちに参照を切る iOSは、メモリが足らなくなると落ちる Developers Summit 2012

メモリとの戦い：王道編メモリとの戦い：王道編何度も使うメモリをあらかじめ確保する頻繁に使う画像は、最初に全部ロードしておく上限の決まっているオブジェクトは、初期化時に上限まで確保しておくオブジェクトの生成の回数を減らす Developers Summit 2012

メモリとの戦い：邪道編メモリとの戦い：邪道編の戦い：邪道何とか実機上でのメモリ使用量を確認するどの部分がどれだけメモリを消費するか注意：iPhone Simulatorは信用できない UIWebViewも信用できない Developers Summit 2012

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

実機でのデバッグ JsConsole http://jsconsole.com/ nmi.jpでも紹介しています console.log iPhoneでも設定を操作すれば参照可能 console.error hack Developers Summit 2012

ngCore on HTML5 Developers Summit 2012

の将来HTML5の将来インストールソフトの時代は終わる歴史はくりかえす将来あるべき姿はどのようなものか 10年後に通用するエンジニアであるために Developers Summit 2012

御清聴ありがとうございました。紀平拓男 @tkihira http://nmi.jp/ Developers Summit 2012

http://www.atmarkit.co.jp	7451
http://www.fujico.co.jp	26
http://webcache.googleusercontent.com	4
http://cache.yahoofs.jp	3

The forefront of html5 implementation

by DeNA_devsumi on Feb 22, 2012

Accessibility

Tags

Upload Details

Usage Rights

4 Embeds 7,484

Statistics

The forefront of html5 implementation — Presentation Transcript