Your SlideShare is downloading. ×
0
スマートフォンにおける     実装の最先端HTML5実装の最先端17-A-3               紀平 拓男                     株式会社ディー・エヌ・エー                     CTO室    ...
自己紹介 紀平 拓男  DeNA CTO室 所属  @tkihira http://nmi.jp/   会社を2つ設立した、シリアルアントレプレナー   HTML5によるFlash Player『ExGame』を製作   「インストール」が大嫌...
今回の話題はスマートフォンに限ります PCブラウザに関する話は一切しません。現在出来ることについて話します 将来こうなるかもしれない、ということは 別途その旨はっきりとお伝えします。       Developers Summit 2012
とは?     とはHTML5とは HTML + JavaScript 今までに比べて豊富なAPI  ドット単位の描画が可能なCanvas  ベクターグラフィックスを扱えるSVG  アニメーションなど豊富な表現力を持つCSS3  クライアントに...
描画能力の向上 曲線のある図形を描画することが出来るよ うになった アニメーション能力も非常に高くなっているHTML5でFlash並のアニメーションが達成可能に        Developers Summit 2012
Developers Summit 2012
アプリ機能の拡充Webアプリ機能の拡充 ApplicationCache機能  一度アクセスすれば、二度目からはキャッシュ  を利用することが可能 localStorage機能  スマートフォン端末の中に、アプリケーション特  有のデータを保存...
iPhone専用http://nmi.jp/ds/    Developers Summit 2012
しかしアプリには敵わない アプリにくらべて劣っている点  3D  音楽  速度       Developers Summit 2012
と音楽3Dと音楽 OpenGLが使えない  WebGLはFirefox for mobileのみサポート 音楽に制限が多い  音のタイミング調整が非常にシビア  iPhoneは、画面がタッチされたタイミングでのみ  音楽の再生が可能  Wind...
速度 HTML5の実行速度は、遅い  描画が遅い  JavaScriptの実行が遅い          Developers Summit 2012
描画手段 HTML5の描画手段  Canvas: ラスターグラフィックス  SVG: ベクターグラフィックス  CSS3: 変形やアニメーション SVGはAndroid 2系列でサポート外  うまくやればCanvasで代用可能         ...
Canvas  Android > iPhone  iOS4    drawImageが遅い、いかに回数を減らすか      キャッシュに綺麗に乗せたら勝ち    DOM構造でCanvasの上に物をのせない  iOS5: GPU support...
CSS3悪女 とっつきやすいが、いきなり裏切る 基本的にGPUサポート 同時に動く物体数が増えると急激に重くなる 特にAndroidで、ブラウザバージョン間、端 末間の互換性がないことが多い  変形に関してはある程度互換性が期待できる  アニメ...
メリット・デメリット Canvasが効力を発揮するのは  シチュエーションに応じて変わるアニメーション  同時に動くものが多い時 CSS3が効力を発揮するのは  1枚もののアニメーション  同時に動くものが少ない時        Develop...
JavaScript Engine  JavaScriptが重い理由   アルゴリズムが重い   JITが重い   GCが重い JITが重い=eval、クロージャの生成を疑う          Developers Summit 2012
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        Developers Summit 2012
の将来HTML5の将来 インストールソフトの時代は終わる  歴史はくりかえす 将来あるべき姿はどのようなものか  10年後に通用するエンジニアであるために       Developers Summit 2012
御清聴ありがとうございました。     紀平 拓男     @tkihira    http://nmi.jp/     Developers Summit 2012
Upcoming SlideShare
Loading in...5
×

The forefront of html5 implementation

13,365

Published on

Developers Summit 2012

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,365
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
103
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "The forefront of html5 implementation"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×