必要条件

この記事に必要な予備知識

必須ではありませんが、HTMLやJavaScript、CSS、XML、およびEclipseに関する知識が必要です。

 

必要となる他の製品

Eclipse Classic

Android SDK

PhoneGap

ユーザーレベル

すべて

Eclipseは数多くのテクノロジーをサポートするオープンソースの統合開発環境(IDE)ですが、この記事では、Androidアプリケーションのネイティブ言語であるJavaのサポートを中心に説明します。AndroidはGoogleが提供するオープンソースのモバイルオペレーティングシステムです。Androidは、Samsung Galaxyシリーズのスマートフォンやタブレット、AmazonのKindle Fireタブレット、Barnes and NobleのNookタブレットをはじめ、様々なメーカーのスマートフォンやタブレットデバイスで使用されています。PhoneGapは、ネイティブにインストールできるモバイルアプリケーションをHTMLおよびJavaScriptで作成するためのオープンソースのアプリケーションプラットフォームです。

Eclipseをセットアップする

Android用のPhoneGapアプリケーションを開発するための環境をセットアップするには、まず、Eclipse IDEをダウンロードしてインストールします。

PhoneGapを使用してAndroid用のアプリケーションを開発する場合は、Windows、OS XまたはLinuxで行います。Eclipseには様々な種類のインストールパッケージがあります。PhoneGapはどのパッケージでも機能しますが、PhoneGapアプリケーションの効率的な開発に必要なツールが揃っているEclipse Classicパッケージの使用をお勧めします。

  1. Eclipseのダウンロードページにアクセスし、使用しているオペレーティングシステム用のEclipse Classicパッケージをダウンロードします。Eclipseダウンロードパッケージは、開発環境が格納されたアーカイブファイルです。
  2. ローカルハードディスクにアーカイブファイルを解凍し、場所を覚えておきます。
  3. ファイルを解凍したら、Eclipseアプリケーションをダブルクリックして起動できます。その他のセットアップは特に必要ありません。

Androidツールをセットアップする

Eclipseのダンロードとセットアップが終了したら、GoogleのAndroid開発ツールを使用するための環境を設定する必要があります。このプロセスには2つの手順があります。まず、Android SDKをダウンロードしてインストールします。次に、Eclipse用のADTプラグインをインストールします。

Android SDKをダウンロードして設定する

お使いのシステムでAndroidツールを設定する際の最初の手順として、まずAndroid SDKをダウンロードします。

  1. Android SDKのサイトにアクセスして、使用しているオペレーティングシステムに対応するビルドをダウンロードします。
  2. ダウンロードしたアーカイブファイルをローカルハードドライブに解凍し、場所を覚えておきます。

Eclipse用ADTプラグインを設定する

次に、Eclipse用ADT(Android開発ツール)プラグインをセットアップします。ADTプラグインは、EclipseのInstall New Software(新規ソフトウェアのインストール)ウィザードでインストールする必要があります。

  1. Eclipseを起動します。
  2. AndroidデベロッパーSDKページにあるADTプラグインのダウンロード手順に従って操作します。この手順どおりに操作することでADTプラグインをインストールできます。
  3. Eclipseを再起動します。

ADTプラグインをインストールしてEclipseを再起動したら、ローカルファイルシステムに既にダウンロードされているAndroid SDKを参照するようにプラグインを設定する必要があります。

  1. AndroidデベロッパーSDKページのEclipseの設定手順に従って、ADTプラグインで適切なAndroid SDKの場所を設定します。

PhoneGapをダウンロードしてインストールする

次の手順として、PhoneGapをダウンロードしてセットアップします。

  1. PhoneGapのダウンロードページにアクセスし、オレンジ色のダウンロードリンクをクリックして、ダウンロードプロセスを開始します。
  2. アーカイブファイルをローカルファイルシステムに解凍します。このファイルは後で使用します。

これで、EclipseでAndroid用のPhoneGapプロジェクトを作成できます。

注意:ここで紹介する手順はPhoneGap 1.5のものですが、その他のバージョンでもこれと同一のプロセスまたは類似したプロセスが適用されます。

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

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

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

新しい標準的なAndroidプロジェクトを作成した後、PhoneGapを使用するためにプロジェクトを更新します。

  1. New Android Project(新規Androidプロジェクト)ダイアログボックスで、プロジェクト名を入力し、Create New Project In Workspace(ワークスペース内にプロジェクトを作成)を選択します(図2を参照)。
  2. 「Next(次へ)」をクリックします。
  1. ビルドのターゲットとしてAndroid 2.2を選択し、「Next(次へ)」をクリックします(図3を参照)。

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

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

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

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

  1. 新規Androidプロジェクトに、 assets/www ディレクトリと libs ディレクトリを作成します。PhoneGapアプリケーションインターフェイスのHTMLおよびJavaScriptはすべて assets/www フォルダーに格納されます(図5を参照)。
  1. PhoneGapに必要なファイルをプロジェクトにコピーするには、PhoneGapをダウンロードしたディレクトリに移動し、 lib/android サブディレクトリを探します(図6を参照)。
  1. cordova-1.5.0.jsをAndroidプロジェクトの assets/www ディレクトリにコピーします。
  2. cordova-1.5.0.jarをAndroidプロジェクトの libs ディレクトリにコピーします。
  3. xml ディレクトリをAndroidプロジェクトの res ディレクトリにコピーします(図7を参照)。
  1. 次に、index.htmlという名前のファイルを assets/www フォルダーに作成します。このファイルは、PhoneGapアプリケーションのインターフェイスのメインのエントリーポイントとして使用されます。
  2. index.htmlに、ユーザーインターフェイス開発の開始点となる、次のHTMLコードを追加します。
<!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> </head> <body> <h1>Hello PhoneGap</h1> </body> </html>
  1. Androidプロジェクトのビルドパスにcordova-1.5.0.jarライブラリを追加する必要があります。cordova-1.5.0.jarを右クリックし、Build Path(ビルドパス)/Add To Build Path(ビルドパスに追加)を選択します(図8を参照)。

Activityクラスを更新する

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

  1. メインアプリケーションのActivityファイルを開きます。このファイルは、プロジェクトと同じ名前の後に「Activity」が付加されたもので、このプロセスの前の手順で指定したプロジェクトパッケージの src フォルダーに格納されています。

HelloGapと名付けたプロジェクトの場合、メインのAndroid Activityファイルの名前はHelloGapActivity.javaになり、場所はNew Android Project(新規Androidプロジェクト)ダイアログボックスで指定したpackage com.tricedesigns.helloになります。

  1. メインのActivityクラスに、org.apache.cordova.DroidGapの読み込みステートメントを追加します。
import org.apache.cordova.DroidGap;
  1. 基本クラスをActivityからDroidGapに変更します。これは、クラス定義内のextendsの後にあります。
public class HelloGapActivity extends DroidGap {
  1. 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 ディレクトリに相当します。

プロジェクトメタデータを設定する

AndroidプロジェクトのファイルでPhoneGapを使用するための設定は終了しました。最後に、プロジェクトメタデータを設定してPhoneGapを有効にします。

  1. まず、プロジェクトのルートにあるAndroidManifest.xmlファイルを開きます。AndroidManifest.xmlファイルを右クリックし、Open With(アプリケーションから開く)/Text Editor(テキストエディター)を選択して、Eclipseのテキストエディターを開きます。
  1. AndroidManifest.xmlで、ルートのmanifestノードの子として、次のsupports-screen XMLノードを追加します。
<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" />

supports-screen XMLノードは、アプリケーションでサポートされる画面サイズを識別します。画面およびフォームファクターのサポートはこのエントリの内容を編集することで変更できます。<supports-screens>について詳しくは、Android Developersサイトのsupports-screen要素に関するトピックを参照してください。

次に、PhoneGapアプリケーションの許可を設定する必要があります。

  1. 次の<uses-permission> XMLノードをコピーし、AndroidManifest.xmlファイルの、ルートの<manifest>ノードの子としてペーストします。
<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-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />

<uses-permission> XML値は、アプリケーションで有効にする機能を識別します。上記の行は、PhoneGapのすべての機能が動作するために必要なすべての許可を有効にします。アプリケーションの作成後、実際に使用しない許可は削除できます。これにより、アプリケーションのインストール時のセキュリティ警告も削除されます。Androidの許可と<uses-permission>要素について詳しくは、Android Developersサイトのuses-permission要素に関するトピックを参照してください。

アプリケーションの許可を設定したら、既存の<activity>ノードを変更する必要があります。

  1. <application> XMLノードの子である<activity>ノードを探します。<activity>ノードに次の属性を追加します。
configChanges="orientation|keyboardHidden"
  1. 次に、org.apache.cordova.DroidGapクラスの2番目の<activity>ノードを作成します。既存の<activity> XMLノードの兄弟として次の<activity>ノードを追加します。
<activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter></intent-filter> </activity>

この時点で、プロジェクトがAndroid用のPhoneGapプロジェクトとして機能するように設定されました。問題が発生した場合は、Android向けPhoneGapスタートガイドのサイトに掲載されている例を参照して設定を確認してください。

アプリケーションを実行する

AndroidエミュレーターでPhoneGapアプリケーションを起動するには、プロジェクトのルートを右クリックし、Run As(実行)/Android Application(Androidアプリケーション)を選択します(図11を参照)。

Android仮想デバイスがセットアップされていない場合は、設定するよう要求されます。Androidエミュレーターの仮想デバイスを設定する方法について詳しくは、Android Developersサイトのデバイス管理に関するトピックを参照してください。

Androidエミュレーターのインスタンスが自動的に開始し(まだ実行されていない場合)、アプリケーションがエミュレーターに展開されて起動します(図12を参照)。

Androidエミュレーターでアプリケーションが稼動したら、次は実際のデバイスでテストします。アプリケーションを実稼働環境に展開する前に、必ず実際のデバイスでテストすることをお勧めします。実際のデバイスには、エミュレーターとは異なる計算機能やフォームファクターがあるため、デバイスでテストすることによってエミュレーター環境では検出できなかった問題が明らかになる場合があります。

次の手順に従って、アプリケーションを実際のAndroidデバイスで起動します。

  1. デバイスがUSBでコンピューターに接続されていることを確認します。
  2. Run(実行)/Run Configurations(実行の構成)を選択します(図13を参照)。
  1. Run Configurations(実行構成)ダイアログボックスの左側の「Android Application(Androidアプリケーション)」から、目的のアプリケーションを選択します。
  2. 「Target(ターゲット)」タブをクリックし、「Deployment Target Selection Mode(展開ターゲット選択モード)」で「Manual(手操作)」を選択します。
  3. アプリケーションを起動する準備が整ったら、「Run(実行)」をクリックします(図14を参照)。

Android Device Chooser(Androidデバイス選択)ダイアログボックスで、エミュレーターか接続されているAndroidデバイスを選択できます。接続されているすべてのAndroidデバイスがこのリストに表示されます。

  1. 使用するデバイスを選択し(図15を参照)、「OK」をクリックします。

PhoneGapアプリケーションがデバイスにインストールされ、起動します。

次のステップ

ここまで理解したら、PhoneGapを使用して実際のアプリケーションを構築できます。次のステップとして、ネイティブプラグインでPhoneGapを拡張する(Android)をご覧ください。

繰り返しますが、PhoneGapアプリケーションのユーザーインターフェイスはHTML、CSSおよびJavaScriptで構築されています。したがって、デベロッパーは従来のWeb開発スキルを活用して魅力的なアプリケーションを簡単に作成できます。PhoneGapについて詳しくは、PhoneGap wikiを参照してください。また、PhoneGap Google Groupへの参加やPhoneGapマニュアルの確認も役立ちます。