Titanium もくもく会 Tokyo #7
サーセン



LT とは Long Talk のことである
LT means Long Talk
宮下 竜大郎 @ryugoo_

Web * Developer 
Titanium Certified App Developer 
Titanium Certified Mobile Developer 
Titanium ユーザー会 書記

http://imthinker.net/ 
http://cocohere.com/ 
何故、今ここでもう一度
初めての 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 place
Alloy MVC Framework       Node.ACS      Module, Design
Titanium Mobile
Built native apps from JavaScript

                          
        JavaScript
        Single Code Base



    
Titanium Apps                            Native Apps


               Titanium API


JavaScript                             
                       +
                   JS Engine
                                        
                               Bridge API
Titanium Apps                            Native Apps


               Titanium API


JavaScript                             
                       +
                   JS Engine
                                        
                               Bridge API
JavaScript with Titanium API
= Titanium Classic
Raw Titanium API + CommonJS Modules + Native Modules
// 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();
Titanium Classic
1. シンプル
  API 叩くだけ
    大規模になってきたら…?
2. 全て JavaScript
  ビューもロジックもデータベースも全部 JS を書いて操作


3. まずはここから
  千里の Titanium も Classic より始まる
Alloy
Titanium MVC Framework
Titanium Apps                            Native Apps


               Titanium API


JavaScript                             
                       +
                   JS Engine
                                        
                               Bridge API
Titanium Apps                            Native Apps


             Titanium API

                                     
XML
StyleSheet
                     +
                 JS Engine
                                      
JavaScript
                             Bridge API
Model
                            JavaScript
Controller
    View                    XML + StyleSheet
= Alloy MVC Framework
Backbone.js based Model, Controller and XML based UI with StyleSheet system
// 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();
// 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">
Alloy MVC Framework
1. 分かりやすい構造
  ビュー、ロジック、コントローラ、データベースが綺麗に分離する

2. 大規模開発も安心
  Convention over Configuration で規約に従った開発

3. Titanium Classic を覚えてから
  まずは Titanium API で何ができるかを頭に入れると効果的
Titanium プラットフォーム




     ✓
    Mobile
Alloy MVC Framework
                      Cloud Services
                          Node.ACS
                                       Market place
                                        Module, Design
Titanium Cloud Services
MBaaS - Mobile Backend as a Service
Titanium Cloud Services
1. サーバサイド機能を提供
  API 叩くだけ, Titanium / iOS / Android / JS / REST

2. 広い無料枠
  500 万 API コール, 500 万 Push 通知, 20GB ストレージ

3. Ti Mobile とシームレスに連携
  Titanium Mobile 用のモジュール有
Backend as a Service




☁
              IaaS / VPS      BaaS
            1. サーバーを借りて     1. サインアップして

     
              2. ミドルウェアを入れて   2. ドキュメント読んで

             3. 設定して         3. API 使って

   
              4. 設計して         4. 動作確認する

  
              5. プログラム書いて
              6. 展開して
              7. 動作確認して
              8. 管理する
     👤
Titanium Cloud Services
1. AWS の上で動作
  無料枠の範囲内なら間接的に AWS を無料で使っている事に

2. Node.ACS
  ACS 連携の Node.js アプリをホスティング (PaaS)

3. 全て JavaScript で完結
  クライアント側からサーバーサイドまで
Titanium プラットフォーム




     ✓
    Mobile
Alloy MVC Framework
                          ✓
                      Cloud Services
                          Node.ACS
                                       Market place
                                        Module, Design
Open Mobile Marketplace
Find Modules and Design parts on official store
Open Mobile Marketplace
1. 有料・無料のモジュールを掲載
  Instagram のようなモジュールや KeyChain モジュールなど

2. デザインパーツ
  モジュール以外にはデザインパーツも置いてある


3. ライセンス形態は多様
  一度取得したら無料のものから、月額払いのものなど
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
Titanium Studio
1. 開発・デバッグ・転送
  Titanium Mobile 開発に必要な要素全部入り

2. Alloy の操作も GUI で
  モデルの定義やコントローラーの定義も全て GUI 操作可能


3. 強力なコード補完
  Titanium API だけでなく、 Alloy や自分で定義した関数も補完
Titanium CLI
1. プロジェクト作成や転送
  コーディングは好きなテキストエディタで OK

2. 他のツールと連携
  Grunt や Jasmine などの他のツールと連携しやすい

3. 上級者向け
  自力で問題を解決できる上級者向け
Mobile            Cloud Services   Market place
Alloy MVC Framework       Node.ACS       Module, Design



                        Titanium Studio / CLI
Titanium Platform
1. クライアントからサーバまで統合
 Titanium Mobile から Titanium Cloud Services まで

2. 豊富な公式開発ツール
 Eclipse ベースの Studio や Node.js ベースのツール類まで

3. 迷ったらサポート掲示板へ
 有志メンバーが頑張ります
CODESTRONG!

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

  • 1.
  • 2.
    サーセン LT とは LongTalk のことである LT means Long Talk
  • 3.
    宮下 竜大郎 @ryugoo_ Web* Developer  Titanium Certified App Developer  Titanium Certified Mobile Developer  Titanium ユーザー会 書記 http://imthinker.net/  http://cocohere.com/ 
  • 4.
  • 5.
  • 6.
    HTML / CSS/ JS でアプリを作る Titanium is not PhoneGap, Sencha Touch !
  • 7.
    Objective-C / Javaに変換される Titanium is not “Meta programming language” !
  • 8.
    Titanium 1.x 時代に見限っちゃった TitaniumDeveloper, Studio, Performance, Android, JavaScript…
  • 9.
    安定しないプラクティス Ti.include / CommonJSModules / Alloy … Enough Already !
  • 10.
    競合も増えた! PhoneGap, Sencha Touch,RubyMotion, MobiRuby, Xamarin…
  • 11.
  • 12.
  • 14.
    Titanium プラットフォーム Mobile Cloud Services Market place Alloy MVC Framework Node.ACS Module, Design
  • 15.
    Titanium Mobile Built nativeapps 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 TitaniumAPI = 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 より始まる
  • 22.
  • 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 aService ☁ 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 FindModules 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.