Titanium Mobile

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

自己紹介
伊藤直也 (33)
グリー株式会
ソーシャルメディア統括部長プロデューサー
iPhone/Android 等やってます

アジェンダ
iPhone/Android アプリを JavaScript で作る
普通の iPhone/Android 開発の触り
Titanium Mobile で JavaScript でアプリ開発
※ JavaScript + iPhone/Android と言っても HTML5 + JavaScript な Web アプリケーションの話はありません

スマートフォン開発
iPhone (iOS)
Android

普通の iPhone アプリ開発
iOS SDK + Xcode, Objective-C

InterfaceBuilder
GUI でレイアウト -> コード中のアクション紐付け
結局 Objective-C で書くことも

普通の Android アプリ開発
Android SDK + Eclipse, Java
(GUI Builder はそこまで使われていない ?)

iPhone/Android アプリで作るもの
主に UI とデバイス連携部分
「クラウド端末」の性格を活かして
ドメインロジックはサーバーで。アプリで表示
デバイスの機能にアクセスしたいときはコア API で

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 を呼ぶ

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()); } }

iPhone/Android ネイティブアプリ
Pros
速くて快適なインタフェースを構築できる
デバイスの機能をフルに活かせる
Cons
コード量が多い、工数がかかる
Objective-C ･･･メモリ管理 :(
iPhone/Android そのほかマルチプラットフォームにどう対応するか問題
Objective-C/Java 両方覚えるの大変 / 両プラットフォームのアーキテクチャに慣れるの大変

Appcelerator Titanium Mobile
JavaScript で iPhone/Android/BlackBerry アプリが書ける開発環境
JavaScript なのにネイティブアプリ･･･「な、なんだってー！」
フリー、オープンソース ( 有料版あり )

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();

ビルド結果

Titanium で開発
JavaScript 書く -> ビルドする -> シミュレータで確認 -> JavaScript 書く･･･
Titanium SDK は builder のみ。 IDE なし
Emacs + j2-mode.el でモリモリ書いてます

Titanium Mobile 開発のはじめ方
プロジェクト作る -> Resources/app.js 編集 -> Titanium Developer でビルド
Window に View を載せるモデルは変わらず

Titanium is Native
ネイティブだけど JavaScript 、 JavaScript だけどネイティブ
UI は速い。快適
setTimeout() 、 JSON.parse() など普通に呼べる
Titanium.include('../js/jquery.js') なども可能

How does Titanium Mobile work?
http://stackoverflow.com/questions/2444001/how-does-appcelerator-titanium-mobile-work
JavaScript をプリプロセッサが Titanium API をシンボルマップにプリコンパイル
iPhone ･･･ .o にコンパイル
Android ･･･ .class にコンパイル
あとは SDK がネイティブバイナリにしてくれる

具体例をみていく

/* 最初の画面 (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); });

UI 実装の進め方
Ti.UI.createWindow() や Ti.UI.createButton() で Window や View といったパーツを作る
window.add(button) などでくっつける
フォントの大きさなどは CSS のように指定
動きが必要な箇所は addEventListener() でイベントハンドラを登録
いかにも JavaScript

できあがっったアプリの使用感
( 実機では触れていませんが ) ちゃんとネイティブ
期待通り、ぬるりと動く
JavaScript だから、という妥協した動きにはならない

こんなのも作れます

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);

ネットワーク呼び出しは 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 などもあります */

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

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 } ); }

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
...

Titanium API ざっくり
基本的な UI はほぼサポート ( と思います )
CoverFlow 、地図、 WebView もあり
カメラ , 位置情報 , 加速度センサなどハードウェアアクセス OK
データは sqlite 、 Properties に保存可能
Facebook や YQL を扱う API などもある
API は拡張モジュールを書くと自分で追加できる ( っぽい )

作ったもの (1):Flickr Viewer
Flickr の JSON を ScrollableView で表示するだけで OK
コードは 100 行未満 (http://github.com/SimpleFlickr)
左右フリックで写真が切り替わります

/* 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 });

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

作ったもの (2): RSS リーダー
Perl サーバで RSS -> JSON, HTTPClient でアクセス
Facebook Connect, はてなブックマーク連携機能も
250 行くらい (http://github.com/naoya/RSSV)
ここは WebView

雑感など
典型的な iPhone アプリなら十分開発できる
GUI プログラミングと JavaScript のイベントドリブンスタイルの相性が良い
マルチプラットフォームとは言え、 if 文での切り分けはそれなりに必要
UI パーツの違い、解像度の違い
さすがに動きのあるゲームはちょっと難しい ?
( いえ、わかりません )

そのほか
AppStore 申請は OK らしい
過去に話題に上ったことはあるそう
ビルド後のファイルに .xcodeproj があるので、 Xcode から読み込んでいじることができる
Xib2Js を使うと InterfaceBuilder で作ったモックを JavaScript に変換できる
Titanium API でできないことは、 Objective-C や Java で拡張モジュールを書いてしまえば良い ?

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)
公式のより検索しやすい

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

http://d.hatena.ne.jp	35542
http://freerss.net	600
http://reader.freerss.net	392
http://s.deeeki.com	39
http://www.freerss.net	33
http://webcache.googleusercontent.com	31
http://netzjp.dialonet.jp	17
http://static.slidesharecdn.com	12
http://translate.googleusercontent.com	5
http://watch.nuwaa-jyuku.com	4
http://dashboard.bloglines.com	4
http://cache.yahoofs.jp	3
http://tmp.localhost	3
http://jp.hanrss.com	3
http://localhost	2
https://goeverysite.appspot.com	2
http://j2k.naver.com	2
http://www.google.co.jp	2
http://search.yahoo.co.jp	1
http://paper.li	1
url_unknown	1
http://192.168.28.28	1
http://d.hatena.ne.jp:80	1
http://s-fkd.blogspot.com	1
http://localhost:8000	1
http://www.ivoryworks.com	1
http://webryreader.sso.biglobe.ne.jp	1
http://www.yahoo.co.jp	1

Titanium Mobile

by Naoya Ito on Oct 19, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

28 Embeds 36,706

Statistics

Titanium Mobile — Presentation Transcript