Mais conteúdo relacionado
Semelhante a PhoneGapの始め方 (20)
PhoneGapの始め方
- 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
Notas do Editor
- \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