搜索
Copyright©2004-2010GREE,Inc.AllRightsReserved.JavaScriptでネイティブiPhone/Androidアプリを作るグリー株式会社伊藤直也2010.10.19Copyright©2004-2010GREE,Inc.AllRightsReserved.自己紹介•伊藤直也(33)•グリー株式会•ソーシャルメディア統括部長プロデューサー•iPhone/Android等やってますCopyright©2004-2010GREE,Inc.AllRightsReserved.アジェンダ•iPhone/AndroidアプリをJavaScriptで作る•普通のiPhone/Android開発の触り•TitaniumMobileでJavaScriptでアプリ開発※JavaScript+iPhone/Androidと言ってもHTML5+JavaScriptなWebアプリケーションの話はありませんCopyright©2004-2010GREE,Inc.AllRightsReserved.スマートフォン開発•iPhone(iOS)•AndroidCopyright©2004-2010GREE,Inc.AllRightsReserved.普通のiPhoneアプリ開発•iOSSDK+Xcode,Objective-CCopyright©2004-2010GREE,Inc.AllRightsReserved.InterfaceBuilder•GUIでレイアウト→コード中のアクション紐付け•結局Objective-Cで書くこともCopyright©2004-2010GREE,Inc.AllRightsReserved.普通のAndroidアプリ開発•AndroidSDK+Eclipse,Java•(GUIBuilderはそこまで使われていない?)Copyright©2004-2010GREE,Inc.AllRightsReserved.iPhone/Androidアプリで作るもの•主にUIとデバイス連携部分•「クラウド端末」の性格を活かして•ドメインロジックはサーバーで。アプリで表示•デバイスの機能にアクセスしたいときはコアAPIでCopyright©2004-2010GREE,Inc.AllRightsReserved.iPhoneアプリのコード-(void)applicationdidFinishLaunching:(UIApplication*)application{CGRectrect=[windowframe];UILabel*label=[[UILabelalloc]initWithFrame:rect];label.text=@Hello,world!;[windowaddSubview:label];[labelrelease];[windowmakeKeyAndVisible];}•WindowにView(ラベルやボタン)を置く•Objective-CでSDK提供のクラスのAPIを呼ぶCopyright©2004-2010GREE,Inc.AllRightsReserved.Androidアプリのコード•Viewで組み立てる(概念はiPhoneと似ている)•JavaでSDKのAPIを呼んで組み立て(XMLでも書ける)publicclassHelloWorldextendsActivity{@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(newHelloView(this));}}publicclassHelloViewextendsView{@OverrideprotectedvoidonDraw(Canvascanvas){canvas.drawText(HelloWorld!,0,12,newPaint());}}Copyright©2004-2010GREE,Inc.AllRightsReserved.iPhone/Androidネイティブアプリ•Pros•速くて快適なインタフェースを構築できる•デバイスの機能をフルに活かせる•Cons•コード量が多い、工数がかかる•Objective-C･･･メモリ管理:(•iPhone/Androidそのほかマルチプラットフォームにどう対応するか問題•Objective-C/Java両方覚えるの大変/両プラットフォームのアーキテクチャに慣れるの大変Copyright©2004-2010GREE,Inc.AllRightsReserved.AppceleratorTitaniumMobile•JavaScriptでiPhone/Android/BlackBerryアプリが書ける開発環境•JavaScriptなのにネイティブアプリ･･･「な、なんだってー！」•フリー、オープンソース(有料版あり)Copyright©2004-2010GREE,Inc.AllRightsReserved.Hello,Titaniumvarwin=Titanium.UI.createWindow({backgroundColor:'#fff',title:'FirstApp'});varlabel=Titanium.UI.createLabel({text:'Hello,Titanium!',textAlign:'center',height:20,font:{fontSize:20,fontWeight:'bold'}});win.add(label);win.open();Copyright©2004-2010GREE,Inc.AllRightsReserved.ビルド結果Copyright©2004-2010GREE,Inc.AllRightsReserved.Titaniumで開発•JavaScript書く→ビルドする→シミュレータで確認→JavaScript書く･･･•TitaniumSDKはbuilderのみ。IDEなし•Emacs+j2-mode.elでモリモリ書いてますCopyright©2004-2010GREE,Inc.AllRightsReserved.TitaniumMobile開発のはじめ方•プロジェクト作る→Resources/app.js編集→TitaniumDeveloperでビルド•WindowにViewを載せるモデルは変わらずCopyright©2004-2010GREE,Inc.AllRightsReserved.TitaniumisNative•ネイティブだけどJavaScript、JavaScriptだけどネイティブ•UIは速い。快適•setTimeout()、JSON.parse()など普通に呼べる•Titanium.include('../js/jquery.js')なども可能Copyright©2004-2010GREE,Inc.AllRightsReserved.HowdoesTitaniumMobilework?••JavaScriptをプリプロセッサがTitaniumAPIをシンボルマップにプリコンパイル•iPhone･･･.oにコンパイル•Android･･･.classにコンパイル•あとはSDKがネイティブバイナリにしてくれるCopyright©2004-2010GREE,Inc.AllRightsReserved.具体例をみていくCopyright?2004-2007GREE,Inc.AllRightsReserved.Copyright©2004-2010GREE,Inc.AllRightsReserved.Confidential/*最初の画面(window)*/varfirst=Ti.UI.createWindow({title:'FirstWindow',backgroundColor:'#fff'});varbutton=Ti.UI.createButton({style:Ti.UI.iPhone.SystemButtonStyle.BORDERED,title:'touch!',font:{fontSize:16,fontWeight:'bold'},height:30,width:100});first.add(button);/*次の画面(window)*/varsecond=Ti.UI.createWindow({title:'SecondWindow',backgroundColor:'#fff'});varimage=Ti.UI.createImageView({image:'});second.add(image);/*二つの画面を繋ぐwindow+navigationGroup*/varbase=Ti.UI.createWindow();varnav=Ti.UI.iPhone.createNavigationGroup({window:first});base.add(nav);base.open();/*ボタンにイベントを登録*/button.addEventListener('click',function(){nav.open(second);});Copyright©2004-2010GREE,Inc.AllRightsReserved.UI実装の進め方•Ti.UI.createWindow()やTi.UI.createButton()でWindowやViewといったパーツを作る•window.add(button)などでくっつける•フォントの大きさなどはCSSのように指定•動きが必要な箇所はaddEventListener()でイベントハンドラを登録•いかにもJavaScriptCopyright©2004-2010GREE,Inc.AllRightsReserved.できあがっったアプリの使用感•(実機では触れていませんが)ちゃんとネイティブ•期待通り、ぬるりと動く•JavaScriptだから、という妥協した動きにはならないCopyright©2004-2010GREE,Inc.AllRightsReserved.こんなのも作れますCopyright©2004-2010GREE,Inc.AllRightsReserved.CoverFlowViewvarwin=Ti.UI.currentWindow;varview=Ti.UI.createCoverFlowView({images:['../images/01.jpg','../images/02.jpg','../images/03.jpg','../images/04.jpg','../images/05.jpg'],backgroundColor:'#000'});win.add(view);Copyright©2004-2010GREE,Inc.AllRightsReserved.ネットワーク呼び出しはXHR同様varhttp=Titanium.Network.createHTTPClient();http.open('GET','=%23titanium');http.onload=function(){data=JSON.parse(this.responseText);};http.send();/*TCPSocketやBonjourServiceなどもあります*/Cop