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年12月16日月曜日

Lemonade

エンジニア3人で作成 (現4人)

iOS

Android*2

Web/WebView

13年12月16日月曜日

Ubuntu + Python(Django) + MySQL+MongoDB

マスターデータはMySQL

MongoDBは走行ログと、セカンダリ

EC2*3, RDS, S3, ElastiCache, CloudFront, ELB

CoffeeScript, LESSコンパイルにNodeJS

LemondeのServer

13年12月16日月曜日

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に置き換えていきたい

13年12月16日月曜日

最低限のhtml,JSのみ同梱

各Viewのhtml,JSは実行時にdownloadする

Native部分の制御はCordovaPluginを作成

13年12月16日月曜日

1.同梱したhtmlが読み込まれる

2.config.json と呼ばれるファイルを呼ぶ

401ならログイン処理

RequireJSの設定等が入っている

WebViewの表示フロー

13年12月16日月曜日

3.開きたいページに該当するViewModelが読み込まれる

notebook/top -> notebook/top.xxxx.js

ViewModelに書かれている htmlも読み込まれて、表示

13年12月16日月曜日

ページのHistoryはNative側で管理

AppView PluginのHistory関連

アプリ復帰時に前回画面を復帰できる

History管理

13年12月16日月曜日

Nativeトリガーの場合

WebView内のJSメソッドを呼ぶ

AppView.redirect_controller(‘notebook/top’, ‘user_id=2’)

WebViewが開いていない場合はHisotoryに入れてから初期化する

ページ遷移

13年12月16日月曜日

ページ遷移

WebView内で遷移する場合

Nativeの遷移用プラグインを呼ぶ

後はNativeトリガーと同じ

13年12月16日月曜日

html,JSの読み込みにRequireJSを使用

ViewModelとhtmlはKnockoutJSを使用

基本 1対1でシンプルにページ追加ができる

ファイルはNative側でキャッシュ

ファイル名にハッシュ値を付けている

13年12月16日月曜日

ページ間のデータ連携に

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をサーバから配布しているのでアプリリリースとは別に機能や見た目を対応できる良さは殺したくない

ハイブリット化の次の形を模索中

今後の課題

13年12月16日月曜日

今後の課題2

Djangoのテストはほぼ全機能で最低限の自動テストはしている

Jenkinsがテスト実行後に開発環境に配布

iOS, Androidは現在徐々に追加

JSの自動テストが無い！

13年12月16日月曜日

おしまいご清聴ありがとうございました

13年12月16日月曜日