1. TiQiita作ったら結果的にオレオレフ
レームワークも出来た
photo by Ars Electronica
http://www.flickr.com/photos/arselectronica/4950684667/
13年4月12日金曜日

2. 自己紹介
photo by poluz!
http://www.flickr.com/photos/poluz
13年4月12日金曜日

3. 小山田 浩（@h5y1m141）
エンジニアではありませんが JavaScript
趣味でTitaniumいじっていて （JScript，Titanium Mobileな
勉強したことをブログ書いて ど）経験2年程度
います ※最近はCoffeeScript好き
13年4月12日金曜日

4. Agenda
• これから話すこと
• 最近作ったTiQiitaを簡単に紹介
• 自分の中の設計方針
• お世話になったライブラリ
• 今日話さないこと
• ソースコードの細かい解説
※気になる方はLT終了後お声がけ下さい
13年4月12日金曜日

5. 作ったアプリ
Photo By fotologic
http://www.flickr.com/photos/fotologic/
13年4月12日金曜日

6. Demo
アカウント認証画面
左側のメニュースライド
「Emacs」投稿一覧
投稿情報詳細
Qiitaへストック
ストック情報表示
以前の投稿読み込み
引っ張って更新
13年4月12日金曜日

7. 自分の中の設計方針
・MVCモデルを意識して分割
・１メソッド１画面を心がける
・ 先人の知恵を活用してスパゲッ
ティコード化を防ぐ
photo by aagius
http://www.flickr.com/photos/aagius/
13年4月12日金曜日

8. ディレクトリ構成
Resources
├── controller
├── test はてなAPI 利用する際の
ConsumerKey等の情報を
├── config JSON形式のファイルで格納
├── model {"consumerKey":
"S0=xxx","consumerSecret":
└── ui "xxxxx"}
coffee
├── controller
├── test
├── model
└── ui
13年4月12日金曜日

9. MVCモデル
Model ui
├── baseCommand.coffee ├── activityIndicator.coffee
├── configCommand.coffee ├── alertView.coffee
├── getFeedByTagCommand.coffee ├── configMenu.coffee
├── getFollowingTagsCommand.coffee ├── mainTable.coffee
├── getMyStocksCommand.coffee ├── menuTable.coffee
├── getOldEntryCommand.coffee ├── progressBar.coffee
├── getStocksCommand.coffee ├── statusView.coffee
├── hatena.coffee ├── webView.coffee
├── loginCommand.coffee └── window.coffee
└── qiita.coffee
Controller
├── commandController.coffee
├── mainContoroller.coffee
└── menu.coffee
13年4月12日金曜日

10. Model概要①
メニューに対応する処理を実装
（GoFのCommandパターン適用）
loginCommand
_showStatusView()
_hideStatusView()
baseCommand
_showStatusView()
_hideStatusView()
getMyStocksCommand
getMyStocks()
execute()
_showStatusView()
_hideStatusView()
13年4月12日金曜日

11. Model概要②
WebAPIと連携する
qiita
_auth()
_mergeItems()
_mockObject() Tiplatform
_storedStocks() Connect
_request()
_convertLinkHeaderToJSON()
を利用
_mergeItems()
_parsedResponseHeader()
isConnected()
hatena
login()
getStocks() postBookmark()
getFollowingTags()
getFeed()
getNextFeed()
getMyStocks()
putStock()
:
∼以下略∼
13年4月12日金曜日

12. View概要
progress
mainTable
alertView Bar configMenu
configWindow
webView
menuTable
mainWindow
WebViewWindow
13年4月12日金曜日

13. Controller概要
• mainController
• 基本的にはModelとViewの橋
渡しはこのControllerが担う
• commandController
• mainControllerに集約しても
よかったが、Commandパ
ターンで実装してるModelが増
えたので別に切り出した
13年4月12日金曜日

14. 先人の知恵：
menuTableの各項目をクリック後の
処理はCommandパターン
getMyStocksCommand()
1.qiita.getMyStocks()実行
2.次ページのURL情報が後々必要
になるためTi.App.Properties
で格納
3. ActivityIndicatorの制御
4.その他・・
13年4月12日金曜日

15. お世話になったライブラリ
moment.js TiPlatform NappSlide
momentja.js Connect Menu Module
「xx時間前」みたいな Kosuke Isobe スライドメニューは
やつを実現する @k0sukey ネイティブモジュー
CommonJSなもの ル活用
https://github.com/viezel/NappSlideMenu
13年4月12日金曜日

16. GitHub上にコードありますので気に
なる方はご覧くださいー
https://github.com/h5y1m141/TiQiita
13年4月12日金曜日

17. またまた宣伝を・・
これじゃなくって、ストリー
トアカデミーで告知してる
Titaniumの勉強会を宣伝さ
せてください
13年4月12日金曜日

18. こんなことをやろうとしています
http://www.street-academy.com/myclass/443
13年4月12日金曜日

19. サイトで告知してる内容
• ＜こんな事を教えます＞
• Titanium Mobileを使ったスマフォアプリの作り方
• ＜こんな事が出来るようになります＞
• RSSリーダー風アプリのようにサーバーサイドと連携するスマー
トフォンアプリが作れるようになります。
• ＜所要時間と当日の流れ＞
• 1回あたり60分程度。数回のシリーズものとして実施予定
• 開催場所は高田馬場にある10 cafeというお店でごはんでも食べ
ながらカジュアルな雰囲気で進めていこうと思ってます
• ＜想定参加者＞
• 「こんなスマートフォンのアプリが欲しい」と具体的なアイデア
を持っててHTML/CSSのコーディング程度は可能なレベル
13年4月12日金曜日

20. おまけ：今これ作ってます。
2週間程度でここまで出来ました
13年4月12日金曜日

21. ご清聴ありがとうご
ざいました
13年4月12日金曜日