PhoneGapの環境を整えよう！ (4/5)
作成:2012-03-05 08:01
更新:2012-03-05 08:01
更新:2012-03-05 08:01
■Android開発のプロジェクトを作る
Android開発のプロジェクトを作る
続いて、Androidのアプリ開発です。Androidの場合、Eclipseでプロジェクトを作成した後、ファイルの組み込みと、コードの修正を行う必要があるのでiPhoneよりやや面倒です。また
Androidの開発は、事前にプラグインなどを利用するための準備を整えておく必要があります。
1. 新規プロジェクトの作成
まずEclipseを起動し、通常のAndroidプロジェクトを作成します。＜File＞＜New＞メニューから＜Androidプロジェクト＞を選びます。「Project Name」にプロジェクト名を入力します。他はデフォルトのまま変更しなくてかまいません。ここでは「pgapp」というプロジェクト名にしておきました。
2. ターゲットの設定
次に進むと「Build Target」の設定画面になります。ここで、あらかじめ用意しておいたターゲットを選択します。
3. アプリ情報の設定
続いて、アプリケーションの設定を行います。これは細かい入力が必要になるので、以下のように設定を行いましょう。設定を完了後、「Finish」ボタンを押せばプロジェクトが作成されます。
Application Name：アプリ名です。ここでは「Pgapp」にしておきます。
Package Name：パッケージ名の指定です。ここでは「jp.tuyano.phonegap」としておきます。
Create Activity：Activityの作成です。これがアプリで画面に表示される部分になります。チェックをONにし、Activity名として「PgappActivity」としておきます。
Minimum SDK：Androidの対応バージョンを指定します。これはそれぞれの環境にあわせて、いくつから対応させるか選べばいいでしょう。
Create Test Project：テスト用のプロジェクトを作るかどうかです。これはOFFにしておいてかまいません。
4. フォルダの作成
作成されたプロジェクトのフォルダを開き、その中にフォルダを追加します。まずプロジェクトを開いたところに「libs」というフォルダを追加します。そして「assets」フォルダを開いた中に「www」フォルダを作成します。
5. ライブラリのコピー
作成したフォルダにライブラリファイルをコピーします。PhoneGapのフォルダ内にある「Android」フォルダの中に、以下のようなファイルが用意されています。
先ほど作った「libs」フォルダ内にJavaのライブラリ（phonegap.jar）ファイルをコピーし、「www」フォルダにJavaScriptのライブラリ（phonegap.js）ファイルをコピーしてください。
続いて、「Android」フォルダの中にある「xml」フォルダをプロジェクトフォルダ内の「res」フォルダの中にコピーします。これで必要なファイルの準備は完了です。
6. ライブラリのプロジェクトへの組み込み
「libs」に追加したJavaライブラリをプロジェクトに組み込みます。＜Project＞＜Properties＞メニューを選び、プロジェクトの設定ウインドウを呼び出します。そして、左の一覧リストから「Javaのビルド・パス」を選択します。
右側にいくつかの切り替えボタンの表示が現れるので、「Libraries」というボタンをクリックして選択して下さい。これでプロジェクトに組み込まれているライブラリの一覧が表示されます。ここで「Add JARs...」ボタンをクリックし、追加したphonegap.jarを選択します。
7. Activityクラスの修正
Eclipseの「src」フォルダの中に、Javaのソースコードファイルが用意されています。今回のサンプルでは、jp.tuyano.phonegapというフォルダの中に「PgappActivity.java」というファイルが用意されているはずです。これを開いてください。そして以下のように修正をします。
A. 最初のあたりに「import android.app.Activity;」という文が見えます。これを「import com.phonegap.*;」と変更します。
B. public class PgappActivity〜という文の中に「Activity」という単語があります。これを「DroidGap」と変更します。
C. 真ん中やや下のあたりに「setContentView(R.layout.main);」という文があります。これを「super.loadUrl("file:///android_asset/www/index.html");」と変更します。
8. AndroidManifest.mfの修正
続いて、プロジェクトを開いたところにある「AndroidoManifest.mf」というファイルを修正します。これをダブルクリックして開くと、ビジュアルなデザイナが起動して編集できるようになりますが、今回はXMLのソースコードを直接編集したほうが便利なので、下にあるタブから「AndroidManifest.xml」というタブをクリックしてXMLエディタに切り替えます。そして、一番下にある</application>という文の手前に以下の文を追記します。
9. index.htmlの作成
最後に、画面に表示するHTMLファイルを用意します。「www」フォルダの中に「index.html」というファイルを作成しましょう。＜File＞＜New＞＜Other＞メニューを選び、現れたダイアログで「Web」項目内の「HTMLファイル」を選びます。そして次に進み、「www」フォルダの中に「index.html」というファイル名で作成をしましょう。そして、下のリスト欄のように記述しておきます。これは、ただのサンプルですので、適当に変更してかまいません。
10. プロジェクトの実行
さあ、後はプロジェクトをビルドし実行するだけです。左側に見える「Pgapp」というプロジェクト名のフォルダアイコンをクリックして選択し、＜Run＞＜Run＞＜Androidアプリケーション＞メニューを選びます。これで実機がなければエミュレータを起動し、そこでアプリが実行されます。実機が接続されていればそこで動きます。
続いて、Androidのアプリ開発です。Androidの場合、Eclipseでプロジェクトを作成した後、ファイルの組み込みと、コードの修正を行う必要があるのでiPhoneよりやや面倒です。また
Androidの開発は、事前にプラグインなどを利用するための準備を整えておく必要があります。
1. 新規プロジェクトの作成
まずEclipseを起動し、通常のAndroidプロジェクトを作成します。＜File＞＜New＞メニューから＜Androidプロジェクト＞を選びます。「Project Name」にプロジェクト名を入力します。他はデフォルトのまま変更しなくてかまいません。ここでは「pgapp」というプロジェクト名にしておきました。
2. ターゲットの設定
次に進むと「Build Target」の設定画面になります。ここで、あらかじめ用意しておいたターゲットを選択します。
3. アプリ情報の設定
続いて、アプリケーションの設定を行います。これは細かい入力が必要になるので、以下のように設定を行いましょう。設定を完了後、「Finish」ボタンを押せばプロジェクトが作成されます。
Application Name：アプリ名です。ここでは「Pgapp」にしておきます。
Package Name：パッケージ名の指定です。ここでは「jp.tuyano.phonegap」としておきます。
Create Activity：Activityの作成です。これがアプリで画面に表示される部分になります。チェックをONにし、Activity名として「PgappActivity」としておきます。
Minimum SDK：Androidの対応バージョンを指定します。これはそれぞれの環境にあわせて、いくつから対応させるか選べばいいでしょう。
Create Test Project：テスト用のプロジェクトを作るかどうかです。これはOFFにしておいてかまいません。
4. フォルダの作成
作成されたプロジェクトのフォルダを開き、その中にフォルダを追加します。まずプロジェクトを開いたところに「libs」というフォルダを追加します。そして「assets」フォルダを開いた中に「www」フォルダを作成します。
5. ライブラリのコピー
作成したフォルダにライブラリファイルをコピーします。PhoneGapのフォルダ内にある「Android」フォルダの中に、以下のようなファイルが用意されています。
phonegap-バージョン.jar前者はJavaのライブラリで、後者がJavaScriptのライブラリです。バージョン名はそれぞれのバージョンごとに異なります。ここではわかりやすくすくのに、ファイル名からバージョン名を取り除き、「phonegap.jar」「phonegap.js」とファイル名を修正しておきましょう。
phonegap-バージョン.js
先ほど作った「libs」フォルダ内にJavaのライブラリ（phonegap.jar）ファイルをコピーし、「www」フォルダにJavaScriptのライブラリ（phonegap.js）ファイルをコピーしてください。
続いて、「Android」フォルダの中にある「xml」フォルダをプロジェクトフォルダ内の「res」フォルダの中にコピーします。これで必要なファイルの準備は完了です。
6. ライブラリのプロジェクトへの組み込み
「libs」に追加したJavaライブラリをプロジェクトに組み込みます。＜Project＞＜Properties＞メニューを選び、プロジェクトの設定ウインドウを呼び出します。そして、左の一覧リストから「Javaのビルド・パス」を選択します。
右側にいくつかの切り替えボタンの表示が現れるので、「Libraries」というボタンをクリックして選択して下さい。これでプロジェクトに組み込まれているライブラリの一覧が表示されます。ここで「Add JARs...」ボタンをクリックし、追加したphonegap.jarを選択します。
7. Activityクラスの修正
Eclipseの「src」フォルダの中に、Javaのソースコードファイルが用意されています。今回のサンプルでは、jp.tuyano.phonegapというフォルダの中に「PgappActivity.java」というファイルが用意されているはずです。これを開いてください。そして以下のように修正をします。
A. 最初のあたりに「import android.app.Activity;」という文が見えます。これを「import com.phonegap.*;」と変更します。
変更前）import android.app.Activity;
↓
変更後）import com.phonegap.*;
B. public class PgappActivity〜という文の中に「Activity」という単語があります。これを「DroidGap」と変更します。
変更前）public class PgappActivity extends Activity {
↓
変更後）public class PgappActivity extends DroidGap {C. 真ん中やや下のあたりに「setContentView(R.layout.main);」という文があります。これを「super.loadUrl("file:///android_asset/www/index.html");」と変更します。
変更前）setContentView(R.layout.main);
↓
変更後）super.loadUrl("file:///android_asset/www/index.html");
8. AndroidManifest.mfの修正
続いて、プロジェクトを開いたところにある「AndroidoManifest.mf」というファイルを修正します。これをダブルクリックして開くと、ビジュアルなデザイナが起動して編集できるようになりますが、今回はXMLのソースコードを直接編集したほうが便利なので、下にあるタブから「AndroidManifest.xml」というタブをクリックしてXMLエディタに切り替えます。そして、一番下にある</application>という文の手前に以下の文を追記します。
<activity android:name="com.phonegap.DroidGap"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter></intent-filter>
</activity>
9. index.htmlの作成
最後に、画面に表示するHTMLファイルを用意します。「www」フォルダの中に「index.html」というファイルを作成しましょう。＜File＞＜New＞＜Other＞メニューを選び、現れたダイアログで「Web」項目内の「HTMLファイル」を選びます。そして次に進み、「www」フォルダの中に「index.html」というファイル名で作成をしましょう。そして、下のリスト欄のように記述しておきます。これは、ただのサンプルですので、適当に変更してかまいません。
10. プロジェクトの実行
さあ、後はプロジェクトをビルドし実行するだけです。左側に見える「Pgapp」というプロジェクト名のフォルダアイコンをクリックして選択し、＜Run＞＜Run＞＜Androidアプリケーション＞メニューを選びます。これで実機がなければエミュレータを起動し、そこでアプリが実行されます。実機が接続されていればそこで動きます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1>Pgapp</h1> <p>this is test!</p> </body> </html>
※関連コンテンツ
「PhoneGapによるAndroid/iPhoneアプリ開発入門」に戻る