PhoneGapのインストール&HelloWorldまで

PhoneGapのインストール&HelloWorldまで
(参考)http://phonegap-fan.com/install3.php

TitaniumMoblieで開発を進めていたものの、Androidの開発環境がコンパイル〜ビルドまで時間がかかかる
(iphone環境ではそうでもないらしい)など諸々不便なことが出始めた為、htmlベースで記述が可能なPhoneGapを試してみる。

※結果的にはPhoneGapの場合、デザイン等はシュミレーターすら使用せずに、直接.htmlファイルをブラウザで開きながら作れるので、便利だった!

違いとしては、
TitaniumMobileはiphoneandroidアプリのバイナリとして出力され、
PhoneGapはWebViewが実態で、ブラウザからスマートフォンの機能にアクセスできるようなイメージらしい。

また、アプリの見た目ではTitaniumMobileではnativeUIを使用できるが、
PhoneGapの場合は、HTMLなので、自前でデザインが必要。

デザインにはJQTouchを組み合わせて使うのが一般的らしい。

困った点
OAuth認証の資料が乏しい。
>PhoneGapではTwitterFacebookなどのOAuthを使うのは実は難しいのです。
http://blog.collab-it.net/

:aタグは全てサイト内のページに飛ばされる
>>jQTouchを使ったサイト内のaタグのhrefはすべてjQTouchのサイト内での動作になります。
http://d.hatena.ne.jp/nakachin-40/20100524/1274711179(参考)

★事前調査

※1.Ecilpse3.6は駄目という情報があったので、今回は3.5を使用。
http://magpad.jugem.jp/?eid=157

※2.PhoneGap 0.9.1はantでmakeの必要があったそうですが、0.9.2以降はzip解凍のみで
利用可能らしい。
インストールマニュアルにはApacheANTとRuby1.9.1の利用が書かれているものがあるけれど
不要でした。

★インストール

Eclipse
(1)Eclipse Classic 3.5.0
http://www.eclipse.org/downloads/packages/eclipse-classic-350/galileor

(2)ADT Plugin for Eclipse
eclipseのソフトウェア更新で
https://dl-ssl.google.com/android/eclipse/
を入力
http://www.javadrive.jp/android/adt/index1.html(インストール方法)

(3)SDK Locationの設定
「Window」→「Preference」を選択、「Android」→「SDK Location」、「C:\android-sdk」を選択

(4)Androidプロジェクトの作成
「File」→「New」→「Project」

(5)画像参照

(6)新規にフォルダを掘る
/libs
/assets/www

(6)ダウンロードしたPhoneGapフォルダの中にある
「phonegap.js」ファイルを「/assets/www」へ、
「phonegap.jar」ファイルを「/libs」へ、それぞれコピー

【phoneGap】
http://www.phonegap.com/download-thankyou

★HelloWorldまでの方法

(1)新規プロジェクトの作成。Andoroidプロジェクトを選択

(2)諸々設定

(3)新規にフォルダを掘る
/libs
/assets/www

(4)ダウンロードしたPhoneGapフォルダの中にある
「phonegap.js」ファイルを「/assets/www」へ、
「phonegap.jar」ファイルを「/libs」へ、それぞれコピー

(5)Activityの書き換え

(6)AndroidManifest.xmlに追記

	 <supports-screens
	android:largeScreens="true"
	android:normalScreens="true"
	android:smallScreens="true"
	android:resizeable="true"
	android:anyDensity="true"
	/>
	<uses-permission android:name="android.permission.CAMERA" />
	<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 android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

(7)index.htmlの新規作成



PhoneGap



Hello World

(8)シュミレーターでの実行
プロジェクトディレクトリを右クリック>Run as -> Android Application
を選択

(9)デバイス実行
プロジェクトを右クリック>Run as ->Android Application

JQTouch

(1)ダウンロード
http://jqtouch.com/

(2)設置

(3)index.htmlに記述