smartFXにおけるApache Cordova

の活用について

株式会社みんかぶ 森田剛志

所属: 株式会社みんかぶ

twitter: @takeshy

github: https://github.com/takeshy

qiita: http://qiita.com/takeshy

みんかぶではプログラマを募集しています。JavaScriptが読み書きできれば、業務経験がなくてもOK! dev_recruitment@minkabu.co.jpまで

Who am I ?

I. Apache Cordovaを導入した経緯と結果

II. Apache Cordovaを使った開発について

III. まとめ

アジェンダ

I. smartFXでApache

Cordovaを導入した経緯

smartFXの狙い(リリース前)

• 24時間マーケットが開いていて、秒に数回もレートが更新されるFXに対して、どこでもサッと今の情報をチェックしたいというニーズがあるはず

• SPAにより快適にページ遷移ができ、リアルタイムに表示が更新されるスマホ用のFX情報Webサイトを作ろう!!

• Webだとインストールの必要もないし、SNSで簡単に拡散され大ヒットするはず。

SmartFXpowerd by みんなの外為

リアルタイムかつネイティブと変わらない操作性をもつ無料FX情報サイト2014

年2月28日Debut!!

リリース後の辛い現実

•全然人が来ない。。

•みんな直帰。。

•リピートしてくれない。。

空いてるビルの下の階のフロア、これから人が増えるから、今のうちに押さえちゃってって言ったのに。。

なぜ人が来ない?

• 検索エンジンにひっかからない(SPAだし。。)

• _escaped_fragment_ を指定して、ロボットに対してはPhantom.jsを使って静的ページを返すようにしても、スマホ用に極力文字をへらしていたり、そもそもアプリなのでキーワードをたくさん載せにくい。

• あまりにも無名でSNSで広がらない。。

なぜみんな直帰?

• 普通の人にとってSPAってなにそれ?状態

• たとえ知っていたとしても次のページに遷移するまで知る由もない。

• 初期ページ表示が遅い=サイトが重い。

なぜリピートしてくれない?

• スマホの使用時間のほとんどはアプリ。

• ブラウザで毎日訪れるサイトがある人自体かなり少ない。

アプリにしたら解決するんじゃない?

人が来ない問題に対して

• "FX バーチャル”をWebで検索すれば69万6千件なのに対してApp Storeで検索すれば、たった10件

• App Storeのランキングに載れば、優良な導線が無料で手に入る!!

みんな直帰問題に対して

• ネイティブだと初期ロードに時間がかかるが、以降の遷移は素早いという感覚が当たり前。

• ナビゲーションを常に固定することで、とりあえず色々な画面を見てもらえるのでは?

リピートしてくれない問題に対して

• アイコン化により容易にアクセス

• push通知による誘導も可能

でもアプリにするって大変じゃない?

Yes!!

Here We are!

Cordovaへの移行について

• サイト全部だとアプリとしては複雑すぎるので、バーチャルトレード機能のみをアプリ化する。

• もともとSPAだったので、コードはほぼそのまま流用できた。

• プラグインも必要なものはすべてあったので、ネイティブコードを1行も触らずにすんだ。

• 移行 + Push通知機能通知の実装が開発者1人で1週間でできた。

そして・・・

2014年 8月15日 smartFX

virtual trade リリース!

で、結果は?

リリース結果

• バーチャルトレード大会に参加登録したユーザ数

※参加登録をしなくても使えるので、インストールしたユーザはこの数倍

118 51

422

0

125

250

375

500

6月 7 月 8 月

参加者が8倍に増加!!

← 8/15 リリース

PR Times -> マイナビニュース -> Gunosyまでリーチ!!

II.Apache Cordovaを使った開発について

Apache Cordovaってなんなのに対する私の認識

• アプリ内のHTML内でアプリ内のcordova.jsを呼び出し、そのjs

経由でネイティブの機能を呼び出せる(ローカルドメイン)

• 外部とはAjaxもしくはWebsocket、JSONPで通信できる

• 外部リンク経由等で外部のサイトを表示することもできるが、ネイティブの機能が使えず、ただのWebViewになってしまう。

• アプリ内に画面ごとのHTMLを用意すれば、SPAでなくても画面遷移が可能だが、結局外部とはAjax通信が必要だし、画面ごとにjsやcssをパースすることを考えると、SPAで作ったほうが昨今のJSのフレームワークが使えるし有利。

開発環境

• 開発ツール Vim パッケージングする時だけ、EclipseとXCodeを立ち上げています

• Webアプリサーバ Rails

• 言語 CoffeeScript

• ライブラリ Backbone.js Socket.IO CCChart ios-

imagefile-megapixel OnsenUI

Apach Cordova開発時の注意

• UIがガイドライン(https://developer.apple.com/jp/devcenter/ios/library/documentation/userexpe

rience/conceptual/mobilehig/BasicsPart/BasicsPart.html)に則っていないとAppleからRejectされる。

• 書籍を参考にCSS3で頑張る。

• Onsen UIを使う。

• Androidの場合、バックグラウンド処理がデフォルトで有効になっているので、タイマーなどで定期的にポーリングする処理を行っていたりするとバッテリ消費が大変なことになる

• keepRunnningの設定をfalseにする

Apache Cordova開発での問題点

• Webサーバーとのやり取りがAjaxに限定

• cookieが使いものにならない

• pushStateを使うとreloadがきかない

• ブラウザで動いてもアプリだとエラーになるコードがある

• 端末によって動作が違う

Apache Cordova開発での問題点に対する

smartFXでの対応

Webサーバとのやり取りがAjaxに限定

• SPAで作成。各AJAXのURLにホスト名を記載。CSRF用のtokenもAjaxで取得

• 申請を待たずにアプリを更新するために、起動時にSPA本体のjsのURLが書かれたjsをサーバから毎回取得し、記述されたURLのjsを読み込む

• Social Login等外部サイトを呼ぶ必要がある場合は、InAppBrowserというアプリ内ブラウザを使う

cookieが使いものにならない

• LocalStorageを使う。

• ただし、Webサービスでも提供していた場合、クライアントのブラウザがシークレットモードの場合はLocalStorageがエラーになるに注意。

pushStateを使うとreloadがきかない

• 起動時にpushStateを使う前のurlを保存しておき、reloadしたい場面では保存したURLを開く

ブラウザで動いてもアプリだとエラーになるコードがある

• iOS6以上のiOS Simulator、Android 4.4以上だとWebViewも外部からdebugできるので頑張る。

• iOSのWebViewの場合、初期化処理の中でそのオブジェクトのprototype関数を呼び出すとエラーになった。

端末によって動作が違う

• 頑張る。特にAndroid4.0はCanvasのバグが激しい。canvasに書き込みつつも、canvasタグ自体はhiddenにして、toDataURL()でimageタグに対して出力している。

• Androidの場合、crosswalkというサードパーティのpluginを使えばWebView自体がアプリに組込まれるので最新の技術+端末ごとの差異がなくなり解決するはず。。

III.まとめ

• ネイティブの機能を使わなくてもアプリ化するメリットは大きい

• Apache Cordovaを使えば、Object-CやJavaを1行も書いたことがなくても、まともなアプリが作れる

• 最近の端末(iPhone5以降)だとネイティブと遜色ないと言えるレベルで動作する(smartfx.jp splax.net)

• SPAは習得するのにちょっと慣れが必要だが、必須の技術になりつつあるので、ぜひ覚えよう。保守性もUpするよ！！

ご静聴ありがとうございました