Titanium もくもく会 Tokyo #7
サーセンLT とは Long Talk のことであるLT means Long Talk
宮下 竜大郎 @ryugoo_Web * Developer Titanium Certified App Developer Titanium Certified Mobile Developer Titanium ユーザー会 書記http:...
何故、今ここでもう一度初めての Titanium なのか
Titanium に関する誤解増加中
HTML / CSS / JS でアプリを作るTitanium is not PhoneGap, Sencha Touch !
Objective-C / Java に変換されるTitanium is not “Meta programming language” !
Titanium 1.x 時代に見限っちゃったTitanium Developer, Studio, Performance, Android, JavaScript…
安定しないプラクティスTi.include / CommonJS Modules / Alloy … Enough Already !
競合も増えた!PhoneGap, Sencha Touch, RubyMotion, MobiRuby, Xamarin…
あっ、このままじゃあかん…Oh…
もう一度 Titanium を整理しようAdjust “Titanium” again
Titanium プラットフォーム    Mobile            Cloud Services   Market placeAlloy MVC Framework       Node.ACS      Module, Design
Titanium MobileBuilt native apps from JavaScript
                                  JavaScript        Single Code Base    
Titanium Apps                            Native Apps               Titanium APIJavaScript                              ...
Titanium Apps                            Native Apps               Titanium APIJavaScript                              ...
JavaScript with Titanium API= Titanium ClassicRaw Titanium API + CommonJS Modules + Native Modules
// UIvar win = Ti.UI.createWindow({  backgroundColor: "#FFFFFF"});var label = Ti.UI.createLabel({  text: "Hello, Titanium!...
Titanium Classic1. シンプル  API 叩くだけ    大規模になってきたら…?2. 全て JavaScript  ビューもロジックもデータベースも全部 JS を書いて操作3. まずはここから  千里の Titanium も ...
AlloyTitanium MVC Framework
Titanium Apps                            Native Apps               Titanium APIJavaScript                              ...
Titanium Apps                            Native Apps             Titanium API                                     XMLSt...
Model                            JavaScriptController    View                    XML + StyleSheet= Alloy MVC FrameworkBack...
// View (index.xml)<Alloy>  <Window id="index">    <Label id="lbl">Hello, Titanium!</Label>  </Window></Alloy>// StyleShee...
// Create Model (Rails like)$ alloy generate model todo sql task:string done:boolean// Use Model (in Controller)var todo =...
Alloy MVC Framework1. 分かりやすい構造  ビュー、ロジック、コントローラ、データベースが綺麗に分離する2. 大規模開発も安心  Convention over Configuration で規約に従った開発3. Titan...
Titanium プラットフォーム     ✓    MobileAlloy MVC Framework                      Cloud Services                          Node.ACS...
Titanium Cloud ServicesMBaaS - Mobile Backend as a Service
Titanium Cloud Services1. サーバサイド機能を提供  API 叩くだけ, Titanium / iOS / Android / JS / REST2. 広い無料枠  500 万 API コール, 500 万 Push 通...
Backend as a Service☁              IaaS / VPS      BaaS            1. サーバーを借りて     1. サインアップして                   2. ミド...
Titanium Cloud Services1. AWS の上で動作  無料枠の範囲内なら間接的に AWS を無料で使っている事に2. Node.ACS  ACS 連携の Node.js アプリをホスティング (PaaS)3. 全て Java...
Titanium プラットフォーム     ✓    MobileAlloy MVC Framework                          ✓                      Cloud Services       ...
Open Mobile MarketplaceFind Modules and Design parts on official store
Open Mobile Marketplace1. 有料・無料のモジュールを掲載  Instagram のようなモジュールや KeyChain モジュールなど2. デザインパーツ  モジュール以外にはデザインパーツも置いてある3. ライセンス形...
Titanium プラットフォーム                       Titanium Studio                       Ecplise based IDE for Titanium    Mobile    ...
Titanium Studio1. 開発・デバッグ・転送  Titanium Mobile 開発に必要な要素全部入り2. Alloy の操作も GUI で  モデルの定義やコントローラーの定義も全て GUI 操作可能3. 強力なコード補完  T...
Titanium CLI1. プロジェクト作成や転送  コーディングは好きなテキストエディタで OK2. 他のツールと連携  Grunt や Jasmine などの他のツールと連携しやすい3. 上級者向け  自力で問題を解決できる上級者向け
Mobile            Cloud Services   Market placeAlloy MVC Framework       Node.ACS       Module, Design                    ...
Titanium Platform1. クライアントからサーバまで統合 Titanium Mobile から Titanium Cloud Services まで2. 豊富な公式開発ツール Eclipse ベースの Studio や Node....
CODESTRONG!
今ここでもう一度初めての Titanium
今ここでもう一度初めての Titanium
Upcoming SlideShare
Loading in …5
×

今ここでもう一度初めての Titanium

8,701 views

Published on

Titanium もくもく会 Tokyo #7

Published in: Technology
0 Comments
26 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,701
On SlideShare
0
From Embeds
0
Number of Embeds
641
Actions
Shares
0
Downloads
29
Comments
0
Likes
26
Embeds 0
No embeds

No notes for slide

今ここでもう一度初めての Titanium

  1. 1. Titanium もくもく会 Tokyo #7
  2. 2. サーセンLT とは Long Talk のことであるLT means Long Talk
  3. 3. 宮下 竜大郎 @ryugoo_Web * Developer Titanium Certified App Developer Titanium Certified Mobile Developer Titanium ユーザー会 書記http://imthinker.net/ http://cocohere.com/ 
  4. 4. 何故、今ここでもう一度初めての Titanium なのか
  5. 5. Titanium に関する誤解増加中
  6. 6. HTML / CSS / JS でアプリを作るTitanium is not PhoneGap, Sencha Touch !
  7. 7. Objective-C / Java に変換されるTitanium is not “Meta programming language” !
  8. 8. Titanium 1.x 時代に見限っちゃったTitanium Developer, Studio, Performance, Android, JavaScript…
  9. 9. 安定しないプラクティスTi.include / CommonJS Modules / Alloy … Enough Already !
  10. 10. 競合も増えた!PhoneGap, Sencha Touch, RubyMotion, MobiRuby, Xamarin…
  11. 11. あっ、このままじゃあかん…Oh…
  12. 12. もう一度 Titanium を整理しようAdjust “Titanium” again
  13. 13. Titanium プラットフォーム Mobile Cloud Services Market placeAlloy MVC Framework Node.ACS Module, Design
  14. 14. Titanium MobileBuilt native apps from JavaScript
  15. 15.   JavaScript Single Code Base 
  16. 16. Titanium Apps Native Apps Titanium APIJavaScript  + JS Engine  Bridge API
  17. 17. Titanium Apps Native Apps Titanium APIJavaScript  + JS Engine  Bridge API
  18. 18. JavaScript with Titanium API= Titanium ClassicRaw Titanium API + CommonJS Modules + Native Modules
  19. 19. // UIvar win = Ti.UI.createWindow({ backgroundColor: "#FFFFFF"});var label = Ti.UI.createLabel({ text: "Hello, Titanium!"});// Logiclabel.addEventListener("click", function () { alert("You clicked label!");});// Presentationwin.add(label);win.open();
  20. 20. Titanium Classic1. シンプル API 叩くだけ 大規模になってきたら…?2. 全て JavaScript ビューもロジックもデータベースも全部 JS を書いて操作3. まずはここから 千里の Titanium も Classic より始まる
  21. 21. AlloyTitanium MVC Framework
  22. 22. Titanium Apps Native Apps Titanium APIJavaScript  + JS Engine  Bridge API
  23. 23. Titanium Apps Native Apps Titanium API XMLStyleSheet + JS Engine JavaScript Bridge API
  24. 24. Model JavaScriptController View XML + StyleSheet= Alloy MVC FrameworkBackbone.js based Model, Controller and XML based UI with StyleSheet system
  25. 25. // 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();
  26. 26. // 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">
  27. 27. Alloy MVC Framework1. 分かりやすい構造 ビュー、ロジック、コントローラ、データベースが綺麗に分離する2. 大規模開発も安心 Convention over Configuration で規約に従った開発3. Titanium Classic を覚えてから まずは Titanium API で何ができるかを頭に入れると効果的
  28. 28. Titanium プラットフォーム ✓ MobileAlloy MVC Framework Cloud Services Node.ACS Market place Module, Design
  29. 29. Titanium Cloud ServicesMBaaS - Mobile Backend as a Service
  30. 30. Titanium Cloud Services1. サーバサイド機能を提供 API 叩くだけ, Titanium / iOS / Android / JS / REST2. 広い無料枠 500 万 API コール, 500 万 Push 通知, 20GB ストレージ3. Ti Mobile とシームレスに連携 Titanium Mobile 用のモジュール有
  31. 31. Backend as a Service☁ IaaS / VPS BaaS   1. サーバーを借りて 1. サインアップして   2. ミドルウェアを入れて 2. ドキュメント読んで  3. 設定して 3. API 使って  4. 設計して 4. 動作確認する   5. プログラム書いて 6. 展開して 7. 動作確認して 8. 管理する 👤
  32. 32. Titanium Cloud Services1. AWS の上で動作 無料枠の範囲内なら間接的に AWS を無料で使っている事に2. Node.ACS ACS 連携の Node.js アプリをホスティング (PaaS)3. 全て JavaScript で完結 クライアント側からサーバーサイドまで
  33. 33. Titanium プラットフォーム ✓ MobileAlloy MVC Framework ✓ Cloud Services Node.ACS Market place Module, Design
  34. 34. Open Mobile MarketplaceFind Modules and Design parts on official store
  35. 35. Open Mobile Marketplace1. 有料・無料のモジュールを掲載 Instagram のようなモジュールや KeyChain モジュールなど2. デザインパーツ モジュール以外にはデザインパーツも置いてある3. ライセンス形態は多様 一度取得したら無料のものから、月額払いのものなど
  36. 36. Titanium プラットフォーム Titanium Studio Ecplise based IDE for Titanium Mobile Titanium CLI Cloud Services Market place Command line tools made by Node.jsAlloy MVC Framework Node.ACS Module, Design
  37. 37. Titanium Studio1. 開発・デバッグ・転送 Titanium Mobile 開発に必要な要素全部入り2. Alloy の操作も GUI で モデルの定義やコントローラーの定義も全て GUI 操作可能3. 強力なコード補完 Titanium API だけでなく、 Alloy や自分で定義した関数も補完
  38. 38. Titanium CLI1. プロジェクト作成や転送 コーディングは好きなテキストエディタで OK2. 他のツールと連携 Grunt や Jasmine などの他のツールと連携しやすい3. 上級者向け 自力で問題を解決できる上級者向け
  39. 39. Mobile Cloud Services Market placeAlloy MVC Framework Node.ACS Module, Design Titanium Studio / CLI
  40. 40. Titanium Platform1. クライアントからサーバまで統合 Titanium Mobile から Titanium Cloud Services まで2. 豊富な公式開発ツール Eclipse ベースの Studio や Node.js ベースのツール類まで3. 迷ったらサポート掲示板へ 有志メンバーが頑張ります
  41. 41. CODESTRONG!

×