以前から気になっていた, PhoneGap を試してみることにいたしました。
その環境構築の記録です。
●環境
Windows 7 64bit
Android 4.2
Eclipse 4.2 Juno
PhoneGap 2.3 (2.0 でも同じでした)
※ Android の環境は構築済み
PhoneGap の最新版は, 本家PhoneGap からダウンロードしてください。(日本コミュニティだと, 少し古いのかな)
さて, PhoneGap は, 2.1からコマンドラインでさくっと環境構築できるらしいのですが,
こちら環境構築の説明 Android なんか, PATHとか, ANT とか, なんかいろいろあるし面倒だなぁ～。
と思いまして, GUI で全部やればいいのではという記録です。
( iOS は絶対コマンドの方が楽です )
●手順
1. PhoneGap のダウンロード + 解凍(どこでもいい)
2. Android Project を Eclipse から作成
3. cordova-2.3.0.jar を libs に入れて, Java のBuild Pathを通す
4. resフォルダに, xml フォルダを作り, その中に, PhoneGapの lib\android\xml\config.xml をコピーします
5. AndroidManifest.xml を書き換えます。
(書き換えるところは後程)
6. assetsフォルダの下に, www フォルダをつくり, この中に,cordova-2.3.0.js や, index.html を入れます
7. Java の Top のActivity のコードを書き換えます。
8. 先ほどのindex.html を編集します
9. 実行
1. PhoneGap をダウンロード, 解凍します。
解凍すると, いろいろありますが, lib フォルダの中の, android を使います。 iOS の場合は ios です。
この中には, 実際に使う cordova-2.3.0.jar, cordova2.3.0.js, xml\config.xml や, コマンドラインで使う
スクリプト, Android Project の例などがあります
2. Android Project を作成します。
特別な設定はありません。普通のAndroid Projectの作成と同じ方法です。
3. cordova-2.3.0.jar を libs に入れて, Java のBuild Pathを通す
PhoneGapから, android の cordova-2.3.0.jar を android プロジェクトの, libs にコピーします。
プロジェクトをポイント -> 右クリック -> Properties -> Java Build Path から, cordovaを追加します。
4. resフォルダに, xml フォルダを作り, その中に, PhoneGapの lib\android\xml\config.xml をコピーします
5. AndroidManifest.xml を書き換えます
これが全体です。書き換えたところは, 赤字です。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.atmarkplant.memory"
android:versionCode="1"
android:versionName="1.0" >
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-sdk
android:minSdkVersion="9"
android:targetSdkVersion="16" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.atmarkplant.memory.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
実際は, uses-permission のところだけが, minimum requirement です。
PhoneGap のWebサイトには, いろいろありましたが, 必要な機能のときに適宜入れればよいのではと思います。
6. assetsフォルダの下に, www フォルダをつくり, この中に,cordova-2.3.0.js や, index.html を入れます
これが, PhoneGap を使って, Android にいろいろ表示をさせるための, htmlファイルや, jsファイルを置く場所になります。
7. Java の Top のActivity のコードを書き換えます。
Java のコードから, 6で作成した, index.html を呼び出します。Android ではこれが必要です。
Top に指定したActivity のコードを以下のように書き換えます。
package com.atmarkplant.memory;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
import android.view.Menu;
public class MainActivity extends DroidGap
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
super.loadUrl("file:///android_asset/www/index.html");
}
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
赤字が書き換えたところです。なんとなくわかってきそうです。
8. 先ほどのindex.html を編集します
Android に表示させる画面をつくろうぜ。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<title>Hello PhoneGap!</title>
</head>
<body>
<h1>Hello PhoneGap!</h1>
</body>
</html>
フォルダ構成です(Eclipse の画面さらしておきます)
9. 実行
通常の実行方法と同じです。
Gingerbred 2.3 の結果です。きちんと表示されました。
0 件のコメント:
コメントを投稿