smartfxにおけるapache cordovaの活用について
DESCRIPTION
当初Webサービスとしてリリースした「smartFX」をハイブリットアプリとしてリリースすることになった背景やその効果についてご報告するとともに、Webサービスをハイブリットアプリ化するにあたって出てきた問題点とその対応策について説明したいと思います。TRANSCRIPT
![Page 1: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/1.jpg)
smartFXにおけるApache Cordova
の活用について
株式会社みんかぶ 森田剛志
![Page 2: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/2.jpg)
所属: 株式会社みんかぶ
twitter: @takeshy
github: https://github.com/takeshy
qiita: http://qiita.com/takeshy
みんかぶではプログラマを募集しています。JavaScriptが読み書きできれば、業務経験がなくてもOK! [email protected]まで
Who am I ?
![Page 3: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/3.jpg)
I. Apache Cordovaを導入した経緯と結果
II. Apache Cordovaを使った開発について
III. まとめ
アジェンダ
![Page 4: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/4.jpg)
I. smartFXでApache
Cordovaを導入した経緯
![Page 5: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/5.jpg)
smartFXの狙い(リリース前)
• 24時間マーケットが開いていて、秒に数回もレートが更新されるFXに対して、どこでもサッと今の情報をチェックしたいというニーズがあるはず
• SPAにより快適にページ遷移ができ、リアルタイムに表示が更新されるスマホ用のFX情報Webサイトを作ろう!!
• Webだとインストールの必要もないし、SNSで簡単に拡散され大ヒットするはず。
![Page 6: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/6.jpg)
SmartFXpowerd by みんなの外為
リアルタイムかつネイティブと変わらない操作性をもつ無料FX情報サイト2014
年2月28日Debut!!
![Page 7: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/7.jpg)
リリース後の辛い現実
•全然人が来ない。。
•みんな直帰。。
•リピートしてくれない。。
![Page 8: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/8.jpg)
空いてるビルの下の階のフロア、これから人が増えるから、今のうちに押さえちゃってって言ったのに。。
![Page 9: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/9.jpg)
なぜ人が来ない?
• 検索エンジンにひっかからない(SPAだし。。)
• _escaped_fragment_ を指定して、ロボットに対してはPhantom.jsを使って静的ページを返すようにしても、スマホ用に極力文字をへらしていたり、そもそもアプリなのでキーワードをたくさん載せにくい。
• あまりにも無名でSNSで広がらない。。
![Page 10: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/10.jpg)
なぜみんな直帰?
• 普通の人にとってSPAってなにそれ?状態
• たとえ知っていたとしても次のページに遷移するまで知る由もない。
• 初期ページ表示が遅い=サイトが重い。
![Page 11: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/11.jpg)
なぜリピートしてくれない?
• スマホの使用時間のほとんどはアプリ。
• ブラウザで毎日訪れるサイトがある人自体かなり少ない。
![Page 12: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/12.jpg)
アプリにしたら解決するんじゃない?
![Page 13: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/13.jpg)
人が来ない問題に対して
• "FX バーチャル”をWebで検索すれば69万6千件なのに対してApp Storeで検索すれば、たった10件
• App Storeのランキングに載れば、優良な導線が無料で手に入る!!
![Page 14: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/14.jpg)
みんな直帰問題に対して
• ネイティブだと初期ロードに時間がかかるが、以降の遷移は素早いという感覚が当たり前。
• ナビゲーションを常に固定することで、とりあえず色々な画面を見てもらえるのでは?
![Page 15: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/15.jpg)
リピートしてくれない問題に対して
• アイコン化により容易にアクセス
• push通知による誘導も可能
![Page 16: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/16.jpg)
でもアプリにするって大変じゃない?
![Page 17: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/17.jpg)
![Page 18: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/18.jpg)
Yes!!
Here We are!
![Page 19: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/19.jpg)
Cordovaへの移行について
• サイト全部だとアプリとしては複雑すぎるので、バーチャルトレード機能のみをアプリ化する。
• もともとSPAだったので、コードはほぼそのまま流用できた。
• プラグインも必要なものはすべてあったので、ネイティブコードを1行も触らずにすんだ。
• 移行 + Push通知機能通知の実装が開発者1人で1週間でできた。
そして・・・
![Page 20: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/20.jpg)
2014年 8月15日 smartFX
virtual trade リリース!
![Page 21: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/21.jpg)
で、結果は?
![Page 22: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/22.jpg)
リリース結果
• バーチャルトレード大会に参加登録したユーザ数
※参加登録をしなくても使えるので、インストールしたユーザはこの数倍
118 51
422
0
125
250
375
500
6月 7 月 8 月
参加者が8倍に増加!!
← 8/15 リリース
PR Times -> マイナビニュース -> Gunosyまでリーチ!!
![Page 23: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/23.jpg)
![Page 24: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/24.jpg)
II.Apache Cordovaを使った開発について
![Page 25: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/25.jpg)
Apache Cordovaってなんなのに対する私の認識
• アプリ内のHTML内でアプリ内のcordova.jsを呼び出し、そのjs
経由でネイティブの機能を呼び出せる(ローカルドメイン)
• 外部とはAjaxもしくはWebsocket、JSONPで通信できる
• 外部リンク経由等で外部のサイトを表示することもできるが、ネイティブの機能が使えず、ただのWebViewになってしまう。
• アプリ内に画面ごとのHTMLを用意すれば、SPAでなくても画面遷移が可能だが、結局外部とはAjax通信が必要だし、画面ごとにjsやcssをパースすることを考えると、SPAで作ったほうが昨今のJSのフレームワークが使えるし有利。
![Page 26: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/26.jpg)
開発環境
• 開発ツール Vim パッケージングする時だけ、EclipseとXCodeを立ち上げています
• Webアプリサーバ Rails
• 言語 CoffeeScript
• ライブラリ Backbone.js Socket.IO CCChart ios-
imagefile-megapixel OnsenUI
![Page 27: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/27.jpg)
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にする
![Page 28: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/28.jpg)
Apache Cordova開発での問題点
• Webサーバーとのやり取りがAjaxに限定
• cookieが使いものにならない
• pushStateを使うとreloadがきかない
• ブラウザで動いてもアプリだとエラーになるコードがある
• 端末によって動作が違う
![Page 29: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/29.jpg)
Apache Cordova開発での問題点に対する
smartFXでの対応
![Page 30: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/30.jpg)
Webサーバとのやり取りがAjaxに限定
• SPAで作成。各AJAXのURLにホスト名を記載。CSRF用のtokenもAjaxで取得
• 申請を待たずにアプリを更新するために、起動時にSPA本体のjsのURLが書かれたjsをサーバから毎回取得し、記述されたURLのjsを読み込む
• Social Login等外部サイトを呼ぶ必要がある場合は、InAppBrowserというアプリ内ブラウザを使う
![Page 31: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/31.jpg)
cookieが使いものにならない
• LocalStorageを使う。
• ただし、Webサービスでも提供していた場合、クライアントのブラウザがシークレットモードの場合はLocalStorageがエラーになるに注意。
![Page 32: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/32.jpg)
pushStateを使うとreloadがきかない
• 起動時にpushStateを使う前のurlを保存しておき、reloadしたい場面では保存したURLを開く
![Page 33: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/33.jpg)
ブラウザで動いてもアプリだとエラーになるコードがある
• iOS6以上のiOS Simulator、Android 4.4以上だとWebViewも外部からdebugできるので頑張る。
• iOSのWebViewの場合、初期化処理の中でそのオブジェクトのprototype関数を呼び出すとエラーになった。
![Page 34: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/34.jpg)
端末によって動作が違う
• 頑張る。特にAndroid4.0はCanvasのバグが激しい。canvasに書き込みつつも、canvasタグ自体はhiddenにして、toDataURL()でimageタグに対して出力している。
• Androidの場合、crosswalkというサードパーティのpluginを使えばWebView自体がアプリに組込まれるので最新の技術+端末ごとの差異がなくなり解決するはず。。
![Page 35: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/35.jpg)
III.まとめ
![Page 36: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/36.jpg)
• ネイティブの機能を使わなくてもアプリ化するメリットは大きい
• Apache Cordovaを使えば、Object-CやJavaを1行も書いたことがなくても、まともなアプリが作れる
• 最近の端末(iPhone5以降)だとネイティブと遜色ないと言えるレベルで動作する(smartfx.jp splax.net)
• SPAは習得するのにちょっと慣れが必要だが、必須の技術になりつつあるので、ぜひ覚えよう。保守性もUpするよ!!
![Page 37: smartFXにおけるApache Cordovaの活用について](https://reader030.vdocuments.site/reader030/viewer/2022020116/559b78ea1a28abe8248b45a5/html5/thumbnails/37.jpg)
ご静聴ありがとうございました