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