Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,876 views

Published on

appcelerator Titanium Mobile を利用すると iPhone/Android
のネイティブアプリを JavaScript で開発することができます。
普通の iPhone/Android アプリの開発と比較しながらその様子を
紹介します。

Published in: Technology
  • Be the first to comment

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

  1. 1. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. JavaScript でネイティブ iPhone/Androidアプリを作る グリー株式会社 伊藤 直也 2010.10.19
  2. 2. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 自己紹介 • 伊藤直也 (33) • グリー株式会 • ソーシャルメディア統括部長プロ デューサー • iPhone/Android 等やってます
  3. 3. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. アジェンダ • iPhone/Androidアプリを JavaScript で作る • 普通の iPhone/Android 開発の触り • Titanium Mobile で JavaScript でアプリ開発 ※JavaScript + iPhone/Android と言っても HTML5 + JavaScript な Webアプリケーションの話はありません
  4. 4. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. スマートフォン開発 • iPhone (iOS) • Android
  5. 5. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 普通のiPhoneアプリ開発 • iOS SDK + Xcode, Objective-C
  6. 6. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. InterfaceBuilder • GUIでレイアウト → コード中のアクション紐付け • 結局 Objective-C で書くことも
  7. 7. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 普通のAndroidアプリ開発 • Android SDK + Eclipse, Java • (GUI Builder はそこまで使われていない?)
  8. 8. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. iPhone/Androidアプリで作るもの • 主に UI とデバイス連携部分 • 「クラウド端末」の性格を活かして • ドメインロジックはサーバーで。アプリで表示 • デバイスの機能にアクセスしたいときはコアAPIで
  9. 9. 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 を呼ぶ
  10. 10. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 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 ( ) ) ; } }
  11. 11. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. iPhone/Androidネイティブアプリ • Pros • 速くて快適なインタフェースを構築できる • デバイスの機能をフルに活かせる • Cons • コード量が多い、工数がかかる • Objective-C ・・・ メモリ管理 :( • iPhone/Android そのほかマルチプラットフォームにどう対応する か問題 • Objective-C/Java 両方覚えるの大変 / 両プラットフォームのアーキテ クチャに慣れるの大変
  12. 12. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. Appcelerator Titanium Mobile • JavaScript で iPhone/Android/BlackBerry アプリが書ける開発環境 • JavaScript なのにネイティブアプリ・・・「な、なんだってー!」 • フリー、オープンソース (有料版あり)
  13. 13. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 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( ) ;
  14. 14. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. ビルド結果
  15. 15. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. Titanium で開発 • JavaScript書く → ビルドする → シミュレータで確認 → JavaScript 書く ・・・ • Titanium SDK は builder のみ。IDEなし • Emacs + j2-mode.el でモリモリ書いてます
  16. 16. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. Titanium Mobile 開発のはじめ方 • プロジェクト作る → Resources/app.js 編集 → Titanium Developer でビルド • Window に View を載せるモデルは変わらず
  17. 17. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. Titanium is Native • ネイティブだけどJavaScript、JavaScriptだけど ネイティブ • UI は速い。快適 • setTimeout()、JSON.parse() など普通に呼べる • Titanium.include('../js/jquery.js') なども可能
  18. 18. 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 がネイティブバイナリにしてくれる
  19. 19. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 具体例をみていく
  20. 20. 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) ; } ) ;
  21. 21. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. UI 実装の進め方 • Ti.UI.createWindow() や Ti.UI.createButton() で Window や View といったパーツを作る • window.add(button) などでくっつける • フォントの大きさなどは CSS のように指定 • 動きが必要な箇所は addEventListener() でイベン トハンドラを登録 • いかにも JavaScript
  22. 22. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. できあがっったアプリの使用感 • (実機では触れていませんが) ちゃんとネイティブ • 期待通り、ぬるりと動く • JavaScript だから、という妥協した動きにはならない
  23. 23. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. こんなのも作れます
  24. 24. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 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) ;
  25. 25. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. ネットワーク呼び出しは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 などもあります */
  26. 26. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. デバイスの機能もばっちり
  27. 27. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 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 } ) ; }
  28. 28. 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 • ...
  29. 29. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. Titanium API ざっくり • 基本的な UI はほぼサポート(と思います) • CoverFlow、地図、WebView もあり • カメラ,位置情報,加速度センサなどハードウェアアクセス OK • データは sqlite、Properties に保存可能 • Facebook や YQL を扱う API などもある • API は拡張モジュールを書くと自分で追加できる (っぽい)
  30. 30. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 作ったもの(1):Flickr Viewer • FlickrのJSONをScrollableViewで表示するだけでOK • コードは100行未満 (http://github.com/SimpleFlickr) 左右フリックで写真 が切り替わります
  31. 31. 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 作って 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  } ) ;
  32. 32. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 全く同じコードでAndroidアプリ
  33. 33. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 作ったもの(2): RSSリーダー • Perlサーバで RSS → JSON, HTTPClient でアクセス • Facebook Connect, はてなブックマーク連携機能も • 250行くらい (http://github.com/naoya/RSSV) ここは WebView
  34. 34. 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 ( ' cl i ck' , f unct i on( e) {       openWebWi ndow( dat a[ e. i ndex] ) ;     } ) ; } ;
  35. 35. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. 雑感など • 典型的な iPhone アプリなら十分開発できる • GUIプログラミングとJavaScriptのイベントドリブンス タイルの相性が良い • マルチプラットフォームとは言え、if文での切り 分けはそれなりに必要 • UI パーツの違い、解像度の違い • さすがに動きのあるゲームはちょっと難しい? • (いえ、わかりません)
  36. 36. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. そのほか • AppStore 申請は OK らしい • 過去に話題に上ったことはあるそう • ビルド後のファイルに .xcodeproj があるので、Xcode か ら読み込んでいじることができる • Xib2Js を使うと InterfaceBuilder で作ったモックを JavaScript に変換できる • Titanium API でできないことは、Objective-C や Java で 拡張モジュールを書いてしまえば良い?
  37. 37. 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) • 公式のより検索しやすい
  38. 38. Copyright © 2004-2010 GREE,Inc. All Rights Reserved. ご清聴ありがとうございました 【PR】採用してます! google:GREE+採用 iPhone/Androidプロジェクト、あります

×