デブサミ

<デブサミ2013>HTML5で作る高速でリッチなウェブアプリとスマホブラウザの”表現力戦争”

  • このエントリーをはてなブックマークに追加

by [2013年2月15日]

2月14日、東京目黒雅叙園でDevelopers Summit 2013が行われました。
14-C-4枠で開かれた株式会社サイバーエージェントの2人による講演「HTML5で高速なウェブアプリ、そして3Dゲームの開発も可能?!」をご紹介します。

HTML5で高速なウェブアプリ
~レスポンシブアプリを作りましょう~


前半は、サイバーエージェントのコミュニティアプリに関わって、フロントのJavaScript、バックエンド、インフラを行っているフィンランド人のシモ・キンヌネン氏の講演です。


日本語で行うのは初めてとのことでしたが、それを全く感じさせない流暢な講演でした。

自己紹介


キンヌネン氏は数年前ヨーロッパ・アメリカで人気を集めたcufonの開発者ですが、これは古いのでもう使わないでください、別の人が開発した@font-faceの方を使ってくださいとコメントし、会場からは笑いが。

導入


スマホのHTML5アプリ3種(iOSの場合。Androidでは2種)

  • ブラウザーアプリ
  • ホーム画面に追加したウェブアプリ(iOSのみ)
  • ネイティブアプリに埋め込んだWebViewを使ったアプリ

についての実践的な話がされました。

Octaneベンチマーク


Galaxy S3、iPhone5と4の3端末、さらにそれぞれ三種類のブラウザでテストを行った結果…


Androidでは変わりませんが、iOSではWebViewを埋め込んだネイティブアプリのパフォーマンスが落ちることがわかりました。


しかし、この時点でダメと断じるのは早計です。

イベントデレゲーション


読み込み中のページを使えるようにすることで、体感速度を速めようという試み。


右の写真に見える部分は動画になっていました。
左のコードを動かしてみるとこうなるというサンプルです。

CSSの3Dアクセラレーション


こちらも動画でした。
3Dを付けることで、やや重くなっていることがわかりました。
ちょっとした差ですが、繰り返し操作していると気になる程度の微妙な遅れです。


Androidのデフォルトブラウザーはちょっと3Dに弱いとのこと。

レスポンシブ・タッチ


touchendと比べ、clickがどれだけ遅いかを端末毎に示したグラフです。


動画による検証です。touchendが早い。


しかし全てをtouchendにすると問題も。


githubでパッチを公開しているので、自由に使ってくださいとのことでした。

まとめ


来月は”リリース祭り”だそうです。期待が持てますね。


Simo Kinnunen(シモ・キンヌネン)氏
株式会社サイバーエージェント プラットフォーム部門
twitter:@sorccu
github:https://github.com/sorccu

HTML5でモバイル3Dゲームの開発は可能?!
可能とする鍵となる技術はここにあるのか?!


後半は、iOS・AndroidアプリのデザインからFlashやHTML5のゲーム開発を行い、現在はHTML5、UXの専門家としてサイバーエージェントのスマートフォン向けブラウザゲームバトルスロットに関わっているアルゼンチン人のグンタ・ブルンナー氏の講演です。

アジェンダ

自己紹介

CSS3で描画されているバトルスロットのデモ


iPhone実機を接続し、その場でSafariでの動作を試演。


スロット的な派手なエフェクトがどんどん出てきます。

HTML5での描画技術

国内スマホOS&ブラウザシェア


iOS+Android=98%


Safari、Android標準、Chromeの3種を押さえておく。

国内スマホブラウザの状況


ブラウザに大量のバグが出るのでサイバーエージェント社内でリストアップし共有しているそうです。

DOM CSS2で描画

DOM CSS3で描画

GPUは有効か?


赤いところがGPU、緑のところがCPU。

CSS3 FILTERSで描画


Adobeが出しており、photoshopのような機能を使える。iOS向けなら使うのもアリ。
http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/

CANVASで描画

WebGLで描画


今年のAndroid新機種から、利用が進むのではないか。

スマホで使える3D技術

CSS 3D用のライブラリ


http://mrdoob.github.com/three.js/


http://minimal.be/lab/Sprite3D/


http://developer.wordpress.com/docs/photon/


http://famo.us/

Three.jsを使ったCSS3Dデモ


http://gunta.org/projects/three.js/personal/
デモは現在でもここで公開されています。
iOS版Safariのある方は是非。


パノラマ再生。見たい方向に向けてぐりぐり操作できます。


カードにぼかしを入れると、負荷が高いのか、ぎこちない動きに。


カードゲームの例。
こちらはカードが凄い勢いで快適に動き回っています。


モノクロにしても動きは変わらず。


なめらかでダイナミックに動き回っています。
「これSafariですよ」。
ブルンナー氏も、ここまでの動きはネイティブアプリでしか出来ないと思っていたのだとか。

表現力はブラウザによって全く異なる


昔のコンシューマー向けゲーム機戦争のような状況が、スマホブラウザ界でも起きているそうです。
特に日本はガラケー向けのウェブアプリをスマホ向けに移植する例が多いため、ウェブアプリについての技術が進み、需要も高まっているのだとか。ブラウザの表現力はシェアに直結しそうです。


スマホブラウザの表現力をそれぞれゲームハードに例えたスライド。
会場では大きな笑いが起こりました。
例えに幅があるChromeは、大きな伸びが予想されているため。


iOSのSafariでは素晴らしい動きをみせてくれましたが、
Android標準ブラウザで3Dのテストをするとガッカリするかも、とのこと。
しかしAndroidでもChromeはWebGLに対応するので期待が持てるそうです。
パフォーマンスが不安なブラウザ向けには2Dで描画を。

It’s your turn.


デモでも使われていた、一番機能が多く人気の高いThree.jsがここでもイチオシです。


Gunther Brunner(グンタ・ブルンナー)氏
株式会社サイバーエージェント アメーバ事業本部 フロンティアゲーム事業部 フロントエンドエンジ二ア
twitter:@GUNTA85
blog:http://ameblo.jp/gunta85/

関連記事:
2013年、日本がWebの大舵を切る!モバイル HTML5 による世界への挑戦< デブサミ2013>
Webブラウザの時代は終わるのか?~スマホアプリとHTML5の未来~< デブサミ2013>
O2Oのデザイン~リブライズの次のステップ~< デブサミ2013>
HTML5で作る高速でリッチなウェブアプリとスマホブラウザの”表現力戦争”< デブサミ2013>

コメントは受け付けていません。

PageTopへ