gumistudy#5 javascript でネイティブiphone/androidアプリを作る

Copyright © 2004-2010 GREE,Inc. All Rights Reserved.

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アプリのコード

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


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


iPhone/Androidネイティブアプリ

• Pros• 速くて快適なインタフェースを構築できる• デバイスの機能をフルに活かせる

• Cons• コード量が多い、工数がかかる

• Objective-C ･･･メモリ管理 :(• iPhone/Android そのほかマルチプラットフォームにどう対応する

か問題• Objective-C/Java 両方覚えるの大変 / 両プラットフォームのアーキテ

クチャに慣れるの大変


Appcelerator Titanium Mobile• JavaScript で iPhone/Android/BlackBerry アプリが書ける開発環境

• JavaScript なのにネイティブアプリ･･･「な、なんだってー！」• フリー、オープンソース (有料版あり)


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


ビルド結果


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://stackoverfow.com/questions/2444001/how-does-appcelerator-titanium-mobile-work• JavaScript をプリプロセッサが Titanium API をシンボルマップにプリコンパイル

• iPhone ･･･ .o にコンパイル• Android ･･･ .class にコンパイル

• あとは SDK がネイティブバイナリにしてくれる


具体例をみていく

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


UI 実装の進め方

• Ti.UI.createWindow() や Ti.UI.createButton() で Window や View といったパーツを作る• window.add(button) などでくっつける• フォントの大きさなどは CSS のように指定

• 動きが必要な箇所は addEventListener() でイベントハンドラを登録• いかにも JavaScript


できあがっったアプリの使用感

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


こんなのも作れます


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


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


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


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


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


Titanium API ざっくり• 基本的な UI はほぼサポート(と思います)• CoverFlow、地図、WebView もあり• カメラ,位置情報,加速度センサなどハードウェアアクセス

OK• データは sqlite、Properties に保存可能• Facebook や YQL を扱う API などもある• API は拡張モジュールを書くと自分で追加できる (っぽい)


作ったもの(1):Flickr Viewer• FlickrのJSONをScrollableViewで表示するだけでOK

• コードは100行未満 (http://github.com/SimpleFlickr)

左右フリックで写真が切り替わります


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


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


作ったもの(2): RSSリーダー• Perlサーバで RSS → JSON, HTTPClient でアクセス• Facebook Connect, はてなブックマーク連携機能も

• 250行くらい (http://github.com/naoya/RSSV)

ここは WebView


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


雑感など• 典型的な 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)• 公式のより検索しやすい

http://code.google.com/p/titanium-mobile-doc-ja/


ご清聴ありがとうございました【PR】採用してます!google:GREE+採用

iPhone/Androidプロジェクト、あります

gumistudy#5 javascript でネイティブiphone/androidアプリを作る

Technology

savedi nst

cr eat ehttpcl

bac kgr oundcol

cr eat ei

cl ass hel

ont si ze

ani um ui

ani um