CORDOVA (PHONEGAP) で始める、スマホアプリ開発!2014年3月 アルティザンエッジ合同会社　井上 研一

CORDOVA (PHONEGAP) とは？

CORDOVAとPHONEGAP

• 基本的に、CordovaとPhoneGapは同じものです。

• Cordova

• Apache Software Foundationに寄贈され、開発が行われているプロダクト名。

• PhoneGap

• CordovaをAdobeが扱う場合のブランド名。

• この資料では、主にCordovaと呼びます。

ネイティブアプリ

• ネイティブアプリとは、その端末のネイティブ言語で記述されたアプリのことを言います。

• iPhone/iPad (iOS)：　Objective-C

• Android：　Java

• Firefox OS：　HTML5、JavaScript　←！

• ネイティブアプリは基本的に高速に動作しますが、開発はやや面倒です。

• 例えば、iOSアプリとAndroidアプリのワンソース開発は出来ません。

CORDOVAでは？

• Cordovaで作ったアプリは、見かけ上はネイティブアプリと同様に動作します。

• Webブラウザ＋αのシンプルなネイティブアプリの中で、Webアプリが動いている感じ。

• HTML5、JavaScriptで開発します。

• ネイティブアプリよりは動作は遅めです。

• 3Dゲームを作ろうとかしない限りは、まず大丈夫です。

• 例えば、iOSアプリとAndroidアプリのワンソース開発が出来ます！

UIViewController

UIWebView

index.html

よくある質問

• オフラインでも使えるの？

• アプリで必要なHTMLファイル、JavaScriptファイル等はすべて、配布するアプリ内に入れてしまうので、オフラインでも使えます。

• カメラとか、端末特有の機能は使えるの？

• Cordovaには、端末特有の機能を使うための豊富なプラグインが準備されています。

TITANIUM MOBILEとの違い

• Titanium Mobile

• JavaScriptで開発するのは同じです。

• JavaScriptで書いたコードが、ネイティブにコンパイルされます。

• Cordova

• JavaScriptで書いたコードが、アプリのブラウザ内で実行されます。

CORDOVAアプリの構造

CORDOVAアプリで書くコード

• HTML

• CSS

• JavaScript

• Objective-C、Java・・・

• 独自でプラグインを作るときだけ

CORDOVAアプリを簡単に作るために・・・• jQuery

• JavaScriptを書くなら、やっぱり

• jQuery Mobile

• スマホアプリっぽい見た目を実現！

• Backbone.js

• ModelとViewを分けて書くためのフレームワーク

余談

• CoffeeScript

• JavaScriptのコードを簡潔に書けます。

• コンパイルすると、出来の良いJavaScriptコードになります。

jQuery Mobile なし jQuery Mobile あり