ハイブリットアプリの設計
白石さんのHTML5、丸山さんのAndroidへの期待や考えを紹介した後、クックパッド株式会社の日高一明さんによる、実装面での話。
アプリをとりまく環境とハイブリットアプリの分類
端末のスペック向上により、WebViewでも一定のレベルで動かせるようになり、HTML5の仕様が固まって、搭載されるブラウザでも共通化され、iOSのUI面での審査が緩くなり、またアプリ独自UIが作りやすくなりました。AndroidのOS分布も変わってきました。
このような背景もあり、HTML5技術とネイティブの両方を活用したハイブリットアプリが実現できるようになりました。ハイブリットアプリは、複数プラットフォームに対応しやすいというメリットがあります。ハイブリットアプリは一括りにできるような状況でなく、３つに分類できます。
- WebViewをラッピングしたタイプ。コンテンツはサーバに置き、Webアプリがそのまま移植できます。
- WebViewをラッピングするが、HTMLはアプリに埋め込むというタイプ。サーバとはAPI通信を行い連携し、ローカルでもある程度動くという特徴があります。アプリの実装はHTML5(JavaScript)を利用します。
- 一部の画面でWebViewを利用し、基本的にはネイティブアプリで実装するタイプです。WebViewを活用するメリットがある場所でだけ、WebViewを使います。
実装の指針
とりあえずHTMLで実装するというのではなく、どちらでやったほうが価値があるかを考える必要があります。出来上がるものの品質、どの程度の差が現れるのか。また実装コスト、HTML5にすることでどれだけ楽になるか。運用コスト、データの更新頻度・手間がどの程度になるかを考慮に入れます。
WebViewが適しないようなものの例としては、リスト・ギャラリー画面が挙げられ、Nativeのリストが持つViewの再利用や、画像キャッシュ・開放などがコントロールできるという面でメリットが大きいと判断できます。また、起動時の画面も、省メモリで動かしたいためWebViewに適しないと判断できます。
逆にWebViewが適しているものとしては、詳細画面などのコンテンツが挙げられます。HTMLのレイアウト能力はNativeよりも高く、文字の回り込み、枠付、リンクの挿入などでメリットを発揮します。WebViewの戻るボタンは、Native内に組み込むと問題があるため、オススメできません。
HTMLでは画面遷移ごとにサーバから取得しますが、Nativeの場合は次の画面までまとめて取得するなど通信のタイミングがしやすいというメリットがあります。
ハイブリットソーシャルゲームの現場
最後に、株式会社ポケラボの鈴木匠太さん、前田翔悟さんによる、ゲーム業界からみた実装についての講演です。
Web技術を使った理由としては、投資家からのアドバイスで「Webが最終的には勝つだろう！」という言葉を聞いたのがきっかけです。ハイブリッドアプリ開発については、運用が楽であることに加え、ソーシャルゲームという特性上、短い頻度での更新が求められるため、Nativeに比べ更新の手間が少ないという点がメリットです。開発にはCreateJSを使っています。
パフォーマンス改善策
Canvasはスマートフォンだと性能が出ないため、ヘッダ部分をCanvasを使わずにネイティブで実装しました。また大量のスキルデータを実装するため、require.jsを使い最小のコストで実装できるよう工夫をしました。
パネルディスカッション
最後に、新野淳一（モデレーター）、丸山不二夫、佐々木陽、白石俊平によるパネルディスカッションが開かれました。全員の関心は専らGoogle I/O、どのようなテーマに感心を持ち、今後どのようにWebが進化するかといった点にディスカッションは進みました。
- 丸山：Androidはずっと遅れていた。それがようやく追いつくようになった。ランタイムと同じようにWebアプリが動作する。Chromeが無くても動くを目指している。Chromeの持つWebアプリケーションマーケットが、Androidのネイティブにもやってくる。
- 佐々木：これまで多くの端末のベンチマークをとってきた。WebとNativeは、適材適所で使い分けるべきではないか。Webで全部統合されるのがコスト的にも良い。Webで作ると遅かったから、Nativeを使っていた。しかしTizenが出てきたり、速度面でも改善が図られるようになった。それでも適材適所。レスポンス重視は最後までNativeが残る。
- 白石：Web技術はスマートフォンの機能を使い切れない。２年前までWebブラウザであらゆる機能が使えると期待していたが、そうはならなかった。ChromeOSもそうだが、インストール型のWebアプリには特権的にデバイスへアクセスできるようにし、ホステットなものには特権的なものは与えないという方針で、今後この２つは分かれていくことになるだろう。
- 佐々木：HTML5のCanvasやSVGに対するOpenGLやネイティブアプリの動向について、リッチな表現だとWebGL。しかしiPhoneではWebGLが動かない、Androidも動かない。SONYの端末ぐらいしかまともに動いてくれない。海外だとJavaScriptエンジンなどプラットフォームを自分で作るというアプローチが広がりつつある。
- 丸山：今後の動向について、サーバ側のアーキテクチャをHTML5だけで書くというのは、パフォーマンスで見た時まだ難しい。
- 佐々木：WebGLはChromeぐらいしか、ユーザを満足させる性能にない。端末を評価しててわかるのは、チップレベルで端末の最適化を行わないことにはどうしようもない。チューンアップしてくれると一番いいけど、そういうエンジニアを探してくるのが難しい。３年以内に、今の性能を解決して欲しい。
- 白石：Webアプリでできないことも多い。しかしそれをなんとかしようとしている人はいっぱいいる。「asm.js」がまさにそれで、Firefoxでは速度面がかなり改善されていた。
