The forefront of html5 implementation

  • 13,177 views
Uploaded on

Developers Summit 2012

Developers Summit 2012

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
13,177
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
102
Comments
0
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 6. Developers Summit 2012
  • 7. アプリ機能の拡充Webアプリ機能の拡充 ApplicationCache機能 一度アクセスすれば、二度目からはキャッシュ を利用することが可能 localStorage機能 スマートフォン端末の中に、アプリケーション特 有のデータを保存することが可能 Developers Summit 2012
  • 8. iPhone専用http://nmi.jp/ds/ Developers Summit 2012
  • 9. しかしアプリには敵わない アプリにくらべて劣っている点 3D 音楽 速度 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