はじめまして、株式会社キクミミの富田宏昭と申します。おもに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より抜粋)
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サイトより)
本連載では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をダウンロード
最初にiOS向けの開発環境をセットアップします。zipパッケージを解凍し、iOSディレクトリ以下のPhoneGap-1.0.0.dmgをマウントします。pkgファイルを開き、iOS向けPhoneGap開発環境のインストールを開始します。
図4 pkgファイルを開き、ウィザード形式でPhoneGapをインストール
PhoneGapパッケージをインストール後、Xcodeを起動し、あたらしいプロジェクトを作成します。iOSアプリケーションのテンプレート内に「PhoneGap-based Application」が出現しているので、これを選択します。必要な情報を入力し、PhoneGapプロジェクトを作成しましょう。
図5 PhoneGap-based Applicationを作成
図6 Product NameとCompany Identifierを入力
プロジェクトを作成したら、動作確認をおこないます。Xcode画面左上の「Run」ボタンをクリックし、ビルドに成功してシミュレータが起動するかを確認します。
図7 Runボタンをクリックし、シミュレータが起動してくるかを確認
無事にシミュレータが起動し、ワーニングエラーが出力されていることを確認します。これは作成したプロジェクトのリファレンスにwwwディレクトリが存在しない場合に発生するエラーです。プロジェクトを右クリックし、"Show in Finder"を選択してFinderを開きます。wwwディレクトリがあることを確認し、これをXcodeのプロジェクトにドラッグ&ドロップします。
図8 ワーニングエラーが出力されていることを確認
図9 Finderのwwwディレクトリを、作成したPhoneGapTestAppプロジェクトにドラッグ&ドロップ
ドロップするといくつかのオプションが用意された確認のプロンプトが表示されます。"Create folder references for any added folders"を選択し、Finishボタンをクリックしてwwwディレクトリをリファレンスに追加をおこないます。
図10 Create folder references for any added foldersを選択し、Finishボタンをクリック
ここまでの操作でナビゲーターにwwwディレクトリが追加されます。もう一度「Run」ボタンをクリックし、エラーが発生することなくビルドに成功してシミュレータが起動するかを確認します。
図11 再度「Run」をクリックし、エラーが発生することなくシミュレータが起動するかを確認
エラーなしでシミュレータが起動すれば、iOS向け開発環境のセットアップと動作確認は完了です。続いてAndroid向けの開発環境をセットアップします。Eclipseを起動し、あたらしいAndroid Projectを作成します。
図12 EclipseでAndroid Projectを作成
プロジェクトの名前と各種プロパティを入力し、Build Targetを指定します。ここではプロジェクトの名前を「PhoneGapAndroidApp」とし、Build TargetにAndroid 3.2を選択しました。
図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 赤枠部のファイル、ディレクトリを追加
ファイルのデプロイが完了したら、プロジェクトのメインとなるJavaファイルを開き、次の修正をおこないます。
クラスの継承元(extends)を"Activity"から"DroidGap"に変更
setContentView()と記述されている箇所を、super.loadUrl("file:///android_asset/www/index.html");に変更
ファイルの先頭部分に、import com.phonegap.*;の一文を追加
ファイルの先頭部分より、import android.app.Activity;の一文を削除
図15 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を追加
最後に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の紹介をおこなっていきます。乞うご期待ください!