Titaniumスマートフォン推進室→前田洋平                  1
Agenda• Titaniumって…• メリット・デメリット• 開発概要• 屋久島クーポン実装方法• iOS vs Android• まとめ                      2
Titaniumって…              3
Titaniumって…•   Appcelerator 社が作ってます•   最新は2.1 GA(2012/07/30現在)•   開発環境はTitanium Studio(Eclipseが基です)•   JavaScriptで書く•   1つ...
Titanium製アプリ• zaim(Android/iOS)• http://zaim.net/• cybozu live(Android/iOS)• https://live.cybozu.co.jp/• mogosnap(iOS)• ht...
メリット・デメリット             6
メリット•   無料•   比較的書きやすいJavaScriptで書ける•   開発スピードUP(70% faster??)•   GAみたいなのある(使わない方向)•   やっている人が多い(情報が多い)•   iOSで実装できることは大体で...
デメリット• Titaniumが対応していないところはで きない• カスタマイズに限界がある(Tabとか)• イベントが取れない時がある• アプリ動作が遅い(UI/UXに関係)                          8
Titaniumのちょっといい所• PUSHを実装できる、 ACS(Appcelerator Cloud Services)• Facebookの共有実装がすごい簡単(ロ グインとか2行だし)                          ...
できないこと。• 画像処理APIがない• リアルタイムの処理も苦手• 3Dでバリバリ書いたアクションゲーム    とか無理無理(Unityで)•                       10
開発概要       11
Titanium Studio                  12
Titanium Studio• Eclipseを元に作成されたTitanium用  IDE• JS,Python,coffee-script,HTML,CSS,とか  書ける                                  ...
プロジェクト階層構造    Resource: メインのフォルダ    - android : Android用画像フォルダ    - iphone: iPhone(iOS)用画像フォルダ    -app.js : Mainファイル    ti...
app.jsvar win1 = Titanium.UI.createWindow({    title:Tab 1,    backgroundColor:#fff});var tab1 = Titanium.UI.createTab({  ...
app.jsvar win2 = Titanium.UI.createWindow({    title:Tab 2,    backgroundColor:#fff});var tab2 = Titanium.UI.createTab({  ...
app.jsvar tabGroup = Titanium.UI.createTabGroup();tabGroup.addTab(tab1);tabGroup.addTab(tab2);tabGroup.open(); // tab open...
実行結果 - iPhone -                  18
実行結果 - Android -                   19
Androidのエミュレータ   壊れてたorz                 2012/07/30                         20
生姜がないので実機キャプチャー           21
実行結果 - Android -                   22
service shot!                23
service shot!This is Splash Screen...                           23
実装方法       24
開発要点• commonJS• JSS(←いまいち)• 共通Event(FireEvent)• モジュール                       25
commonJS           26
commonJS• Titanium1.8から導入• JSファイルをカプセル化してくれる• JSファイルをクラスライクに使える• export• require                       27
commonJS例            28
cal.jsexports.add = function(val1,val2) {  return val1+val2;}exports.pow = function(val1, val2) {  if(val2 <= 0) {     ret...
commonJS未使用              30
app.jsvar win1 = Ti.createWindow({  title:‘win1’,  backgroundColor:‘gray’});var button = Ti.createButton({   title:‘push m...
commonJS使用             32
win1.jsmodule.exports = function(_title) { var self = Ti.UI.createWindow({ title:_title, backgroundColor:‘gray’});    var ...
app.jsvar Win1 = require(‘win1’);var win1 = new Win1(‘win1’);win1.open();                               34
JSS      35
JSS• JavaScript Style Sheet• Titanium 1.5.1から導入• ロジックとUIを分けることができる• JSS≒CSS• JSファイルと同名のJSSファイルを作成• ただし、不安定。(更新後に毎回project ...
app.jsvar win1 = Ti.createWindow({  title:‘win1’,  backgroundColor:‘gray’});var button1 = Ti.createButton({  title:‘push m...
app.jsvar win1 = Ti.createWindow({  id:‘win1’});var button = Ti.createButton({   id:‘button’});button.addEventListener(‘cl...
app.jss#win1 {  title:‘win1’;  backgoundColor:‘gray’}#button{  title:‘push me’;  width: 200;  height: 50}                 ...
使い辛いし、安定に欠けるので、実際はstyle.jsを作ってやってます。                        40
style.jsexports.module = {home:  {  win:{     title:‘win1’,     backgroundColor:‘red’,  },  btn:{     title:‘posh me’,    ...
app.jsvar style = require(‘style’);var win1 = Ti.createWindow(style.home.win);var button = Ti.createButton(style.home.btn)...
共通Event(fire Event)               43
共通Event• click等のAPIに沿ったイベント以外を発 生、取得するために使用する• 画面を超えたイベントとか                           44
self = Ti.UI.createTabGroup();  self.addEventListener(focus, function(e) {    var win;    self._activeTab = e.tab;    self...
モジュール        46
モジュールとは• Titaniumにネイティブコードを埋め込めるお• Appcelerator のマーケットプレイスからDL  できるお(有料有)• GitHubに落ちてるかも• Objective-C, Javaをゴリゴリ書いてTitaniu...
Titanium Marketplace                       48
モジュールたち•   バーコードリーダー   ・Android Account Manager•   ARマーカー読み取り  •   AdMob Module•   iOS5 Twitter Module•   PayPal Module•  ...
屋久島クーポン実装概要              50
アプリ紹介• 屋久島と奄美諸島で使えるクーポンがたく  さんあるアプリです。• iOS/Android向けに作成• AppBankさんにも紹介してもらいました!• http://www.appbank.net/2012/08/12/  ipho...
開発環境&使用Libs• coffee-script• Guard• underscore.js• iOS5 Twitter module                        52
Coffee-script• http://coffeescript.org/• JSを簡単に書けるようにした• コンパイルすることでJSになる• 一気にナウい感じに                             53
Coffee例JavaScript                   coffeevar foo = function(hoge) {   foo = (hoge = “fuga”) ->  if(!hoge) hoge = “fuga”; ...
Coffee例JavaScriptvar button = Ti.UI.createButton({  title:‘button’,  height:40,  width:200,  top:10});button.addEventListe...
Coffee例coffeebutton = Ti.UI.createButton title:‘button’ height:40 width:200 top:10button.addEventListener ‘click’,(e)-> al...
Coffee 例JavaScriptvar query = {...}var key,value;for(key in query) {  value = query[key];  log(key + “:” + value);}coffeeq...
etc...         58
source    % diet         59
source 30 % diet         59
source 30 % diet         maybe...                59
Guard        60
Guardそれはcoffee-scriptの   コンパイル自動化                         61
guardについて• ruby製• ソースコードを監視し、変更があった 時に所定の処理を走らせてくれる。• ex. テスト、コンパイル etc...                         62
Prj          Guard監視      coffee         Database.coffee   保存   コンパイル         ui            Window1.coffee      Resource  ...
underscore.js                64
underscore.js• JSの便利なUtil集めたライブラリー• http://underscorejs.org/                             65
使用法var _ = require(‘underscore’);var isArray = _.isArray(hoge);                                 66
extendvar foo = { id:2, name:‘範馬勇次郎’};var bar = {   salary:1000,   name:‘範馬刃 ’};var hoge = _.extend(foo,bar);// hoge => {i...
compactvar bar = [0, 1, 2, 3, ‘’, ‘hoge’, null];var hoge = _.compact(bar);// hoge => [1, 2, 3, ‘hoge’]chain/valuevar stoog...
iOS5Twittermodule          69
70
71
tiapp.xml            72
TitaniumAndroid vs iOS                 73
アプリ完成度         74
アプリ完成度         74
実装しやすさ         75
実装しやすさ         75
他。     76
77
77
78
×   78
×ありえませんw          78
Titanium使うべき?                79
Java       80
Java       80
Objective-C              81
Objective-C              81
JavaScript             82
JavaScript             82
Android, iOS両OSに対応したい                83
Android, iOS両OSに対応したい                83
アプリのクオリティをそこまで  重視しない             84
アプリのクオリティをそこまで  重視しない             84
工数が少ない         85
工数が少ない         85
忍耐強い       86
忍耐強い       86
まとめ      87
まとめ• JSでかけます。• TitaniumはiOS向きはすごくいい。• AndroidはiOSの劣化版だと思って• モジュールでネイティブの機能を• ディスってすみません                          88
個人的には、         89
個人的には、 各OSネイティブで作れるべきなら作るべき。               89
個人的には、    各OSネイティブで  作れるべきなら作るべき。サクッと作って見せるプロトタイプ向き                     89
個人的には、     各OSネイティブで   作れるべきなら作るべき。サクッと作って見せるプロトタイプ向きiPhoneは出す、Androidはそのついで ぐらいの気持ちで思っておいて                          89
散々、ディスりましたが。。。 意外と夢も感じています。                 90
http://d.hatena.ne.jp/infosia/20120108/1326002975                                                    91
などなど、モジュールが充実することでTitaniumの夢も広がっていくと思います。                          92
参考         http://es.scribd.com/doc/92404695/Scalin-Titanium-Mobilehttp://www.slideshare.net/appcelerator/wynn-netherland-...
ご清聴ありがとうございました。                  94
Upcoming SlideShare
Loading in …5
×

Titanium勉強会

4,339 views

Published on

Titaniumの簡単な資料です。

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

No Downloads
Views
Total views
4,339
On SlideShare
0
From Embeds
0
Number of Embeds
988
Actions
Shares
0
Downloads
10
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Titanium勉強会

  1. 1. Titaniumスマートフォン推進室→前田洋平 1
  2. 2. Agenda• Titaniumって…• メリット・デメリット• 開発概要• 屋久島クーポン実装方法• iOS vs Android• まとめ 2
  3. 3. Titaniumって… 3
  4. 4. Titaniumって…• Appcelerator 社が作ってます• 最新は2.1 GA(2012/07/30現在)• 開発環境はTitanium Studio(Eclipseが基です)• JavaScriptで書く• 1つのソースでiOS,Android同時に開発可能• ただし、iOS >> Androidの出来具合• Moduleを組み込むと標準で用意されている以上の事ができる(ネ イティブと同じことが出来る)• 無料・開発実績が豊富 4
  5. 5. Titanium製アプリ• zaim(Android/iOS)• http://zaim.net/• cybozu live(Android/iOS)• https://live.cybozu.co.jp/• mogosnap(iOS)• http://mogsnap.jp/ 5
  6. 6. メリット・デメリット 6
  7. 7. メリット• 無料• 比較的書きやすいJavaScriptで書ける• 開発スピードUP(70% faster??)• GAみたいなのある(使わない方向)• やっている人が多い(情報が多い)• iOSで実装できることは大体できる(モジュール込)• 1つのソースでiOS,Android作れる• 1つのソースでiOS,Android作れる!• 1つのソースでiOS,Android作れる!!• 1つのソースでiOS,Android作れる!!! 7
  8. 8. デメリット• Titaniumが対応していないところはで きない• カスタマイズに限界がある(Tabとか)• イベントが取れない時がある• アプリ動作が遅い(UI/UXに関係) 8
  9. 9. Titaniumのちょっといい所• PUSHを実装できる、 ACS(Appcelerator Cloud Services)• Facebookの共有実装がすごい簡単(ロ グインとか2行だし) 9
  10. 10. できないこと。• 画像処理APIがない• リアルタイムの処理も苦手• 3Dでバリバリ書いたアクションゲーム とか無理無理(Unityで)• 10
  11. 11. 開発概要 11
  12. 12. Titanium Studio 12
  13. 13. Titanium Studio• Eclipseを元に作成されたTitanium用 IDE• JS,Python,coffee-script,HTML,CSS,とか 書ける 13
  14. 14. プロジェクト階層構造 Resource: メインのフォルダ - android : Android用画像フォルダ - iphone: iPhone(iOS)用画像フォルダ -app.js : Mainファイル tiapp.xml:Titanium設定ファイル 14
  15. 15. app.jsvar win1 = Titanium.UI.createWindow({ title:Tab 1, backgroundColor:#fff});var tab1 = Titanium.UI.createTab({ icon:KS_nav_views.png, // image title:Tab 1, window:win1});var label1 = Titanium.UI.createLabel({ color:#999, text:I am Window 1, font:{fontSize:20,fontFamily:Helvetica Neue}, textAlign:center, width:auto});win1.add(label1); 15
  16. 16. app.jsvar win2 = Titanium.UI.createWindow({ title:Tab 2, backgroundColor:#fff});var tab2 = Titanium.UI.createTab({ icon:KS_nav_ui.png, // image title:Tab 2, window:win2});var label2 = Titanium.UI.createLabel({ color:#999, text:I am Window 2, font:{fontSize:20,fontFamily:Helvetica Neue}, textAlign:center, width:auto});win2.add(label2); 16
  17. 17. app.jsvar tabGroup = Titanium.UI.createTabGroup();tabGroup.addTab(tab1);tabGroup.addTab(tab2);tabGroup.open(); // tab open 17
  18. 18. 実行結果 - iPhone - 18
  19. 19. 実行結果 - Android - 19
  20. 20. Androidのエミュレータ 壊れてたorz 2012/07/30 20
  21. 21. 生姜がないので実機キャプチャー 21
  22. 22. 実行結果 - Android - 22
  23. 23. service shot! 23
  24. 24. service shot!This is Splash Screen... 23
  25. 25. 実装方法 24
  26. 26. 開発要点• commonJS• JSS(←いまいち)• 共通Event(FireEvent)• モジュール 25
  27. 27. commonJS 26
  28. 28. commonJS• Titanium1.8から導入• JSファイルをカプセル化してくれる• JSファイルをクラスライクに使える• export• require 27
  29. 29. commonJS例 28
  30. 30. cal.jsexports.add = function(val1,val2) { return val1+val2;}exports.pow = function(val1, val2) { if(val2 <= 0) { return 1; } for(var i=0;i<val2;i++) { val1 *= val1; } return val1;}answer.jsvar cal = require(‘cal’);Ti.API.info(cal.add(1,3)); // 4Ti.API.info(cal.pow(2,2)); // 4 29
  31. 31. commonJS未使用 30
  32. 32. app.jsvar win1 = Ti.createWindow({ title:‘win1’, backgroundColor:‘gray’});var button = Ti.createButton({ title:‘push me’, width:200, height:50,});button.addEventListener(‘click’,function(e) { alert(‘button pushed’);});win1.add(button);win1.open(); 31
  33. 33. commonJS使用 32
  34. 34. win1.jsmodule.exports = function(_title) { var self = Ti.UI.createWindow({ title:_title, backgroundColor:‘gray’}); var button = Ti.createButton({ title:‘push me’, width:200, height:50,}); button.addEventListener(‘click’,function(e) { alert(‘button pushed’); }); self.add(button); return self;} 33
  35. 35. app.jsvar Win1 = require(‘win1’);var win1 = new Win1(‘win1’);win1.open(); 34
  36. 36. JSS 35
  37. 37. JSS• JavaScript Style Sheet• Titanium 1.5.1から導入• ロジックとUIを分けることができる• JSS≒CSS• JSファイルと同名のJSSファイルを作成• ただし、不安定。(更新後に毎回project clean が必要) 36
  38. 38. app.jsvar win1 = Ti.createWindow({ title:‘win1’, backgroundColor:‘gray’});var button1 = Ti.createButton({ title:‘push me’, width:200, height:50,});var button2 = Ti.createButton({});win1.add(button);win1.open(); 37
  39. 39. app.jsvar win1 = Ti.createWindow({ id:‘win1’});var button = Ti.createButton({ id:‘button’});button.addEventListener(‘click’,function(e) { alert(‘button pushed’);});win1.add(button);win1.open(); 38
  40. 40. app.jss#win1 { title:‘win1’; backgoundColor:‘gray’}#button{ title:‘push me’; width: 200; height: 50} 39
  41. 41. 使い辛いし、安定に欠けるので、実際はstyle.jsを作ってやってます。 40
  42. 42. style.jsexports.module = {home: { win:{ title:‘win1’, backgroundColor:‘red’, }, btn:{ title:‘posh me’, width:200, height:50 }, win2:{ ... }, ...} 41
  43. 43. app.jsvar style = require(‘style’);var win1 = Ti.createWindow(style.home.win);var button = Ti.createButton(style.home.btn);button.addEventListener(‘click’,function(e) { alert(‘button pushed’);});win1.add(button);win1.open(); 42
  44. 44. 共通Event(fire Event) 43
  45. 45. 共通Event• click等のAPIに沿ったイベント以外を発 生、取得するために使用する• 画面を超えたイベントとか 44
  46. 46. self = Ti.UI.createTabGroup(); self.addEventListener(focus, function(e) { var win; self._activeTab = e.tab; self._activeTabIndex = e.index; if (self._activeTabIndex === -1) { return; } Ti.API._activeTab = self._activeTab; if (_u.isAndroid()) { Ti.App.fireEvent(self._activeTab.tag + ":load"); win = self._activeTab.window; return win.fireEvent(focus); } });Ti.App.addEventListener(home:load, function(e) { if (reload) { reload = false; return loadData(self, tableView, null); } 45
  47. 47. モジュール 46
  48. 48. モジュールとは• Titaniumにネイティブコードを埋め込めるお• Appcelerator のマーケットプレイスからDL できるお(有料有)• GitHubに落ちてるかも• Objective-C, Javaをゴリゴリ書いてTitanium とのアダプターもゴリゴリ書く 47
  49. 49. Titanium Marketplace 48
  50. 50. モジュールたち• バーコードリーダー   ・Android Account Manager• ARマーカー読み取り  • AdMob Module• iOS5 Twitter Module• PayPal Module• Google Analytics• Box 2D• https://docs.google.com/spreadsheet/ccc?key=0Ap-hrxnRI5kpdHctX3NkTFdSSVVzSkRzc3Q3bDVNbEE&authkey=CKD1-coF&hl=en_US&authkey=CKD1-coF#gid=0Ap 49
  51. 51. 屋久島クーポン実装概要 50
  52. 52. アプリ紹介• 屋久島と奄美諸島で使えるクーポンがたく さんあるアプリです。• iOS/Android向けに作成• AppBankさんにも紹介してもらいました!• http://www.appbank.net/2012/08/12/ iphone-application/450291.php 51
  53. 53. 開発環境&使用Libs• coffee-script• Guard• underscore.js• iOS5 Twitter module 52
  54. 54. Coffee-script• http://coffeescript.org/• JSを簡単に書けるようにした• コンパイルすることでJSになる• 一気にナウい感じに 53
  55. 55. Coffee例JavaScript coffeevar foo = function(hoge) { foo = (hoge = “fuga”) -> if(!hoge) hoge = “fuga”; log hoge log(hoge);} 54
  56. 56. Coffee例JavaScriptvar button = Ti.UI.createButton({ title:‘button’, height:40, width:200, top:10});button.addEventListener(‘click’, function(e) { alert(‘hoge’);}); 55
  57. 57. Coffee例coffeebutton = Ti.UI.createButton title:‘button’ height:40 width:200 top:10button.addEventListener ‘click’,(e)-> alert ‘hoge’ 56
  58. 58. Coffee 例JavaScriptvar query = {...}var key,value;for(key in query) { value = query[key]; log(key + “:” + value);}coffeequery = {...}for key,value of query log “#{key}:#{value}” 57
  59. 59. etc... 58
  60. 60. source % diet 59
  61. 61. source 30 % diet 59
  62. 62. source 30 % diet maybe... 59
  63. 63. Guard 60
  64. 64. Guardそれはcoffee-scriptの コンパイル自動化 61
  65. 65. guardについて• ruby製• ソースコードを監視し、変更があった 時に所定の処理を走らせてくれる。• ex. テスト、コンパイル etc... 62
  66. 66. Prj Guard監視 coffee Database.coffee 保存 コンパイル ui Window1.coffee Resource Database.js ui 同階層 Window1.js 同階層で作られる 63
  67. 67. underscore.js 64
  68. 68. underscore.js• JSの便利なUtil集めたライブラリー• http://underscorejs.org/ 65
  69. 69. 使用法var _ = require(‘underscore’);var isArray = _.isArray(hoge); 66
  70. 70. extendvar foo = { id:2, name:‘範馬勇次郎’};var bar = { salary:1000, name:‘範馬刃 ’};var hoge = _.extend(foo,bar);// hoge => {id:2,name:‘範馬刃 ’,salary:1000}// foo => {id:2,name:‘範馬刃 ’,salary:1000}// bar => {salary:1000,name:‘範馬刃 ’} 67
  71. 71. compactvar bar = [0, 1, 2, 3, ‘’, ‘hoge’, null];var hoge = _.compact(bar);// hoge => [1, 2, 3, ‘hoge’]chain/valuevar stooges = [{name : curly, age : 25}, {name : moe, age : 21},{name : larry, age : 23}];var youngest = _.chain(stooges) .sortBy(function(stooge){ return stooge.age; }) .map(function(stooge){ return stooge.name + is + stooge.age; }) .first() .value();// youngest => “moe is 21” 68
  72. 72. iOS5Twittermodule 69
  73. 73. 70
  74. 74. 71
  75. 75. tiapp.xml 72
  76. 76. TitaniumAndroid vs iOS 73
  77. 77. アプリ完成度 74
  78. 78. アプリ完成度 74
  79. 79. 実装しやすさ 75
  80. 80. 実装しやすさ 75
  81. 81. 他。 76
  82. 82. 77
  83. 83. 77
  84. 84. 78
  85. 85. × 78
  86. 86. ×ありえませんw 78
  87. 87. Titanium使うべき? 79
  88. 88. Java 80
  89. 89. Java 80
  90. 90. Objective-C 81
  91. 91. Objective-C 81
  92. 92. JavaScript 82
  93. 93. JavaScript 82
  94. 94. Android, iOS両OSに対応したい 83
  95. 95. Android, iOS両OSに対応したい 83
  96. 96. アプリのクオリティをそこまで 重視しない 84
  97. 97. アプリのクオリティをそこまで 重視しない 84
  98. 98. 工数が少ない 85
  99. 99. 工数が少ない 85
  100. 100. 忍耐強い 86
  101. 101. 忍耐強い 86
  102. 102. まとめ 87
  103. 103. まとめ• JSでかけます。• TitaniumはiOS向きはすごくいい。• AndroidはiOSの劣化版だと思って• モジュールでネイティブの機能を• ディスってすみません 88
  104. 104. 個人的には、 89
  105. 105. 個人的には、 各OSネイティブで作れるべきなら作るべき。 89
  106. 106. 個人的には、 各OSネイティブで 作れるべきなら作るべき。サクッと作って見せるプロトタイプ向き 89
  107. 107. 個人的には、 各OSネイティブで 作れるべきなら作るべき。サクッと作って見せるプロトタイプ向きiPhoneは出す、Androidはそのついで ぐらいの気持ちで思っておいて 89
  108. 108. 散々、ディスりましたが。。。 意外と夢も感じています。 90
  109. 109. http://d.hatena.ne.jp/infosia/20120108/1326002975 91
  110. 110. などなど、モジュールが充実することでTitaniumの夢も広がっていくと思います。 92
  111. 111. 参考 http://es.scribd.com/doc/92404695/Scalin-Titanium-Mobilehttp://www.slideshare.net/appcelerator/wynn-netherland-accelerating-titanium- development-with-coffeescript-compass-and-sass 93
  112. 112. ご清聴ありがとうございました。 94

×