Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

LLTLIVE in Shibuya 2013.12.13

505 views

Published on

Published in: Technology
  • Be the first to comment

LLTLIVE in Shibuya 2013.12.13

  1. 1. LLTLIVE in 渋谷 2013.12.13 @maru_cc 13年12月16日月曜日
  2. 2. もくじ 自己紹介 Lemonadeについて ハイブリットアプリ 13年12月16日月曜日
  3. 3. おまえ誰よ? Tomoyuki Maruta maru_cc http:/ /maru.cc php,Python,JSとかとかのエンジニア 13年12月16日月曜日
  4. 4. Lemonade Lab, Inc. でエンジニアやってます Lemonade というWebサービスつくってます http:/ /lemona.de/ スポーツする人向けSNS Nike+, Runkeeper, Stravaみたいな 13年12月16日月曜日
  5. 5. Lemonade エンジニア3人で作成 (現4人) iOS Android*2 Web/WebView 13年12月16日月曜日
  6. 6. LemondeのServer Ubuntu + Python(Django) + MySQL+MongoDB マスターデータはMySQL MongoDBは走行ログと、セカンダリ EC2*3, RDS, S3, ElastiCache, CloudFront, ELB CoffeeScript, LESSコンパイルにNodeJS 13年12月16日月曜日
  7. 7. LemonadeのWeb CoffeeScript + RequreJS + Knockout.js jQuery系プラグインあれこれ LESS + BLESS (一部 bootstrapを使用) mixinとか 13年12月16日月曜日
  8. 8. LemonadeのApp Apache Cordova(PhoneGap)ベースのハイブリッド ログ記録等はNativeのアプリ 表示はWebView WebViewからNativeを制御 13年12月16日月曜日
  9. 9. 今日はアプリのお話 13年12月16日月曜日
  10. 10. Native WebView 13年12月16日月曜日
  11. 11. ハイブリッドにした理由 iOS,Androidを両方作るリソースが足りない! しかもエンジニアが3人ともWeb系 CordovaはすべてJSで実装する思想だが。。 計測機能はNativeでそれぞれ実装が必要 後々Nativeに置き換えていきたい 13年12月16日月曜日
  12. 12. 最低限のhtml,JSのみ同梱 各Viewのhtml,JSは実行時にdownloadする Native部分の制御はCordovaPluginを作成 13年12月16日月曜日
  13. 13. WebViewの表示フロー 1.同梱したhtmlが読み込まれる 2.config.json と呼ばれるファイルを呼ぶ 401ならログイン処理 RequireJSの設定等が入っている 13年12月16日月曜日
  14. 14. 3.開きたいページに該当するViewModelが読み 込まれる notebook/top -> notebook/top.xxxx.js ViewModelに書かれている htmlも読み込ま れて、表示 13年12月16日月曜日
  15. 15. History管理 ページのHistoryはNative側で管理 AppView PluginのHistory関連 アプリ復帰時に前回画面を復帰できる 13年12月16日月曜日
  16. 16. ページ遷移 Nativeトリガーの場合 WebView内のJSメソッドを呼ぶ AppView.redirect_controller(‘notebook/top’, ‘user_id=2’) WebViewが開いていない場合はHisotoryに 入れてから初期化する 13年12月16日月曜日
  17. 17. ページ遷移 WebView内で遷移する場合 Nativeの遷移用プラグインを呼ぶ 後はNativeトリガーと同じ 13年12月16日月曜日
  18. 18. html,JSの読み込みにRequireJSを使用 ViewModelとhtmlはKnockoutJSを使用 基本 1対1でシンプルにページ追加ができる ファイルはNative側でキャッシュ ファイル名にハッシュ値を付けている 13年12月16日月曜日
  19. 19. ページ間のデータ連携に Backbone.jsの Collection,Modelを使用 localStorageに保存して永続化 13年12月16日月曜日
  20. 20. Backbone.js Collectionの表示に Knockback.jsを使用 Collectionのデータの表示が楽にできる 13年12月16日月曜日
  21. 21. 2013.11.03 ツール・ド・東北でオフィシャルアプリ 使ってもらいました 13年12月16日月曜日
  22. 22. 今後の課題 WebView遅いw (特にAndroid) 部分的にNative化していきたい WebViewのJSをサーバから配布しているので アプリリリースとは別に機能や見た目を対応 できる良さは殺したくない ハイブリット化の次の形を模索中 13年12月16日月曜日
  23. 23. 今後の課題2 Djangoのテストはほぼ全機能で最低限の自動 テストはしている Jenkinsがテスト実行後に開発環境に配布 iOS, Androidは現在徐々に追加 JSの自動テストが無い! 13年12月16日月曜日
  24. 24. おしまい ご清聴ありがとうございました 13年12月16日月曜日

×