PhoneGap勉強会 - 実践編 -

3,369 views

Published on

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,369
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
18
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

PhoneGap勉強会 - 実践編 -

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

×