今ここでもう一度初めての Titanium
- 1. Titanium もくもく会 Tokyo #7
- 2. ｻｰｾﾝ LT とは Long Talk のことである LT means Long Talk
- 3. 宮下 竜大郎 @ryugoo_ Web * Developer Titanium Certified App Developer Titanium Certified Mobile Developer Titanium ユーザー会 書記 http://imthinker.net/ http://cocohere.com/
- 6. HTML / CSS / JS でアプリを作る Titanium is not PhoneGap, Sencha Touch !
- 7. Objective-C / Java に変換される Titanium is not “Meta programming language” !
- 8. Titanium 1.x 時代に見限っちゃった Titanium Developer, Studio, Performance, Android, JavaScript…
- 9. 安定しないプラクティス Ti.include / CommonJS Modules / Alloy … Enough Already !
- 10. 競合も増えた! PhoneGap, Sencha Touch, RubyMotion, MobiRuby, Xamarin…
- 12. もう一度 Titanium を整理しよう Adjust “Titanium” again
- 14. Titanium プラットフォーム Mobile Cloud Services Market place Alloy MVC Framework Node.ACS Module, Design
- 15. Titanium Mobile Built native apps from JavaScript
- 16. JavaScript Single Code Base
- 17. Titanium Apps Native Apps Titanium API JavaScript + JS Engine Bridge API
- 18. Titanium Apps Native Apps Titanium API JavaScript + JS Engine Bridge API
- 19. JavaScript with Titanium API = Titanium Classic Raw Titanium API + CommonJS Modules + Native Modules
- 20. // UI var win = Ti.UI.createWindow({ backgroundColor: "#FFFFFF" }); var label = Ti.UI.createLabel({ text: "Hello, Titanium!" }); // Logic label.addEventListener("click", function () { alert("You clicked label!"); }); // Presentation win.add(label); win.open();
- 21. Titanium Classic 1. シンプル API 叩くだけ 大規模になってきたら…？ 2. 全て JavaScript ビューもロジックもデータベースも全部 JS を書いて操作 3. まずはここから 千里の Titanium も Classic より始まる
- 23. Titanium Apps Native Apps Titanium API JavaScript + JS Engine Bridge API
- 24. Titanium Apps Native Apps Titanium API XML StyleSheet + JS Engine JavaScript Bridge API
- 25. Model JavaScript Controller View XML + StyleSheet = Alloy MVC Framework Backbone.js based Model, Controller and XML based UI with StyleSheet system
- 26. // View (index.xml) <Alloy> <Window id="index"> <Label id="lbl">Hello, Titanium!</Label> </Window> </Alloy> // StyleSheet (index.tss) "Window": { backgroundColor: "#FFFFFF" } // Controller (index.js) $.lbl.addEventListener("click", function () { alert("You clicked label!"); }); $.index.open();
- 27. // Create Model (Rails like) $ alloy generate model todo sql task:string done:boolean // Use Model (in Controller) var todo = Alloy.createModel("todo", { task: "Something" + Date.now(), done: false }); todo.save(); // Save SQLite :-) // Data binding (in View) <Collection src="todo" /> <TableView dataCollection="todo">
- 28. Alloy MVC Framework 1. 分かりやすい構造 ビュー、ロジック、コントローラ、データベースが綺麗に分離する 2. 大規模開発も安心 Convention over Configuration で規約に従った開発 3. Titanium Classic を覚えてから まずは Titanium API で何ができるかを頭に入れると効果的
- 29. Titanium プラットフォーム ✓ Mobile Alloy MVC Framework Cloud Services Node.ACS Market place Module, Design
- 30. Titanium Cloud Services MBaaS - Mobile Backend as a Service
- 31. Titanium Cloud Services 1. サーバサイド機能を提供 API 叩くだけ, Titanium / iOS / Android / JS / REST 2. 広い無料枠 500 万 API コール, 500 万 Push 通知, 20GB ストレージ 3. Ti Mobile とシームレスに連携 Titanium Mobile 用のモジュール有
- 32. Backend as a Service ☁ IaaS / VPS BaaS 1. サーバーを借りて 1. サインアップして 2. ミドルウェアを入れて 2. ドキュメント読んで 3. 設定して 3. API 使って 4. 設計して 4. 動作確認する 5. プログラム書いて 6. 展開して 7. 動作確認して 8. 管理する 👤
- 33. Titanium Cloud Services 1. AWS の上で動作 無料枠の範囲内なら間接的に AWS を無料で使っている事に 2. Node.ACS ACS 連携の Node.js アプリをホスティング (PaaS) 3. 全て JavaScript で完結 クライアント側からサーバーサイドまで
- 34. Titanium プラットフォーム ✓ Mobile Alloy MVC Framework ✓ Cloud Services Node.ACS Market place Module, Design
- 35. Open Mobile Marketplace Find Modules and Design parts on official store
- 36. Open Mobile Marketplace 1. 有料・無料のモジュールを掲載 Instagram のようなモジュールや KeyChain モジュールなど 2. デザインパーツ モジュール以外にはデザインパーツも置いてある 3. ライセンス形態は多様 一度取得したら無料のものから、月額払いのものなど
- 37. Titanium プラットフォーム Titanium Studio Ecplise based IDE for Titanium Mobile Titanium CLI Cloud Services Market place Command line tools made by Node.js Alloy MVC Framework Node.ACS Module, Design
- 39. Titanium Studio 1. 開発・デバッグ・転送 Titanium Mobile 開発に必要な要素全部入り 2. Alloy の操作も GUI で モデルの定義やコントローラーの定義も全て GUI 操作可能 3. 強力なコード補完 Titanium API だけでなく、 Alloy や自分で定義した関数も補完
- 40. Titanium CLI 1. プロジェクト作成や転送 コーディングは好きなテキストエディタで OK 2. 他のツールと連携 Grunt や Jasmine などの他のツールと連携しやすい 3. 上級者向け 自力で問題を解決できる上級者向け
- 41. Mobile Cloud Services Market place Alloy MVC Framework Node.ACS Module, Design Titanium Studio / CLI
- 42. Titanium Platform 1. クライアントからサーバまで統合 Titanium Mobile から Titanium Cloud Services まで 2. 豊富な公式開発ツール Eclipse ベースの Studio や Node.js ベースのツール類まで 3. 迷ったらサポート掲示板へ 有志メンバーが頑張ります
- 43. CODESTRONG!