20130125 titanium meetupvol5
DESCRIPTION
TRANSCRIPT
中規模なアプリ開発苦労話
photo by Alan Bellhttp://www.flickr.com/photos/belalan/213282261/
13年1月25日金曜日
自己紹介photo by poluz!
http://www.flickr.com/photos/poluz13年1月25日金曜日
小山田 浩（@h5y1m141）
エンジニアではありませんが趣味でTitaniumいじってます
JavaScript（JScript，Titanium Mobileな
ど）経験2年程度※最近はCoffeeScript好き
13年1月25日金曜日
Agenda• これから話すこと• 今作ってるアプリを簡単に紹介• 自分の中の設計方針• 今日話さないこと• ソースコードの細かい解説※気になる方はLT終了後お声がけ下さい
13年1月25日金曜日
今作ってるアプリPhoto By fotologic
http://www.flickr.com/photos/fotologic/13年1月25日金曜日
Qiitaのビューワーアプリ
13年1月25日金曜日
中規模ってどの程度？
photo by Laurie Pinkhttp://www.flickr.com/photos/laurie_pink/
13年1月25日金曜日
あくまで自分の中で中規模という話です
• 人生初のコード1000行超※現在1334行• underscore.js、moment.js等のライブラリとjasmineのテストコードは除いた数値
• MVC的にファイルを分割• 分割方法、ファイルのネーミングに現在悩んでる
13年1月25日金曜日
アプリの構成要素：主要なUI
mainWindow
configWindow
WebViewWindow
configTable
webView
mainTable
menuTable
13年1月25日金曜日
TableViewは使い回してる
mainWindow
mainTable
投稿情報投稿情報投稿情報投稿情報
ローカルにキャッシュ
13年1月25日金曜日
画面遷移のロジックはシンプル
mainWindow
configWindow
WebViewWindow
moveToWebViewWindow: () -> actionBtn = Ti.UI.createButton systemButton: Titanium.UI.iPhone.SystemButton.ACTION
actionBtn.addEventListener('click',()-> # 省略 webview.show() webWindow.rightNavButton = actionBtn return tab.open(webWindow)
moveToConfigWindow: () -> configMenu = require("ui/configMenu") menu = new configMenu() configWindow = new win() configWindow.title = "アカウント情報" configWindow.backButtonTitle = '戻る' configWindow.add menu return tab.open(configWindow)
13年1月25日金曜日
TableViewの入れ替え＆書き換えとかスパゲッティコードになりそう・・
左上ナビボタン:click
mainTableスライドと半透明化
menuTable:click
QiitaAPIを利用する独自モデル定義しておりそれを呼
び出す1.該当のURLエンドポイントアクセス2.アイテム取得出来たらローカルにキャッシュ3.QiitaAPIのリクエストヘッダーに次ページのURL情報含まれているので取り出しておく
13年1月25日金曜日
・１メソッド１画面程度にする・ 先人の知恵を活用してスパゲッティコード化を防ぐ
photo by aagiushttp://www.flickr.com/photos/aagius/
自分の中の設計方針
13年1月25日金曜日
mainTableスライドと半透明化処理でStateパターン
class defaultState constructor: () -> sayState: () -> return "STATE: 標準状態" moveBackward: () ->
# return new defaultState() moveForward: () -> Ti.API.info "ACTION: スライド開始" Ti.App.Properties.setBool("stateMainTableSlide",true) mainTable.touchEnabled = false mainTable.animate({ duration:200 left:160 }, ()-> mainTable.setOpacity(0.5) ) return new slideState()module.exports = defaultState
class slideState constructor: () -> sayState: () -> return "STATE: スライド状態" moveBackward: () -> Ti.App.Properties.setBool("stateMainTableSlide",false) mainTable.touchEnabled = true mainTable.setOpacity(1.0) mainTable.animate({ duration:200 left:0 },()-> # Ti.API.info "アニメーション終了" ) return new defaultState() moveForward: () -> Ti.API.info "この状態では何もしない" module.exports = slideState
13年1月25日金曜日
menuTableの各項目をクリック後の処理はCommandパターン
1.qiita.getMyStocks()実行2.次ページのURL情報が後々必要になるためTi.App.Propertiesで格納3. ActivityIndicatorの制御4.その他・・
getMyStocksCommand()
getFollowingTagsCommand(tags)
※まだ実装してないけど上記と似たような処理になる予定
13年1月25日金曜日
GitHub上にコードありますので気になる方はご覧くださいー
13年1月25日金曜日
ご清聴ありがとうございました
13年1月25日金曜日