PhoneGap勉強会 - 実践編 -
42
PhoneGap開発 ~ 実践編 ~ PhoneGap http://phonegap.com / Apache Cordova http://cordova.apache.org /
-
Upload
katsumi-onishi -
Category
Technology
-
view
2.602 -
download
5
Transcript of PhoneGap勉強会 - 実践編 -
PhoneGap開発
~ 実践編 ~
PhoneGap http://phonegap.com/Apache Cordova http://cordova.apache.org/
はじめに
ターゲット
ネイティブアプリ開発者
ハイブリッドアプリが気なる人
PhoneGap(Cordova)/HTML5を始めたばかりの人
実践環境
MacOSX
はじめに
話すこと
アプリ開発について
ネイティブへのブリッジについて
マルチプラットフォームについて
話さないこと
HTML5/JavaScriptの詳しい話
モバイル向けライブラリ(MVC等)について
PhoneGapPluginの開発について
テストフレームワークについて
アプリ開発について
インストール
プロジェクト作成
編集
デバック (シュミレーター）
ビルド
実行
アプリ開発について
インストール
パッケージ管理ツール”npm”でインストールします。
※npm - node.js用のツール
node.js http://nodejs.org/ のインストールが必要。
アプリ開発について
$ sudo npm install -g cordova
$ cordova -v
$ sudo npm install -g [email protected]
最新版インストール
バージョン指定したインストール
$ npm info cordova
アプリ開発について
$ cordova create HelloWorldCordova com.example.hello "HelloWorldCordova"
$ cd HelloWorldCordova
プロジェクト作成
アプリ開発について
$ cordova platform add ios$ cordova platform add android$ cordova platform add wp8
プラットフォームの追加
$ cordova platforms ls
アプリ開発について
$ cordova build
ビルド
IDEでビルド/実行
Xcode
ADT(Eclipse)
アプリ開発について
$ sudo npm install -g phonegap
$ phonegap -v
$ sudo npm install -g [email protected]
最新版インストール
バージョン指定したインストール
$ npm info phonegap
アプリ開発について
$ phonegap create HelloWorldPhoneGap
$ cd HelloWorldPhoneGap
プロジェクト作成
アプリ開発について
$ phonegap build ios$ phonegap build android
各プラットフォームのビルド
$ phonegap install ios$ phonegap install android
各プラットフォームへインストール
アプリ開発について
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/
アプリ開発について
$ phonegap remorte build ios$ phonegap remorte build android$ phonegap remorte build wp8
各プラットフォームのリモートビルド
「Adobe® PhoneGap™ Build」上でビルド出来ます!
https://build.phonegap.com/apps
アプリ開発について
編集ツール
Adobe Edge Code CC
Brackets
Edgeツール＆サービス - http://html.adobe.com/jp/edge/
アプリ開発について
プロジェクトのディレクトリ構成
merges
platforms
plugins
www
android
ios
ios
DEMO
アプリ開発について
PhoneGap/Cordova API
• Device• Accelerometer• Compass• Geolocation
DEMO
アプリ開発について
実行ツール
Adobe Edge Inspect CC
Ripple emulatorhttp://developer.blackberry.com/html5/documentation/getting_started_with_ripple_1866966_11.html
DEMO
アプリ開発について
Adobe Edge Inspect CCは、中にWebサーバー機能をもっているため、モバイルからアクセスすることでテストが可能です。
DEMO
アプリ開発について
リモートデバック
weinre（WEb INspector REmote）
- リモートWebインスペクタツール
weinre - Home http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
アプリ開発について
最新版インストール
$ sudo npm install -g weinre
$ weinre2013-07-30T13:18:53.947Z weinre: starting server at http://localhost:8080
実行
アプリ開発について
テストするページでスクリプトをロードさせる
<script src="http://localhost:8080/target/target-script-min.js#(任意の文字列)"></script>
http://localhost:8080/client/#(任意の文字列)
ブラウザで確認
DEMO
マルチプラットフォームについて
第３のスマートフォン
Windows Phone 8
Tizen
FireFox OS
Ubuntu Touch
マルチプラットフォームについて
PhoneGap | Adobe PhoneGap 3.0 Released http://phonegap.com/blog/2013/07/19/adobe-phonegap-3.0-released/
マルチプラットフォームについて
マルチプラットフォームについて
マルチプラットフォームについて
マルチプラットフォームについて
Empty
マルチプラットフォームについて
とりあえず、
各プラットフォームで確認してみる。
モバイルブラウザでスペックテストするツール
cordova-3.0.0
- cordova-mobile-spec.zip
マルチプラットフォームについて
$ 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
マルチプラットフォームについて
Tizen
コマンドは提供されていないが、テンプレートが提供されている。
DEMO
apache/cordova-tizen https://github.com/apache/cordova-tizen
マルチプラットフォームについて
Firefox OS
コマンドは提供されている。
が、xpcshellが必要らしい??? ※ MozillaのJavaScript実行シェルらしい。
DEMO
apache/cordova-firefoxos https://github.com/apache/cordova-firefoxos
マルチプラットフォームについて
Windows Phone 8
Windows Phone SDK 8.0は、システム要件にWindows 8 64bitが必要 ...!?
検証できませんでした...
マルチプラットフォームについて
cordova.js
CordovaLibraly
YourApp(WWW)
Naitive
cordova.js
CordovaLibraly
Naitive
cordova.js
CordovaLibraly
Naitive
各プラットフォーム向け
Android iOS WP8
マルチプラットフォームについて
• 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/
引き続き調査要...
マルチプラットフォームについて
PhonegapとHTML5互換性は...?
navigator.geolocation.getCurrentPosition(geolocationSuccess, [geolocationError], [geolocationOptions]);
navigator.geolocation.getCurrentPosition(successCallback, [errorCallback], [options]);
Geolocation APIPhoneGap
HTML5
マルチプラットフォームについて
PhonegapとHTML5互換性は...?
function onSuccess(position) {position.coords.latitudeposition.coords.longitudeposition.coords.altitudeposition.coords.accuracyposition.coords.altitudeAccuracyposition.coords.headingposition.coords.speed
}
Geolocation APIPhoneGap/HTML5
マルチプラットフォームについて
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
タグ?
マルチプラットフォームについて
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
マルチプラットフォームについて
各プラットフォームに合わせたプログラミングは必要...
AndroidはOSバージョン毎に...
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
Thank You!+Katsumi Onishi
