当初Webサービスとしてリリースした「smartFX」をハイブリットアプリとしてリリースすることになった背景やその効果についてご報告するとともに、Webサービスをハイブリットアプリ化するにあたって出てきた問題点とその対応策について説明したいと思います。

1. smartFXにおける
Apache Cordova
の活用について
株式会社みんかぶ森田剛志

2. Who am I ?
所属: 株式会社みんかぶ
twitter: @takeshy
github: https://github.com/takeshy
qiita: http://qiita.com/takeshy
みんかぶではプログラマを募集しています。
JavaScriptが読み書きできれば、業務経験がなくて
もOK! dev_recruitment@minkabu.co.jpまで

3. アジェンダ
I. Apache Cordovaを導入した経緯と結果
II. Apache Cordovaを使った開発について
III. まとめ

4. I. smartFXでApache
Cordovaを導入した経緯

5. smartFXの狙い(リリース前)
• 24時間マーケットが開いていて、秒に数回も
レートが更新されるFXに対して、どこでもサッと
今の情報をチェックしたいというニーズがあるはず
• SPAにより快適にページ遷移ができ、リアルタイム
に表示が更新されるスマホ用のFX情報Webサイト
を作ろう!!
• Webだとインストールの必要もないし、SNSで簡単
に拡散され大ヒットするはず。

6. SmartFX
powerd by みんなの外為
リアルタイムかつネイティ
ブと変わらない操作性をも
つ無料FX情報サイト2014
年2月28日
Debut!!

7. リリース後の辛い現実
• 全然人が来ない。。
• みんな直帰。。
• リピートしてくれない。。

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

9. なぜ人が来ない?
• 検索エンジンにひっかからない(SPAだし。。)
• _escaped_fragment_ を指定して、ロボットに対し
てはPhantom.jsを使って静的ページを返すようにし
ても、スマホ用に極力文字をへらしていたり、そも
そもアプリなのでキーワードをたくさん載せにくい
。
• あまりにも無名でSNSで広がらない。。

10. なぜみんな直帰?
• 普通の人にとってSPAってなにそれ?状態
• たとえ知っていたとしても次のページに遷移するま
で知る由もない。
• 初期ページ表示が遅い=サイトが重い。

11. なぜリピートしてくれない?
• スマホの使用時間のほとんどはアプリ。
• ブラウザで毎日訪れるサイトがある人自体かなり少
ない。

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

13. 人が来ない問題に対して
• "FX バーチャル”をWebで検索すれば69万6千件なの
に対してApp Storeで検索すれば、たった10件
• App Storeのランキングに載れば、優良な導線が
無料で手に入る!!

14. みんな直帰問題に対して
• ネイティブだと初期ロードに時間がかかるが、以降
の遷移は素早いという感覚が当たり前。
• ナビゲーションを常に固定することで、とりあえず
色々な画面を見てもらえるのでは?

15. リピートしてくれない問題に対し
て
• アイコン化により容易にアクセス
• push通知による誘導も可能

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

18. Yes!!
Here We are!

19. Cordovaへの移行について
• サイト全部だとアプリとしては複雑すぎるので、
バーチャルトレード機能のみをアプリ化する。
• もともとSPAだったので、コードはほぼそのまま流
用できた。
• プラグインも必要なものはすべてあったので、ネイ
ティブコードを1行も触らずにすんだ。
• 移行+ Push通知機能通知の実装が開発者1人で1週
間でできた。
そして・・・

20. 2014年8月15日smartFX
virtual trade リリース!

21. で、結果は?

22. リリース結果
• バーチャルトレード大会に参加登録したユーザ数
参加者が8倍に増加!!
118 51
422
500
375
250
125
0
← 8/15 リリース
6月7 月8 月
※参加登録をしなくても使えるので、インストー
ルしたユーザはこの数倍
PR Times -> マイナビニュース-> Gunosyまでリーチ!!

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

25. Apache Cordovaってなんなのに対する私の
認識
• アプリ内のHTML内でアプリ内のcordova.jsを呼び出し、そのjs
経由でネイティブの機能を呼び出せる(ローカルドメイン)
• 外部とはAjaxもしくはWebsocket、JSONPで通信できる
• 外部リンク経由等で外部のサイトを表示することもできるが、
ネイティブの機能が使えず、ただのWebViewになってしまう。
• アプリ内に画面ごとのHTMLを用意すれば、SPAでなくても画
面遷移が可能だが、結局外部とはAjax通信が必要だし、画面ご
とにjsやcssをパースすることを考えると、SPAで作ったほうが
昨今のJSのフレームワークが使えるし有利。

26. 開発環境
• 開発ツールVim パッケージングする時だけ
、EclipseとXCodeを立ち上げています
• WebアプリサーバRails
• 言語CoffeeScript
• ライブラリBackbone.js Socket.IO CCChart ios-imagefile-
megapixel OnsenUI

27. 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にする

28. Apache Cordova開発での問題点
• Webサーバーとのやり取りがAjaxに限定
• cookieが使いものにならない
• pushStateを使うとreloadがきかない
• ブラウザで動いてもアプリだとエラーになるコード
がある
• 端末によって動作が違う

29. Apache Cordova開発での
問題点に対する
smartFXでの対応

30. Webサーバとのやり取りがAjaxに限定
• SPAで作成。各AJAXのURLにホスト名を記載。
CSRF用のtokenもAjaxで取得
• 申請を待たずにアプリを更新するために、起動時に
SPA本体のjsのURLが書かれたjsをサーバから毎回
取得し、記述されたURLのjsを読み込む
• Social Login等外部サイトを呼ぶ必要がある場合は
、InAppBrowserというアプリ内ブラウザを使う

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

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

33. ブラウザで動いてもアプリだとエラーにな
るコードがある
• iOS6以上のiOS Simulator、Android 4.4以上だと
WebViewも外部からdebugできるので頑張る。
• iOSのWebViewの場合、初期化処理の中でそのオブ
ジェクトのprototype関数を呼び出すとエラーになっ
た。

34. 端末によって動作が違う
• 頑張る。特にAndroid4.0はCanvasのバグが激しい。
canvasに書き込みつつも、canvasタグ自体は
hiddenにして、toDataURL()でimageタグに対して
出力している。
• Androidの場合、crosswalkというサードパーティの
pluginを使えばWebView自体がアプリに組込まれる
ので最新の技術+端末ごとの差異がなくなり解決す
るはず。。

35. III.まとめ

36. • ネイティブの機能を使わなくてもアプリ化するメリ
ットは大きい
• Apache Cordovaを使えば、Object-CやJavaを1行も
書いたことがなくても、まともなアプリが作れる
• 最近の端末(iPhone5以降)だとネイティブと遜色ない
と言えるレベルで動作する(smartfx.jp splax.net)
• SPAは習得するのにちょっと慣れが必要だが、必須
の技術になりつつあるので、ぜひ覚えよう。
保守性もUpするよ！！

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