The forefront of html5 implementation
- 1. スマートフォンにおける 実装の最先端 HTML5実装の最先端 17-A-3 紀平 拓男 株式会社ディー・エヌ・エー CTO室 Developers Summit 2012
- 2. 自己紹介 紀平 拓男 DeNA CTO室 所属 @tkihira http://nmi.jp/ 会社を2つ設立した、シリアルアントレプレナー HTML5によるFlash Player『ExGame』を製作 「インストール」が大嫌い Developers Summit 2012
- 3. 今回の話題はスマートフォンに限ります PCブラウザに関する話は一切しません。 現在出来ることについて話します 将来こうなるかもしれない、ということは 別途その旨はっきりとお伝えします。 Developers Summit 2012
- 4. とは? とは HTML5とは HTML + JavaScript 今までに比べて豊富なAPI ドット単位の描画が可能なCanvas ベクターグラフィックスを扱えるSVG アニメーションなど豊富な表現力を持つCSS3 クライアントにデータを保存出来るlocalStorage etc… Developers Summit 2012
- 5. 描画能力の向上 曲線のある図形を描画することが出来るよ うになった アニメーション能力も非常に高くなっている HTML5でFlash並のアニメーションが達成可 能に Developers Summit 2012
- 7. アプリ機能の拡充 Webアプリ機能の拡充 ApplicationCache機能 一度アクセスすれば、二度目からはキャッシュ を利用することが可能 localStorage機能 スマートフォン端末の中に、アプリケーション特 有のデータを保存することが可能 Developers Summit 2012
- 8. iPhone専用 http://nmi.jp/ds/ Developers Summit 2012
- 9. しかしアプリには敵わない アプリにくらべて劣っている点 ３D 音楽 速度 Developers Summit 2012
- 10. と音楽 3Dと音楽 OpenGLが使えない WebGLはFirefox for mobileのみサポート 音楽に制限が多い 音のタイミング調整が非常にシビア iPhoneは、画面がタッチされたタイミングでのみ 音楽の再生が可能 WindowsPhoneとiPhoneは、同時に2つの音 源を鳴らせない Developers Summit 2012
- 11. 速度 HTML5の実行速度は、遅い 描画が遅い JavaScriptの実行が遅い Developers Summit 2012
- 12. 描画手段 HTML5の描画手段 Canvas: ラスターグラフィックス SVG: ベクターグラフィックス CSS3: 変形やアニメーション SVGはAndroid 2系列でサポート外 うまくやればCanvasで代用可能 Developers Summit 2012
- 13. Canvas Android > iPhone iOS4 drawImageが遅い、いかに回数を減らすか キャッシュに綺麗に乗せたら勝ち DOM構造でCanvasの上に物をのせない iOS5: GPU support！ じゃじゃ馬 使いこなせば優秀だがそれまでが大変 Developers Summit 2012
- 14. CSS3 悪女 とっつきやすいが、いきなり裏切る 基本的にGPUサポート 同時に動く物体数が増えると急激に重くなる 特にAndroidで、ブラウザバージョン間、端 末間の互換性がないことが多い 変形に関してはある程度互換性が期待できる アニメーションに関しては、、、 Developers Summit 2012
- 15. メリット・デメリット Canvasが効力を発揮するのは シチュエーションに応じて変わるアニメーション 同時に動くものが多い時 CSS3が効力を発揮するのは 1枚もののアニメーション 同時に動くものが少ない時 Developers Summit 2012
- 16. JavaScript Engine JavaScriptが重い理由 アルゴリズムが重い JITが重い GCが重い JITが重い＝eval、クロージャの生成を疑う Developers Summit 2012
- 17. Garbage Collection AndroidにおいてFull GCが走ることがある 走るとシャレにならないほど止まる V8は世代別GCを利用している なるべく新世代にいるうちに参照を切る iOSは、メモリが足らなくなると落ちる Developers Summit 2012
- 18. メモリとの戦い：王道編 メモリとの戦い：王道編 何度も使うメモリをあらかじめ確保する 頻繁に使う画像は、最初に全部ロードしておく 上限の決まっているオブジェクトは、初期化 時に上限まで確保しておく オブジェクトの生成の回数を減らす Developers Summit 2012
- 19. メモリとの戦い：邪道編 メモリとの戦い：邪道編 の戦い：邪道 何とか実機上でのメモリ使用量を確認する どの部分がどれだけメモリを消費するか 注意：iPhone Simulatorは信用できない UIWebViewも信用できない Developers Summit 2012
- 20. 実機でのプロファイル ExGameなどでは自作プロファイルを使用 関数単位で count, total, self を取得 どの関数のプロファイルを取るかを指定 CanvasなどのビルトインAPIも指定可能 プロファイルのタイミングを設定可能 最初から、もしくは二本指タッチで開始・終了など 結果をサーバに送信 Developers Summit 2012
- 21. 実機でのデバッグ JsConsole http://jsconsole.com/ nmi.jpでも紹介しています console.log iPhoneでも設定を操作すれば参照可能 console.error hack Developers Summit 2012
- 22. ngCore on HTML5 Developers Summit 2012
- 23. の将来 HTML5の将来 インストールソフトの時代は終わる 歴史はくりかえす 将来あるべき姿はどのようなものか 10年後に通用するエンジニアであるために Developers Summit 2012
- 24. 御清聴ありがとうございました。 紀平 拓男 @tkihira http://nmi.jp/ Developers Summit 2012