20130125 titanium meetupvol5

1,007 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,007
On SlideShare
0
From Embeds
0
Number of Embeds
425
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

20130125 titanium meetupvol5

  1. 1. 中規模なアプリ開発苦労話 photo by Alan Bell http://www.flickr.com/photos/belalan/213282261/13年1月25日金曜日
  2. 2. 自己紹介 photo by poluz! http://www.flickr.com/photos/poluz13年1月25日金曜日
  3. 3. 小山田 浩(@h5y1m141) JavaScript エンジニアではありませんが (JScript,Titanium Mobileな 趣味でTitaniumいじってます ど)経験2年程度 ※最近はCoffeeScript好き13年1月25日金曜日
  4. 4. Agenda • これから話すこと • 今作ってるアプリを簡単に紹介 • 自分の中の設計方針 • 今日話さないこと • ソースコードの細かい解説 ※気になる方はLT終了後お声がけ下さい13年1月25日金曜日
  5. 5. 今作ってるアプリ Photo By fotologic http://www.flickr.com/photos/fotologic/13年1月25日金曜日
  6. 6. Qiitaのビューワーアプリ13年1月25日金曜日
  7. 7. 中規模ってどの程度? photo by Laurie Pink http://www.flickr.com/photos/laurie_pink/13年1月25日金曜日
  8. 8. あくまで自分の中で中規模 という話です • 人生初のコード1000行超 ※現在1334行 • underscore.js、moment.js 等のライブラリとjasmineのテ ストコードは除いた数値 • MVC的にファイルを分割 • 分割方法、ファイルのネーミン グに現在悩んでる13年1月25日金曜日
  9. 9. アプリの構成要素:主要なUI mainTable configTable configWindow webView menuTable mainWindow WebViewWindow13年1月25日金曜日
  10. 10. TableViewは使い回してる mainTable ローカルにキャッシュ 投稿情報 投稿情報 投稿情報 投稿情報 mainWindow13年1月25日金曜日
  11. 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) WebViewWindow13年1月25日金曜日
  12. 12. TableViewの入れ替え&書き換えとか スパゲッティコードになりそう・・ 左上ナビボタン:click menuTable:click QiitaAPIを利用する独自モ デル定義しておりそれを呼 mainTableス び出す ライドと半透 1.該当のURLエンドポイントアクセス 明化 2.アイテム取得出来たらローカルにキャッシュ 3.QiitaAPIのリクエストヘッダーに次ページの URL情報含まれているので取り出しておく13年1月25日金曜日
  13. 13. 自分の中の設計方針 ・1メソッド1画面程度にする ・ 先人の知恵を活用してスパゲッ ティコード化を防ぐ photo by aagius http://www.flickr.com/photos/aagius/13年1月25日金曜日
  14. 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 = slideState13年1月25日金曜日
  15. 15. menuTableの各項目をクリック後の 処理はCommandパターン getMyStocksCommand() 1.qiita.getMyStocks()実行 2.次ページのURL情報が後々必要 になるためTi.App.Properties で格納 3. ActivityIndicatorの制御 4.その他・・ getFollowingTagsCommand(tags) ※まだ実装してないけど上記と似 たような処理になる予定13年1月25日金曜日
  16. 16. GitHub上にコードありますので気に なる方はご覧くださいー13年1月25日金曜日
  17. 17. ご清聴ありがとうご ざいました13年1月25日金曜日

×