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