Downloaded 12 times
Uploaded by剛志 森田
PPTX, PDF5,032 views
smartFXにおけるApache Cordovaの活用について
当初Webサービスとしてリリースした「smartFX」をハイブリットアプリとしてリリースすることになった背景やその効果についてご報告するとともに、Webサービスをハイブリットアプリ化するにあたって出てきた問題点とその対応策について説明したいと思います。
Recommended
More Related Content
What's hot
Similar to smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について
- 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. ApacheCordovaを導入した経緯と結果 II. Apache Cordovaを使った開発について III. まとめ
- 4.
- 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 Weare!
- 19.Cordovaへの移行について • サイト全部だとアプリとしては複雑すぎるので、バーチャルトレード機能のみをアプリ化する。 • もともとSPAだったので、コードはほぼそのまま流 用できた。 • プラグインも必要なものはすべてあったので、ネイ ティブコードを1行も触らずにすんだ。 • 移行+ Push通知機能通知の実装が開発者1人で1週 間でできた。 そして・・・
- 20.
- 21.
- 22.リリース結果 • バーチャルトレード大会に参加登録したユーザ数参加者が8倍に増加!! 118 51 422 500 375 250 125 0 ← 8/15 リリース 6月7 月8 月 ※参加登録をしなくても使えるので、インストー ルしたユーザはこの数倍 PR Times -> マイナビニュース-> Gunosyまでリーチ!!
- 24.
- 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.
- 36.• ネイティブの機能を使わなくてもアプリ化するメリ ットは大きい• Apache Cordovaを使えば、Object-CやJavaを1行も 書いたことがなくても、まともなアプリが作れる • 最近の端末(iPhone5以降)だとネイティブと遜色ない と言えるレベルで動作する(smartfx.jp splax.net) • SPAは習得するのにちょっと慣れが必要だが、必須 の技術になりつつあるので、ぜひ覚えよう。 保守性もUpするよ！！
- 37.