Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
JavaScript でネイティブiPhone/Androidアプリを作る
グリー株式会社伊藤 直也
2010.10.19
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
自己紹介
• 伊藤直也 (33)• グリー株式会• ソーシャルメディア統括部長プロ
デューサー• iPhone/Android 等やってます
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
アジェンダ
• iPhone/Androidアプリを JavaScript で作る• 普通の iPhone/Android 開発の触り• Titanium Mobile で JavaScript でアプリ開発
※JavaScript + iPhone/Android と言っても HTML5 + JavaScript な Webアプリケーションの話はありません
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
スマートフォン開発
• iPhone (iOS)• Android
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
普通のiPhoneアプリ開発
• iOS SDK + Xcode, Objective-C
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
InterfaceBuilder
• GUIでレイアウト → コード中のアクション紐付け• 結局 Objective-C で書くことも
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
普通のAndroidアプリ開発
• Android SDK + Eclipse, Java• (GUI Builder はそこまで使われていない?)
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
iPhone/Androidアプリで作るもの
• 主に UI とデバイス連携部分• 「クラウド端末」の性格を活かして
• ドメインロジックはサーバーで。アプリで表示• デバイスの機能にアクセスしたいときはコアAPIで
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
iPhoneアプリのコード
- ( voi d) appl i cat i ondi dFi ni shLaunchi ng: ( UI Appl i cat i on * ) appl i cat i on { CGRect r ect = [ wi ndow f r ame] ;
UI Label * l abel = [ [ UI Label al l oc] i ni t Wi t hFr ame: r ect ] ; l abel . t ext = @" Hel l o, wor l d! " ; [ wi ndow addSubvi ew: l abel ] ;
[ l abel r el ease] ; [ wi ndow makeKeyAndVi si bl e] ;}
• "Window" に "View" (ラベルやボタン)を置く• Objective-Cで SDK 提供のクラスの API を呼ぶ
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
Androidアプリのコード• "View" で組み立てる (概念はiPhoneと似ている)• Java で SDK の API を呼んで組み立て (XMLでも書け
る)publ i c c l ass Hel l oWor l d ext ends Act i vi ty { @Over r i de publ i c voi d onCr eat e ( Bundl e savedI nst anceSt at e) { super . onCr eat e( savedI nst anceSt at e) ; setContentVi ew( new Hel l oVi ew( thi s) ) ; }}
publ i c c l ass Hel l oVi ew ext ends Vi ew { @Over r i de pr ot ect ed voi d onDr aw ( Canvas canvas) { canvas. dr awText ( " Hel l o Wor l d! " , 0, 12, new Pai nt ( ) ) ; }}
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
iPhone/Androidネイティブアプリ
• Pros• 速くて快適なインタフェースを構築できる• デバイスの機能をフルに活かせる
• Cons• コード量が多い、工数がかかる
• Objective-C ・・・ メモリ管理 :(• iPhone/Android そのほかマルチプラットフォームにどう対応する
か問題• Objective-C/Java 両方覚えるの大変 / 両プラットフォームのアーキテ
クチャに慣れるの大変
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
Appcelerator Titanium Mobile• JavaScript で iPhone/Android/BlackBerry アプリが書ける開発環境
• JavaScript なのにネイティブアプリ・・・「な、なんだってー!」• フリー、オープンソース (有料版あり)
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
Hello, Titaniumvar wi n = Ti t ani um. UI . cr eat eWi ndow( { backgr oundCol or : ' #f f f ' , t i t l e : ' Fi r st App'} ) ;
var l abel = Ti t ani um. UI . cr eat eLabel ( { t ext : ' Hel l o, Ti t ani um! ' , t ext Al i gn : ' cent er ' , hei ght : 20, f ont : { f ont Si ze : 20, f ont Wei ght : ' bol d' }} ) ;
wi n. add( l abel ) ;wi n. open( ) ;
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
ビルド結果
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
Titanium で開発• JavaScript書く → ビルドする → シミュレータで確認 →
JavaScript 書く ・・・• Titanium SDK は builder のみ。IDEなし
• Emacs + j2-mode.el でモリモリ書いてます
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
Titanium Mobile 開発のはじめ方• プロジェクト作る → Resources/app.js 編集 → Titanium
Developer でビルド• Window に View を載せるモデルは変わらず
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
Titanium is Native
• ネイティブだけどJavaScript、JavaScriptだけどネイティブ• UI は速い。快適• setTimeout()、JSON.parse() など普通に呼べる• Titanium.include('../js/jquery.js') なども可能
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
How does Titanium Mobile work?
• http://stackoverfow.com/questions/2444001/how-does-appcelerator-titanium-mobile-work• JavaScript をプリプロセッサが Titanium API をシンボルマップにプリコンパイル
• iPhone ・・・ .o にコンパイル• Android ・・・ .class にコンパイル
• あとは SDK がネイティブバイナリにしてくれる
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
具体例をみていく
Copyright © 2004-2007 GREE,Inc. All Rights Reserved.Copyright © 2004-2010 GREE,Inc. All Rights Reserved.Confidential
/* 最初の画面 (window) */var f i r st = Ti . UI . cr eat eWi ndow( { t i t l e : ' Fi r st Wi ndow' , backgr oundCol or : ' #f f f '} ) ;
var but t on = Ti . UI . cr eat eBut t on( { st y l e : Ti . UI . i Phone. Syst emBut t onSt yl e. BORDERED, t i t l e: ' t ouch! ' , f ont : { f ont Si ze: 16, f ont Wei ght : ' bol d' } , hei ght : 30, wi dt h : 100} ) ;f i r st . add( but t on) ;
/* 次の画面 (window) */var second = Ti . UI . cr eat eWi ndow( { t i t l e : ' Second Wi ndow' , backgr oundCol or : ' #f f f '} ) ;var i mage = Ti . UI . cr eat eI mageVi ew( { i mage: ' ht t p: / / f ar m5. st at i c. f l i ckr . com/ 4008/ 4196452707_485b66a9a3_m. j pg'} ) ;second. add( i mage) ;
/* 二つの画面を繋ぐ window + navigationGroup */var base = Ti . UI . cr eat eWi ndow( ); var nav = Ti . UI . i Phone. cr eat eNavi gat i onGr oup( { wi ndow : f i r st} ) ;base. add( nav) ;base. open( ) ;
/* ボタンにイベントを登録 */but t on. addEventListener( ' c l i ck ' , f unct i on ( ) { nav. open( second) ;} ) ;
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
UI 実装の進め方
• Ti.UI.createWindow() や Ti.UI.createButton() で Window や View といったパーツを作る• window.add(button) などでくっつける• フォントの大きさなどは CSS のように指定
• 動きが必要な箇所は addEventListener() でイベントハンドラを登録• いかにも JavaScript
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
できあがっったアプリの使用感
• (実機では触れていませんが) ちゃんとネイティブ• 期待通り、ぬるりと動く• JavaScript だから、という妥協した動きにはならない
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
こんなのも作れます
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
CoverFlowViewvar wi n = Ti . UI . cur r ent Wi ndow;var v i ew = Ti . UI . createCoverFl owVi ew( { i mages: [ ' . . / i mages/ 01. j pg' , ' . . / i mages/ 02. j pg' , ' . . / i mages/ 03. j pg' , ' . . / i mages/ 04. j pg' , ' . . / i mages/ 05. j pg' ] , backgr oundCol or : ' #000'} ) ;wi n. add( vi ew) ;
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
ネットワーク呼び出しはXHR同様var ht t p = Ti t ani um. Network. createHTTPCl i ent ( ) ;
ht t p. open( ' GET' , ' ht t p: / / sear ch. t wi t t er . com/ sear ch. j son?q=%23t i t ani um') ;
ht t p. onl oad = f unct i on( ) { dat a = JSON. par se( thi s. responseText ) ;} ;
ht t p. send( ) ;
/ * TCPSocket や Bonj ourServi ce などもあります */
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
デバイスの機能もばっちり
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
Titanium.Geolocationvar mapvi ew = Ti . Map. cr eat eVi ew( { mapType : Ti . Map. STANDARD_TYPE, ani mat e : t r ue, r egi onFi t : t r ue, user Locat i on: t r ue} ) ;
Ti tani um. Geol ocat i on. getCur rentPosi t i on( f unct i on ( e) { mapvi ew. set Locat i on( { l at i t ude : e. coor ds. l at i t ude, l ongi t ude : e. coor ds. l ongi t ude, l at i t udeDel t a : 0. 01, l ongi t udeDel t a: 0. 0, ani mat e : t r ue } ) ;}
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
Titanium API いろいろ• Ti . Geol ocat i on. get Cur r ent Posi t i on( )• Ti . Medi a. showCamer a( )• Ti . Medi a. cr eat eVi deoPl ayer ( )• Ti . Pl at f or m. bat t er ySt at e• Ti . Dat aBase. open( )• Ti . App. Pr oper t i es. set St r i ng( )• Ti . Fi l eSyst em. get Fi l e( )• Ti . Net wor k. cr eat eHTTPCl i ent ( )• Ti . Gest ur e. addEvent Li st ener ( ' shake' , . . . )• Ti . Facebook. publ i shSt r eam( )• Ti . UI . i Phone. appBadge = 20• ...
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
Titanium API ざっくり• 基本的な UI はほぼサポート(と思います)• CoverFlow、地図、WebView もあり• カメラ,位置情報,加速度センサなどハードウェアアクセス
OK• データは sqlite、Properties に保存可能• Facebook や YQL を扱う API などもある• API は拡張モジュールを書くと自分で追加できる (っぽい)
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
作ったもの(1):Flickr Viewer• FlickrのJSONをScrollableViewで表示するだけでOK
• コードは100行未満 (http://github.com/SimpleFlickr)
左右フリックで写真が切り替わります
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
/ * Fl i ckr から HTTPCl i ent で JSON とってきて・・・ */var wi n = Ti t ani um. UI . cur r ent Wi ndow;var l oader = Ti t ani um. Net wor k. cr eat eHTTPCl i ent ( ) ;l oader . open( ' GET' , t hi s. ur l ) ;l oader . onl oad = f unct i on( ) { Ti . API . i nf o( t hi s. r esponseText ) ; var dat a = JSON. par se( t hi s. r esponseText ) ; wi n. add( Fl i ckr . cr eat ePhot oVi ew( dat a) ) ;} ;l oader . send( )
/ * I mageVi ew 作って Scrol l abeVi ew に流し込む ・・・ */var v i ews = dat a. i t ems. map( f unct i on ( i t em) { ・・・ var i mageVi ew = Ti t ani um. UI . cr eat eI mageVi ew( { i mage: i t em. medi a. m, ・・・ } ) ;
baseVi ew. add( i mageVi ew) ; baseVi ew. add( t i t l e) ; baseVi ew. add( dat e) ; r et ur n baseVi ew;} ) ; var scr ol l abl e = Ti t ani um. UI . cr eat eScr ol l abl eVi ew( { v i ews: v i ews } ) ;
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
全く同じコードでAndroidアプリ
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
作ったもの(2): RSSリーダー• Perlサーバで RSS → JSON, HTTPClient でアクセス• Facebook Connect, はてなブックマーク連携機能も
• 250行くらい (http://github.com/naoya/RSSV)
ここは WebView
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
var l oader = Ti . Net wor k. cr eat eHTTPCl i ent ( ) ;
/ * ローカルに立てたサーバーがRSSをJSONに変換してくれるので、それを取得 */l oader . open( ' GET' , ' ht t p: / / l ocal host : 3000/ f eed?ur l =' + r ow. ur l ) ;
l oader . onl oad = f unct i on ( ) { var dat a = JSON. par se( t hi s. r esponseText ) ;
/ * 読み取った JSON を Tabl eVi ew で整形 */ var t abl e = Ti t ani um. UI . cr eat eTabl eVi ew( { dat a : dat a. map( cr eat eI t emRow) } ) ; wi n. add( t abl e) ;
/ * Tabl eVi ew がクリックされたら WebVi ew で開く */ t abl e. addEvent Li st ener ( ' c l i ck' , f unct i on( e) { openWebWi ndow( dat a[ e. i ndex] ) ; } ) ;} ;
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
雑感など• 典型的な iPhone アプリなら十分開発できる• GUIプログラミングとJavaScriptのイベントドリブンス
タイルの相性が良い• マルチプラットフォームとは言え、if文での切り
分けはそれなりに必要• UI パーツの違い、解像度の違い
• さすがに動きのあるゲームはちょっと難しい?• (いえ、わかりません)
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
そのほか• AppStore 申請は OK らしい
• 過去に話題に上ったことはあるそう
• ビルド後のファイルに .xcodeproj があるので、Xcode から読み込んでいじることができる
• Xib2Js を使うと InterfaceBuilder で作ったモックを JavaScript に変換できる
• Titanium API でできないことは、Objective-C や Java で拡張モジュールを書いてしまえば良い?
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
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)• 公式のより検索しやすい
Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
ご清聴ありがとうございました【PR】採用してます!google:GREE+採用
iPhone/Androidプロジェクト、あります