20130412 titanium meetupvol7
DESCRIPTION
TRANSCRIPT
TiQiita作ったら結果的にオレオレフレームワークも出来た
photo by Ars Electronicahttp://www.flickr.com/photos/arselectronica/4950684667/
13年4月12日金曜日
自己紹介photo by poluz!
http://www.flickr.com/photos/poluz13年4月12日金曜日
小山田 浩（@h5y1m141）
エンジニアではありませんが趣味でTitaniumいじっていて勉強したことをブログ書いて
います
JavaScript（JScript，Titanium Mobileな
ど）経験2年程度※最近はCoffeeScript好き
13年4月12日金曜日
Agenda• これから話すこと• 最近作ったTiQiitaを簡単に紹介• 自分の中の設計方針• お世話になったライブラリ• 今日話さないこと• ソースコードの細かい解説※気になる方はLT終了後お声がけ下さい
13年4月12日金曜日
作ったアプリPhoto By fotologic
http://www.flickr.com/photos/fotologic/13年4月12日金曜日
アカウント認証画面
左側のメニュースライド
「Emacs」投稿一覧
投稿情報詳細
Qiitaへストック
ストック情報表示
以前の投稿読み込み
引っ張って更新
Demo
13年4月12日金曜日
・MVCモデルを意識して分割・１メソッド１画面を心がける・ 先人の知恵を活用してスパゲッティコード化を防ぐ
photo by aagiushttp://www.flickr.com/photos/aagius/
自分の中の設計方針
13年4月12日金曜日
ディレクトリ構成Resources
├── controller├── test├── model└── ui
coffee
├── controller├── test├── config├── model└── ui
はてなAPI 利用する際のConsumerKey等の情報をJSON形式のファイルで格納
{"consumerKey": "S0=xxx","consumerSecret":
"xxxxx"}
13年4月12日金曜日
├── baseCommand.coffee├── configCommand.coffee├── getFeedByTagCommand.coffee├── getFollowingTagsCommand.coffee├── getMyStocksCommand.coffee├── getOldEntryCommand.coffee├── getStocksCommand.coffee├── hatena.coffee├── loginCommand.coffee└── qiita.coffee
MVCモデル
├── activityIndicator.coffee├── alertView.coffee├── configMenu.coffee├── mainTable.coffee├── menuTable.coffee├── progressBar.coffee├── statusView.coffee├── webView.coffee└── window.coffee
uiModel
├── commandController.coffee├── mainContoroller.coffee└── menu.coffee
Controller
13年4月12日金曜日
Model概要①メニューに対応する処理を実装
（GoFのCommandパターン適用）
loginCommand_showStatusView()_hideStatusView()
baseCommand_showStatusView()_hideStatusView()
getMyStocks()execute() _showStatusView()_hideStatusView()
getMyStocksCommand
13年4月12日金曜日
Model概要②WebAPIと連携する
qiita_auth()_mergeItems()_mockObject()_storedStocks()_request()_convertLinkHeaderToJSON()_mergeItems()_parsedResponseHeader()isConnected()
getStocks()getFollowingTags()getFeed()getNextFeed()getMyStocks()putStock() : ～以下略～
login()postBookmark()
hatena
TiplatformConnectを利用
13年4月12日金曜日
View概要
mainWindow
configWindow
WebViewWindow
configMenu
webView
mainTable
menuTable
alertViewprogressBar
13年4月12日金曜日
Controller概要• mainController• 基本的にはModelとViewの橋渡しはこのControllerが担う
• commandController• mainControllerに集約してもよかったが、Commandパターンで実装してるModelが増えたので別に切り出した
13年4月12日金曜日
先人の知恵：menuTableの各項目をクリック後の
処理はCommandパターン
1.qiita.getMyStocks()実行2.次ページのURL情報が後々必要になるためTi.App.Propertiesで格納3. ActivityIndicatorの制御4.その他・・
getMyStocksCommand()
13年4月12日金曜日
お世話になったライブラリ
https://github.com/viezel/NappSlideMenu
moment.jsmomentja.js
TiPlatformConnect
NappSlideMenu Module
スライドメニューはネイティブモジュール活用
「xx時間前」みたいなやつを実現するCommonJSなもの
Kosuke Isobe@k0sukey
13年4月12日金曜日
GitHub上にコードありますので気になる方はご覧くださいー
https://github.com/h5y1m141/TiQiita
13年4月12日金曜日
またまた宣伝を・・
これじゃなくって、ストリートアカデミーで告知してるTitaniumの勉強会を宣伝させてください
13年4月12日金曜日
こんなことをやろうとしています
http://www.street-academy.com/myclass/44313年4月12日金曜日
サイトで告知してる内容• ＜こんな事を教えます＞
• Titanium Mobileを使ったスマフォアプリの作り方
• ＜こんな事が出来るようになります＞
• RSSリーダー風アプリのようにサーバーサイドと連携するスマートフォンアプリが作れるようになります。
• ＜所要時間と当日の流れ＞
• 1回あたり60分程度。数回のシリーズものとして実施予定
• 開催場所は高田馬場にある10°cafeというお店でごはんでも食べながらカジュアルな雰囲気で進めていこうと思ってます
• ＜想定参加者＞
• 「こんなスマートフォンのアプリが欲しい」と具体的なアイデアを持っててHTML/CSSのコーディング程度は可能なレベル
13年4月12日金曜日
おまけ：今これ作ってます。2週間程度でここまで出来ました
13年4月12日金曜日
ご清聴ありがとうございました
13年4月12日金曜日