PhoneGap勉強会 - 実践編 -
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

PhoneGap勉強会 - 実践編 -

on

  • 3,066 views

 

Statistics

Views

Total Views
3,066
Views on SlideShare
3,029
Embed Views
37

Actions

Likes
8
Downloads
13
Comments
0

3 Embeds 37

https://sub0000526163.hmk-temp.com 34
https://twitter.com 2
http://unisysdoc 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

PhoneGap勉強会 - 実践編 - Presentation Transcript

  • 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. マルチプラットフォームについて 第3のスマートフォン 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