PhoneGapのインストール&HelloWorldまで
PhoneGapのインストール&HelloWorldまで
(参考)http://phonegap-fan.com/install3.php
TitaniumMoblieで開発を進めていたものの、Androidの開発環境がコンパイル〜ビルドまで時間がかかかる
(iphone環境ではそうでもないらしい)など諸々不便なことが出始めた為、htmlベースで記述が可能なPhoneGapを試してみる。
※結果的にはPhoneGapの場合、デザイン等はシュミレーターすら使用せずに、直接.htmlファイルをブラウザで開きながら作れるので、便利だった!
違いとしては、
TitaniumMobileはiphoneやandroidアプリのバイナリとして出力され、
PhoneGapはWebViewが実態で、ブラウザからスマートフォンの機能にアクセスできるようなイメージらしい。
また、アプリの見た目ではTitaniumMobileではnativeUIを使用できるが、
PhoneGapの場合は、HTMLなので、自前でデザインが必要。
デザインにはJQTouchを組み合わせて使うのが一般的らしい。
困った点
:OAuth認証の資料が乏しい。
>PhoneGapではTwitterやFacebookなどの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の新規作成
Hello World
(8)シュミレーターでの実行
プロジェクトディレクトリを右クリック>Run as -> Android Application
を選択