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

6. Qiitaのビューワーアプリ
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. 自分の中の設計方針
・１メソッド１画面程度にする
・ 先人の知恵を活用してスパゲッ
ティコード化を防ぐ
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日金曜日

16. GitHub上にコードありますので気に
なる方はご覧くださいー
13年1月25日金曜日

17. ご清聴ありがとうご
ざいました
13年1月25日金曜日