1. techGarage Hackathon
Titanium Mobile

2. Profile
• 小澤 栄一 (Ozawa Yoshikazu)
• KONAMI SCHOOL
• R-learning Co., Ltd.
– 製品戦略室 CTO
• Twitter - @relax4u
• Facebook: yoshikazu.ozawa

3. Agenda
• Single Context Application
• Event Handler
– UI component ・ Application Level
• UI Design
• Animation
• Social API
– Twitter・Facebook・mixi
• Q&A

4. Single Context Application
アプリケーションの書き方

5. Application Architecture
• Single Context Application
– 基本的にこちらの方式を利用する
• Multi Context Application
– こちらの方式はなるべく利用しない
• KitchenSinkはこの方式で実装されているが、それ
はデモ用のアプリだから。

6. Multi Context Application
app.js
var win = Ti.UI.createWindow({
title: “Main window”,
url: “win.js”
});
win.open();

7. Multi Context Application
win.js
var win = Ti.UI.CurrentWindow;
var label1 = Ti.UI.createLabel({
text: “hello”,
width: ‘auto’, height: ‘auto’
});
win.add(label1);

8. Single Context Application
app.js
var myapp = {};
Ti.include(“ui.js”);
var win = myapp.ui.createApplicationWindow();
win.open();

9. Single Context Application
ui.js
(function(){
myapp.ui = {};
myapp.ui.createApplicationWindow = function(){
var win = Ti.UI.createWindow({title: ”Main window”});
var label1 = Ti.UI.createLabel({
text: “hello”, width: ‘auto’, height: ‘auto’});
win.add(label1);
return win;
};
})();

10. Event Handler
イベント制御

11. UI Component Event Handler
• addEventListener
var button = Ti.UI.createButton({
text: “click”,
width: 100, height: 30
});
button.addEventListener(‘click’, function(){
alert(“clicked!”);
});

12. UI Component Event Handler
• removeEventListener
var onetime = function(){
alert(“clicked!”);
button.removeEventListener(‘click’, onetime);
});
button.addEventListener(‘click’, onetime);

13. Application level Event Handler
tab1.js
var label1 = Ti.UI.createLabel ({
text: “I am window 1”
});
Ti.App.addEventListener(‘update.label1’, function() {
label1.text = “clicked!”
});

14. Application level Event Handler
tab2.js
var button = Ti.UI.createButton({
title: “clicked!”, width: 100, height: 30
});
button.addEventListener(‘click’, funciton(){
Ti.App.fireEvent(‘update.label1’);
});

15. UI Design
デザインの基礎知識

16. Application UI
Tab Based Application Single window Application

17. Application Layout
• Absolute
– 座標を指定して並べていく
• Vertical
– 垂直方向にUIを並べていくレイアウト
• Horizontal
– 水平方向にUIを並べていくレイアウト

18. Application Layout
• Absolute
– 座標を指定して並べていく
• Vertical
– 垂直方向にUIを並べていくレイアウト
• Horizontal
– 水平方向にUIを並べていくレイアウト

19. Animation
アニメーション基礎

20. How to use animation
• Ti.UI.Animation
– top, width, opacity, drutation, delay
• Ti.UI.2DMatrix
– Scale, Rotate, Translate
• 行列の掛け算の順番に注意
– Ti.UI.create2DMatrix().rotate(90).translate(10, 20)
– Ti.UI.create2DMatrix().translate(10, 20).rotate(90)

21. How to translate
var view = Ti.UI.createView({
backgroundColor: “#f00”,
width: 50, height: 50, top: 10, left: 10
});
view.animate({
top: 200, left: 200,
duration: 3000
});

22. How to Rotate
var view = Ti.UI.createView({
backgroundColor: “#f00”,
width: 50, height: 50
});
view.animate({
translate: Ti.UI.create2DMatrix().rotate(90)
duration: 3000
});

23. How to Scale
var view = Ti.UI.createView({
backgroundColor: “#f00”,
width: 50, height: 50
});
view.animate({
translate: Ti.UI.create2DMatrix().scale(2)
duration: 3000
});

24. Social APIs
Twitter・Facebook・mixi連携

25. Social APIs
• Twitter
– tm_twitter_api で簡単に
• https://github.com/mogya/tm_twitter_api
• Facebook
– Titanium で完全サポート
• Ti.Facebook
• mixi
– titanium-mixi-graph-api で簡単に
• https://github.com/relax4u/titanium-mixi-graph-api

26. Q&A

27. Thanks
https://github.com/relax4u/tech-garage-hackathon/