Desarrollo de Apps Multiplataforma con Cordova / Phonegap by BitCuántico
Cordova (PhoneGap) で始める、スマホアプリ開発
-
Upload
kenichi-inoue -
Category
Technology
-
view
1.525 -
download
1
Transcript of Cordova (PhoneGap) で始める、スマホアプリ開発
![Page 1: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/1.jpg)
CORDOVA (PHONEGAP) で始める、スマホアプリ開発!2014年3月 アルティザンエッジ合同会社 井上 研一
![Page 2: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/2.jpg)
CORDOVA (PHONEGAP) とは?
![Page 3: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/3.jpg)
CORDOVAとPHONEGAP
• 基本的に、CordovaとPhoneGapは同じものです。
• Cordova
• Apache Software Foundationに寄贈され、開発が行われているプロダクト名。
• PhoneGap
• CordovaをAdobeが扱う場合のブランド名。
• この資料では、主にCordovaと呼びます。
![Page 4: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/4.jpg)
ネイティブアプリ
• ネイティブアプリとは、その端末のネイティブ言語で記述されたアプリのことを言います。
• iPhone/iPad (iOS): Objective-C
• Android: Java
• Firefox OS: HTML5、JavaScript ←!
• ネイティブアプリは基本的に高速に動作しますが、開発はやや面倒です。
• 例えば、iOSアプリとAndroidアプリのワンソース開発は出来ません。
![Page 5: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/5.jpg)
CORDOVAでは?
• Cordovaで作ったアプリは、見かけ上はネイティブアプリと同様に動作します。
• Webブラウザ+αのシンプルなネイティブアプリの中で、Webアプリが動いている感じ。
• HTML5、JavaScriptで開発します。
• ネイティブアプリよりは動作は遅めです。
• 3Dゲームを作ろうとかしない限りは、まず大丈夫です。
• 例えば、iOSアプリとAndroidアプリのワンソース開発が出来ます!
![Page 6: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/6.jpg)
UIViewController
UIWebView
index.html
![Page 7: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/7.jpg)
よくある質問
• オフラインでも使えるの?
• アプリで必要なHTMLファイル、JavaScriptファイル等はすべて、配布するアプリ内に入れてしまうので、オフラインでも使えます。
• カメラとか、端末特有の機能は使えるの?
• Cordovaには、端末特有の機能を使うための豊富なプラグインが準備されています。
![Page 8: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/8.jpg)
TITANIUM MOBILEとの違い
• Titanium Mobile
• JavaScriptで開発するのは同じです。
• JavaScriptで書いたコードが、ネイティブにコンパイルされます。
• Cordova
• JavaScriptで書いたコードが、アプリのブラウザ内で実行されます。
![Page 9: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/9.jpg)
CORDOVAアプリの構造
![Page 10: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/10.jpg)
CORDOVAアプリで書くコード
• HTML
• CSS
• JavaScript
• Objective-C、Java・・・
• 独自でプラグインを作るときだけ
![Page 11: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/11.jpg)
CORDOVAアプリを簡単に作るために・・・• jQuery
• JavaScriptを書くなら、やっぱり
• jQuery Mobile
• スマホアプリっぽい見た目を実現!
• Backbone.js
• ModelとViewを分けて書くためのフレームワーク
![Page 12: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/12.jpg)
余談
• CoffeeScript
• JavaScriptのコードを簡潔に書けます。
• コンパイルすると、出来の良いJavaScriptコードになります。
![Page 13: Cordova (PhoneGap) で始める、スマホアプリ開発](https://reader033.fdocuments.net/reader033/viewer/2022052410/555d786ad8b42a687b8b57a7/html5/thumbnails/13.jpg)
jQuery Mobile なし jQuery Mobile あり