PhoneGapの始め方

PhoneGapの始め方
AKABANA | Eiichi Arikawa

© 2012 AKABANA. All Rights Reserved.

Contents
 PhoneGapについて
 PhoneGap 2.0
 PhoneGapの始め方
 PhoneGap:Build
 iOS
 Android


© 2012 AKABANA. All Rights Reserved. 2

 PhoneGap

3

PhoneGap
 スマートフォン向けハイブリッドアプリケーション
制作のためのフレームワーク
 ハイブリッドアプリ
 ネイティブアプリ上のWebアプリケーション

 アプリケーションはHTML/CSS/Javascriptを使用

 プラットフォーム用のアプリストアでの配布可能

 1つのソースで多くのプラットフォームに対応可能



PhoneGap
 対応プラットフォームは、7
 iPhone / iPhone 3G
 iPhone 3GS and newer
 Android
 Blackberry OS 5.x
 Blackberry OS 6.0+
 WebOS
 Windows Phone 7
 Symbian
 Bada


PhoneGap
 ウェブアプリの弱点をクリアできる
 プラットフォームのアプリストアが使える
 App Store
 Google Play
 課金システムも利用できる

 デバイス依存機能が使える
 カメラ、センサー系、アドレス帳など



PhoneGap
 Apache Cordova
 Cordova は Nitobi が開発した PhoneGap としてスタート
しました

 Nitobi は Adobe System Inc. に買収され、PhoneGap フ
レームワークは、 Apache Software Foundation の下で、
Apache Cordova と名前を変えてオープンソースになりま
した

 HTML/CSS/JavaScript コンテンツをホストするための環境
を提供する

 JavaScriptからデバイス依存機能を呼べる仕組みを提供


PhoneGap
 デバイスに共通する機能にアクセスするためのAPI
 Device
 Accelerometer
 Events
 Camera
 File
 Capture
 Geolocation
 Compass
 Media
 Connection
 Notiﬁcation
 Contacts
 Storage

 プラットフォームのAPIの対応表
 http://phonegap.com/about/feature


 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);


 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);


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


PhoneGap Build
 PhoneGap 2.0
 Cordova WebViewをPhoneGapに統合

 Android/iOS/BlackBerry向けのコマンドラインツールの導
入

 移行ガイドやプラグインなどの情報をまとめたドキュメン
トの強化

 リモートウェブインスペクタツール「weinre」を採用

 プラットフォーム間で統一されたJavaScriptをサポートする
ため「Cordova JS」を導入


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



 PhoneGap:Build

14

PhoneGap:Build
 https://build.phonegap.com/
 HTML/CSS/JavaScriptなどをアップロードすると、
各プラットフォーム向けバイナリへエクスポート



PhoneGap:Build
 Dreamweaver CS6 連携
 Adobe Dreamweaver CS6でモバイル向けテンプレートで
サイト作成

 DreamweaverからPhoneGap::Buildを使って各種プラット
フォーム向けバイナリを生成・ダウンロード可能

 参考記事 ADC

 http://www.adobe.com/jp/devnet/phonegap/
articles/phonegap_dwcs6_mobile_app.html



 PhoneGap
 for iOS

17

PhoneGap for iOS
 事前準備
 インストール
 Xcode 4.3+
 Xcode Command Line Tools
 Apple iOS device (iPhone, iPad, iPod Touch)
 iOS 開発証明書

 ダウンロード
 PhoneGap 2.0
 以降、展開したフォルダを{phonegap}と表す


PhoneGap for iOS
 {phonegap}/lib/ios/Cordova-2.0.0.dmgを
 Cordova-2.0.0.pkgをインストール

 binをローカルディスクにコピーする



PhoneGap for iOS
 Xcodeプロジェクト作成
 コマンドを使ってプロジェクトを作成

 create <project_folder_path> <bundle_id>
<project_name>
 <project_folder_path>
 プロジェクトの保存先

 <package_name>
 プロジェクトのパッケージ名

 <project_name>
 プロジェクト名


PhoneGap for iOS
 Xcodeプロジェクトを設定
 ユーザの書類の中にCordovaLib があることを確認

 CordovaLib/CordovaLib.xcodeprojをプロジェクトに
Drag&Dropする
 CordovaLib.xcodeprojが設定されていない場合



PhoneGap for iOS
 TargetのBuild Phasesタブを開いてTarget Dependencies
を開いてCordovaLibが設定されていることを確認

 設定されていない場合は、＋ボタンから選択する



PhoneGap for iOS
 ProjectのBuild Phasesタブ
を開いてLink Binary with
LibrariesにlibCordova.aが
設定されていることを確認

 設定されていない場合は、
＋ボタンから選択



PhoneGap for iOS
 シミュレーターで起動
 ターゲットをiOS [version] Simulatorにする

 Runボタンをクリックするとシミュレータにアプリが転送
されて起動



PhoneGap for iOS
 実機で起動
 plistファイルのBundleIdentiﬁerとアプリIDを確認する
 Teamプロビジョニングを使う場合には変更不要

 ターゲットをデバイス名にする

 iOS Deviceは、デバイスの名前が表示される

 Runボタンをクリックするとデバイスにアプリが転送され
て起動



 PhoneGap
 for Android

26

PhoneGap for Android
 事前準備
 インストール
 Eclipse Classic 3.4 +
 Android SDK
 ADT Plugin
 ダウンロード
 PhoneGap 2.0
 以降、展開したフォルダを{phonegap}と表す



 Android プロジェクト作成



 Activityの選択



 Activityの作成



 Androidプロジェクトにフォルダ作成
 Phonegapのコンテンツをいれるフォルダ

 assets/www
 HTML/CSS/JavaScriptなどを
おくことを想定している



 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



 Activityクラスを修正
 srcの中にある自動生成されたActivityクラスを開く

 import org.apache.cordova.*; を追加する

 継承クラスActivity を DroidGapに書き換える

 アプリケーションHTMLの読み込み
 onCreateメソッドのsetContentViewの代わりに下記を記
述する

 super.loadUrl("ﬁle:///android_asset/www/
index.html");


 AndroidManifest.xmlの修正
 <application.../>の上ぐらいに権限設定を記述する

 <supports-screens>
 解像度にアプリを対応させるかなどの設定

 <uses-permission>
 アプリが端末に要求する機能を許可するかどうかを設定

 <activity>
 android:conﬁgChangesを追加して、アクティビティを再起動せずに
処理を続けさせたい場合の情報を記述する

 https://sites.google.com/a/techdoctranslator.com/jp/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


 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>


 エミュレータで実行
 プロジェクトを右クリックして[実行…]からAndroid
Applicationする

 AVDエミュレータを選択

 AVDエミュレータがない場合は作成

 デバイスで実行
 USBで実機を接続

 プロジェクトを右クリックして[実行…]からAndroid
Applicationを選択する


PhoneGapの始め方

More Related Content

What's hot (19)

Similar to PhoneGapの始め方 (20)

Recently uploaded (10)

PhoneGapの始め方

Editor's Notes