Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PhoneGap勉強会 in 熊本

1,234 views

Published on

利用した資料です。

  • Be the first to comment

  • Be the first to like this

PhoneGap勉強会 in 熊本

  1. 1. PhoneGap勉強会in熊本平成25年6月8日
  2. 2. 村上 卓•prime switch*株式会社 所属スマートフォンアプリ開発•PhoneGapの利用iOS向け業務用アプリの作成✤ Facebookhttp://facebook.com/sugumura
  3. 3. …の前に•http://phonegap.com/download/•PhoneGapをDLしておこう!
  4. 4. PhoneGapって?•スマートフォン向けのハイブリッドアプリケーション制作用フレームワーク画像引用元 http://phonegap.com/
  5. 5. Apache Cordova?•PhoneGapのオープンソース名•Adobeが開発元を買収しPhoneGapをApacheに寄贈•PhoneGapはディストリビューションのひとつ
  6. 6. 使ってみよう•PhoneGapを使う方法は2つ➡PhoneGap用のプロジェクトを作成しビルド➡PhoneGap Buildを利用
  7. 7. PhoneGap Build•クラウド上でモバイルアプリをビルドできるサービスHTML/CSS/JSをアップロードするだけでアプリに変換してくれるAdobe / Yohei Shimomae
  8. 8. PhoneGap Build•アプリは生成されたQRコードからインストール可能(DLもできる)- iOSは証明書とプロビジョニングの登録が必要なのでちょっとめんどくさい…
  9. 9. ちょこっと実演•https://build.phonegap.com★Githubのコードを利用可
  10. 10. PhoneGap Build•すぐに試してみようという人にはおすすめ- 今後Edgeツールとの連携が期待できる?
  11. 11. PhoneGapを使ってみよう•http://phonegap.com/download/‣ ぶっちゃけ公式のGettingStarted Guide見ればいいです
  12. 12. iOS•XcodeとXcode Command LineToolsのインストールが必要•DLしたphonegapを解凍•Terminal(端末)でフォルダまで移動
  13. 13. Android• Android SDKが必要(WindowsはAntも必要)• Androidはtoolsとplatform-toolsにパスを通しておく• DLしたphonegapを解凍• Terminal(端末)かコマンドプロンプトでフォルダまで移動
  14. 14. iOS/Android$ cd lib/ios/bin$ cd lib/android/bin$ ./create PROJECT_LOCATION PACKAGE_NAME PROJECT_NAME例$ ./create /Documents/FirstProject com.example.FirstProject FirstProject
  15. 15. Xcode
  16. 16. Android•Eclipseでプロジェクトを開く•File -> Import -> AndroidExisting Android Code Into Workspace
  17. 17. Eclipse
  18. 18. 結果•一区切り•お疲れ様です!
  19. 19. 基本的なこと•基本的に意識するのはwwwフォルダ以下•Webと同じように最初にindex.htmlを読み込む
  20. 20. サンプルを見る
  21. 21. index.html<html><head><meta charset="utf-8" /><meta name="format-detection" content="telephone=no" /><meta name="viewport" content="user-scalable=no, initial-scale=1,maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /><link rel="stylesheet" type="text/css" href="css/index.css" /><title>Hello World</title></head><body><div class="app"><h1>Apache Cordova</h1><div id="deviceready" class="blink"><p class="event listening">Connecting to Device</p><p class="event received">Device is Ready</p></div></div><script type="text/javascript" src="cordova-2.7.0.js"></script><script type="text/javascript" src="js/index.js"></script><script type="text/javascript">app.initialize();</script></body></html>
  22. 22. index.jsvar app = {initialize: function() {this.bindEvents();},bindEvents: function() {document.addEventListener(deviceready, this.onDeviceReady, false);},onDeviceReady: function() {app.receivedEvent(deviceready);},receivedEvent: function(id) {var parentElement = document.getElementById(id);var listeningElement = parentElement.querySelector(.listening);var receivedElement = parentElement.querySelector(.received);listeningElement.setAttribute(style, display:none;);receivedElement.setAttribute(style, display:block;);console.log(Received Event: + id);}};
  23. 23. ポイント•PhoneGapのデバイスアクセスするAPIはdeviceready後に利用可能
  24. 24. 共通API• Accelerometer• Camera• Capture• Compass• Connection• Contacts• Device• Events• Filehttp://phonegap.com/about/feature/• Geolocation• Globalization• InAppBrowser• Media• Notification• Splashscreen• Storage
  25. 25. 使ってみるnavigator.notification.alert(Alert,null, // callbackTitle,Done);
  26. 26. ポイント•基本的にコールバックで呼ばれるため非同期的になる•デバイス呼び出しのAPIを利用する場合はある程度想定しておくこと
  27. 27. 他•console.logは中でラッパーされてるのでそのままXcodeやEclipseに出力してくれます
  28. 28. 共通APIにない機能が欲しい時は?•https://github.com/phonegap/phonegap-pluginsメジャーなネイティブ機能は置いてあるので最初にないか探してみるべき更新されてないものがあるので手をいれる必要があったりするけど…
  29. 29. pluginを自作したいときは?•…既存のものを見てがんばってください
  30. 30. デバッグ
  31. 31. Ripple Emulatorhttps://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc
  32. 32. Ripple Emulator•Chrome拡張でPhoneGap特有のイベントなどもサポートしてくれる•一部のAPIもサポート•手軽に画面サイズを変更できるため簡単な確認に便利
  33. 33. Webインスペクタ•iOS限定だがWebインスペクタが利用可能iOS設定->Safari->詳細->Webインスペクタ ONSafari環境設定->メニューバーに 開発 メニューに表示
  34. 34. •Xcodeでビルド•Safari->開発->端末名->index.html
  35. 35. •実機ビルドでのデバッグができるので大変便利•個人的にはiOSでの開発はこのスタイルをおすすめ
  36. 36. Androidは?
  37. 37. Adobe Edge Inspect•Chrome拡張とiOS/Android端末にEdge Inspectアプリをインストールすることでリモートインスペクションが可能•内部的にはweinreを利用
  38. 38. Adobe Edge Inspect•同一ネットワーク内に端末があることが条件•Chromeで閲覧しているページを端末で表示できる•スクリーンショットもChromeから可能
  39. 39. Adobe Edge Inspect•利用にはCreative Cloudのアカウントが必要(無料で可)•weinreを使うための手間が省けるため使ってみるべき
  40. 40. モバイルブラウザ注意点 
  41. 41. モバイルブラウザの注意点•スマホブラウザではダブルタップイベントなどが実装されているためtouchendからclickまで300ms待ち時間がある
  42. 42. 対処➡FastClickなどのイベント高速化のライブラリの利用を検討https://github.com/ftlabs/fastclickjQueryMobileではvclickイベントとして定義されている
  43. 43. iOSの注意点•iOS6現在WebViewではJITが効かない•Mobile Safariではストレスなく動くいていてもPhoneGapではカクカクになってしまう場合がある
  44. 44. viewport•HTMLのメタ要素でviewportがある•モバイルブラウザでは指定がない場合、横幅980pxとして表示
  45. 45. 再度index.html•width=device-widthでデバイスの解像度を指定してくれる•iOSではRetinaでも320pxとなるので注意<meta name="viewport" content="user-scalable=no, initial-scale=1,maximum-scale=1, minimum-scale=1, width=device-width,height=device-height, target-densitydpi=device-dpi" />
  46. 46. おまけ
  47. 47. PhoneGapのアップグレード•アップグレードガイドが公開されているhttp://docs.phonegap.com/en/2.7.0/guide_upgrading_index.md.htmlが、プロジェクト作りなおしたほうが早いデス…
  48. 48. Adobe Edge Code•Creative CloudアカウントでDL可能•HTML/CSS/JS向けエディタ•PhoneGap Buildとの連携もできる(らしいけどまだReadMeができてない)
  49. 49. •Quick Editがおもしろい•Chromeとライブ編集が可能

×