Titanium勉強会

Titanium
スマートフォン推進室→前田洋平

1

Agenda
• Titaniumって…

• メリット・デメリット

• 開発概要

• 屋久島クーポン実装方法

• iOS vs Android
• まとめ

2

Titaniumって…

3

Titaniumって…
• Appcelerator 社が作ってます

• 最新は2.1 GA(2012/07/30現在)

• 開発環境はTitanium Studio(Eclipseが基です)

• JavaScriptで書く

• 1つのソースでiOS,Android同時に開発可能

• ただし、iOS >> Androidの出来具合

• Moduleを組み込むと標準で用意されている以上の事ができる(ネ
イティブと同じことが出来る）

• 無料・開発実績が豊富

4

Titanium製アプリ

• zaim(Android/iOS)
• http://zaim.net/
• cybozu live(Android/iOS)
• https://live.cybozu.co.jp/
• mogosnap(iOS)
• http://mogsnap.jp/

5

メリット・デメリット

6

メリット
• 無料

• 比較的書きやすいJavaScriptで書ける

• 開発スピードUP（70% faster??）

• GAみたいなのある(使わない方向)

• やっている人が多い（情報が多い）

• iOSで実装できることは大体できる（モジュール込）

• 1つのソースでiOS,Android作れる

• 1つのソースでiOS,Android作れる！

• 1つのソースでiOS,Android作れる！！

• 1つのソースでiOS,Android作れる！！！

7

デメリット

• Titaniumが対応していないところはで
きない

• カスタマイズに限界がある(Tabとか)

• イベントが取れない時がある

• アプリ動作が遅い（UI/UXに関係）

8

Titaniumのちょっといい所

• PUSHを実装できる、
ACS（Appcelerator Cloud Services）

• Facebookの共有実装がすごい簡単（ロ
グインとか２行だし）

9

できないこと。

• 画像処理APIがない

• リアルタイムの処理も苦手

• ３Dでバリバリ書いたアクションゲーム
とか無理無理(Unityで)

•

10

Titanium Studio

• Eclipseを元に作成されたTitanium用
IDE
• JS,Python,coffee-script,HTML,CSS,とか
書ける

13

プロジェクト階層構造
Resource: メインのフォルダ
- android : Android用画像フォルダ
- iphone: iPhone(iOS)用画像フォルダ
-app.js : Mainファイル
tiapp.xml:Titanium設定ファイル

14

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

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

app.js

var tabGroup = Titanium.UI.createTabGroup();

tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

tabGroup.open(); // tab open

17

実行結果 - iPhone -

18

実行結果 - Android -

19

Androidのエミュレータ
壊れてたorz

2012/07/30
20

生姜がないので
実機キャプチャー

21

実行結果 - Android -

22

service shot!

This is Splash Screen...

23

開発要点

• commonJS
• JSS(←いまいち)

• 共通Event(FireEvent)

• モジュール

25

commonJS

• Titanium1.8から導入

• JSファイルをカプセル化してくれる

• JSファイルをクラスライクに使える

• export
• require

27

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

commonJS未使用

30

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

win1.js
module.exports = function(_title) {
var self = Ti.UI.createWindow({
title:_title,

width:200,
height:50,});
});
self.add(button);
return self;
}

33

app.js
var Win1 = require(‘win1’);
var win1 = new Win1(‘win1’);

win1.open();

34

JSS
• JavaScript Style Sheet
• Titanium 1.5.1から導入

• ロジックとUIを分けることができる

• JSS≒CSS
• JSファイルと同名のJSSファイルを作成

• ただし、不安定。（更新後に毎回project clean
が必要）

36

app.js

title:‘win1’,

var button1 = Ti.createButton({
width:200,
height:50,});
var button2 = Ti.createButton({

});
win1.add(button);
win1.open();

37

app.js

id:‘win1’});

id:‘button’});
});

win1.add(button);
win1.open();

38

app.jss

#win1 {
title:‘win1’;
backgoundColor:‘gray’
}

#button{
title:‘push me’;
width: 200;
height: 50
}

39

使い辛いし、安定に欠けるので、
実際はstyle.jsを作ってやってます。

40

style.js
exports.module = {
home:
{
win:{
title:‘win1’,
backgroundColor:‘red’,
},
btn:{
title:‘posh me’,
width:200, height:50
},
win2:{
...
}, ...
}

41

app.js
var style = require(‘style’);
var win1 = Ti.createWindow(style.home.win);

var button = Ti.createButton(style.home.btn);
});

win1.add(button);
win1.open();

42

共通Event
(fire Event)

43

共通Event

• click等のAPIに沿ったイベント以外を発
生、取得するために使用する

• 画面を超えたイベントとか

44

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

モジュールとは

• Titaniumにネイティブコードを埋め込めるお

• Appcelerator のマーケットプレイスからDL
できるお（有料有）

• GitHubに落ちてるかも

• Objective-C, Javaをゴリゴリ書いてTitanium
とのアダプターもゴリゴリ書く

47

Titanium Marketplace

48

モジュールたち

• バーコードリーダー・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

屋久島クーポン実装概要

50

アプリ紹介

• 屋久島と奄美諸島で使えるクーポンがたく
さんあるアプリです。

• iOS/Android向けに作成

• AppBankさんにも紹介してもらいました！

• http://www.appbank.net/2012/08/12/
iphone-application/450291.php

51

開発環境&使用Libs

• coffee-script
• Guard
• underscore.js
• iOS5 Twitter module

52

Coffee-script

• http://coffeescript.org/
• JSを簡単に書けるようにした

• コンパイルすることでJSになる

• 一気にナウい感じに

53

Coffee例
JavaScript coffee
var foo = function(hoge) { foo = (hoge = “fuga”) ->
if(!hoge) hoge = “fuga”; log hoge
log(hoge);
}

54

Coffee例
JavaScript
var button = Ti.UI.createButton({
title:‘button’,
height:40,
width:200,
top:10
});

button.addEventListener(‘click’, function(e) {
alert(‘hoge’);
});
55

Coffee例
coffee
button = Ti.UI.createButton
title:‘button’
height:40
width:200
top:10

button.addEventListener ‘click’,(e)->
alert ‘hoge’

56

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

source
30 %
diet

59

source
30 %
diet

maybe...
59

Guardそれはcoffee-scriptの
コンパイル自動化

61

guardについて

• ruby製

• ソースコードを監視し、変更があった
時に所定の処理を走らせてくれる。

• ex. テスト、コンパイル etc...

62

Prj
Guard監視
coffee
Database.coffee 保存コンパイル
ui
Window1.coffee

Resource
Database.js
ui 同階層

Window1.js

同階層で作られる

63

underscore.js

• JSの便利なUtil集めたライブラリー

• http://underscorejs.org/

65

使用法

var _ = require(‘underscore’);

var isArray = _.isArray(hoge);

66

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

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; })
.ﬁrst()
.value();
// youngest => “moe is 21”

68

iOS5
Twitter
module

69

Titanium
Android vs iOS

73

アプリ完成度

74

実装しやすさ

75

×
ありえませんw

78

Titanium使うべき？

79

Android, iOS両
OSに対応したい

83

アプリの
クオリティをそこまで
重視しない

84

工数が少ない

85

まとめ

• JSでかけます。

• TitaniumはiOS向きはすごくいい。

• AndroidはiOSの劣化版だと思って

• モジュールでネイティブの機能を

• ディスってすみません

88

個人的には、

89

個人的には、

各OSネイティブで
作れるべきなら作るべき。

89

個人的には、


サクッと作って見せるプロトタイプ向き

89

個人的には、


サクッと作って見せるプロトタイプ向き

iPhoneは出す、Androidはそのついで
ぐらいの気持ちで思っておいて

89

散々、ディスりましたが。。。

意外と夢も感じています。

90

http://d.hatena.ne.jp/infosia/20120108/1326002975

91

などなど、モジュールが充実することで
Titaniumの夢も広がっていくと思います。

92

参考
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

ご清聴ありがとうございました。

94

Titanium勉強会

Recommended

Recommended

More Related Content

Similar to Titanium勉強会

Similar to Titanium勉強会 (20)

Recently uploaded

Recently uploaded (9)

Titanium勉強会