Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (14)
Ähnlich wie PhoneGap勉強会 in 熊本
Ähnlich wie PhoneGap勉強会 in 熊本 (20)
PhoneGap勉強会 in 熊本
- 2. 村上 卓 •prime switch*株式会社 所属 スマートフォンアプリ開発 •PhoneGapの利用 iOS向け業務用アプリの作成 ✤ Facebook http://facebook.com/sugumura
- 7. PhoneGap Build •クラウド上でモバイルアプリをビルド できるサービス HTML/CSS/JSをアップロードするだ けでアプリに変換してくれる Adobe / Yohei Shimomae
- 13. Android • Android SDKが必要 (WindowsはAntも必要） • Androidはtoolsとplatform-toolsにパスを 通しておく • DLしたphonegapを解凍 • Terminal(端末)かコマンドプロンプトでフォ ルダまで移動
- 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. Xcode
- 16. Android •Eclipseでプロジェクトを開く •File -> Import -> Android Existing Android Code Into Workspace
- 17. Eclipse
- 20. サンプルを見る
- 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. index.js var 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); } };
- 24. 共通API • Accelerometer • Camera • Capture • Compass • Connection • Contacts • Device • Events • File http://phonegap.com/about/feature/ • Geolocation • Globalization • InAppBrowser • Media • Notification • Splashscreen • Storage
- 30. デバッグ
- 33. Webインスペクタ •iOS限定だがWebインスペクタが利用 可能 iOS 設定->Safari->詳細->Webインスペクタ ON Safari 環境設定->メニューバーに 開発 メニューに表示
- 36. Androidは?
- 37. Adobe Edge Inspect •Chrome拡張とiOS/Android端末に Edge Inspectアプリをインストールす ることでリモートインスペクションが 可能 •内部的にはweinreを利用
- 39. Adobe Edge Inspect •利用にはCreative Cloudのアカウント が必要（無料で可） •weinreを使うための手間が省けるため 使ってみるべき
- 40. モバイルブラウザ注意点
- 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. おまけ
- 48. Adobe Edge Code •Creative CloudアカウントでDL可能 •HTML/CSS/JS向けエディタ •PhoneGap Buildとの連携もできる (らしいけどまだReadMeができてない)