1. LLTLIVE in 渋谷
2013.12.13 @maru_cc
13年12月16日月曜日

2. もくじ
自己紹介
Lemonadeについて
ハイブリットアプリ
13年12月16日月曜日

3. おまえ誰よ？
Tomoyuki Maruta
maru_cc
http:/
/maru.cc
php,Python,JSとかとかのエンジニア
13年12月16日月曜日

4. Lemonade Lab, Inc. でエンジニアやってます
Lemonade というWebサービスつくってます
http:/
/lemona.de/
スポーツする人向けSNS
Nike+, Runkeeper, Stravaみたいな
13年12月16日月曜日

5. Lemonade
エンジニア3人で作成 (現4人)
iOS
Android*2
Web/WebView
13年12月16日月曜日

6. LemondeのServer
Ubuntu + Python(Django) + MySQL+MongoDB
マスターデータはMySQL
MongoDBは走行ログと、セカンダリ
EC2*3, RDS, S3, ElastiCache, CloudFront, ELB
CoffeeScript, LESSコンパイルにNodeJS
13年12月16日月曜日

7. LemonadeのWeb
CoffeeScript + RequreJS + Knockout.js
jQuery系プラグインあれこれ
LESS + BLESS (一部 bootstrapを使用)
mixinとか
13年12月16日月曜日

8. LemonadeのApp
Apache Cordova(PhoneGap)ベースのハイブリッド
ログ記録等はNativeのアプリ
表示はWebView
WebViewからNativeを制御
13年12月16日月曜日

9. 今日はアプリのお話
13年12月16日月曜日

10. Native
WebView
13年12月16日月曜日

11. ハイブリッドにした理由
iOS,Androidを両方作るリソースが足りない！
しかもエンジニアが3人ともWeb系
CordovaはすべてJSで実装する思想だが。。
計測機能はNativeでそれぞれ実装が必要
後々Nativeに置き換えていきたい
13年12月16日月曜日

12. 最低限のhtml,JSのみ同梱
各Viewのhtml,JSは実行時にdownloadする
Native部分の制御はCordovaPluginを作成
13年12月16日月曜日

13. WebViewの表示フロー
1.同梱したhtmlが読み込まれる
2.config.json と呼ばれるファイルを呼ぶ
401ならログイン処理
RequireJSの設定等が入っている
13年12月16日月曜日

14. 3.開きたいページに該当するViewModelが読み
込まれる
notebook/top -> notebook/top.xxxx.js
ViewModelに書かれている htmlも読み込ま
れて、表示
13年12月16日月曜日

15. History管理
ページのHistoryはNative側で管理
AppView PluginのHistory関連
アプリ復帰時に前回画面を復帰できる
13年12月16日月曜日

16. ページ遷移
Nativeトリガーの場合
WebView内のJSメソッドを呼ぶ
AppView.redirect_controller(‘notebook/top’, ‘user_id=2’)
WebViewが開いていない場合はHisotoryに
入れてから初期化する
13年12月16日月曜日

17. ページ遷移
WebView内で遷移する場合
Nativeの遷移用プラグインを呼ぶ
後はNativeトリガーと同じ
13年12月16日月曜日

18. html,JSの読み込みにRequireJSを使用
ViewModelとhtmlはKnockoutJSを使用
基本 1対1でシンプルにページ追加ができる
ファイルはNative側でキャッシュ
ファイル名にハッシュ値を付けている
13年12月16日月曜日

19. ページ間のデータ連携に
Backbone.jsの Collection,Modelを使用
localStorageに保存して永続化
13年12月16日月曜日

20. Backbone.js Collectionの表示に
Knockback.jsを使用
Collectionのデータの表示が楽にできる
13年12月16日月曜日

21. 2013.11.03
ツール・ド・東北でオフィシャルアプリ
使ってもらいました
13年12月16日月曜日

22. 今後の課題
WebView遅いw (特にAndroid)
部分的にNative化していきたい
WebViewのJSをサーバから配布しているので
アプリリリースとは別に機能や見た目を対応
できる良さは殺したくない
ハイブリット化の次の形を模索中
13年12月16日月曜日

23. 今後の課題2
Djangoのテストはほぼ全機能で最低限の自動
テストはしている
Jenkinsがテスト実行後に開発環境に配布
iOS, Androidは現在徐々に追加
JSの自動テストが無い！
13年12月16日月曜日

24. おしまい
ご清聴ありがとうございました
13年12月16日月曜日