読者です 読者をやめる 読者になる 読者になる

もっさり日記

だらだらと。

PhoneGap導入メモ

Java Android PhoneGap

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

  1. Java SE Downloads
  2. Pleiades(日本語化されたEclipse)
  3. PhoneGap
  4. Android SDK

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

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

■AVD(Android Virtual Devices)の設定

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

Androidプロジェクトの作成

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

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

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

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

  1. src/hoge.moge/HogeActivity.javaを開く
  2. 上記の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の設定

  1. プロジェクト直下の[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"
/>
<!-- 追加1はここから -->
<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" />
<!-- 追加1はここまで -->
    <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を作ろう!

  1. assets/www直下に[index.html]を作成
  2. 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>

■起動したよ!!!!!

  1. 実行ボタンおしてド━━━━m9(゚∀゚)━━━━ン!!

■参考にしたサイト

■今回の環境

  • 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様