スマートフォンにおけるHTML5実装の最先端@Developers Summit 2012

■概要 モバイル業界において、HTML5の勢いはさらに増しています。 Webアプリのリッチクライアント実装の最先端になるであろうことは、もはや間違いのない状況です。 このセッションでは、HTML5の実装をされる方向けに、カリッカリにチューニングしたHTML5をどのように書くのか、またHTML5が普及した後の世界がどのようなものになるのかについて、私が今までHTML5によるFlash Player(ExGame)やngCoreのHTML5対応を 手掛けてきた経験をもとにお話をさせていただければ、と思っております。 ■登壇者 続きを読む
18
フルスイング by DeNA @DeNA_fullswing

DeNA紀平「大体2ヶ月で倍早くなっている。使い方によってはかなりスピードを出すことが出来る、やはり、じゃじゃ馬。一方CSS3は”悪女”(笑)最初はサクサク動くが、同時に動く物体数が増えると急激に重くなる」 #devsumiA

2012-02-17 13:33:14
断頭台のカワヴェリ @Kawaveri

RT @mogurohukuzo: #devsumi #devsumiA CSS3は悪女 とっつきやすいがいきなり裏切るらしい

2012-02-17 13:34:59
nyamairi @nyamairi

css3は、同時に動かす物が増えると急に重くなる。特にAndroidでブラウザバージョン、端末間で互換性が無いことが多い、特にアニメーションは厳しい、互換性ではcanvasの方が…。 #devsumiA

2012-02-17 13:33:31
フルスイング by DeNA @DeNA_fullswing

DeNA紀平「CSS3は特にAndroidでブラウザや端末での互換性が無いところがある。CSS3は変形とアニメーションがあり、前者ではある程度の互換性が期待できるが、後者ではトラブルが散見される」 #devsumiA

2012-02-17 13:34:02
Emma Haruka Iwao @Yuryu

ゲーム的なアニメーション、数が多いとかカスタマイズしたいとかはCanvas。1枚もののアニメーションは CSS3 のほうがいい。CSSなので使える人も多い。 #devsumiA

2012-02-17 13:34:23
Emma Haruka Iwao @Yuryu

JavaScript が遅いのは、アルゴリズムか JIT か GC のどれか。 JIT が遅いのはツールを使うと教えてくれる。 GC が遅いのが一番面倒。 #devsumiA

2012-02-17 13:36:49
nyamairi @nyamairi

JavaScriptは、JITを何度も呼び出すような記述(eval,クロージャ)をしてはいけない。 #devsumiA

2012-02-17 13:37:09
フルスイング by DeNA @DeNA_fullswing

DeNA紀平「先日発売されたPlayStation Vitaでも、Canvasは問題なく動作した、互換性についてはCanvasは安心できる」 #devsumiA

2012-02-17 13:37:32
フルスイング by DeNA @DeNA_fullswing

DeNA紀平「Canvasはシチュエーションに応じて変わるアニメーションや、同時に動くものが多い時に有効。CSS3は1枚もののアニメーションや、同時に動くものが少ない時に有効。」#devsumiA

2012-02-17 13:37:58
ヤコペッティ @jacotan

#devsumia PSVitaでExGame動かしてみたらばっちり動いた。Canvasの互換性は高い CSS3は一枚物のアニメーション、同時に動くものが少ない時。 Canvasは、シチュエーションに応じて変わるアニメーション、同時に動くものが多い場合。

2012-02-17 13:34:36
いっさん @issps2009

CSS3のアニメーションは同時に動く物体数が増えると急激に重くなるとのこと。。 うーん、こういうところでcanvasとの使い分けが発生するのね。すごく為になる!! #devsumiA

2012-02-17 13:38:28
ヤコペッティ @jacotan

#devsumia AndroidにおいてFull GCが走ることがある。酷い時は2〜3秒止まる。V8は世代間GCを利用してるので新世代にいるうちに参照を切る(JVMの殿堂入りを避けるのと同じだねェ)。しかもブラウザ依存…… iOSはメモリが足りなくなると落ちる。

2012-02-17 13:38:43
フルスイング by DeNA @DeNA_fullswing

DeNA紀平「iOSのSafariでは突然落ちる特性がある。これはメモリ不足で落ちるのをいかに回避するかが重要な問題」 #devsumiA

2012-02-17 13:41:46
フルスイング by DeNA @DeNA_fullswing

DeNA紀平「メモリとの戦い:王道編として以下の2つがある。①何度も使うメモリをあらかじめ確保する。(頻繁に使う画像は、最初に全部ロードしておく}②上限の決まっているオブジェクトは、初期化時に上限まで確保しておく。(オブジェクト生成の回数を減らす)」 #devsumiA

2012-02-17 13:45:08
ヤコペッティ @jacotan

#devsumia 何度も使うメモリは予め確保する(頻繁に使う画像は最初にロードする)。メモリの断片化が起こっちゃうので。 上限の決まっているオブジェクトは、初期化時に上限まで確保しておく(オブジェクト生成の回数を減らす。オブジェクトプーリングと解してOKかしら?)

2012-02-17 13:40:54
フルスイング by DeNA @DeNA_fullswing

DeNA紀平「メモリとの戦い:邪道編。ここからの話は自己責任でお願いしたいが、まずiPhoneシミュレーターでは信用出来ないCPUなどがそもそも違う。UIWideViewもだめ、JITのコンパイルが働かないので効率が異なる」 #devsumiA

2012-02-17 13:47:28
Emma Haruka Iwao @Yuryu

メモリ使用量は実機上で確認したい。 iPhone Simulator は信用出来ない。 UIWebView に埋め込んでも、 JIT が働かないから信用出来ない。 しゃーないので JailBreak した… #devsumiA

2012-02-17 13:43:23
ヤコペッティ @jacotan

#devsumia メモリとの戦い邪道編。。実機でのメモリ利用量を調べたい。iPhoneシミュレータは信用出来ない。UIWebViewも信用出来ない(JITが働かないため)。 結局、iphoneはジェイルブレイクした。日本では色々グレーなのでat your own riskで。

2012-02-17 13:44:09
Emma Haruka Iwao @Yuryu

JB した上で top 走らせて測る。 JS のメモリ使用量が 100MB を超えると危険信号。これを超えると「落ちる」場合が急増する。 #devsumiA

2012-02-17 13:44:57
nagaseyasuhito @nagaseyasuhito

一昔前のゲーム開発バッドノウハウ集のような感じ。いつの時代もゲーム開発は泥臭い面倒なことをしなきゃならんのだなあ #devsumiA

2012-02-17 13:44:28
フルスイング by DeNA @DeNA_fullswing

DeNA紀平「実機でのプロファイル、JavaScriptで全て取得するのは非現実的なのでどの関数を取得するか指定している。プロファイリングのタイミングが重要、取りたい所を取れるようにしている」 #devsumiA

2012-02-17 13:50:02
フルスイング by DeNA @DeNA_fullswing

DeNA紀平「プロファイル、非常に重要なものでここでの改善が何よりも大事。また実機でのデバックの問題では有名なものとしてJsConsole、実機にコンソールを潜りこませるもの、デバックが非常に効率的に進行することもある」 #devsumiA

2012-02-17 13:52:08
フルスイング by DeNA @DeNA_fullswing

DeNA紀平「実機でのデバックで重要なのはconsole.log、iPhoneではデバックログの出力によって見ることができる」 #devsumiA

2012-02-17 13:52:23
フルスイング by DeNA @DeNA_fullswing

DeNA紀平「console error hack 、量が多い時に効率を上げる事ができる」 #devsumiA

2012-02-17 13:52:31