The forefront of html5 implementation
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

The forefront of html5 implementation

  • 13,752 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,752
On Slideshare
4,195
From Embeds
9,557
Number of Embeds
6

Actions

Shares
Downloads
102
Comments
0
Likes
12

Embeds 9,557

http://www.atmarkit.co.jp 9,518
http://www.fujico.co.jp 26
http://webcache.googleusercontent.com 8
http://cache.yahoofs.jp 3
http://www.twylah.com 1
https://twitter.com 1

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