LLTLIVE in 渋谷
2013.12.13 @maru_cc

13年12月16日月曜日
もくじ

自己紹介
Lemonadeについて
ハイブリットアプリ

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

13年12月16日月曜日
Lemonade Lab, Inc. でエンジニアやってます
Lemonade というWebサービスつくってます

http:/
/lemona.de/
スポーツする人向けSNS
Nike+, Runkeeper, Stravaみたいな

13...
Lemonade
エンジニア3人で作成 (現4人)
iOS
Android*2
Web/WebView

13年12月16日月曜日
LemondeのServer
Ubuntu + Python(Django) + MySQL+MongoDB
マスターデータはMySQL
MongoDBは走行ログと、セカンダリ
EC2*3, RDS, S3, ElastiCache, Clou...
LemonadeのWeb
CoffeeScript + RequreJS + Knockout.js
jQuery系プラグインあれこれ
LESS + BLESS (一部 bootstrapを使用)
mixinとか

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

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

13年12月16日月曜日
Native

WebView

13年12月16日月曜日
ハイブリッドにした理由
iOS,Androidを両方作るリソースが足りない!
しかもエンジニアが3人ともWeb系
CordovaはすべてJSで実装する思想だが。。
計測機能はNativeでそれぞれ実装が必要
後々Nativeに置き換えていきたい...
最低限のhtml,JSのみ同梱
各Viewのhtml,JSは実行時にdownloadする
Native部分の制御はCordovaPluginを作成

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

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

13年12月16日月曜日
History管理

ページのHistoryはNative側で管理
AppView PluginのHistory関連
アプリ復帰時に前回画面を復帰できる

13年12月16日月曜日
ページ遷移
Nativeトリガーの場合
WebView内のJSメソッドを呼ぶ
AppView.redirect_controller(‘notebook/top’, ‘user_id=2’)

WebViewが開いていない場合はHisotory...
ページ遷移

WebView内で遷移する場合
Nativeの遷移用プラグインを呼ぶ
後はNativeトリガーと同じ

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

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

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

13年12月16日月曜日
2013.11.03

ツール・ド・東北でオフィシャルアプリ
使ってもらいました

13年12月16日月曜日
今後の課題
WebView遅いw (特にAndroid)
部分的にNative化していきたい
WebViewのJSをサーバから配布しているので
アプリリリースとは別に機能や見た目を対応
できる良さは殺したくない
ハイブリット化の次の形を模索中
...
今後の課題2
Djangoのテストはほぼ全機能で最低限の自動
テストはしている
Jenkinsがテスト実行後に開発環境に配布
iOS, Androidは現在徐々に追加
JSの自動テストが無い!

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

13年12月16日月曜日
Upcoming SlideShare
Loading in …5
×

LLTLIVE in Shibuya 2013.12.13

370 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
370
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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日月曜日

×