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 cl ass Hel l oWor l d ext ends Act i vi t y {
@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) ;
set Cont ent Vi ew( new Hel l oVi ew( t hi s) ) ;
}
}
publ i c cl 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, Titanium
var 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 yl 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/ 41964
52707_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( ' cl 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 だから、という妥協した動きにはならない

こんなのも作れます

CoverFlowView
var wi n = Ti . UI . cur r ent Wi ndow;
var vi ew = Ti . UI . cr eat eCover Fl 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. Net wor k. cr eat eHTTPCl 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( t hi s. r esponseText ) ;
} ;
ht t p. send( ) ;
/ * TCPSocket や Bonj our Ser vi ce などもあります */

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

Titanium.Geolocation
var 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 t ani um. Geol ocat i on. get Cur r ent Posi 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 作って Scr ol l abeVi ew に流し込む・・・ */
var vi 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( { vi ews: vi 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 ( ' cl 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)
• 公式のより検索しやすい

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

gumiStudy#5 JavaScript でネイティブiPhone/Androidアプリを作る

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (16)

Destaque

Destaque (6)

Semelhante a gumiStudy#5 JavaScript でネイティブiPhone/Androidアプリを作る

Semelhante a gumiStudy#5 JavaScript でネイティブiPhone/Androidアプリを作る (20)

gumiStudy#5 JavaScript でネイティブiPhone/Androidアプリを作る