ハイブリッドアプリ制作で動作が重くならないために気をつけること

ハイブリッドアプリ制作をしていると、どうしてもネイティブアプリと比べて動作の重さが気になります。 ハイブリッドアプリの魅力は、webの知識だけで作成できることであるとはいえ、webサイトと同じ要領で作ってしまうと、動作が重くなる要因となってしまいます。 サイトを作成する際にあらゆるブラウザで正常に表示されるようにチューニングするように、ハイブリッドアプリも快適に動作させるためのチューニングが必要なのです。

アプリの種類

まず、アプリと呼ばれるものにどんなものがあるかを紹介します。大まかな説明ですが、以下の3通りに大別されます。

ネイティブアプリ 端末のOSに準拠した言語で作成されたアプリ。android なら JAVA, iOS なら objective-c, swift で記述します。

Webアプリ ブラウザで動作するアプリ。アプリっぽく作りこまれたwebサイトといえます。

ハイブリッドアプリ ネイティブの webView で動作するアプリ。側は「ネイティブ」 中身は「web」で動作します。

簡単な説明ですが、大体はこんな具合です。

ハイブリッドアプリの魅力

ハイブリッドアプリは、HTML, CSS, JavaScript で作成することができるアプリです。 ハイブリッドアプリの魅力は、ワンソースで複数のプラットフォームのアプリを作成できるという点と、webの知識で作成できるという点です。 そのため、webに従事した人間であれば、他の言語を習得しなくともアプリを作成できるという利点があります。

ワンソースマルチユース そもそも、ハイブリッドアプリが何故webの知識だけで作成できるのかといえば、側は「ネイティブ」、中身は「web」という作りになっているので、webサイトをスマホで見ているようなものだからです。 webViewで表示できさえすればアプリになるわけですから、ビルドできるアプリはスマートフォンだけではありません。 ハイブリッドアプリは、windowsのアプリや、chromeのアプリでも、ビルドすることができます。

コスト削減 複数のプラットフォームのアプリを作る場合、androidのアプリを作る時はJAVAで作成し、iOSのアプリを作る時はobjective-c,swiftで作成します。 一人で作ろうと思うと、複数の言語を学習するコストが掛かってしまいます。 複数人で作ろうとすると、それぞれの言語を扱える人材のコストが掛かってしまいます。 ハイブリッドアプリであれば、webの知識を有した人間が一人いればマルチプラットフォームで作成でき、学習コストを抑えられるため、必要な人材コストも抑えられます。

デバイスの機能も利用可能 また、「webサイトをスマホでみているようなもの」とはいっても、フレームワークを使えばネイティブの機能だって呼び出せます。 なので、「カメラ、加速度センサー、ファイルストレージ、等々」の機能も使うことができます。

ハイブリッドアプリが苦手なこと、不向きなこと

挙動が遅い・重い webViewで動作するため、マルチプラットフォームで動作するという利点がある一方で、webViewで動作するためネイティブアプリに比べ挙動が重たくなるという問題があります。 前提としてネイティブアプリと比べて重たくなるため、ハイブリッドアプリ製作は意識的に動作が重くならないように努めなければなりません。

3Dグラフィック処理は苦手 webサイトの構築と同様で、3dゲームなどのグラフィック処理は苦手です。スマートフォンでの動作を考えると、どうなるかは自明です。

プラグインを作らざるを得ない場合がある フレームワークでも引き出せないネイティブの機能は、結局自分でプラグインを作らないといけません。 プラグインとは、使いたい機能をそれぞれの言語で利用できるようにするものです。例えば、androidのプラグインはJAVAで作成するということです。 そうなると、一部分だけネイティブの言語を使用することになるわけですが「初めからネイティブでアプリを作った方がよかった」なんてことになる可能性もあります。

それぞれのプラットフォームの癖を把握しておく必要がある 複雑なことをしようとすればするほど、OSによる表示や挙動の差が発生します。 ブラウザごとに微妙に対応を変える必要があるのと同じで、ハイブリッドアプリもOSごとに微妙な調整を行う必要があります。 ブラウザでいれば IE の古いバージョンに対応が面倒だったりしますが、ハイブリッドアプリでいうと、androidの対応が多くなります。 とりわけ、androidは端末を提供している会社によっても挙動が違うことがあるので、全てに対応しようとすると実機での検証が大変になります。 WEBの癖、iOSの癖、androidの癖、全てを把握しておかなければ、スムーズな開発は難しいでしょう。

ハイブリッドアプリのチューニング

ハイブリッドアプリが重たくならないようにするためには、htmlの構造や、javascriptのプラグインの選定などが肝要になってきます。 色々と細かいノウハウはありますが、ここでは代表的なことを書いておきます。

モバイル用のライブラリを使う モバイル用ではないライブラリには、webkitベースではないIE等のブラウザに対応するためのコードが含まれています。その分処理が遅くなります。 そのため、jQurey mobile や Zepto.js 等のモバイル向けライブラリを使うようにしましょう。

クリックイベントを使わない クリックイベントは300msの遅延が発生します。クリックイベントではなくタップイベントを使いましょう。 もしくは、Tappable.js , fastclick.js 等のライブラリを使えばクリックイベントの発火を早めてくれるので、それを使うというのも手です。

DOM操作によるリフロー(レイアウト再計算)のコストを意識する DOMツリーに変更があると、レンダリングエンジンはDOM要素の位置や座標を計算します。その為、DOM操作を繰り返すと描画が遅くなります。 リフローはDOMを操作したり、DOM要素のスタイルプロパティを更新すると発生します。 具体的には、width,height,margin,padding等の位置やサイズを変更するプロパティを更新すると発生します。

厳密に言えば、他にも値を変更することでレイアウトに変更を与えるものがありますが、よく使われるものだけを表記しました。他のプロパティは下記URLから参照してください。 http://www.php5rocks.com/ja/tutorials/speed/high-performance-animations/

少し例を挙げて説明しましょう。 例えば、以下のようなhtml構造があるとします。

<div id="main">
  <p>hogehoge</p>
</div>
<div id="footer">
  <p>hugahuga</p>
</div>

#footer要素のレイアウトの位置は、#main要素の高さに依存するため、#main要素の高さが変わると後続要素の#footerも再計算されます。 DOMツリーがもっと複雑になると、一つの要素に変更があるだけで、他の多数の要素も再計算されてしまうため、htmlの構造も注意しておく必要があります。 無意味にネストせず、DOM要素を少なくするように努めてください。

cssの指定の仕方によって、リフローを抑える方法もあります。先程のhtmlに対して、以下のようなcssを当てます。

#main {
  height: 300px;
  widht: 300px;
}
#footer {
  height: 300px;
  widht: 300px;
}

要素の大きさを固定することで、その要素の内容(今回で言えばpタグ)のプロパティが書き換わってもDOM要素のレイアウトに変更がなくなり、親要素、後続要素の再計算は省略されます。

また、絶対位置を指定することで、その要素のプロパティが更新されても、親のDOM要素にレイアウトの再計算が伝播しなくなります。

#main p {
  position: absolute;
  top: 0;
  left: 0;
}
#footer p {
  position: absolute;
  left: 0;
  bottom: 0;
}

最後に

ハイブリッドアプリ制作をするにあたって参考にした書籍を紹介します。

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)

久保田 光則, アシアル株式会社

ハイブリッドアプリのチューニングといえばこの本！

この本は、ハイブリッドアプリ制作のプラットフォームMonacaを提供している株式会社アシアルが出版したものです。

ハイブリッドアプリはコストを抑えることができるため、非常に有用なアプリです。しかし、ハイブリッドアプリに不向きなことをさせたり、ハイブリッドアプリに最適化された作り方をしないと、動作が非常に重くなってしまいます。 まず、作りたいアプリがハイブリッドアプリにとって表現しやすいものであるかを精査する必要があります。 「ハイブリッドアプリならマルチプラットフォームで提供できるから、作りたいゲームもハイブリッドアプリで作ろぜ！」なんて安易に決めてはいけません。 ハイブリッドアプリの苦手な3Dポリンゴンの表現を、ストレスなく再現するための労力を考えてください。

また、事前に調べることを怠って「実はフレームワークだけでは再現できない機能だったから、プラグインを作らないといけなくなった」なんてことも避けるべき事象です。 以前、私が失敗した経験でいうと、基本機能はネットサービスと大差ないものだったのですが、一部分で動画を撮影するときに音楽を流しておく必要がありました。 音楽を再生しながら動画を撮影するという部分はブラグインを作らざるを得ないことだったのですが、事前にその調査を怠ったため、当初予定していなかった人員を導入することになってしまい、工数も増えました。 ハイブリッドアプリで作成するのは魅力的ですが、しっかりと事前調査を行い、ハイブリッドアプリで作る方が賢明なのか、ネイティブアプリで作る方が工数が少なくなるのか、精査するようにしてください。

ちなみに、ハイブリッドアプリと親和性が高いのは、ネットショッピングのような、すでにネットサービスで利用されているものです。 ネットサービスが先行して、後からハイブリッドアプリを作成した成功事例としてよく取り上げられるのは、クックパッドの導入例ですね。 ハイブリッドアプリで懸念される、動作が遅い、という点は、スマートフォンのスペックの改善と、androidのバージョンのアップデートでかなり改善されてきました。 android4系以前でハイブリッドアプリを作成するとどうしてももっさりしていた部分が、ハイブリッドアプリのために最適化させしていればネイティブアプリと遜色ない動作をするようになってきています。