Cordova(PhoneGap)を使ったネイティブアプリ事例

前書き

smartFXというモバイル向けFXの情報サイトを運営しています。
この度(2014/8/15)、smartFXのバーチャルトレード機能を
Apache Cordova(PhoneGap)を使って、ネイティブアプリとしてリリースしました。smartFX Virtural Trade

おかげ様で、リリース直後にマイナビニュースにとりあげていただき、そこから派生してYahooやGunosyにも掲載され、いきなりWebアプリ利用者を越えるぐらいの多くの人に使ってもらえるようになりました。

ここでは、Webアプリに対するネイティブアプリの利点やCordovaによるアプリ作成ってどうなのよ？というところを述べたいと思います。

Webアプリに対するネイティブアプリの利点

smartFXは、2014年2月28日にWebアプリとしてリリースして約半年になります。
スマホ向けのFXは、アプリはあってもWebサイトとしてはほとんどありませんでした。
Backbone.jsとSocket.IOを使ったSinglePageApplication(以降SPA)により、ネイティブと変わらないリアルタイムな応答性をもつsmartFXのWebサイトは、注目されるのではと思っていました。
ソーシャルボタンも各ページに配置し、リンクで簡単に共有できるというWebサイトの利点によりSNSによる拡散を期待していました。
が、残念ながらSNSでの広がりはほとんどありませんでした。
Web技術者の間で拡散していただけましたが、FXに興味があるという訳ではないのでその日のうちに収束しました。

また、残念ながらスマホ向けのSPAは、検索エンジンに対して非常に弱いです。
このあたりはSinglePageApplicationにおける問題点と対応に記載しています。

やはり現状スマホは、ネイティブアプリ有利のようです。

• スマホの利用時間のほとんどがネイティブアプリの利用に費やされている
• 検索エンジンで"FX バーチャル"で検索すると204000件、AppleStoreで検索するとわずか十数件。
• プレスリリースがWebと比較して記事やSNSに取り上げてもらいやすい
• ホーム画面にアイコン登録されることで、常に意識してもらえる
• 人気が出るとランキングに表示されることで導線ができる
• Push通知が使える

そして、ネイティブ化って簡単にできるの？という点について、もしWebサイトがSPAで作成されていればApach Corodvaというツールを使って、簡単にネイティブ化できます。

#Apache Cordova(PhoneGap)によるアプリ作成について

Apache Cordovaとは予めWebViewのみで構成されたネイティブアプリの骨組が用意されており、HTMLとJSを記述するだけでネイティブアプリが作れるというものです。
さらにJSからpluginとして用意されているネイティブの機能を呼び出すことができます。
ただ、ネイティブの機能を自在にあやつれるという訳ではなく、あくまでpluginとして用意されているAPIに制限されます。
言うなれば、Webアプリ+αの感覚です。
smartFXでネイティブの機能としてPush通知を使っています。
(厳密に言えばInAppBrowserと呼ばれるアプリ内ブラウザも)

CordovaとWebアプリの開発の違いは、HTMLファイルはWebサーバではなくアプリ内に置いておくということです。
Cordovaのアプリは、HTML内からアプリ内のCordova.jsというjsを読み込む必要があります。
アプリ内のHTML内からリンクを経由してWebサイトのHTMLを開くことも可能ですが、アプリ内に戻れなくなるため、リンク先をアプリ内に留めておく必要があります。

そのため、複数画面で構成されるWebアプリの場合は、下記のどちらかを選択します。
1.必要となる画面のHTMLをアプリに置いておく
2.SPAにする

1.はSPAに慣れていない人にとっては楽な方法かもしれませんが、結局データのやり取りはAjaxで行う必要があるため簡単という訳でもなく、また、WebViewの利点であるAppleに申請なしに更新するといったことができないため、基本は2.のSPAが選択されることになると思います。

2.のSPAは、もととなるWebアプリがSPAで構成されていれば移行はすぐです。
smartFXでは、移行+Push機能の追加を開発者１人で1週間足らずでできました。
アプリ自体はWebサイトと共通のSPA用のJS + ネイティブ用のjs(Push通知、JSの動的ロード)で構成されています。

注意点としては、見た目もネイティブっぽくしないとAppleからRejectされてしまうということです。
smartFXでは、はじめからネイティブ化も想定していたため、テキストリンクを廃止して、画像やアイコンを使って見た目をできるだけネイティブっぽくしていました。ネイティブ特有機能はpush通知だけでしたが、問題なく審査が通りました。

ObjectCを1行も書いたことがなく、書くこともないままiOSアプリが作れたことを考えると、Cordovaはすごいツールだと思います。

まとめ

現状スマホのSPAサイトの実装はまだ簡単ではないです。
スマホ用のSingle Page Applicationサイトを作る上での問題点と対応
この辺が素直に実装できるようになって、さらにiOS8から導入されるJITつきのWKWebViewにCordovaが対応してくれるようになり、パフォーマンスが上がってくると、Cordovaが俄然注目されるはずです。
HTML5とネイティブアプリは対立軸で語られることが多かったですが、今後は変わっていくかもしれません。

追記
実装についても書きました。
Apache Cordova(PhoneGap)開発におけるTips