Your SlideShare is downloading. ×
0
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
PhoneGapの始め方
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

PhoneGapの始め方

8,796

Published on

PhoneGap UserGroup 第一回勉強会資料 …

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

Published in: Technology
1 Comment
18 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,796
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
95
Comments
1
Likes
18
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
  • \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
  • 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.

    ×