• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

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

  • 2,508 views
Uploaded on

appcelerator Titanium Mobile を利用すると iPhone/Android …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,508
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript でネイティブ iPhone/Androidアプリを作る グリー株式会社 伊藤 直也 2010.10.19 Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 2. 自己紹介 • 伊藤直也 (33) • グリー株式会 • ソーシャルメディア統括部長プロ デューサー • iPhone/Android 等やってます Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 3. アジェンダ • iPhone/Androidアプリを JavaScript で作る • 普通の iPhone/Android 開発の触り • Titanium Mobile で JavaScript でアプリ開発 ※JavaScript + iPhone/Android と言っても HTML5 + JavaScript な Webアプリケーションの話はありません Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 4. スマートフォン開発 • iPhone (iOS) • Android Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 5. 普通のiPhoneアプリ開発 • iOS SDK + Xcode, Objective-C Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 6. InterfaceBuilder • GUIでレイアウト → コード中のアクション紐付け • 結局 Objective-C で書くことも Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 7. 普通のAndroidアプリ開発 • Android SDK + Eclipse, Java • (GUI Builder はそこまで使われていない?) Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 8. iPhone/Androidアプリで作るもの • 主に UI とデバイス連携部分 • 「クラウド端末」の性格を活かして • ドメインロジックはサーバーで。アプリで表示 • デバイスの機能にアクセスしたいときはコアAPIで Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 9. iPhoneアプリのコード • "Window" に "View" (ラベルやボタン)を置く • Objective-Cで SDK 提供のクラスの API を呼ぶ - ( 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 = [ w ndow f r am ; i e] UI Label * l abel = [ [ U Label al l oc] i ni t W t hFr am r ect ] ; I i e: l abel . t ext = @ Hel l o, wor l d! " ; " [ w ndow addSubvi ew l abel ] ; i : [ l abel r el ease] ; [ wi ndow m akeKeyAndVi si bl e] ; } Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 10. Androidアプリのコード • "View" で組み立てる (概念はiPhoneと似ている) • Java で SDK の API を呼んで組み立て (XMLでも書け る) publ i c cl ass Hel l oW l d ext ends Act i vi t y { or @ 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 H l oVi ew t hi s) ) ; ( el ( } } 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 W l d! " , 0, 12, new Pai nt ( ) ) ; or } } Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 11. iPhone/Androidネイティブアプリ • Pros • 速くて快適なインタフェースを構築できる • デバイスの機能をフルに活かせる • Cons • コード量が多い、工数がかかる • Objective-C ・・・ メモリ管理 :( • iPhone/Android そのほかマルチプラットフォームにどう対応する か問題 • Objective-C/Java 両方覚えるの大変 / 両プラットフォームのアーキテ クチャに慣れるの大変 Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 12. Appcelerator Titanium Mobile • JavaScript で iPhone/Android/BlackBerry アプリが書ける開発環境 • JavaScript なのにネイティブアプリ・・・「な、なんだってー!」 • フリー、オープンソース (有料版あり) Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 13. Hello, Titanium var wi n = Ti t ani um UI . cr eat eW ndow( { . i bac kgr oundCol or : ' #f f f ' , title : ' Fi r st App' }); var l abel = Ti t ani um UI . cr eat eLabel ( { . t ex t : ' Hel l o, Ti t ani um ' , ! t ex t Al i gn : ' cent er ' , hei ght : 20, f ont : { f ont Si ze : 20, f ont W ght ei : ' bol d' } }); wi n. add( l abel ) ; wi n. open( ) ; Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 14. ビルド結果 Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 15. Titanium で開発 • JavaScript書く → ビルドする → シミュレータで確認 → JavaScript 書く ・・・ • Titanium SDK は builder のみ。IDEなし • Emacs + j2-mode.el でモリモリ書いてます Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 16. Titanium Mobile 開発のはじめ方 • プロジェクト作る → Resources/app.js 編集 → Titanium Developer でビルド • Window に View を載せるモデルは変わらず Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 17. Titanium is Native • ネイティブだけどJavaScript、JavaScriptだけど ネイティブ • UI は速い。快適 • setTimeout()、JSON.parse() など普通に呼べる • Titanium.include('../js/jquery.js') なども可能 Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 18. 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.
  • 19. 具体例をみていく Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 20. /* 最初の画面 (window) */ /* 二つの画面を繋ぐ window + navigationGroup */ var f i r st = Ti . UI . cr eat eW ndow( { i var base = Ti . UI . cr eat eW ndow( ); i t i t l e : ' Fi r st W ndow' , i var nav = Ti . UI . i Phone. cr eat eNavi gat i onGr oup( { backgr oundCol or : ' #f f f ' wi ndow : f i r st }); }); base. add( nav) ; var but t on = Ti . UI . cr eat eBut t on( { base. open( ) ; st yl e : Ti . UI . i Phone. Syst em But t onSt yl e. BORDERED, /* ボタンにイベントを登録 */ t i t l e: ' t ouch! ' , but t on. addEventListener( ' cl i ck' , f unct i on ( ) { f ont : { f ont Si ze: 16, f ont W ght :ei nav. open( second) ; ' bol d' } , }); hei ght : 30, wi dt h : 100 }); f i r st . add( but t on) ; /* 次の画面 (window) */ var second = Ti . UI . cr eat eW ndow( {i t i t l e : ' Second W ndow' , i backgr oundCol or : ' #f f f ' }); var i m age = Ti . UI . cr eat eI m ageVi ew( { im age: ' ht t p: / / f ar m st at i c. f l i ckr . com 4008/ 41964 5. / 52707_485b66a9a3_m j pg' . }); second. add( i m age) ; Confidential Copyright © 2004-2010 GREE,Inc. © 2004-2007 GREE,Inc. All Rights Reserved. Copyri gh t All Rights Reserved.
  • 21. UI 実装の進め方 • Ti.UI.createWindow() や Ti.UI.createButton() で Window や View といったパーツを作る • window.add(button) などでくっつける • フォントの大きさなどは CSS のように指定 • 動きが必要な箇所は addEventListener() でイベン トハンドラを登録 • いかにも JavaScript Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 22. できあがっったアプリの使用感 • (実機では触れていませんが) ちゃんとネイティブ • 期待通り、ぬるりと動く • JavaScript だから、という妥協した動きにはならない Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 23. こんなのも作れます Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 24. CoverFlowView v ar wi n = Ti . UI . c ur r ent W ndow; i v ar v i ew = Ti . UI . cr eat eCover Fl ow ew { Vi ( im ages: [ ' ../im ages/ 01. j pg' , ' ../im ages/ 02. j pg' , ' ../im ages/ 03. j pg' , ' ../im ages/ 04. j pg' , ' ../im ages/ 05. j pg' ], bac kgr oundCol or : ' #000' }); wi n. add( vi ew) ; Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 25. ネットワーク呼び出しはXHR同様 var ht t p = Ti t ani um N w k. cr eat eH . et or TTPCl 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 などもあります */ Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 26. デバイスの機能もばっちり Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 27. Titanium.Geolocation var m apvi ew = Ti . M ap. cr eat eVi ew( { m apType : Ti . M ap. STANDARD_TYPE, ani m e at : t r ue, r egi onFi t : t r ue, user Locat i on: t r ue }); Ti t ani um G . eol ocat i on. get Cur r ent Posi t i on( f unct i on ( e) { m apvi 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 m eat : t r ue } ); } Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 28. Titanium API いろいろ • Ti . Geol ocat i on. get Cur r ent Posi t i on( ) • Ti . Medi a. showCam a( ) er • Ti . Medi a. cr eat eVi deoPl ayer ( ) • Ti . Pl at f or m bat t er y St at e . • Ti . Dat aBase. open( ) • Ti . App. Pr oper t i es. s et 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 ( ' shak e' , . . . ) • Ti . Facebook. publ i shSt r eam ) ( • Ti . UI . i Phone. appBadge = 20 • ... Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 29. Titanium API ざっくり • 基本的な UI はほぼサポート(と思います) • CoverFlow、地図、WebView もあり • カメラ,位置情報,加速度センサなどハードウェアアクセス OK • データは sqlite、Properties に保存可能 • Facebook や YQL を扱う API などもある • API は拡張モジュールを書くと自分で追加できる (っぽい) Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 30. 作ったもの(1):Flickr Viewer • FlickrのJSONをScrollableViewで表示するだけでOK • コードは100行未満 (http://github.com/SimpleFlickr) 左右フリックで写真 が切り替わります Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 31. / * Fl i ckr から H TTPCl i ent で JSO とってきて・・・ */ N var wi n = Ti t ani um UI . cur r ent W ndow; . i 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( ) / * Im ageVi ew 作って Scr ol l abeVi ew に流し込む ・・・ */ var vi ews = dat a. i t em m s. ap( f unct i on ( i t em { ) ・・・     var i m ageVi ew = Ti t ani um UI . cr eat eI m . ageVi ew( {      i mage: i t em m . edi a. m, ・・・   });     baseVi ew. add( i m ageVi 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  } ) ; . Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 32. 全く同じコードでAndroidアプリ Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 33. 作ったもの(2): RSSリーダー • Perlサーバで RSS → JSON, HTTPClient でアクセス • Facebook Connect, はてなブックマーク連携機能も • 250行くらい (http://github.com/naoya/RSSV) ここは WebView Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 34. var l oader = Ti . Net wor k. cr eat eHTTPCl i ent ( ) ; / * ローカルに立てたサーバーがRSSをJSO に変換してくれるので、それを取得 */ N 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 espons eText ) ; / * 読み取った JSO を Tabl eVi ew で整形 */ N   var t abl e = Ti t ani um UI . c r eat eTabl eVi ew( { dat a : dat a. m . ap( cr eat eI t emRow) } ) ;     wi n. add( t abl e) ; / * Tabl eVi ew がクリックされたら W ebVi ew  で開く */     t abl e. addEvent Li st ener ( ' c l i c k' , f unct i on( e) {      openW i ndow( dat a[ e. i ndex] ) ; ebW   }); }; Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 35. 雑感など • 典型的な iPhone アプリなら十分開発できる • GUIプログラミングとJavaScriptのイベントドリブンス タイルの相性が良い • マルチプラットフォームとは言え、if文での切り 分けはそれなりに必要 • UI パーツの違い、解像度の違い • さすがに動きのあるゲームはちょっと難しい? • (いえ、わかりません) Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 36. そのほか • AppStore 申請は OK らしい • 過去に話題に上ったことはあるそう • ビルド後のファイルに .xcodeproj があるので、Xcode か ら読み込んでいじることができる • Xib2Js を使うと InterfaceBuilder で作ったモックを JavaScript に変換できる • Titanium API でできないことは、Objective-C や Java で 拡張モジュールを書いてしまえば良い? Copyright © 2004-2010 GREE,Inc. All Rights Reserved.
  • 37. 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.
  • 38. ご清聴ありがとうございました 【PR】採用してます! google:GREE+採用 iPhone/Androidプロジェクト、あります Copyright © 2004-2010 GREE,Inc. All Rights Reserved.