TiQiita作ったら結果的にオレオレフ                     レームワークも出来た                                                     photo by Ars Elect...
自己紹介                                        photo by poluz!                     http://www.flickr.com/photos/poluz13年4月12日金曜日
小山田 浩(@h5y1m141)         エンジニアではありませんが               JavaScript         趣味でTitaniumいじっていて   (JScript,Titanium Mobileな     ...
Agenda              • これから話すこと               • 最近作ったTiQiitaを簡単に紹介               • 自分の中の設計方針               • お世話になったライブラリ  ...
作ったアプリ                                       Photo By fotologic                   http://www.flickr.com/photos/fotologic/13...
Demo アカウント認証画面 左側のメニュースライド 「Emacs」投稿一覧 投稿情報詳細 Qiitaへストック ストック情報表示 以前の投稿読み込み 引っ張って更新13年4月12日金曜日
自分の中の設計方針              ・MVCモデルを意識して分割              ・1メソッド1画面を心がける              ・ 先人の知恵を活用してスパゲッ              ティコード化を防ぐ    ...
ディレクトリ構成              Resources                  ├── controller                  ├── test          はてなAPI 利用する際の          ...
MVCモデル Model                                     ui ├──      baseCommand.coffee                ├──   activityIndicator.coffe...
Model概要①               メニューに対応する処理を実装              (GoFのCommandパターン適用)                   loginCommand                   _s...
Model概要②                          WebAPIと連携する    qiita    _auth()    _mergeItems()    _mockObject()                       ...
View概要                               progress     mainTable                   alertView     Bar         configMenu         ...
Controller概要     •   mainController         •    基本的にはModelとViewの橋              渡しはこのControllerが担う     •   commandControll...
先人の知恵:          menuTableの各項目をクリック後の             処理はCommandパターン                    getMyStocksCommand()                   ...
お世話になったライブラリ   moment.js      TiPlatform           NappSlide   momentja.js    Connect              Menu Module   「xx時間前」みた...
GitHub上にコードありますので気に               なる方はご覧くださいー              https://github.com/h5y1m141/TiQiita13年4月12日金曜日
またまた宣伝を・・              これじゃなくって、ストリー              トアカデミーで告知してる              Titaniumの勉強会を宣伝さ              せてください13年4月12日金曜日
こんなことをやろうとしています       http://www.street-academy.com/myclass/44313年4月12日金曜日
サイトで告知してる内容              •   <こんな事を教えます>                  •   Titanium Mobileを使ったスマフォアプリの作り方              •   <こんな事が出来るように...
おまけ:今これ作ってます。              2週間程度でここまで出来ました13年4月12日金曜日
ご清聴ありがとうご                ざいました13年4月12日金曜日
Upcoming SlideShare
Loading in …5
×

20130412 titanium meetupvol7

1,373 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

20130412 titanium meetupvol7

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

×