O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Titanium Mobile

  • Seja o primeiro a comentar

Titanium Mobile

  1. 1. JavaScript でネイティブ iPhone/Android アプリを作る グリー株式会社 伊藤 直也 2010.10.19
  2. 2. 自己紹介 <ul><li>伊藤直也 (33) </li></ul><ul><li>グリー株式会 </li></ul><ul><ul><li>ソーシャルメディア統括部長プロデューサー </li></ul></ul><ul><ul><li>iPhone/Android 等やってます </li></ul></ul>
  3. 3. アジェンダ <ul><li>iPhone/Android アプリを JavaScript で作る </li></ul><ul><ul><li>普通の iPhone/Android 開発の触り </li></ul></ul><ul><ul><li>Titanium Mobile で JavaScript でアプリ開発 </li></ul></ul>※ JavaScript + iPhone/Android と言っても HTML5 + JavaScript な Web アプリケーションの話はありません
  4. 4. スマートフォン開発 <ul><li>iPhone (iOS) </li></ul><ul><li>Android </li></ul>
  5. 5. 普通の iPhone アプリ開発 <ul><li>iOS SDK + Xcode, Objective-C </li></ul>
  6. 6. InterfaceBuilder <ul><li>GUI でレイアウト -> コード中のアクション紐付け </li></ul><ul><ul><li>結局 Objective-C で書くことも </li></ul></ul>
  7. 7. 普通の Android アプリ開発 <ul><li>Android SDK + Eclipse, Java </li></ul><ul><ul><li>(GUI Builder はそこまで使われていない ?) </li></ul></ul>
  8. 8. iPhone/Android アプリで作るもの <ul><li>主に UI とデバイス連携部分 </li></ul><ul><ul><li>「クラウド端末」の性格を活かして </li></ul></ul><ul><ul><ul><li>ドメインロジックはサーバーで。アプリで表示 </li></ul></ul></ul><ul><ul><ul><li>デバイスの機能にアクセスしたいときはコア API で </li></ul></ul></ul>
  9. 9. iPhone アプリのコード - (void) applicationdidFinishLaunching:(UIApplication *)application { CGRect rect = [ window frame]; UILabel* label = [[ UILabel alloc] initWithFrame:rect]; label.text = @&quot;Hello, world!&quot;; [ window addSubview :label]; [label release]; [window makeKeyAndVisible]; } <ul><li>&quot;Window&quot; に &quot;View&quot; ( ラベルやボタン ) を置く </li></ul><ul><ul><li>Objective-C で SDK 提供のクラスの API を呼ぶ </li></ul></ul>
  10. 10. Android アプリのコード <ul><li>&quot;View&quot; で組み立てる ( 概念は iPhone と似ている ) </li></ul><ul><ul><li>Java で SDK の API を呼んで組み立て (XML でも書ける ) </li></ul></ul>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(&quot;Hello World!&quot;, 0, 12, new Paint()); } }
  11. 11. iPhone/Android ネイティブアプリ <ul><li>Pros </li></ul><ul><ul><li>速くて快適なインタフェースを構築できる </li></ul></ul><ul><ul><li>デバイスの機能をフルに活かせる </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>コード量が多い、工数がかかる </li></ul></ul><ul><ul><ul><li>Objective-C ・・・ メモリ管理 :( </li></ul></ul></ul><ul><ul><li>iPhone/Android そのほかマルチプラットフォームにどう対応するか問題 </li></ul></ul><ul><ul><ul><li>Objective-C/Java 両方覚えるの大変 / 両プラットフォームのアーキテクチャに慣れるの大変 </li></ul></ul></ul>
  12. 12. Appcelerator Titanium Mobile <ul><li>JavaScript で iPhone/Android/BlackBerry アプリが書ける開発環境 </li></ul><ul><ul><li>JavaScript なのにネイティブアプリ・・・「な、なんだってー!」 </li></ul></ul><ul><ul><li>フリー、オープンソース ( 有料版あり ) </li></ul></ul>
  13. 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. 14. ビルド結果
  15. 15. Titanium で開発 <ul><li>JavaScript 書く -> ビルドする -> シミュレータで確認 -> JavaScript 書く ・・・ </li></ul><ul><li>Titanium SDK は builder のみ。 IDE なし </li></ul><ul><ul><li>Emacs + j2-mode.el でモリモリ書いてます </li></ul></ul>
  16. 16. Titanium Mobile 開発のはじめ方 <ul><li>プロジェクト作る -> Resources/app.js 編集 -> Titanium Developer でビルド </li></ul><ul><ul><li>Window に View を載せるモデルは変わらず </li></ul></ul>
  17. 17. Titanium is Native <ul><li>ネイティブだけど JavaScript 、 JavaScript だけどネイティブ </li></ul><ul><ul><li>UI は速い。快適 </li></ul></ul><ul><ul><li>setTimeout() 、 JSON.parse() など普通に呼べる </li></ul></ul><ul><ul><li>Titanium.include('../js/jquery.js') なども可能 </li></ul></ul>
  18. 18. How does Titanium Mobile work? <ul><li>http://stackoverflow.com/questions/2444001/how-does-appcelerator-titanium-mobile-work </li></ul><ul><ul><li>JavaScript をプリプロセッサが Titanium API をシンボルマップにプリコンパイル </li></ul></ul><ul><ul><ul><li>iPhone ・・・ .o にコンパイル </li></ul></ul></ul><ul><ul><ul><li>Android ・・・ .class にコンパイル </li></ul></ul></ul><ul><li>あとは SDK がネイティブバイナリにしてくれる </li></ul>
  19. 19. 具体例をみていく
  20. 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. 21. UI 実装の進め方 <ul><li>Ti.UI.createWindow() や Ti.UI.createButton() で Window や View といったパーツを作る </li></ul><ul><ul><li>window.add(button) などでくっつける </li></ul></ul><ul><ul><li>フォントの大きさなどは CSS のように指定 </li></ul></ul><ul><li>動きが必要な箇所は addEventListener() でイベントハンドラを登録 </li></ul><ul><ul><li>いかにも JavaScript </li></ul></ul>
  22. 22. できあがっったアプリの使用感 <ul><li>( 実機では触れていませんが ) ちゃんとネイティブ </li></ul><ul><ul><li>期待通り、ぬるりと動く </li></ul></ul><ul><ul><li>JavaScript だから、という妥協した動きにはならない </li></ul></ul>
  23. 23. こんなのも作れます
  24. 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. 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. 26. デバイスの機能もばっちり
  27. 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. 28. Titanium API いろいろ <ul><li>Ti.Geolocation.getCurrentPosition() </li></ul><ul><li>Ti.Media.showCamera() </li></ul><ul><li>Ti.Media.createVideoPlayer() </li></ul><ul><li>Ti.Platform.batteryState </li></ul><ul><li>Ti.DataBase.open() </li></ul><ul><li>Ti.App.Properties.setString() </li></ul><ul><li>Ti.FileSystem.getFile() </li></ul><ul><li>Ti.Network.createHTTPClient() </li></ul><ul><li>Ti.Gesture.addEventListener('shake', ...) </li></ul><ul><li>Ti.Facebook.publishStream() </li></ul><ul><li>Ti.UI.iPhone.appBadge = 20 </li></ul><ul><li>... </li></ul>
  29. 29. Titanium API ざっくり <ul><li>基本的な UI はほぼサポート ( と思います ) </li></ul><ul><li>CoverFlow 、地図、 WebView もあり </li></ul><ul><li>カメラ , 位置情報 , 加速度センサなどハードウェアアクセス OK </li></ul><ul><li>データは sqlite 、 Properties に保存可能 </li></ul><ul><li>Facebook や YQL を扱う API などもある </li></ul><ul><li>API は拡張モジュールを書くと自分で追加できる ( っぽい ) </li></ul>
  30. 30. 作ったもの (1):Flickr Viewer <ul><li>Flickr の JSON を ScrollableView で表示するだけで OK </li></ul><ul><ul><li>コードは 100 行未満 (http://github.com/SimpleFlickr) </li></ul></ul>左右フリックで写真が切り替わります
  31. 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. 32. 全く同じコードで Android アプリ
  33. 33. 作ったもの (2): RSS リーダー <ul><li>Perl サーバで RSS -> JSON, HTTPClient でアクセス </li></ul><ul><li>Facebook Connect, はてなブックマーク連携機能も </li></ul><ul><ul><li>250 行くらい (http://github.com/naoya/RSSV) </li></ul></ul>ここは WebView
  34. 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. 35. 雑感など <ul><li>典型的な iPhone アプリなら十分開発できる </li></ul><ul><ul><li>GUI プログラミングと JavaScript のイベントドリブンスタイルの相性が良い </li></ul></ul><ul><li>マルチプラットフォームとは言え、 if 文での切り分けはそれなりに必要 </li></ul><ul><ul><li>UI パーツの違い、解像度の違い </li></ul></ul><ul><li>さすがに動きのあるゲームはちょっと難しい ? </li></ul><ul><ul><li>( いえ、わかりません ) </li></ul></ul>
  36. 36. そのほか <ul><li>AppStore 申請は OK らしい </li></ul><ul><ul><li>過去に話題に上ったことはあるそう </li></ul></ul><ul><li>ビルド後のファイルに .xcodeproj があるので、 Xcode から読み込んでいじることができる </li></ul><ul><li>Xib2Js を使うと InterfaceBuilder で作ったモックを JavaScript に変換できる </li></ul><ul><li>Titanium API でできないことは、 Objective-C や Java で拡張モジュールを書いてしまえば良い ? </li></ul>
  37. 37. Titanium で開発していくには <ul><li>@donayama さん日本語 wiki は必見 </li></ul><ul><ul><li>http://code.google.com/p/titanium-mobile-doc-ja/ </li></ul></ul><ul><ul><li>PDF 印刷して一通り読めば大まかなところはすぐわかる </li></ul></ul><ul><ul><li>サンプルがあって公式ドキュメントより親切 </li></ul></ul><ul><li>公式ドキュメントより、 KitchenSink を見よう </li></ul><ul><ul><li>オフィシャルのカタログ実装 </li></ul></ul><ul><ul><li>エミュレータで動かす -> やりたいこと見つける -> git grep -> コード見る </li></ul></ul><ul><li>API リファレンスは http://tidocs.com/mobile/latest/ に SDoc あり (by @masuidrive) </li></ul><ul><ul><li>公式のより検索しやすい </li></ul></ul>
  38. 38. ご清聴ありがとうございました 【 PR 】 採用してます ! google:GREE+ 採用 iPhone/Android プロジェクト、あります

×