PhoneGap導入メモ - もっさり日記

■必要なソフトウェアのインストール

■ADT(Android Development Tool)プラグインの導入

Eclipseのメニューから[ヘルプ]→[新規ソフトウェアのインストール]を選択
上記1で開いたウィンドウ上部の[追加]ボタンを押下
上記2で開いたウィンドウに、名前に[ADT]等任意で入力し、URLに https://dl-ssl.google.com/android/eclipse/ を入力してOKボタン押下
作業対象からさきほど入力したサイトを選択して、表示されるチェックボックスを選択して次へボタン押下
ナビゲーションに従ってインストール

■AVD(Android Virtual Devices)の設定

Eclipseのメニューから[ウィンドウ]→[AVD Manager]を選択
管理ツールが出てくるので、新規ボタンを押して設定を登録する

■Androidプロジェクトの作成

Eclipseの[ファイル]→[新規]→[Androidプロジェクト]を選択
プロジェクト名を任意で入力して[次へ]
任意のAndroidバージョンを選択して[次へ]
任意のパッケージ名を入力して[完了]
作成されたプロジェクトを選択して右クリックメニューから[プロパティー]を選択
リソースタブのテキストファイルのエンコードを[UTF-8]に設定

■PhoneGapのライブラリをプロジェクトに設定

プロジェクト直下に[libs]フォルダを追加
ダウンロードしたPhoneGapのzipを展開した中にある[Android]フォルダから[phonegap-x.x.x.jar]を[libs]フォルダにコピー
プロジェクト直下の[asset]フォルダ直下に[www]フォルダを追加
[www]フォルダにPhoneGapの[Android]フォルダから[phonegap-x.x.x.js]をコピー

■Activityの設定(パッケージ等は各自の環境に合わせて)

src/hoge.moge/HogeActivity.javaを開く
上記のActivityを書き換える

package hoge.moge;

import android.os.Bundle;
import com.phonegap.*; //import宣言を追加

public class HogeActivity extends DroidGap { // 親クラスを DroidGapに変更
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main); // 追加
    }
}

■Manifestの設定

プロジェクト直下の[AndroidManifest.xml]を下記のように編集

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="hoge.moge"
    android:versionCode="1"
    android:versionName="1.0" >
    
<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" />
<!-- 追加１はここまで -->
    <uses-sdk android:minSdkVersion="7" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:label="@string/app_name"
            android:name=".HogeActivity" 
            android:configChanges="orientation|keyboardHidden"><!-- この行も追加 -->
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

■HTMLを作ろう！

assets/www直下に[index.html]を作成
index.htmlを編集する

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>PhoneGap Sample</title>
  <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
</head>
<body>
  <h1>PhoneGapのSampleだぉ</h1>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ul>
  <input type="button" value="ぼたーん"/>
  <input type="checkbox" value="ちぇっくぼっくす"/>
  <select name="game">
    <option value="zeno">ゼノブレイド
    <option value="dq">ドラゴンクエスト
    <option value="ff">ファイナルファンタジー
  </select>
</body>
</html>

■起動したよ！！！！！

実行ボタンおしてﾄﾞ━━━━m9(ﾟ∀ﾟ)━━━━ﾝ!!

■参考にしたサイト

PhoneGapでAndroidアプリを作るための基礎知識

■今回の環境

OS:Windows7 Home Premium(SP1)
PhoneGap:version1.2.0
Java:JDK1.6.0_21
AndroidSDK:version2.1

※実行まででハマった問題(´・ω・｀)

Error generating final archive: Debug Certificate expiredってエラーが出てエミュレータが起動できない！！

→debug.keystore の期限切れらしいので、こいつを消してあげると直った。
→Windows7の場合、C:\Users\ユーザ名\.android 直下にある debug.keystore を削除
→WindowsXPの場合、C:\Documents and Settings\ユーザ名\.android 直下にある debug.keystore を削除

エミュレータは起動したけど「android.content.res.Resourcesなんちゃらなんちゃら」ってエラーが出て進めない

→自分はPhoneGap1.2.0で発生。
→Androidプロジェクトの resフォルダ配下にxmlフォルダ(中にはphonegap.xmlとplugins.xml)がなかったのが原因
→PhoneGapのサンプルからxmlフォルダごとコピーして解決！

解決に導いて下さったサイト様

→Google様
→Caldia Apps様