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

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

13:10より「スマートフォンにおけるHTML5実装の最先端」の講演内容を実況させて頂きます。よろしくお願い致します。 #devsumiA

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

DeNA紀平「今回はスマートフォンでのHTMLの実装の最先端の要素について。今はCTO室に所属して実装を担当しています。過去に2つ会社を設立した、シリアルアントレプレナー。HTMLは私にとって非常に相性の良いものです」 #devsumiA

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

DeNA紀平「今回はスマートフォンの話に限定したい。PCブラウザでの話はしない。現状できることについてお話ししたい」 #devsumiA

2012-02-17 13:15:33
ヤコペッティ @jacotan

#devsumia スマートフォンの話限定。PCブラウザの話はしない。HTML5の話は大きすぎるため。 また、現在出来ることのみについて話す。将来の話は但し書き付きで話す。

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

DeNA紀平「HTML5で重要視しているのは豊富なAPI、ピクセル単位での操作が可能になるなど、アニメーション表現が豊富になった、またスマートフォンへのデータ保存など、豊富なAPIが加わってこれまで出来なかったことが出来るようになった」 #devsumiA

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

#devsumia HTML5= HTML+Javascript 今までのHTML4と変ってるわけではないが、今までに比べてAPIが増えたのが重要。Canvas,SVG,CSS3,localStorage….

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

DeNA紀平「Flash並みのアニメーションがHTML5で実現できるようになっている。ここではデモをお見せしたい。アニメーションのフラッシュとHTML5がほとんどど同じであるとお見せできれば」 #devsumiA

2012-02-17 13:19:07
ヤコペッティ @jacotan

#devsumia HTML5。曲線の表現。アニメーション。Webアプリ向け機能の拡充(ApplicationCache,localStorage)

2012-02-17 13:18:21
Emma Haruka Iwao @Yuryu

HTML5 は曲線描画、アニメーションが強化されたので Flash とかわんない。怪盗ロワイヤルのアニメーション見せてもらったけど、たしかに見分けつかない #devsumiA

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

DeNA紀平「LocalStorage機能、具体的にはハイスコアなどはこれまではサーバーに保存する形であったが、アプリケーション固有の情報をスマートフォンに保存できるようになり、ウェブアプリ的な機能が拡充されている」 #devsumiA

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

DeNA紀平「HTML5、残念ながらアプリに敵わない点もある。大きく言うと。3D、音楽、速度の3点」 #devsumiA

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

DeNA紀平「細かく言うと、OpenGLが使えない。Androidでもまだ対応していない。firefoxでは一応サポートされているが、最初のブラウザで動けないものは厳しいので今後も使えないだろうと。またウインドウズでもサポートされてないので先行きは暗い」 #devsumiA

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

#devsumia アプリに比べてHTML5が劣っている点。3D、音楽、描画。 OpenGLが使えない。WebGLを現時点でサポートしているのはmobileではFirefoxのみ。WindowPhoneではサポートしないと明言された。 音楽に制限が多い。タイミング調整がシビア。

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

DeNA紀平「また音楽の制限、音のタイミング調整が非常にシビアなため、音ゲーなどには向かない。またiPhoneだと画面タッチのタイミングでのみ音楽再生が可能である。これは3G回線の制限回避のためだとAppleは説明している」 #devsumiA

2012-02-17 13:24:53
ヤコペッティ @jacotan

#devsumia iphoneでは画面がタッチされたタイミングのみで音楽の再生が可能(今後も残ると思われる)。 WindowsPhoneとiPhoneでは同時に2つの音源を鳴らせない。 実行速度。描画が遅い。JavaScriptの実行それ自体が重い。

2012-02-17 13:24:08
Tanaka Hiroyuki @swiftnest

HTML5の問題・iPhoneは画面がタッチされたタイミングでのみ音楽の再生が可能・WindowsPhoneとiPhoneは同時に2つの音源を鳴らせない - これは厳しい… #devsumiA

2012-02-17 13:24:16
Emma Haruka Iwao @Yuryu

OpenGL が使えない。WebGL は Firefox for mobile のみサポート。 音もシビア。音ゲーとかやめたほうがいいw iPhone はタッチしたタイミングでのみ音が再生可能。同時に使える音源はひとつまで。 #devsumiA

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

DeNA紀平「HTMLの描画手段は大きく3つ。Canvas、CSS3、SVG。ただし、SVGはAndroid2でサポートされていない。これは、Canvasで代替可能なので、今日は、CanvasとCSS3の話をしたい。」 #devsumiA

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

#devsumia HTML5の描画手段 Canvas(ラスタ),SVG(ベクタ),CSS3(変形、アニメーション)。SVGはアンドロイド2系ではサポートされない。Canvasで頑張って代用する……

2012-02-17 13:25:27
Emma Haruka Iwao @Yuryu

あと Canas 上に DOM の何かをオーバーレイするのも遅くなる。 iOS5 で GPU サポートが入って、 Canvas がめっちゃ早くなった #devsumiA

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

Canvas。AndroidほうがiPhoneより早い。iOS4ではdrawImageが遅いので如何に回数を減らすか。(キャッシュに綺麗に乗せたら勝ち) DOM構造でCanvasの上に物を載せない。 iOS5ではGPUのサポートが入った。 #devsumia

2012-02-17 13:28:49
_l0lim0m0_ @L0lim0m0

drawImageを呼ぶ回数が増えるとiOS4では非常に重い。iOS5からはGPUサポート #devsumiA

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

DeNA紀平「Canvasは、Androidで速度が問題になることは殆ど無い、なのでcanvasではiPhoneで如何に上げるか、を考えている。使いこなせば最高だが、扱いにくいじゃじゃ馬というイメージ」 #devsumiA

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

#devsumia iOS5でGPUサポートが入ったが、それでも遅い。今重いAPIはgetPixelData。結局キャッシュに載せるのが勝負。ExGameでは2fps→19fpsに。 じゃじゃ馬。使いこなせば優秀だがそれまでが大変。

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

DeNA紀平「iOS5ではGPUのサポートが入り、驚くほど早くなった。何もしなくても早いが、別のAPIが重くなっている。その回避のためには結局はオンメモリのCanvasを利用することになっている」 #devsumiA

2012-02-17 13:32:25