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