PhoneGapの始め方
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

PhoneGapの始め方

on

  • 9,284 views

PhoneGap UserGroup 第一回勉強会資料

PhoneGap UserGroup 第一回勉強会資料
PhoneGapの始め方

Statistics

Views

Total Views
9,284
Views on SlideShare
9,269
Embed Views
15

Actions

Likes
17
Downloads
87
Comments
1

3 Embeds 15

https://twitter.com 10
https://si0.twimg.com 4
http://pinterest.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

PhoneGapの始め方 Presentation Transcript

  • 1. PhoneGapの始め方AKABANA | Eiichi Arikawa© 2012 AKABANA. All Rights Reserved.
  • 2. Contents  PhoneGapについて  PhoneGap 2.0  PhoneGapの始め方  PhoneGap:Build  iOS  Android © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 2
  • 3.  PhoneGap© 2012 AKABANA. All Rights Reserved. 3
  • 4. PhoneGap  スマートフォン向けハイブリッドアプリケーション 制作のためのフレームワーク  ハイブリッドアプリ  ネイティブアプリ上のWebアプリケーション  アプリケーションはHTML/CSS/Javascriptを使用  プラットフォーム用のアプリストアでの配布可能  1つのソースで多くのプラットフォームに対応可能 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 4
  • 5. PhoneGap  対応プラットフォームは、7  iPhone / iPhone 3G  iPhone 3GS and newer  Android  Blackberry OS 5.x  Blackberry OS 6.0+  WebOS  Windows Phone 7  Symbian  Bada © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 5
  • 6. PhoneGap  ウェブアプリの弱点をクリアできる  プラットフォームのアプリストアが使える  App Store  Google Play  課金システムも利用できる  デバイス依存機能が使える  カメラ、センサー系、アドレス帳など © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 6
  • 7. PhoneGap  Apache Cordova  Cordova は Nitobi が開発した PhoneGap としてスタート しました  Nitobi は Adobe System Inc. に買収され、PhoneGap フ レームワークは、 Apache Software Foundation の下で、 Apache Cordova と名前を変えてオープンソースになりま した  HTML/CSS/JavaScript コンテンツをホストするための環境 を提供する  JavaScriptからデバイス依存機能を呼べる仕組みを提供 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 7
  • 8. PhoneGap  デバイスに共通する機能にアクセスするためのAPI  Device  Accelerometer  Events  Camera  File  Capture  Geolocation  Compass  Media  Connection  Notification  Contacts  Storage  プラットフォームのAPIの対応表  http://phonegap.com/about/feature © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 8
  • 9. PhoneGapの始め方  Camera API  navigator.camera.getPicture(onSuccess, onFail, { quality: 50,     destinationType: Camera.DestinationType.DATA_URL  }); function onSuccess(imageData) {     var image = document.getElementById(myImage);     image.src = "data:image/jpeg;base64," + imageData; } function onFail(message) {     alert(Failed because: + message); © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 9
  • 10. PhoneGapの始め方  AcceleratorAPI  function onSuccess(acceleration) {     alert(Acceleration X: + acceleration.x + n +           Acceleration Y: + acceleration.y + n +           Acceleration Z: + acceleration.z + n +           Timestamp:      + acceleration.timestamp + n); }; function onError() {     alert(onError!); }; var options = { frequency: 3000 }; var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options); © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 10
  • 11. PhoneGap  PhoneGap Plugin  PhoneGapを拡張するための仕組み  JavaScriptとネイティブコードで作成する  公開されているプラグイン  Twitter  https://github.com/brianantonelli/phonegap-plugin-twitter  Facebook  https://github.com/davejohnson/phonegap-plugin-facebook- connect/  MapKit  https://github.com/phonegap/phonegap-plugins/tree/ master/iPhone/MapKitPlug © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 11
  • 12. PhoneGap Build  PhoneGap 2.0  Cordova WebViewをPhoneGapに統合  Android/iOS/BlackBerry向けのコマンドラインツールの導 入  移行ガイドやプラグインなどの情報をまとめたドキュメン トの強化  リモートウェブインスペクタツール「weinre」を採用  プラットフォーム間で統一されたJavaScriptをサポートする ため「Cordova JS」を導入 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 12
  • 13. PhoneGap  Download  http://phonegap.com/download  Getting Started Guildres  http://docs.phonegap.com/en/2.0.0/guide_getting- started_index.md.html  API Reference  http://docs.phonegap.com/en/2.0.0/index.html © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 13
  • 14.  PhoneGap:Build© 2012 AKABANA. All Rights Reserved. 14
  • 15. PhoneGap:Build  https://build.phonegap.com/  HTML/CSS/JavaScriptなどをアップロードすると、 各プラットフォーム向けバイナリへエクスポート © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 15
  • 16. PhoneGap:Build  Dreamweaver CS6 連携  Adobe Dreamweaver CS6でモバイル向けテンプレートで サイト作成  DreamweaverからPhoneGap::Buildを使って各種プラット フォーム向けバイナリを生成・ダウンロード可能  参考記事 ADC  http://www.adobe.com/jp/devnet/phonegap/ articles/phonegap_dwcs6_mobile_app.html © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 16
  • 17.  PhoneGap for iOS© 2012 AKABANA. All Rights Reserved. 17
  • 18. PhoneGap for iOS  事前準備  インストール  Xcode 4.3+  Xcode Command Line Tools  Apple iOS device (iPhone, iPad, iPod Touch)  iOS 開発証明書  ダウンロード  PhoneGap 2.0  http://phonegap.com/download  以降、展開したフォルダを{phonegap}と表す © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 18
  • 19. PhoneGap for iOS  {phonegap}/lib/ios/Cordova-2.0.0.dmgを  Cordova-2.0.0.pkgをインストール  binをローカルディスクにコピーする © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 19
  • 20. PhoneGap for iOS   Xcodeプロジェクト作成  コマンドを使ってプロジェクトを作成  create <project_folder_path> <bundle_id> <project_name>  <project_folder_path>  プロジェクトの保存先  <package_name>  プロジェクトのパッケージ名  <project_name>  プロジェクト名 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 20
  • 21. PhoneGap for iOS   Xcodeプロジェクトを設定  ユーザの書類の中にCordovaLib があることを確認  CordovaLib/CordovaLib.xcodeprojをプロジェクトに Drag&Dropする  CordovaLib.xcodeprojが設定されていない場合 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 21
  • 22. PhoneGap for iOS   Xcodeプロジェクトを設定  TargetのBuild Phasesタブを開いてTarget Dependencies を開いてCordovaLibが設定されていることを確認  設定されていない場合は、+ボタンから選択する © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 22
  • 23. PhoneGap for iOS   Xcodeプロジェクトを設定  ProjectのBuild Phasesタブ を開いてLink Binary with LibrariesにlibCordova.aが 設定されていることを確認  設定されていない場合は、 +ボタンから選択 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 23
  • 24. PhoneGap for iOS  シミュレーターで起動  ターゲットをiOS [version] Simulatorにする  Runボタンをクリックするとシミュレータにアプリが転送 されて起動 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 24
  • 25. PhoneGap for iOS  実機で起動  plistファイルのBundleIdentifierとアプリIDを確認する  Teamプロビジョニングを使う場合には変更不要  ターゲットをデバイス名にする  iOS Deviceは、デバイスの名前が表示される  Runボタンをクリックするとデバイスにアプリが転送され て起動 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 25
  • 26.  PhoneGap for Android© 2012 AKABANA. All Rights Reserved. 26
  • 27. PhoneGap for Android  事前準備  インストール  Eclipse Classic 3.4 +  Android SDK  ADT Plugin  ダウンロード  PhoneGap 2.0  http://phonegap.com/download  以降、展開したフォルダを{phonegap}と表す © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 27
  • 28. PhoneGap for Android  Android プロジェクト作成 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 28
  • 29. PhoneGap for Android  Android プロジェクト作成 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 29
  • 30. PhoneGap for Android  Activityの選択 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 30
  • 31. PhoneGap for Android  Activityの作成 © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 31
  • 32. PhoneGap for Android  Androidプロジェクトにフォルダ作成  Phonegapのコンテンツをいれるフォルダ  assets/www  HTML/CSS/JavaScriptなどを おくことを想定している © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 32
  • 33. PhoneGap for Android  PhoneGapアプリに必要なファイルをコピー  cordova-2.0.0.js を assets/www に コピー  {phonegap}/lib/android/cordova-2.0.0.js  xml を res にコピー  {phonegap}/xml  cordova-2.0.0.jar を libsにコピーして ビルドパスに追加  {phonegap}/lib/android/cordova-2.0.0.jar © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 33
  • 34. PhoneGap for Android  Activityクラスを修正  srcの中にある自動生成されたActivityクラスを開く  import org.apache.cordova.*; を追加する  継承クラスActivity を DroidGapに書き換える  アプリケーションHTMLの読み込み  onCreateメソッドのsetContentViewの代わりに下記を記 述する  super.loadUrl("file:///android_asset/www/ index.html"); © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 34
  • 35. PhoneGap for Android  AndroidManifest.xmlの修正  <application.../>の上ぐらいに権限設定を記述する  <supports-screens>  解像度にアプリを対応させるかなどの設定  <uses-permission>  アプリが端末に要求する機能を許可するかどうかを設定  <activity>  android:configChangesを追加して、アクティビティを再起動せずに 処理を続けさせたい場合の情報を記述する  https://sites.google.com/a/techdoctranslator.com/jp/android/ © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 35
  • 36. PhoneGap for Android  <supports-screens     android:largeScreens="true"     android:normalScreens="true"     android:smallScreens="true"     android:resizeable="true"     android:anyDensity="true" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" / > <uses-permission © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 36
  • 37. PhoneGap for Android  Hello World アプリ作成  assets/wwwにindex.htmlを作成する  <!DOCTYPE HTML> <html> <head> <title>Cordova</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> </head> <body> <h1>Hello World</h1> </body> </html> © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 37
  • 38. PhoneGap for Android  エミュレータで実行  プロジェクトを右クリックして[実行…]からAndroid Applicationする  AVDエミュレータを選択  AVDエミュレータがない場合は作成  デバイスで実行  USBで実機を接続  プロジェクトを右クリックして[実行…]からAndroid Applicationを選択する © 2012 AKABANA. All Rights Reserved.© 2012 AKABANA. All Rights Reserved. 38
  • 39. © 2012 AKABANA. All Rights Reserved.