Post on 16-Jan-2015
description
Developers Summit 2012
紀平紀平紀平紀平 拓男拓男拓男拓男株式会社ディー・エヌ・エー
CTO室
17-A-3
スマートフォンにおけるスマートフォンにおけるスマートフォンにおけるスマートフォンにおける
HTML5実装の最先端実装の最先端実装の最先端実装の最先端
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
しかしアプリには敵わないしかしアプリには敵わないしかしアプリには敵わないしかしアプリには敵わない
� アプリにくらべて劣っている点
� 3D� 音楽
� 速度
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/