1. JavaScript でネイティブ iPhone/Android アプリを作る グリー株式会社 伊藤 直也 2010.10.19

13. Hello, Titanium var win = Titanium.UI.createWindow({ backgroundColor: '#fff', title : 'FirstApp' }); var label = Titanium.UI.createLabel({ text : 'Hello, Titanium!', textAlign : 'center', height : 20, font : { fontSize : 20, fontWeight: 'bold' } }); win.add(label); win.open();

14. ビルド結果

19. 具体例をみていく

20. /* 最初の画面 (window) */ var first = Ti.UI.createWindow({ title : 'First Window', backgroundColor : '#fff' }); var button = Ti.UI.createButton({ style: Ti.UI.iPhone.SystemButtonStyle.BORDERED, title: 'touch!', font : { fontSize: 16, fontWeight: 'bold' }, height: 30, width : 100 }); first.add(button); /* 次の画面 (window) */ var second = Ti.UI.createWindow({ title : 'Second Window', backgroundColor : '#fff' }); var image = Ti.UI.createImageView({ image: 'http://farm5.static.flickr.com/4008/4196452707_485b66a9a3_m.jpg' }); second.add(image); /* 二つの画面を繋ぐ window + navigationGroup */ var base = Ti.UI.createWindow(); var nav = Ti.UI.iPhone.createNavigationGroup({ window : first }); base.add(nav); base.open(); /* ボタンにイベントを登録 */ button. addEventListener ('click', function () { nav.open(second); });

23. こんなのも作れます

24. CoverFlowView var win = Ti.UI.currentWindow; var view = Ti.UI. createCoverFlowView ({ images: [ '../images/01.jpg', '../images/02.jpg', '../images/03.jpg', '../images/04.jpg', '../images/05.jpg' ], backgroundColor: '#000' }); win.add(view);

25. ネットワーク呼び出しは XHR 同様 var http = Titanium. Network.createHTTPClient (); http.open( 'GET', 'http://search.twitter.com/search.json?q=%23titanium' ); http.onload = function(){ data = JSON.parse( this.responseText ); }; http.send(); /* TCPSocket や BonjourService などもあります */

26. デバイスの機能もばっちり

27. Titanium.Geolocation var mapview = Ti.Map.createView({ mapType : Ti.Map.STANDARD_TYPE, animate : true, regionFit : true, userLocation: true }); Titanium.Geolocation.getCurrentPosition (function (e) { mapview.setLocation( { latitude : e.coords.latitude, longitude : e.coords.longitude, latitudeDelta : 0.01, longitudeDelta: 0.0, animate : true } ); }

31. /* Flickr から HTTPClient で JSON とってきて・・・ */ var win = Titanium.UI.currentWindow; var loader = Titanium.Network.createHTTPClient(); loader.open('GET', this.url); loader.onload = function() { Ti.API.info(this.responseText); var data = JSON.parse(this.responseText); win.add( Flickr.createPhotoView(data) ); }; loader.send() /* ImageView 作って ScrollabeView に流し込む ・・・ */ var views = data.items.map(function (item) { ・・・ var imageView = Titanium.UI.createImageView({ image: item.media.m, ・・・ }); baseView.add(imageView); baseView.add(title); baseView.add(date); return baseView; }); var scrollable = Titanium.UI.createScrollableView({ views: views });

32. 全く同じコードで Android アプリ

34. var loader = Ti.Network.createHTTPClient(); /* ローカルに立てたサーバーが RSS を JSON に変換してくれるので、それを取得 */ loader.open('GET', 'http://localhost:3000/feed?url=' + row.url); loader.onload = function () { var data = JSON.parse(this.responseText); /* 読み取った JSON を TableView で整形 */ var table = Titanium.UI.createTableView({ data : data.map(createItemRow) }); win.add(table); /* TableView がクリックされたら WebView で開く */ table.addEventListener('click', function(e) { openWebWindow(data[e.index]); }); };

38. ご清聴ありがとうございました 【 PR 】 採用してます ! google:GREE+ 採用 iPhone/Android プロジェクト、あります