Más contenido relacionado Similar a HTML5 conference 2013 (20) HTML5 conference 20132. 2
自己紹介
• 紀平 拓男(きひら たくお)
– 株式会社ディー・エヌ・エー
– HTML5 Chief Engineer
– @tkihira
• 会社を2つ設立したシリアルアントレプレナー
• HTML5によるFlash Runtime『ExGame』を製作
• DeNAにおいてHTML5の総括を担う
• 「インストール」が大嫌い。インストールの無い世
界にしたい
Broadtail Confidential
Confidential
2
6. 6
Webアプリの利点と欠点
利点
欠点
• インストールが不要
• 実行速度が遅い
• あらゆるブラウザ搭載端末か
ら、URLのみで起動できる
• 互換性がない
• リアルタイムアップデートが
可能
• 3D、音楽などのハードウェア
に密着した処理が辛い
• 欠点が大いに目立つ
– 作るのにコストがかかって本当に大変。エンジニアもあま
りいない
• しかし、皆様にはぜひとも、利点に目を向けて頂き
たい
Broadtail Confidential
Confidential
6
12. 12
モバイルWebとPC Webの違い
• PC Webにはブラウザがそんなにない
– IE、Chrome、Firefox、Safari、Opera
• モバイルWebにはブラウザがもっとない
– Mobile Safari、Android Legacy Browser、Android Chromeくらい
– しかもその全てがWebkitベース
• なので対応がとても楽
…というのは大嘘!
Broadtail Confidential
Confidential
12
17. 17
CanvasとCSSのどちらを使うか
• ちょっとしたアプリを作るのであればCSSが適している
– デザイナー志向のツールの存在
• Sencha Animator、jQuery Mobile
– CSS自体の豊富な機能
• CSS Animations、CSS Transforms、CSS Filters
– ブラウザのコントロールにゆだねることが出来る
• フレームスキップ、非表示時の処理軽減
• 作りこんだアプリの場合はCanvasの方が優れる
– (CSSに比べれば)高い互換性
– いくつかのサポートツールの登場
– 全てを自前でコントロールすることが出来る
• CSSも実用に耐えうるようになりつつあるが、Canvasがま
だ主流
Broadtail Confidential
Confidential
17
19. 19
オンメモリCanvasの利用
• 何度も描画に利用する部分をメモリ上に退避し、そ
れを描画に利用する
var img = document.getElementById("data");
var cache = document.createElement("canvas"); // キャッシュ用Canvas
cache.width = img.width * 2; cache.height = img.height * 2;
var cacheCtx = canvas.getCotext("2d");
cacheCtx.transform(2, 0, 0, 2, 0, 0); // 倍に拡大する
cacheCtx.drawImage(img, 0, 0); // キャッシュ用Canvasに書き込む
ctx.drawImage(cache, 100, 100); // キャッシュを使って描画する
– Offscreen Canvas, On Memory Canvas等と呼ばれる
– キャッシュを確保すればその分のメモリが消費される
– とくに複雑な描画をする場合には、いかに綺麗にキャッシ
ュに乗せるかが高速化のポイントになる
Broadtail Confidential
Confidential
19
22. 22
new Functionによるオーバーヘッドの削減(2)
• 生成されるJavaScriptはこんな感じ
ctx.beginPath();ctx.moveTo(51.35,38.55);ctx.lineTo(30.35,0);ctx.lineTo(21,0);
ctx.lineTo(0,38.55);ctx.lineTo(8.3,38.55);ctx.lineTo(12.7,30.3);ctx.lineTo(
38.65,30.3);ctx.lineTo(43.05,38.55);ctx.lineTo(51.35,38.55);ctx.moveTo(34.9,23
.5);ctx.lineTo(16.5,23.5);ctx.lineTo(25.7,6.45);ctx.lineTo(34.9,23.5);
• コードを自動生成することで、パース等に必要な余
計なコストを削除する
– 最初から自動生成したコードを使用するのもあり
• ちなみに上記コードを実行するとこれが出る
Broadtail Confidential
Confidential
22
25. 25
互換性問題の解決
• 先述したとおり、Android Legacy Browserは多種多様の
変更が入っており、ありとあらゆる問題が起こりう
る
ctx.clearRect(0, 0, width, height);
• こんな簡単な命令ですら、動かないときは動かない
– 問題が起こったら、ブラウザを過信せず徹底的に疑う
– なお上記の問題は以下で解決する
ctx.clearRect(0, 0, width + 1, height + 1);
Broadtail Confidential
Confidential
25
27. 27
互換性問題の解決(3)
• 実際にあった問題
– 特定の端末で、なぜかCanvasへの描画が乱れる
• GPUプログラムにバグがあることを突き止め、GPUを利用しな
いようにCanvasのサイズを一定以上のサイズ(>2048px)にする
– 特定の端末で、なぜかCanvasのメモリが解放されないことが
ある
• 大き目のCanvasを用意して、消さずに使いまわすようにする
– 特定の端末で、なぜかimgのonloadが呼ばれないことがある
setTimeout(function() {}, 0); // 絶対に消さないこと
– 特定の端末で、なぜかJavaScriptの代入が失敗する
• 失敗しないように代入文を書き直す
– 特定の端末で、なぜか温めると表示が乱れる
• どうしろと…
Broadtail Confidential
Confidential
27
29. 29
メモリの問題
• メモリを使いすぎない
– メモリを使いすぎると、ブラウザは反抗する
• iPhone: 落ちる
• Android: 描画をサボる
もある
もしくは固まる
もちろん落ちること
– 自前でキャッシュ管理機構を作ってキャッシュを消去する
• LRU等の単純なアルゴリズムでも十分に効果がある
• メモリリークをしない
– ブラウザのGCにきちんと回収されるように気をつける
• 使いもしていないCanvasの参照を持ち続けていないか?
• クロージャが予想以上にスコープを確保していないか?
– 動的にメモリを確認して、メモリが微増する場所を突き止
める
• adb や インスペクタを利用する
• iOSでもAndroidでも、メモリの特性は大体同じ
• 特定の端末のみで発生する問題は、もちろんある
Broadtail Confidential
Confidential
29