phonegap勉強会 - 実践編 -
TRANSCRIPT
![Page 1: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/1.jpg)
PhoneGap開発
~ 実践編 ~
PhoneGap http://phonegap.com/Apache Cordova http://cordova.apache.org/
![Page 2: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/2.jpg)
はじめに
ターゲット
ネイティブアプリ開発者
ハイブリッドアプリが気なる人
PhoneGap(Cordova)/HTML5を始めたばかりの人
実践環境
MacOSX
![Page 3: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/3.jpg)
はじめに
話すこと
アプリ開発について
ネイティブへのブリッジについて
マルチプラットフォームについて
話さないこと
HTML5/JavaScriptの詳しい話
モバイル向けライブラリ(MVC等)について
PhoneGapPluginの開発について
テストフレームワークについて
![Page 4: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/4.jpg)
アプリ開発について
インストール
プロジェクト作成
編集
デバック (シュミレーター)
ビルド
実行
![Page 5: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/5.jpg)
アプリ開発について
インストール
パッケージ管理ツール”npm”でインストールします。
※npm - node.js用のツール
node.js http://nodejs.org/ のインストールが必要。
![Page 6: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/6.jpg)
アプリ開発について
$ sudo npm install -g cordova
$ cordova -v
$ sudo npm install -g [email protected]
最新版インストール
バージョン指定したインストール
$ npm info cordova
![Page 7: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/7.jpg)
アプリ開発について
$ cordova create HelloWorldCordova com.example.hello "HelloWorldCordova"
$ cd HelloWorldCordova
プロジェクト作成
![Page 8: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/8.jpg)
アプリ開発について
$ cordova platform add ios$ cordova platform add android$ cordova platform add wp8
プラットフォームの追加
$ cordova platforms ls
![Page 9: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/9.jpg)
アプリ開発について
$ cordova build
ビルド
IDEでビルド/実行
Xcode
ADT(Eclipse)
![Page 10: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/10.jpg)
アプリ開発について
$ sudo npm install -g phonegap
$ phonegap -v
$ sudo npm install -g [email protected]
最新版インストール
バージョン指定したインストール
$ npm info phonegap
![Page 11: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/11.jpg)
アプリ開発について
$ phonegap create HelloWorldPhoneGap
$ cd HelloWorldPhoneGap
プロジェクト作成
![Page 12: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/12.jpg)
アプリ開発について
$ phonegap build ios$ phonegap build android
各プラットフォームのビルド
$ phonegap install ios$ phonegap install android
各プラットフォームへインストール
![Page 13: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/13.jpg)
アプリ開発について
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/
![Page 14: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/14.jpg)
アプリ開発について
$ phonegap remorte build ios$ phonegap remorte build android$ phonegap remorte build wp8
各プラットフォームのリモートビルド
「Adobe® PhoneGap™ Build」上でビルド出来ます!
https://build.phonegap.com/apps
![Page 15: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/15.jpg)
アプリ開発について
編集ツール
Adobe Edge Code CC
Brackets
Edgeツール&サービス - http://html.adobe.com/jp/edge/
![Page 16: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/16.jpg)
アプリ開発について
プロジェクトのディレクトリ構成
merges
platforms
plugins
www
android
ios
ios
DEMO
![Page 17: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/17.jpg)
アプリ開発について
PhoneGap/Cordova API
• Device• Accelerometer• Compass• Geolocation
DEMO
![Page 18: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/18.jpg)
アプリ開発について
実行ツール
Adobe Edge Inspect CC
Ripple emulatorhttp://developer.blackberry.com/html5/documentation/getting_started_with_ripple_1866966_11.html
DEMO
![Page 19: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/19.jpg)
アプリ開発について
Adobe Edge Inspect CCは、中にWebサーバー機能をもっているため、モバイルからアクセスすることでテストが可能です。
DEMO
![Page 20: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/20.jpg)
アプリ開発について
リモートデバック
weinre(WEb INspector REmote)
- リモートWebインスペクタツール
weinre - Home http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
![Page 21: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/21.jpg)
アプリ開発について
最新版インストール
$ sudo npm install -g weinre
$ weinre2013-07-30T13:18:53.947Z weinre: starting server at http://localhost:8080
実行
![Page 22: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/22.jpg)
アプリ開発について
テストするページでスクリプトをロードさせる
<script src="http://localhost:8080/target/target-script-min.js#(任意の文字列)"></script>
http://localhost:8080/client/#(任意の文字列)
ブラウザで確認
DEMO
![Page 23: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/23.jpg)
マルチプラットフォームについて
第3のスマートフォン
Windows Phone 8
Tizen
FireFox OS
Ubuntu Touch
![Page 24: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/24.jpg)
マルチプラットフォームについて
PhoneGap | Adobe PhoneGap 3.0 Released http://phonegap.com/blog/2013/07/19/adobe-phonegap-3.0-released/
![Page 25: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/25.jpg)
マルチプラットフォームについて
![Page 26: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/26.jpg)
マルチプラットフォームについて
![Page 27: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/27.jpg)
マルチプラットフォームについて
![Page 28: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/28.jpg)
マルチプラットフォームについて
Empty
![Page 29: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/29.jpg)
マルチプラットフォームについて
とりあえず、
各プラットフォームで確認してみる。
モバイルブラウザでスペックテストするツール
cordova-3.0.0
- cordova-mobile-spec.zip
![Page 30: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/30.jpg)
マルチプラットフォームについて
$ 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
![Page 31: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/31.jpg)
マルチプラットフォームについて
Tizen
コマンドは提供されていないが、テンプレートが提供されている。
DEMO
apache/cordova-tizen https://github.com/apache/cordova-tizen
![Page 32: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/32.jpg)
マルチプラットフォームについて
Firefox OS
コマンドは提供されている。
が、xpcshellが必要らしい??? ※ MozillaのJavaScript実行シェルらしい。
DEMO
apache/cordova-firefoxos https://github.com/apache/cordova-firefoxos
![Page 33: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/33.jpg)
マルチプラットフォームについて
Windows Phone 8
Windows Phone SDK 8.0は、システム要件にWindows 8 64bitが必要 ...!?
検証できませんでした...
![Page 34: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/34.jpg)
マルチプラットフォームについて
cordova.js
CordovaLibraly
YourApp(WWW)
Naitive
cordova.js
CordovaLibraly
Naitive
cordova.js
CordovaLibraly
Naitive
各プラットフォーム向け
Android iOS WP8
![Page 35: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/35.jpg)
マルチプラットフォームについて
• 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/
引き続き調査要...
![Page 36: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/36.jpg)
マルチプラットフォームについて
PhonegapとHTML5互換性は...?
navigator.geolocation.getCurrentPosition(geolocationSuccess, [geolocationError], [geolocationOptions]);
navigator.geolocation.getCurrentPosition(successCallback, [errorCallback], [options]);
Geolocation APIPhoneGap
HTML5
![Page 37: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/37.jpg)
マルチプラットフォームについて
PhonegapとHTML5互換性は...?
function onSuccess(position) {position.coords.latitudeposition.coords.longitudeposition.coords.altitudeposition.coords.accuracyposition.coords.altitudeAccuracyposition.coords.headingposition.coords.speed
}
Geolocation APIPhoneGap/HTML5
![Page 38: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/38.jpg)
マルチプラットフォームについて
PhonegapとHTML5互換性は...?
navigator.camera.getPicture(cameraSuccess, cameraError, [cameraOptions] );
<input type="file" id="take-picture" accept="image/*">
Camera APIPhoneGap
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
タグ?
![Page 39: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/39.jpg)
マルチプラットフォームについて
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
![Page 40: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/40.jpg)
マルチプラットフォームについて
各プラットフォームに合わせたプログラミングは必要...
AndroidはOSバージョン毎に...
![Page 41: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/41.jpg)
Wrap Up
Tools node.js / git
SDK PhoneGap / Cordova
PlatformIDE/SDK
XcodeADT(Eclipse) / Android StudioWindows Phone SDK 8.0 (Visual Studio 2013) etc...
Editor Adobe Edge Code CC / Bracketsetc... (*Recommend JetBrain WebStorm)
Run / Debug
Chrome / FirefoxAdobe Edge Inspect CCRipple emulatorweinre
Build CLI (PhoneGap / Cordova)Adobe PhoneGap Build
![Page 42: PhoneGap勉強会 - 実践編 -](https://reader034.vdocuments.net/reader034/viewer/2022042601/5560b236d8b42a033c8b46f0/html5/thumbnails/42.jpg)
Thank You!+Katsumi Onishi