gihyo.jpサイトのロゴ

PhoneGapで手軽にiPhone/Androidアプリを作ろう

第1回PhoneGapとは

2011-08-31

はじめまして、株式会社キクミミの富田宏昭と申します。おもにWebアプリケーションを開発しています。この連載では、PhoneGapを使ったiOSおよびAndroidアプリケーションの開発方法について全4回に分けて紹介していきます。どうぞお楽しみください。

PhoneGapとは

PhoneGapはNitobiが開発、公開しているクロスプラットフォーム・モバイルアプリケーションの開発フレームワークです。スマートフォン向けアプリケーションの開発では、各OSごとに特定の言語を使用をして開発をおこなうことになります。たとえばiOSの場合はObjective-C、AndroidやBlackBerryの場合はJava、Windows Phone 7の場合はC#・Vidual Basicなどです。複数のスマートフォンに対応するアプリケーションを開発する場合、デベロッパは複数の言語をもちいてそれぞれの開発環境を用意し、コーディングをおこなう必要がありました。

PhoneGapを用いることで、HTML5＋CSS＋JavaScriptのみでさまざまなプラットフォームに対応するネイティブアプリケーションの実装が可能になります。まるでWebアプリケーションを実装するようにスマートフォン向けアプリケーションが開発できるのです。PhoneGapライブラリを使って開発をおこなうことで、各デバイスのカメラやGPS、電話帳といったデータを操作することもできます。

PhoneGapがサポートしているスマートフォンデバイスと、操作可能な機能は次のとおりです。

対応しているスマートフォンデバイス
  • iPhone/iPhone 3G、iPhone 3GS以上
  • Android
  • BlackBerry OS4.6-4.7、OS5.x、6.0以上
  • HP WebOS
  • Windows Phone 7
  • Symbian
  • Bada
PhoneGapから操作可能な機能
  • モーションセンサ
  • カメラ
  • マイク
  • コンパス
  • 回線情報
  • 電話帳
  • デバイス
  • ボタン押下、タッチなどのネイティブイベント
  • ファイルシステム
  • GPS
  • メディア
  • 通知
  • ストレージ

操作可能な機能については、スマートフォンのOSによって異なってきます。あらかじめSupported Featuresを参照し、作成したいスマートフォンアプリがPhoneGapで実現可能かをチェックしておきましょう。

図1　PhoneGapがサポートしているスマートフォンと、アクセス可能なデバイス機能（Supported Featuresより抜粋）
図1　PhoneGapがサポートしているスマートフォンと、アクセス可能なデバイス機能（Supported Featuresより抜粋）

PhoneGapは2008年8月にサンフランシスコで開かれたiPhoneDevCampをきっかけに開発がはじまりました。その後、機能の追加や改修を重ね、去る2011年7月28日(米国時間)にPhoneGap 1.0.0がリリースされる運びとなりました。PhoneGapはThe "New" BSD LicenseおよびThe MIT Licenseのデュアルライセンスのもとで、PhoneGap公式サイトおよびGithubにて公開されています。

また、PhoneGapに関連する興味深いサービスとしてPhoneGap:Buildが挙げられます。PhoneGap:Buildはクラウドベースでのビルド/コンパイル環境です。これまでスマートフォン向けの開発環境を揃えるためには、あらかじめ各種SDKやJDKのインストール、IDEのコンフィギュレーションをおこなう必要がありました。

PhoneGap:Buildではビルド環境がクラウド上に用意されているので、PCにビルド環境を用意する必要がありません。デベロッパはHTML、CSS、JavaScriptでアプリケーションを実装し、PhoneGap:Buildにアップロードするだけでスマートフォン向けのバイナリが作成されるというわけです。Gitリポジトリからのインポートにも対応しており、使い方も簡単です。現在ベータ版として公開されており、利用するにはユーザ登録が必要となっています。PhoneGap:Buildの使い方については、第2回目で詳しく取りあげたいと思います。

図2　PhoneGap:Buildを使って、HTML5+CSS+JavaScriptで作成されたアプリを各種スマートフォンのネイティブアプリに変換（PhoneGapサイトより）
図2　PhoneGap:Buildを使って、HTML5+CSS+JavaScriptで作成されたアプリを各種スマートフォンのネイティブアプリに変換（PhoneGapサイトより）

本連載ではPhoneGapでiOSデバイス（iPhone/iPad）およびAndroidデバイス用のアプリケーションの実装方法について紹介していきます。iOS/Androidアプリを作成するにあたっての動作要件は次のとおりです。あらかじめ準備をしておいてください。

iOS
  • IntelベースのMac OS X Snow Leopard
  • Xcode
  • （各デバイスにインストールする場合）iPhone、iPadなどのiOSデバイスとiOS Developer Program
Android

ここではMacOS X 10.6.8上のXcode 4、Eclipse 3.7.0で各種デプロイと開発をおこなっていきます。

PhoneGapのインストール

まずはPhoneGapをインストールしてみましょう。PhopneGap公式サイトにアクセスし、画面右上部のDownloadボタンより、PhoneGapをダウンロードします。

図3　PhoneGap公式サイトより、PhoneGapをダウンロード
図3　PhoneGap公式サイトより、PhoneGapをダウンロード

最初にiOS向けの開発環境をセットアップします。zipパッケージを解凍し、iOSディレクトリ以下のPhoneGap-1.0.0.dmgをマウントします。pkgファイルを開き、iOS向けPhoneGap開発環境のインストールを開始します。

図4　pkgファイルを開き、ウィザード形式でPhoneGapをインストール
図4　pkgファイルを開き、ウィザード形式でPhoneGapをインストール

PhoneGapパッケージをインストール後、Xcodeを起動し、あたらしいプロジェクトを作成します。iOSアプリケーションのテンプレート内に「PhoneGap-based Application」が出現しているので、これを選択します。必要な情報を入力し、PhoneGapプロジェクトを作成しましょう。

図5　PhoneGap-based Applicationを作成
図5　PhoneGap-based Applicationを作成
図6　Product NameとCompany Identifierを入力
図6　Product NameとCompany Identifierを入力

プロジェクトを作成したら、動作確認をおこないます。Xcode画面左上の「Run」ボタンをクリックし、ビルドに成功してシミュレータが起動するかを確認します。

図7　Runボタンをクリックし、シミュレータが起動してくるかを確認
図7　Runボタンをクリックし、シミュレータが起動してくるかを確認

無事にシミュレータが起動し、ワーニングエラーが出力されていることを確認します。これは作成したプロジェクトのリファレンスにwwwディレクトリが存在しない場合に発生するエラーです。プロジェクトを右クリックし、"Show in Finder"を選択してFinderを開きます。wwwディレクトリがあることを確認し、これをXcodeのプロジェクトにドラッグ&ドロップします。

図8　ワーニングエラーが出力されていることを確認
図8　ワーニングエラーが出力されていることを確認
図9　Finderのwwwディレクトリを、作成したPhoneGapTestAppプロジェクトにドラッグ&ドロップ
図9　Finderのwwwディレクトリを、作成したPhoneGapTestAppプロジェクトにドラッ

ドロップするといくつかのオプションが用意された確認のプロンプトが表示されます。"Create folder references for any added folders"を選択し、Finishボタンをクリックしてwwwディレクトリをリファレンスに追加をおこないます。

図10　Create folder references for any added foldersを選択し、Finishボタンをクリック
図10　Create folder references for any added foldersを選択し、Finishボタンをクリック

ここまでの操作でナビゲーターにwwwディレクトリが追加されます。もう一度「Run」ボタンをクリックし、エラーが発生することなくビルドに成功してシミュレータが起動するかを確認します。

図11　再度「Run」をクリックし、エラーが発生することなくシミュレータが起動するかを確認
図11　再度「Run」をクリックし、エラーが発生することなくシミュレータが起動するかを確認

エラーなしでシミュレータが起動すれば、iOS向け開発環境のセットアップと動作確認は完了です。続いてAndroid向けの開発環境をセットアップします。Eclipseを起動し、あたらしいAndroid Projectを作成します。

図12　EclipseでAndroid Projectを作成
図12　EclipseでAndroid Projectを作成

プロジェクトの名前と各種プロパティを入力し、Build Targetを指定します。ここではプロジェクトの名前を「PhoneGapAndroidApp」とし、Build TargetにAndroid 3.2を選択しました。

図13　プロジェクトの名前と各種プロパティを入力し、Build TargetとしてAndroid 2.4を選択
図13　プロジェクトの名前と各種プロパティを入力し、Build TargetとしてAndroid 2.4を選択

プロジェクトを作成後、次の操作をおこないPhoneGapのファイルをデプロイしていきます。

  • ①プロジェクトのルートディレクトリに /libs と /assets/www ディレクトリを作成
  • ②phonegap/Android/phonegap-1.0.0.jsを /assets/www 以下にコピー
  • ③phonegap/Android/phonegap-1.0.0.jarを /libs 以下にコピー
  • ④phonegap/Android/xml/ディレクトリを /res 以下にコピー
図14　赤枠部のファイル、ディレクトリを追加
図14　赤枠部のファイル、ディレクトリを追加

ファイルのデプロイが完了したら、プロジェクトのメインとなるJavaファイルを開き、次の修正をおこないます。

  • クラスの継承元（extends）を"Activity"から"DroidGap"に変更
  • setContentView()と記述されている箇所を、super.loadUrl("file:///android_asset/www/index.html");に変更
  • ファイルの先頭部分に、import com.phonegap.*;の一文を追加
  • ファイルの先頭部分より、import android.app.Activity;の一文を削除
図15　PhoneGapAndroidAppActivity.java修正前
図15　PhoneGapAndroidAppActivity.java修正前
図16　PhoneGapAndroidAppActivity.java 修正後（赤線部が変更箇所）
図16　PhoneGapAndroidAppActivity.java 修正後（赤線部が変更箇所）

まだphonegap-1.0.0.jarをビルドパスに含めていないので、エラーがコンソール上に表示されます。phonegap-1.0.0.jarを右クリックし、Build PathメニューのConfigure Build Pathを開きます。Librariesタブを選択し、Add JARsをクリックして/libs/phonegap-1.0.0.jarをビルドパスに追加します。

図17　ビルドパスにphonegap-1.0.0.jarを追加
図17　ビルドパスにphonegap-1.0.0.jarを追加

最後にAndroidManifest.xmlの修正をおこないます。AndroidManifest.xmlを右クリックし、Text Editorで開きます。versionNameの下に、次のXMLを挿入します。

<supports-screens
    android:largeScreens="true"
    android:normalScreens="true"
    android:smallScreens="true"
    android:resizeable="true"
    android:anyDensity="true"
    />
<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" />

次にactivityタグの属性に android:configChanges="orientation|keyboardHidden" を挿入します。続けて、activityタグの直後に次のXMLを挿入します。

        <activity android:name="com.phonegap.DroidGap"
                  android:label="@string/app_name"
                  android:configChanges="orientation|keyboardHidden">
            <intent-filter>
            </intent-filter>
        </activity>

修正後のAndroidManifest.xmlは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="org.hiroakio.phonegap.android"
      android:versionCode="1"
      android:versionName="1.0">

      <supports-screens
          android:largeScreens="true"
          android:normalScreens="true"
          android:smallScreens="true"
          android:resizeable="true"
          android:anyDensity="true"
          />
      <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-sdk android:minSdkVersion="13" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".PhoneGapAndroidAppActivity"
                  android:configChanges="orientation|keyboardHidden"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.phonegap.DroidGap"
                  android:label="@string/app_name"
                  android:configChanges="orientation|keyboardHidden">
            <intent-filter>
            </intent-filter>
        </activity>
    </application>
</manifest>

以上でAndroid向け開発環境のセットアップが完了しました。次回は、Hello Worldアプリの作成とビルド、PhoneGap:Buildの紹介をおこなっていきます。乞うご期待ください！

おすすめ記事

記事・ニュース一覧