Titanium CLI × Alloy × CoffeeScript × Jade で作るiPhoneアプリのお話
•
3 likes•3,561 views
Titanium Alloy CoffeeScript Jadeを用いてiphone androidアプリを作ると楽しいよってゆうスライド
Recommended
More Related Content
Similar to Titanium CLI × Alloy × CoffeeScript × Jade で作るiPhoneアプリのお話
Similar to Titanium CLI × Alloy × CoffeeScript × Jade で作るiPhoneアプリのお話 (20)
Recently uploaded
Titanium CLI × Alloy × CoffeeScript × Jade で作るiPhoneアプリのお話
- 1. Titanium CLI × Alloy × CoffeeScript × Jade で作るiPhoneアプリのお話 Keitarou Oonishi
- 3. 自己紹介 ・Name ： Keitarou Oonishi ・Job ： 専門学生 4月から東京でエンジニア ・Blog ： http://www.absolute-keitarou.net/blog ・Twitter： ＠Dollhyn_kei ・Skill ： 主にRuby・Titanium・PHP・Wordpress Ti歴は１年になりました。 初めてのスライドは最近の僕のおもちゃ「Titanium」について語ります。
- 5. っと、はじめに
- 9. Titanium製のアプリ紹介 サイボウズ Live for iPhone 最近よく使ってます。
- 10. Titanium製のアプリ紹介 サイボウズ Live for iPhone 最近よく使ってます。 家計簿アプリの Zaim
- 11. Titanium製のアプリ紹介 サイボウズ Live for iPhone 最近よく使ってます。 家計簿アプリの Zaim 他にも調べたらたくさん！！
- 12. Titaniumのソース var win =Ti.UI.createWindow({ backgroundColor:'white' }); var label =Ti.UI.createLabel(); label.text = "HelloTitanium"; label.addEventListener("click", function(e){ alerts("Click"); }); win.add(label); win.open(); ラベルを１つ表示して、 クリックしたらダイアログ出す！ みたいなソースはこんな感じ
- 15. Titaniumのソース 何が大変って、UI・レイアウト・処理（イベント）が全部 JSで書けてしまうのでソースコードがカオスになります var win =Ti.UI.createWindow({ backgroundColor:'white' }); var label =Ti.UI.createLabel(); label.text = "HelloTitanium"; label.addEventListener("click", function(e){ alerts("Click"); }); win.add(label); win.open(); UIとレイアウト UI 処理（イベント）
- 16. そこで、救世主 『Alloy』
- 19. フレームワーク構成 ・assets/ 画像とかぶちこむ ・controllers/ イベント書いたり、いろいろ ・views/ UIを書く ・models/ DB関係 ・alloy.js 最初に読み込まれるファイル ・styles/ UIのレイアウトを書く
- 20. ビュー <Alloy> <TabGroup> <Tab id="tab1" icon="KS_nav_views.png" title="Tab 1"> <Window id="window1" title="Tab 1" backgroundColor="#fff"> <Label id="label1">Window1</Label> </Window> </Tab> <Tab id="tab2" icon="KS_nav_ui.png" title="Tab 2"> <Window id="window2" title="Tab 2" backgroundColor="#fff"> <Label id="label2">Window2</Label> </Window> </Tab> </TabGroup> </Alloy> ViewはXMLでゴリゴリ書いていく
- 21. スタイル "#label1": { top:100, width:Ti.UI.SIZE, height:Ti.UI.SIZE, color: "#000" }, "#label2": { top:200, width:Ti.UI.SIZE, height:Ti.UI.SIZE, color: "#000" }, Styleはtssでセカセカ書いていく cssみたいにかけちゃうのが素敵 玄人さんはSassとか使ってる方も
- 22. モデル exports.definition = { config: { "columns": { "item":"text", "done":"integer", "date_completed":"text" }, "adapter": { "type": "sql", "collection_name": "todo" } }, extendModel : function(Model) { _.extend(Model.prototype, { validate : function(attrs) { for (var key in attrs) { var value = attrs[key]; if (value) { if (key === "item") { if (value.length <= 0) { return 'Error: No item!'; } } if (key === "done") { if (value.length <= 0) { return 'Error: No completed flag!'; } } } } } }); return Model; }, extendCollection : function(Collection) { _.extend(Collection.prototype, { comparator: function(todo) { return todo.get('done'); } }); return Collection; } ・Backbone.jsライク ・Sqliteが簡単に使える！ ・generateで雛形もつくれる
- 23. コントローラー function whereFunction(collection) { return !whereIndex ? collection.models : collection.where({ done: whereIndex === 1 ? 0 : 1 }); } // Perform transformations on each model as it is processed. Since // these are only transformations for UI representation, we don't // actually want to change the model. Instead, return an object // that contains the fields you want to use in your bindings.The // easiest way to do that is to clone the model and return its // attributes with the toJSON() function. function transformFunction(model) { var transform = model.toJSON(); transform.item = '[' + transform.item + ']'; return transform; } // open the "add item" window function addToDoItem() { Alloy.createController("add").getView().open(); } // Show task list based on selected status type function showTasks(e) { if (typeof e.index !== 'undefined' && e.index !== null) { whereIndex = e.index; //TabbedBar } else { whereIndex = INDEXES[e.source.title]; // Android menu } todos.fetch(); } ・Controllerはjsでごりごり
- 24. 更にTitaniumを楽しむ
- 32. サンプル # 位置情報の更新＆ピンの表示 setUserLocation = (map) -> Titanium.Geolocation.purpose = '位置情報を取得します' Titanium.Geolocation.getCurrentPosition (e)-> if !e.success || e.error latitude = longitude = 0 alert '位置情報が取得できませんでした' else latitude = e.coords.latitude longitude = e.coords.longitude userPos =Titanium.Map.createAnnotation latitude:latitude longitude:longitude title:"現在地" animate:true map.removeAllAnnotations() map.addAnnotation userPos map.selectAnnotation userPos map.show() map.setLocation latitude:latitude longitude:longitude latitudeDelta:0.01 longitudeDelta:0.01 とにかく書いてて気持ちぃ...
- 35. サンプル Alloy Window.container Label#label Hello,World これが
- 36. サンプル Alloy Window.container Label#label Hello,World こうなる <Alloy> <Window class="container"> <Label id="label">Hello,World</Label> </Window> </Alloy> うわっ短いっ
- 41. 良く使うコマンド ＃ログイン titanium login ＃プロジェクトの作成 titanium create ＃Alloyフレームワークの適用 alloy new ＃コントローラー・ビュー・スタイルの追加 alloy generate controller コントローラー名 ＃モデルの作成 alloy generate model モデル名 sql フィールド名:型 フィールド名:型 ……… ＃シミュレータで実行 titanium build -‐p ios ＃実機ビルド titanium build -‐T device -‐-‐platform iphone ＃リリースビルド titanium build -‐T dist-‐appstore -‐p ios
- 42. 最後に っと以上。 Titanium CLI × Alloy × CoffeeScript × Jadeで作るiPhoneアプリのお話でした。 とにかく簡単・早く・楽しくアプリを作るとこができる ので、みなさんも新しいおもちゃにどうですか？