スマートフォンにおけるＨＴＭＬ５実装の最先端

昨日、デブサミで、表題の件の話を聴いてきたので、
ここに、メモメモ。

---

今回
　　・スマートフォンに限る
　　・現在できることについて

ＨＴＭＬ５とは
・ＨＴＭＬ＋Javascript
・今までに比べ手豊富なＡＰＵ
　　・ドット単位の描画が可能なＣａｎｖａｓ
　　・ベクターグラフィックスＳＶＧ
　　・ＣＳＳ３
　　・localStorage
　　・などなど

２つ大きな特徴

１．描画能力の向上
・曲線のある図形を描画することができるようになった
・アニメーション能力も強くなっている

２．Webアプリ機能の拡充
・ApplicationCache機能
　一度アクセスすれば、二度目からはキャッシュを利用することが可能
・localStorage
　アプリ固有のデータ保蔵


しかし、アプリにかなわない
アプリに比べ劣っている点
　　３Ｄ
　　音楽
　　速度

３Ｄ
・ＯｐｅｎＧＬが使えない
　　　ＷｅｂＧＬはＦｉｒｅＦｏｘ　 for mobileのみサポート

・音楽に制限が多い
　　・音のタイミング調整が非常にシビア
　　・iPhoneは、画面がタッチされたタイミングのみ音楽再生
　　・WindowsＰｈｏｎｅとiPhoneは同時に２つの音楽鳴らせない

・速度はおそい
　　・描画が遅い
　　・Javascriptの実行が遅い

描画手段
・ＨＴＭＬ５の描画手段
　　Ｃａｎｖａｓ：ラスターグラフィック
　　ＳＶＧ：ベクターグラデーション
　　ＣＳＳ３：変形やアニメーション

ＳＶＧはＡｎｄｒｒｏｉｄ２系統でサポート顔
　　Ｃａｎｖａｓで

Ｃａｎｖａｓ
・Ａｎｄｒｏｉｄ　＞　iPhone

ios4
・DrawImageが遅い。いかに回数を減らすか
　　キャッシュにきれいに載せたら勝ち
・ＤＯＭ構造でＣａｎｖａｓの上にものを載せない

ios5
　ＧＰＵサポート
　　別のところが重くなる
　　　　キャッシュにきれいに載せたら勝ち

ＣＳＳ３：悪女　とっつきやすいがいきなり裏切る

・基本的にＧＰＵサポート
・同時に動く物体数が増えると急激に重くなる
・Ａｎｄｒｏｉｄでブラウザバージョン管、
　端末間の互換性がないことが多い
　　　変形に関しては、ある程度互換性
　　　Ｃａｎｖａｓ互換性いい

Ｃａｎｖａｓが効力
　・シチュエーションに応じて変わるアニメ
　・同時に動くものが多い
ＣＳＳ３が効力
　・１枚モノのアニメーション
　・同時に動くものが少ないとき

Javascriptが重い理由
　　・アルゴリズムが重い
　　・ＪＩＴが重い
　　・ＧＣ（ガベージコレクション）が重い

ＪＩＴが重い＝eval クロージャの生成を疑う


ガベージコレクション
・AndroidにおいてFullGCが走ることがある
　　走るとしゃれにならないほどとまる

・Ｖ８は世代別ＧＣを利用している
　　なるべく新世代にいるうちに参照する

・iosはメモリが足らなくなると落ちる

メモリとの戦い：王道編
・何度も使うメモリをあらかじめ確保しておく
　　　参照をはずさない

・上限の決まっているオブジェクトは、初期化時
　に上限まで確保
　　オブジェクト生成回数を減らす

メモリとの戦い：邪道編
・なんとか実機上でのメモリ使用量を知りたい
　　iPhoneSimulatorは信用できない
　　UIWebViewも信用できない

・jail BreakでＴＯＰコマンド（自己責任）


・１００Ｍ超えたら注意

実機でのプロファイル
・ＥｘＧａｍｅなどでは、独自プロファイルをしよう
　　関数単位でcount,total,selfを取得する
　　どの関数のプロファイルをとるかを指定
　　　　CanvasなどのビルドインＡＰＩも指定可能
　　プロファイルのタイミングを設定可能
　　結果をサーバに送信

ＪｓＣｏｎｓｏｌｅ
　　http://jsconsole.com
　　　　nmi.jpでも紹介している

console.log
　　iphoneでも設定を操作すれば参照可能
　　　デバッグログを出力
　　console.error hack

ngCore on HTML5

HTML5の将来
・インストールソフトの時代は終わる
　　・歴史は繰り返す