少し前からシリコンバレーまわりで働いているのですが、こちらのスタートアップではアプリのプロトタイプをネイティブではなくWebViewで作るのは割と普通のことのようです。
私自身、数ヶ月前に趣味アプリとしてWebViewベースのハイブリッドモバイルアプリをiOSとAndroidで公開したので、そのときに感じたこと・ノウハウとかをまとめてみました。
使ったフレームワーク
Ionic Frameworkというフレームワークを使いました。
このフレームワークは、Cordovaという、JavaScriptからiOSやAndroidのネイティブコードにアクセスできる仕組みをもったプラットフォームをベースに作られています。
さらに、WebView上では流行りのAngularJSを用いられています。
また、Ioniconという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より前のバージョンのシェアは半分弱あるので、これが無視できないと感じるのであれば、IonicでAndroidアプリを開発するのは厳しいです。
実現できる機能
開発をしているとDBやソフトウェアキーボードなど、プラットフォームに依存した機能が必要となることがあります。
Cordovaはプラグインをインポートすることで、ネイティブで提供されている機能をJavaScriptから利用することができます。
多くの人が必要としそうな機能のためのプラグインは、だいたい探せば見つかります。
逆に言うと、マイナーな機能が欲しいときには苦労します。
機能についてまとめると
- 簡単な機能はプラグインを使えば、ネイティブで開発するより簡単に実現できる
- ネイティブにべったりな機能を実装したり、マイナーなネイティブSDKを利用しようとするとネイティブで開発する方が楽
といった感じです。
個人的に利用したプラグイン
- cordova-plugin-device : 端末のuuid、バージョンなどを取得する
-
cordova-plugin-console : JavaScriptコードの中の
console.logを、Xcodeなどのネイティブ開発環境で表示する - cordova-sqlite-storage : sqliteを使う
- ionic-plugin-keyboard : ソフトウェアキーボードを操作する
- cordova-plugin-splashscreen : スプラッシュ画面の操作
- cordova-plugin-app-version : アプリのバージョンを取得する
- cordova-plugin-apprate : 「アプリを評価する」ダイアログを表示する
- SocialSharing-PhoneGap-Plugin : FacebookやTwitterへのシェア機能
- cordova-plugin-google-analytics : GoogleAnalyticsSDKの利用
- cordova-admob-pro : AdMob SDKを利用した広告の表示（$20のライセンスを買わないと、トラフィックの数%を抜かれるので注意）
- cordova-plugin-inappbrowser : アプリ内ブラウザ
欲しいプラグインがない場合
これらのプラグインの多くは個人開発者によるものです。
欲しいプラグインがない場合は自分で開発することもできます。
私の場合、アプリに広告を載せたかったのですが、とある事情でAdMobを利用することができなかったので、Nend広告を載せる必要がありました。
しかしNend SDK用のプラグインはなかったので、自分でプラグインを開発して無事Nend広告を表示することができました。
開発にかかった時間はトータルで3日ほどです。プラグイン開発に関する情報はまだかなり少ないようでしたので、また次の機会にCordovaプラグイン開発についてもまとめたいと思います。
まとめ
Ionicかネイティブ開発かを決める際は、以下のように考えればよいかと思います。
- 特にネイティブに依存した複雑な機能がなく、古いAndroidバージョンを切り捨てられる場合はIonic
- 複雑な機能がある or 古いAndroidでもサクサク動いて欲しい場合はネイティブ
今回書いたことの他に「ハイブリッドアプリのここが知りたい」みたいなのがあれば、ガンガン聞いてください！