More Related Content
Similar to Titanium勉強会 (20)
Titanium勉強会
- 4. Titaniumって…
• Appcelerator 社が作ってます
• 最新は2.1 GA(2012/07/30現在)
• 開発環境はTitanium Studio(Eclipseが基です)
• JavaScriptで書く
• 1つのソースでiOS,Android同時に開発可能
• ただし、iOS >> Androidの出来具合
• Moduleを組み込むと標準で用意されている以上の事ができる(ネ
イティブと同じことが出来る)
• 無料・開発実績が豊富
4
- 7. メリット
• 無料
• 比較的書きやすいJavaScriptで書ける
• 開発スピードUP(70% faster??)
• GAみたいなのある(使わない方向)
• やっている人が多い(情報が多い)
• iOSで実装できることは大体できる(モジュール込)
• 1つのソースでiOS,Android作れる
• 1つのソースでiOS,Android作れる!
• 1つのソースでiOS,Android作れる!!
• 1つのソースでiOS,Android作れる!!!
7
- 14. プロジェクト階層構造
Resource: メインのフォルダ
- android : Android用画像フォルダ
- iphone: iPhone(iOS)用画像フォルダ
-app.js : Mainファイル
tiapp.xml:Titanium設定ファイル
14
- 15. app.js
var 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. app.js
var 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. app.js
var tabGroup = Titanium.UI.createTabGroup();
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.open(); // tab open
17
- 30. cal.js
exports.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.js
var cal = require(‘cal’);
Ti.API.info(cal.add(1,3)); // 4
Ti.API.info(cal.pow(2,2)); // 4
29
- 32. app.js
var 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
- 34. win1.js
module.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
- 37. JSS
• JavaScript Style Sheet
• Titanium 1.5.1から導入
• ロジックとUIを分けることができる
• JSS≒CSS
• JSファイルと同名のJSSファイルを作成
• ただし、不安定。(更新後に毎回project clean
が必要)
36
- 38. app.js
var 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. app.js
var 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. app.jss
#win1 {
title:‘win1’;
backgoundColor:‘gray’
}
#button{
title:‘push me’;
width: 200;
height: 50
}
39
- 43. app.js
var 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
- 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
- 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
- 52. アプリ紹介
• 屋久島と奄美諸島で使えるクーポンがたく
さんあるアプリです。
• iOS/Android向けに作成
• AppBankさんにも紹介してもらいました!
• http://www.appbank.net/2012/08/12/
iphone-application/450291.php
51
- 55. Coffee例
JavaScript coffee
var foo = function(hoge) { foo = (hoge = “fuga”) ->
if(!hoge) hoge = “fuga”; log hoge
log(hoge);
}
54
- 56. Coffee例
JavaScript
var button = Ti.UI.createButton({
title:‘button’,
height:40,
width:200,
top:10
});
button.addEventListener(‘click’, function(e) {
alert(‘hoge’);
});
55
- 58. Coffee 例
JavaScript
var query = {...}
var key,value;
for(key in query) {
value = query[key];
log(key + “:” + value);
}
coffee
query = {...}
for key,value of query
log “#{key}:#{value}”
57
- 66. Prj
Guard監視
coffee
Database.coffee 保存 コンパイル
ui
Window1.coffee
Resource
Database.js
ui 同階層
Window1.js
同階層で作られる
63
- 69. 使用法
var _ = require(‘underscore’);
var isArray = _.isArray(hoge);
66
- 70. extend
var 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. compact
var bar = [0, 1, 2, 3, ‘’, ‘hoge’, null];
var hoge = _.compact(bar);
// hoge => [1, 2, 3, ‘hoge’]
chain/value
var 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
- 106. 個人的には、
各OSネイティブで
作れるべきなら作るべき。
サクッと作って見せるプロトタイプ向き
89
- 107. 個人的には、
各OSネイティブで
作れるべきなら作るべき。
サクッと作って見せるプロトタイプ向き
iPhoneは出す、Androidはそのついで
ぐらいの気持ちで思っておいて
89
- 111. 参考
http://es.scribd.com/doc/92404695/Scalin-Titanium-Mobile
http://www.slideshare.net/appcelerator/wynn-netherland-accelerating-titanium-
development-with-coffeescript-compass-and-sass
93