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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

PhoneGapの始め方

8,633
views

Published on

PhoneGap UserGroup 第一回勉強会資料 …

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

Published in: Technology

1 Comment
17 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,633
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
95
Comments
1
Likes
17
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.