スマホ向け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月はリリース祭りとなる予定なので、ぜひフォローしてほしい」と語り、前半のセッションを終えた。
ネイティブアプリのパフォーマンスが落ちるという結果に。
