1. PhoneGap開発
~ 実践編 ~
PhoneGap http://phonegap.com/
Apache Cordova http://cordova.apache.org/

2. はじめに
ターゲット
ネイティブアプリ開発者
ハイブリッドアプリが気なる人
PhoneGap(Cordova)/HTML5を始めたばかりの人
実践環境
MacOSX

3. はじめに
話すこと
アプリ開発について
ネイティブへのブリッジについて
マルチプラットフォームについて
話さないこと
HTML5/JavaScriptの詳しい話
モバイル向けライブラリ(MVC等)について
PhoneGapPluginの開発について
テストフレームワークについて

4. アプリ開発について
インストール
プロジェクト作成
編集
デバック (シュミレーター）
ビルド
実行

5. アプリ開発について
インストール
パッケージ管理ツール”npm”でインストールしま
す。
※npm - node.js用のツール
node.js http://nodejs.org/ のインストールが必
要。

6. アプリ開発について
$ sudo npm install -g cordova
$ cordova -v
$ sudo npm install -g cordova@2.9.7
最新版インストール
バージョン指定したインストール
$ npm info cordova

7. アプリ開発について
$ cordova create HelloWorldCordova
com.example.hello "HelloWorldCordova"
$ cd HelloWorldCordova
プロジェクト作成

8. アプリ開発について
$ cordova platform add ios
$ cordova platform add android
$ cordova platform add wp8
プラットフォームの追加
$ cordova platforms ls

9. アプリ開発について
$ cordova build
ビルド
IDEでビルド/実行
Xcode
ADT(Eclipse)

10. アプリ開発について
$ sudo npm install -g phonegap
$ phonegap -v
$ sudo npm install -g cordova@2.9.0-0.13.2
最新版インストール
バージョン指定したインストール
$ npm info phonegap

11. アプリ開発について
$ phonegap create HelloWorldPhoneGap
$ cd HelloWorldPhoneGap
プロジェクト作成

12. アプリ開発について
$ phonegap build ios
$ phonegap build android
各プラットフォームのビルド
$ phonegap install ios
$ phonegap install android
各プラットフォームへインストール

13. アプリ開発について
iOSで、上記のエラーが発生した場合、メッセージ
に従い、ios-simをインストールしてください。
Error: ios-sim was not found. Please download,
build and install version 1.5 or greater from https://
github.com/phonegap/ios-sim into your path. Or
'brew install ios-sim' using homebrew: http://
mxcl.github.com/homebrew/

14. アプリ開発について
$ phonegap remorte build ios
$ phonegap remorte build android
$ phonegap remorte build wp8
各プラットフォームのリモートビルド
「Adobe® PhoneGap™ Build」上
でビルド出来ます!
https://build.phonegap.com/apps

15. アプリ開発について
編集ツール
Adobe Edge Code CC
Brackets
Edgeツール＆サービス - http://html.adobe.com/jp/edge/

16. アプリ開発について
プロジェクトのディレクトリ構成
merges
platforms
plugins
www
android
ios
ios
DEMO

17. アプリ開発について
PhoneGap/Cordova API
• Device
• Accelerometer
• Compass
• Geolocation
DEMO

18. アプリ開発について
実行ツール
Adobe Edge Inspect CC
Ripple emulator
http://developer.blackberry.com/html5/documentation/
getting_started_with_ripple_1866966_11.html
DEMO

19. アプリ開発について
Adobe Edge Inspect CCは、中にWebサーバー機能
をもっているため、モバイルからアクセスするこ
とでテストが可能です。
DEMO

20. アプリ開発について
リモートデバック
weinre（WEb INspector REmote）
- リモートWebインスペクタツール
weinre - Home http://people.apache.org/
~pmuellr/weinre/docs/latest/Home.html

21. アプリ開発について
最新版インストール
$ sudo npm install -g weinre
$ weinre
2013-07-30T13:18:53.947Z weinre: starting
server at http://localhost:8080
実行

22. アプリ開発について
テストするページでスクリプトをロードさせる
<script src="http://localhost:8080/target/target-
script-min.js#(任意の文字列)"></script>
http://localhost:8080/client/#(任意の文字列)
ブラウザで確認
DEMO

23. マルチプラットフォームについて
第３のスマートフォン
Windows Phone 8
Tizen
FireFox OS
Ubuntu Touch

24. マルチプラットフォームについて
PhoneGap | Adobe PhoneGap 3.0 Released
http://phonegap.com/blog/2013/07/19/adobe-phonegap-3.0-released/

25. マルチプラットフォームについて

26. マルチプラットフォームについて

27. マルチプラットフォームについて

28. マルチプラットフォームについて
Empty

29. マルチプラットフォームについて
とりあえず、
各プラットフォームで確認してみる。
モバイルブラウザでスペックテストするツール
cordova-3.0.0
- cordova-mobile-spec.zip

30. マルチプラットフォームについて
$ cordova create CordovaMobileSpec
com.example.cordovamobilespec
"CordovaMobileSpec"
$ cd CordovaMobileSpec
$ cd www
$ unzip .../cordova-3.0.0/cordova-mobile-spec.zip
$ cordova platform add ios
$ cordova platform add android
$ cordova build
DEMO

31. マルチプラットフォームについて
Tizen
コマンドは提供されていないが、テンプレート
が提供されている。
DEMO
apache/cordova-tizen
https://github.com/apache/cordova-tizen

32. マルチプラットフォームについて
Firefox OS
コマンドは提供されている。
が、xpcshellが必要らしい???
※ MozillaのJavaScript実行シェルらしい。
DEMO
apache/cordova-firefoxos
https://github.com/apache/cordova-firefoxos

33. マルチプラットフォームについて
Windows Phone 8
Windows Phone SDK 8.0は、システム要件に
Windows 8 64bitが必要 ...!?
検証できませんでした...

34. マルチプラットフォームについて
cordova.js
Cordova
Libraly
YourApp
(WWW)
Naitive
cordova.js
Cordova
Libraly
Naitive
cordova.js
Cordova
Libraly
Naitive
各プラットフォーム向け
Android iOS WP8

35. マルチプラットフォームについて
• Tizen 用ライブラリは古い？ (2.6.0)
• Firefox OS用ライブラリも古い？(2.6.0)
• Ubuntu Touch ???
Creating Cordova Ubuntu QR Code Scanner HTML5 app | Ubuntu App Developer -
http://developer.ubuntu.com/resources/tutorials/html5/creating-cordova-ubuntu-
qr-code-scanner-html5-app/
引き続き調査要...

36. マルチプラットフォームについて
PhonegapとHTML5互換性は...?
navigator.geolocation.getCurrentPosition(geolocationSuccess,
[geolocationError],
[geolocationOptions]);
navigator.geolocation.getCurrentPosition(successCallback,
[errorCallback],
[options]);
Geolocation API
PhoneGap
HTML5

37. マルチプラットフォームについて
PhonegapとHTML5互換性は...?
function onSuccess(position) {
position.coords.latitude
position.coords.longitude
position.coords.altitude
position.coords.accuracy
position.coords.altitudeAccuracy
position.coords.heading
position.coords.speed
}
Geolocation API
PhoneGap/HTML5

38. マルチプラットフォームについて
PhonegapとHTML5互換性は...?
navigator.camera.getPicture(cameraSuccess,
cameraError,
[cameraOptions] );
<input type="file" id="take-picture" accept="image/*">
Camera API
PhoneGap
HTML5
Camera API の利用 - DOM | MDN
https://developer.mozilla.org/ja/docs/DOM/Using_the_Camera_API
PhoneGap API Documentation
http://docs.phonegap.com/en/3.0.0/cordova_camera_camera.md.html#Camera
タグ?

39. マルチプラットフォームについて
PhoneGapはJavaScriptの実行をネイティブのAPI
にブリッジしてるだけ。
UIはHTML/CSS/JavaScriptで構築
-> JavaScript/HTMLは中のWebViewが解釈する。
-> HTML5対応状況はOSバージョンで異なる。
Can I use... Support tables for HTML5, CSS3, etc
http://caniuse.com/#agents=mobile

40. マルチプラットフォームについて
各プラットフォームに合わせた
プログラミングは必要...
AndroidはOSバージョン毎に...

41. Wrap Up
Tools node.js / git
SDK PhoneGap / Cordova
Platform
IDE/SDK
Xcode
ADT(Eclipse) / Android Studio
Windows Phone SDK 8.0 (Visual Studio 2013) etc...
Editor Adobe Edge Code CC / Brackets
etc... (*Recommend JetBrain WebStorm)
Run /
Debug
Chrome / Firefox
Adobe Edge Inspect CC
Ripple emulator
weinre
Build
CLI (PhoneGap / Cordova)
Adobe PhoneGap Build

42. Thank You!
+Katsumi Onishi