More Related Content
Scripting Layer for Android + Perl SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for... emscriptenでC/C++プログラムをwebブラウザから使うまでの難所攻略 Norikraで作るPHPの例外検知システム YAPC::Asia Tokyo 2015 LT UnrealEngineが5日間でasm.js化できたと聞いた俺たちは… What's hot (20)
Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう 15分でCakePHPを始める方法(Nseg 2013-11-09 ) ADO.NETとORMとMicro-ORM －dapper dot netを使ってみた GoCon 2015 Summer GoのASTをいじくって新しいツールを作る 『How to build a High Performance PSGI/Plack Server』のその後と ISUCON3を受けての話題 最新PHP事情 (2000年7月22日,PHPカンファレンス) WebAPIのバリデーションを、型の力でいい感じにする Open Source System Administration Framework - Func 【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方 php and sapi and zendengine2 and... Similar to Titanium Mobile (20)
gumiStudy#5 JavaScript でネイティブiPhone/Androidアプリを作る Android Lecture #01 @PRO&BSC Inc. 20111031 MobileWeb at TDC 13016 n分で作るtype scriptでnodejs jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力 初めての Data API CMS どうでしょう - 仙台編 - C# を使い倒す！クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション Xamarin de:code セッション：Windows Phone / iOS / Android アプリ同時開発のススメ More from Naoya Ito (10)
Web-Gakkai Symposium 2010 Introduction to Algorithms#24 Shortest-Paths Problem 090518computing Huffman Code Length Titanium Mobile
- 2. 自己紹介 伊藤直也 (33) グリー株式会 ソーシャルメディア統括部長プロデューサー iPhone/Android 等やってます
- 3. アジェンダ iPhone/Android アプリを JavaScript で作る 普通の iPhone/Android 開発の触り Titanium Mobile で JavaScript でアプリ開発 ※ JavaScript + iPhone/Android と言っても HTML5 + JavaScript な Web アプリケーションの話はありません
- 9. iPhone アプリのコード - (void) applicationdidFinishLaunching:(UIApplication *)application { CGRect rect = [ window frame]; UILabel* label = [[ UILabel alloc] initWithFrame:rect]; label.text = @"Hello, world!"; [ window addSubview :label]; [label release]; [window makeKeyAndVisible]; } "Window" に "View" ( ラベルやボタン ) を置く Objective-C で SDK 提供のクラスの API を呼ぶ
- 10. Android アプリのコード "View" で組み立てる ( 概念は iPhone と似ている ) Java で SDK の API を呼んで組み立て (XML でも書ける ) public class HelloWorld extends Activity { @Override public void onCreate (Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new HelloView(this)); } } public class HelloView extends View { @Override protected void onDraw (Canvas canvas) { canvas.drawText("Hello World!", 0, 12, new Paint()); } }
- 11. iPhone/Android ネイティブアプリ Pros 速くて快適なインタフェースを構築できる デバイスの機能をフルに活かせる Cons コード量が多い、工数がかかる Objective-C ･･･ メモリ管理 :( iPhone/Android そのほかマルチプラットフォームにどう対応するか問題 Objective-C/Java 両方覚えるの大変 / 両プラットフォームのアーキテクチャに慣れるの大変
- 12. Appcelerator Titanium Mobile JavaScript で iPhone/Android/BlackBerry アプリが書ける開発環境 JavaScript なのにネイティブアプリ･･･「な、なんだってー！」 フリー、オープンソース ( 有料版あり )
- 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();
- 15. Titanium で開発 JavaScript 書く -> ビルドする -> シミュレータで確認 -> JavaScript 書く ･･･ Titanium SDK は builder のみ。 IDE なし Emacs + j2-mode.el でモリモリ書いてます
- 16. Titanium Mobile 開発のはじめ方 プロジェクト作る -> Resources/app.js 編集 -> Titanium Developer でビルド Window に View を載せるモデルは変わらず
- 17. Titanium is Native ネイティブだけど JavaScript 、 JavaScript だけどネイティブ UI は速い。快適 setTimeout() 、 JSON.parse() など普通に呼べる Titanium.include('../js/jquery.js') なども可能
- 18. How does Titanium Mobile work? http://stackoverflow.com/questions/2444001/how-does-appcelerator-titanium-mobile-work JavaScript をプリプロセッサが Titanium API をシンボルマップにプリコンパイル iPhone ･･･ .o にコンパイル Android ･･･ .class にコンパイル あとは SDK がネイティブバイナリにしてくれる
- 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); });
- 21. UI 実装の進め方 Ti.UI.createWindow() や Ti.UI.createButton() で Window や View といったパーツを作る window.add(button) などでくっつける フォントの大きさなどは CSS のように指定 動きが必要な箇所は addEventListener() でイベントハンドラを登録 いかにも JavaScript
- 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 などもあります */
- 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 } ); }
- 28. Titanium API いろいろ Ti.Geolocation.getCurrentPosition() Ti.Media.showCamera() Ti.Media.createVideoPlayer() Ti.Platform.batteryState Ti.DataBase.open() Ti.App.Properties.setString() Ti.FileSystem.getFile() Ti.Network.createHTTPClient() Ti.Gesture.addEventListener('shake', ...) Ti.Facebook.publishStream() Ti.UI.iPhone.appBadge = 20 ...
- 29. Titanium API ざっくり 基本的な UI はほぼサポート ( と思います ) CoverFlow 、地図、 WebView もあり カメラ , 位置情報 , 加速度センサなどハードウェアアクセス OK データは sqlite 、 Properties に保存可能 Facebook や YQL を扱う API などもある API は拡張モジュールを書くと自分で追加できる ( っぽい )
- 30. 作ったもの (1):Flickr Viewer Flickr の JSON を ScrollableView で表示するだけで OK コードは 100 行未満 (http://github.com/SimpleFlickr) 左右フリックで写真が切り替わります
- 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 });
- 33. 作ったもの (2): RSS リーダー Perl サーバで RSS -> JSON, HTTPClient でアクセス Facebook Connect, はてなブックマーク連携機能も 250 行くらい (http://github.com/naoya/RSSV) ここは WebView
- 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]); }); };
- 35. 雑感など 典型的な iPhone アプリなら十分開発できる GUI プログラミングと JavaScript のイベントドリブンスタイルの相性が良い マルチプラットフォームとは言え、 if 文での切り分けはそれなりに必要 UI パーツの違い、解像度の違い さすがに動きのあるゲームはちょっと難しい ? ( いえ、わかりません )
- 36. そのほか AppStore 申請は OK らしい 過去に話題に上ったことはあるそう ビルド後のファイルに .xcodeproj があるので、 Xcode から読み込んでいじることができる Xib2Js を使うと InterfaceBuilder で作ったモックを JavaScript に変換できる Titanium API でできないことは、 Objective-C や Java で拡張モジュールを書いてしまえば良い ?
- 37. Titanium で開発していくには @donayama さん日本語 wiki は必見 http://code.google.com/p/titanium-mobile-doc-ja/ PDF 印刷して一通り読めば大まかなところはすぐわかる サンプルがあって公式ドキュメントより親切 公式ドキュメントより、 KitchenSink を見よう オフィシャルのカタログ実装 エミュレータで動かす -> やりたいこと見つける -> git grep -> コード見る API リファレンスは http://tidocs.com/mobile/latest/ に SDoc あり (by @masuidrive) 公式のより検索しやすい
![iPhone アプリのコード - (void) applicationdidFinishLaunching:(UIApplication *)application { CGRect rect = [ window frame]; UILabel* label = [[ UILabel alloc] initWithFrame:rect]; label.text = @"Hello, world!"; [ window addSubview :label]; [label release]; [window makeKeyAndVisible]; } "Window" に "View" ( ラベルやボタン ) を置く Objective-C で SDK 提供のクラスの API を呼ぶ](https://image.slidesharecdn.com/20101019titaniummobile-101019212527-phpapp02/85/Titanium-Mobile-9-320.jpg)
![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);](https://image.slidesharecdn.com/20101019titaniummobile-101019212527-phpapp02/85/Titanium-Mobile-24-320.jpg)
![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]); }); };](https://image.slidesharecdn.com/20101019titaniummobile-101019212527-phpapp02/85/Titanium-Mobile-34-320.jpg)
