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

PhoneGap勉強会 - 実践編 -

  • 2,353 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,353
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
13
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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