ハイブリッドモバイルアプリ開発をしてみて分かった、WebViewアプリのできることできないこと

少し前からシリコンバレーまわりで働いているのですが、こちらのスタートアップではアプリのプロトタイプをネイティブではなくWebViewで作るのは割と普通のことのようです。

私自身、数ヶ月前に趣味アプリとしてWebViewベースのハイブリッドモバイルアプリをiOSとAndroidで公開したので、そのときに感じたこと・ノウハウとかをまとめてみました。

## 使ったフレームワーク

[Ionic Framework](http://ionicframework.com/)というフレームワークを使いました。

このフレームワークは、[Cordova](https://cordova.apache.org/)という、JavaScriptからiOSやAndroidのネイティブコードにアクセスできる仕組みをもったプラットフォームをベースに作られています。

さらに、WebView上では流行りの[AngularJS](https://angularjs.org/)を用いられています。
また、[Ionicon](http://ionicons.com/)というiconが無償で提供されており、デザイナーがいなくてもかなり綺麗なUIのアプリを作ることができます。


タイトル詐欺で申し訳ないのですが、本記事ではバイブリッドモバイルアプリ全般というよりは、IonicやCordovaの話が中心になります。

## 学習コスト

これは明らかにネイティブコードで開発するより小さいです。Web開発経験があってJavaScriptやcssに慣れていればなおさらです。
ただIonicの場合、Angularに全く触れたことがない人だとAngularへの学習コストが発生します。

## 開発コスト

まずiOS・Androidを同時に開発できるという時点で、開発コストは非常に小さくなります。
また、iOS・Androidをネイティブコードで開発した場合のそれぞれのコード量よりも、Ionicで開発したコード量の方が少ないように感じます。
iOS版のみしか必要ないという場合でも、ネイティブよりは開発コストはずっと少ないです。

開発速度の差を一番感じたのは、UIを作っているときです。
やはりhtml5&css3によるUIの高い自由度のおかげで、viewのためのコードを書く必要がないのは非常にありがたいです。


## パフォーマンス

### iOS

簡単なアプリであれば、ネイティブと見分けがつかないレベルのサクサク具合です。
ただ、あまりに長いリストビューを何も考えずに実装すると重くなるので注意が必要です。

### Android

Android 4.4(KitKat)より前のバージョンのOSだと、かなりパフォーマンスが悪くなります。
これは4.4より前のバージョンでは、WebViewに古いバージョンのChromiumを採用しているためです。

2015/07/13現在、[4.4より前のバージョンのシェアは半分弱](https://developer.android.com/about/dashboards/index.html?utm_source=suzunone)あるので、これが無視できないと感じるのであれば、IonicでAndroidアプリを開発するのは厳しいです。

## 実現できる機能

開発をしているとDBやソフトウェアキーボードなど、プラットフォームに依存した機能が必要となることがあります。
Cordovaはプラグインをインポートすることで、ネイティブで提供されている機能をJavaScriptから利用することができます。

多くの人が必要としそうな機能のためのプラグインは、だいたい探せば見つかります。
逆に言うと、マイナーな機能が欲しいときには苦労します。

機能についてまとめると

- 簡単な機能はプラグインを使えば、ネイティブで開発するより簡単に実現できる
- ネイティブにべったりな機能を実装したり、マイナーなネイティブSDKを利用しようとするとネイティブで開発する方が楽

といった感じです。

## 個人的に利用したプラグイン

- [cordova-plugin-device](https://github.com/apache/cordova-plugin-device) : 端末のuuid、バージョンなどを取得する
- [cordova-plugin-console](https://github.com/apache/cordova-plugin-console) : JavaScriptコードの中の```console.log```を、Xcodeなどのネイティブ開発環境で表示する
- [cordova-sqlite-storage](https://github.com/litehelpers/Cordova-sqlite-storage) : sqliteを使う
- [ionic-plugin-keyboard](https://github.com/driftyco/ionic-plugin-keyboard) : ソフトウェアキーボードを操作する
- [cordova-plugin-splashscreen](https://github.com/apache/cordova-plugin-splashscreen) : スプラッシュ画面の操作
- [cordova-plugin-app-version](https://github.com/whiteoctober/cordova-plugin-app-version) : アプリのバージョンを取得する
- [cordova-plugin-apprate](https://github.com/pushandplay/cordova-plugin-apprate) : 「アプリを評価する」ダイアログを表示する
- [SocialSharing-PhoneGap-Plugin](https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin) : FacebookやTwitterへのシェア機能
- [cordova-plugin-google-analytics](https://github.com/danwilson/google-analytics-plugin) : GoogleAnalyticsSDKの利用
- [cordova-admob-pro](https://github.com/floatinghotpot/cordova-admob-pro) : AdMob SDKを利用した広告の表示（$20のライセンスを買わないと、トラフィックの数%を抜かれるので注意）
- [cordova-plugin-inappbrowser](https://github.com/apache/cordova-plugin-inappbrowser) : アプリ内ブラウザ

## 欲しいプラグインがない場合

これらのプラグインの多くは個人開発者によるものです。
欲しいプラグインがない場合は自分で開発することもできます。

私の場合、アプリに広告を載せたかったのですが、とある事情でAdMobを利用することができなかったので、Nend広告を載せる必要がありました。
しかしNend SDK用のプラグインはなかったので、[自分でプラグインを開発](https://github.com/TakayukiSakai/cordova-plugin-nend)して無事Nend広告を表示することができました。
開発にかかった時間はトータルで3日ほどです。プラグイン開発に関する情報はまだかなり少ないようでしたので、また次の機会にCordovaプラグイン開発についてもまとめたいと思います。


## まとめ

Ionicかネイティブ開発かを決める際は、以下のように考えればよいかと思います。

- 特にネイティブに依存した複雑な機能がなく、古いAndroidバージョンを切り捨てられる場合はIonic
- 複雑な機能がある or 古いAndroidでもサクサク動いて欲しい場合はネイティブ


今回書いたことの他に「ハイブリッドアプリのここが知りたい」みたいなのがあれば、ガンガン聞いてください！