第1回　PhoneGapとは

はじめまして、株式会社キクミミの富田宏昭と申します。おもに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で実現可能かをチェックしておきましょう。

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回目で詳しく取りあげたいと思います。

本連載では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をダウンロードします。

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

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

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

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

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

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

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

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

プロジェクトを作成後、次の操作をおこない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 以下にコピー

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

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

まだphonegap-1.0.0.jarをビルドパスに含めていないので、エラーがコンソール上に表示されます。phonegap-1.0.0.jarを右クリックし、Build PathメニューのConfigure Build Pathを開きます。Librariesタブを選択し、Add JARsをクリックして/libs/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の紹介をおこなっていきます。乞うご期待ください！