スマホ向けHTML5アプリは3種類。よい実装方法は異なる
最初に登壇したのは、サイバーエージェントで、ほとんどのコミュニティアプリに関わってきたシモ・キンヌネン氏である。キンヌネン氏はフィンランド出身。2010年に来日して、今回のデブサミが『初めての日本語でのプレゼンテーション』だという。実はキンヌネン氏は、現在も約130万ものWebサイトで使われているCanvas・VMLでのフォントレンダリングエンジン『cufon』の作成者。「もう古いので使わないで」と言い、会場の笑いを誘うほど、流暢な日本語でセッションを開始した。
シモ・キンヌネン氏
「より高速なHTML5のスマホ向けWebアプリを開発するには、どのような方法を採用すればよいのか。その答えを求めてネットを見ると、実にさまざまな情報が紹介されているが、いい実装方法もあれば悪いものもある。その理由はスマホのHTML5アプリには3種類あり、各アプリによって一番いい方法は変わるからだ」とキンヌネン氏は言う。
スマホのHTML5アプリは『ブラウザアプリ』『ホーム画面に追加したWebアプリ』『ネイティブアプリに埋め込んだWebViewを使ったアプリ』という3種類がある（Androidの場合はブラウザアプリとWebViewを使ったアプリの2種）。
この異なる3種のアプリの違いを把握するための方法としてキンヌネン氏が行ったのが、OCtaneベンチマークテストである。iPhone4、5およびAndroid4端末（Samsung GalaxyS3、Android4.0.4）の端末、さらにそれぞれ異なる3つのブラウザで各アプリのテストを実施したという。
「Androidでは変わらなかったが、iOSではWebViewを埋め込んだネイティブアプリのパフォーマンスが約30％遅くなるということが分かった」とキンヌネン氏は語る。
イベントデリゲーション
だからといって、「WebViewを埋め込んだネイティブアプリがダメだというわけではない」とキンヌネン氏。では、どうすればパフォーマンスを上げることができるのか。その方法として最初にキンヌネン氏が提示したのが、イベントデリゲーションである。
「これを使うことでイベント管理が楽になることと、読み込み中のページも使えるようになるというベネフィットが得られる。しかしdomredyやonloadなどのイベントで設定すると、後者のベネフィットがなくなるので注意が必要だ」とキンヌネン氏。
3Dアクセラレーション
第二にCSSの3Dアクセラレーションを使う方法も有効だ。「正しく使うと確かにアプリはスムーズに動くようになるが、使いすぎている場合が多い」と指摘する。どのくらい遅くなるのか、3Dなしと3D付きのスマホ画面を並べたシミュレーション動画を披露した。無駄に3Dアクセラレーションを使うと表示スピードが遅くなるだけでなく、デバイスによってはスクロールも遅くなるという。特に問題になるのが、コメントページなどJavaScriptで全ページを作っているようなケースだ。
「コミュニティアプリで3Dアクセラレーションを使いたい場合は、エレメンツの数に気をつけること。ゲームの場合は問題なく使えると思う。ただしAndroidのデフォルトブラウザは3Dに弱いので、きちんとテストすべきだ」（キンヌネン氏）
レスポンシブ・タッチの考慮
第三はレスポンシブ・タッチを考慮することだ。キンヌネン氏は、touchendと比べてクリックがどれだけ遅いかを示したグラフや検証動画を紹介。
「クリックはtouchendより約300ms遅かった。だからといって、いつもtouchendを使うというのは問題がある。それはスクロール時の動きやズームのときに問題が出るからだ」
最後にキンヌネン氏は「githubでパッチを公開している。3月はリリース祭りとなる予定なので、ぜひフォローしてほしい」と語り、前半のセッションを終えた。
ネイティブアプリのパフォーマンスが落ちるという結果に。
3Dゲームの実現はAndroid4.2から実装されるWebGLに期待!?
後半に登壇したのは、サイバーエージェントでスマホ向けブラウザゲーム「バトルスロット」の開発に関わっているブルンナー・グンタ氏である。セッションテーマは、HTML5でモバイル3Dゲームの開発を可能にする技術について。ブルンナー氏はアルゼンチンのブエノスアイレス大学情報科を卒業後、日本工学院でグラフィックデザインを学んだという。
フロンティアゲーム事業部 ブルンナー・グンタ氏
HTML5での描画技術はさまざまだ。本当にスマホブラウザで使える技術はどれか把握するため、まずiOSやAndroidで使われているブラウザの状態をチェックした。
国内で使われているスマホの98％がiOSとAndroid端末である。従ってチェックの対象となったのはSafari、Android標準ブラウザ、Chromeの3種。「事実上標準のレンダリングエンジンはWebKit。しかし採用している描画技術、デバイス、OSバージョン、ブラウザ自体のバグなどにより、そのパフォーマンスやユーザー体感はまったく異なるものになっている」とブルンナー氏。
検証結果
ゲーム描画において特に気になるのがパフォーマンスである。「理想の描画速度は60fps。最低でも20fpsは欲しい」とブルンナー氏。以下はどのHTML5の描画技術がスマホで使えるかを把握するため、ブルンナー氏が検証した結果だ。
DOM CSS2
マージンレフトやレフトで動かしたところ、「iOS、Androidともに速度が遅く、iOSの場合はGPUも働かなかった。この方法は使えない」（ブルンナー氏）という結論に。
DOM CSS 3D
TranslateXで動かしたところ、「iOSは4以上ならGPUも有効で描画速度も速い。一方のAndroidは機種によって不安定なので、iOSについては使える」とブルンナー氏。次にTranslate3Dで動かすと、iOSはGPUも有効で描画速度はさらに向上。一方Androidは不安定で描画されず、Chromeは場合によるという結果に。「iOSのみ有り」という結論になった。
CSS3 Filters
グレースケールや色相などPhotoshopのような機能が使える。「iOSは6より実装。CPUも有効でぼかし以外の描画速度は速い。しかしAndroidは未実装でChromeはまだ不安定なので、iOSについてのみ有り」（ブルンナー氏）
CSS Custom Filters
アドビが開発した映画のようなエフェクトを実現するため技術。CSS FilterLabというブラウザベースのツールを使うことで、いろいろな表現ができる。しかし、iOS、Androidともに未実装で「今後に期待」とブルンナー氏。
Canvas
自由度が高い一方、DOM側で実装されていた機能は使用できなくなる。描画はすべて自分でやらないといけない。iOS5以上ではピクセルの描画のみGPUが支援、Androidは場合によってだが安定。「この技術は有り」とブルンナー氏。
WebGL
PC版のChromeでは盛り上がっているHTML5での描画の最先端技術。THEREE.JSで動かしてみた。iOSは実装されているが非公開。iAdのみ許可されている。Androidは4.2以上のChromeより有効だが、現状は不安定とこれからの技術。ブルンナー氏は「現状はないが、今後は有り」と結論付けた。
今後使える3D技術とライブラリ
これらの状況から、スマホで使える3D技術とは何か。現在はiOSではCSS3 3D、AndroidはCanvas 2Dで3Dをシミュレーションする方法を採用。今後はどのような技術が使えるのだろうか。「iOSはCSS 3Dはもちろんだが、iOS7～8からはWebGL許可に期待している。AndroidはAndroid4.2以上のChromeより実装されるWebGLが本命だろう」（ブルンナー氏）
またCSSで高度な3D表現ができるよう、Three.jsをはじめ、Sprite3D.js、Photon、famo.usなどのライブラリが続々登場している。
ここでブルンナー氏が、Three.jsを使って作成したCSS 3Dのデモを実施。そのスムーズな動きに、ブルンナー氏もこのような動きはネイティブアプリでしか無理だと思っていたようで、何度も「これはSafariですよ」と口にしていた。
現在のスマホブラウザの表現力の状況は、昔のコンシューマ向けゲーム機戦争の時代と似たような状況にあるという。各ブラウザは、プレイステーション2やスーパーファミコンなどのゲーム機に例えられるというのだ。
「かつてのコンシューマ向けゲーム機同様、3D表現は特定のプラットフォームに絞ること。古いブラウザは通常の2Dレンダリングがお勧めだ」（ブルンナー氏）
先に紹介したデモはたった一日で作成したもの。時間をかければかなり楽しいゲームができるという。「Three.jsでデモを作ってみてほしい。ただしAndroidの標準ブラウザだとがっかりするかもしれませんが…」
ブルンナー氏は最後にこう参加者に呼びかけ、セッションを終了した。
