CodeZine(コードジン)

特集ページ一覧

Eclipse×PhoneGapでAndroidアプリ開発!
~インストールからアプリ実行まで

原題:EclipseとPhoneGapでAndroidアプリケーションを開発する

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/08/06 14:00

目次

Eclipseでプロジェクトを作成する

 次の手順に従って、Eclipseで新規Androidプロジェクトを作成します。

  1. New(新規)/Android Project(Androidプロジェクト)を選択します(図1を参照)。

     

    図1:新規Androidプロジェクトの作成
    図1:新規Androidプロジェクトの作成
  2. 新しい標準的なAndroidプロジェクトを作成した後、PhoneGapを使用するためにプロジェクトを更新します。New Android Project(新規Androidプロジェクト)ダイアログボックスで、プロジェクト名を入力し、Create New Project In Workspace(ワークスペース内にプロジェクトを作成)を選択します(図2を参照)。

     

    図2:New Android Project(新規Androidプロジェクト)ダイアログボックス
    図2:New Android Project(新規Androidプロジェクト)ダイアログボックス
  3. [Next(次へ)]をクリックします。
  4. ビルドのターゲットとしてAndroid 2.2を選択し、「Next(次へ)」をクリックします(図3を参照)。

     

    図3:ビルドターゲットの選択
    図3:ビルドターゲットの選択
    注意

     ビルドのターゲットとしてAndroid 2.2を選択すると、Android 2.2 SDKをターゲットとするようにコンパイラーが設定され、PhoneGapアプリケーションは、Android 2.2以上のオペレーティングシステムを実行しているデバイスで確実に稼動します。

  5. Application Info(アプリケーションの情報)画面で、メインのAndroidアプリケーションのパッケージ名を入力します(図4を参照)。パッケージ名には、com.yourcompany.yourprojectなど、パッケージ構造を論理的に表す名前空間を使用する必要があります。

     

    図4:パッケージ名の指定
    図4:パッケージ名の指定
  6. Finish(完了)をクリックします。

PhoneGapを使用するようにプロジェクトを設定する

 この時点で、空のAndroidプロジェクトは作成されていますが、まだPhoneGapを使用するように設定されていません。これからその設定を行います。

  1. 新規Androidプロジェクトに、assets/wwwディレクトリとlibsディレクトリを作成します。PhoneGapアプリケーションインターフェイスのHTMLおよびJavaScriptはすべてassets/wwwフォルダーに格納されます(図5を参照)。

     

    図5:新規プロジェクトのディレクトリ
    図5:新規プロジェクトのディレクトリ
  2. PhoneGapに必要なファイルをプロジェクトにコピーするには、PhoneGapをダウンロードしたディレクトリに移動し、lib/androidサブディレクトリを探します(図6を参照)。

     

    図6:PhoneGapのlib/androidディレクトリ
    図6:PhoneGapのlib/androidディレクトリ
  3. cordova-1.5.0.jsをAndroidプロジェクトのassets/wwwディレクトリにコピーします。
  4. cordova-1.5.0.jarをAndroidプロジェクトのlibsディレクトリにコピーします。
  5. xmlディレクトリをAndroidプロジェクトのresディレクトリにコピーします(図7を参照)。

     

    図7:コピーされたリソース
    図7:コピーされたリソース
  6. index.htmlという名前のファイルをassets/wwwフォルダーに作成します。このファイルは、PhoneGapアプリケーションのインターフェイスのメインのエントリーポイントとして使用されます。
  7. index.htmlに、ユーザーインターフェイス開発の開始点となる、次のHTMLコードを追加します。
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>PhoneGap</title>
        <script type="text/javascript" charset="utf8" src="cordova-1.5.0.js"></script>
      </head>
      <body>
          <h1>Hello PhoneGap</h1>
      </body>
    </html> 
    
  8. Androidプロジェクトのビルドパスにcordova-1.5.0.jarライブラリを追加する必要があります。cordova-1.5.0.jarを右クリックし、Build Path(ビルドパス)/Add To Build Path(ビルドパスに追加)を選択します(図8を参照)。

     

    図8:ビルドパスにcordova-1.5.0.jarを追加
    図8:ビルドパスにcordova-1.5.0.jarを追加

Activityクラスを更新する

 これでAndroidプロジェクトを更新してPhoneGapを使用する準備が整いました。

  1. メインアプリケーションのActivityファイルを開きます。このファイルは、プロジェクトと同じ名前の後に「Activity」が付加されたもので、このプロセスの前の手順で指定したプロジェクトパッケージのsrcフォルダーに格納されています。
    HelloGapと名付けたプロジェクトの場合、メインのAndroid Activityファイルの名前はHelloGapActivity.javaになり、場所はNew Android Project(新規Androidプロジェクト)ダイアログボックスで指定したpackage com.tricedesigns.helloになります。
  2. メインのActivityクラスに、org.apache.cordova.DroidGapの読み込みステートメントを追加します。
    import org.apache.cordova.DroidGap;
    
  3. 基本クラスをActivityからDroidGapに変更します。これは、クラス定義内のextendsの後にあります。
    public class HelloGapActivity extends DroidGap {
    
  4. setContentView()への呼び出しを、先ほど作成したローカルのassets/www/index.htmlファイルからPhoneGapインターフェイスをロードするための参照に置き換えます。
    super.loadUrl("file:///android_asset/www/index.html");
    
    注意

     PhoneGapプロジェクトでは、assetsディレクトリに格納されているファイルを参照する場合、file:///android_assetのURL参照の後にファイルへのパス名を付加します。「file:///android_asset」のURIは、assetsディレクトリに相当します。

     

    図9:メインのActivityクラスを更新
    図9:メインのActivityクラスを更新

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • Andrew Trice(Andrew Trice)

    Universal Mind の主席ソフトウェアアーキテクト。 RIA の設計および実装に10年以上の経験を持ち、FlexやAIR、Objective C、Flash、Java、MySQL、Oracleなど多くの技術に精通し、オブジェクト指向、マルチデバイス開発、リアルタイムデータシステム、データ...

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5