ファイルをDownload PhoneGap « PhoneGapかgithubから取得する。phonegap-0.9.2.zipを解凍し、iOSディレクトリ以下のパッケージファイルを展開、インストールする。

phonegap-0.9.2.zip展開後の構成

iOSディレクトリ以下のパッケージ「PhoneGapLibInstaller.pkg」を展開し、インストール

iPhoneアプリケーションの作成

PhoneGapLibInstaller.pkgをインストール後、ウィザードに表示される手順にしたがって、PhoneGapアプリケーションを作成する。まずXcodeを起動し、ファイルメニューの「新規プロジェクト」を選択。User TemplatesのPhoneGap-based Applicationを選択し、あたらしいプロジェクトを作成する。

ファイルメニューより「新規プロジェクト」を選択。User TemplatesよりPhoneGap-based Applicationを選択し、あたらしいプロジェクトを作成

PhoneGap-based Application「PhoneGap-test」プロジェクトを作成

このままビルドと実行はできるが真っ白の画面が表示されるだけなので、PhoneGap Device APIをもちいて各種端末情報を実際に表示させてみよう。Xcodeでwww/index.htmlを開き、function onDeviceReady()内と<body>内に次のコードを追加する。

function onDeviceReady()内

document.getElementById('deviceName').innerText = device.name;
document.getElementById('devicePhonegap').innerText = device.phonegap;
document.getElementById('devicePlatform').innerText = device.platform;
document.getElementById('deviceUuid').innerText = device.uuid;
document.getElementById('deviceVersion').innerText = device.version;

<body>内

<dl>
  <dt>device.name</dt>
  <dd id="deviceName"></dd>
  <dt>device.phonegap</dt>
  <dd id="devicePhonegap"></dd>
  <dt>device.platform</dt>
  <dd id="devicePlatform"></dd>
  <dt>device.uuid</dt>
  <dd id="deviceUuid"></dd>
  <dt>device.version</dt>
  <dd id="deviceVersion"></dd>
</dl>

Xcodeでindex.htmlのコードを修正。赤枠部が追加したコードとなる

コードを修正後、Simulatorを選択して「ビルドと実行」を実行する。ビルドに成功した場合はiPhoneシミュレータが起動し、作成したアプリケーションが表示される。

ビルドに成功し、アプリケーションが起動した。PhoneGap Device APIで取得した端末情報が表示されている

よりiPhoneライクな見た目のアプリケーションを作成したい場合や、JavaScriptで複雑な処理を実装したい場合は別途JavaScriptフレームワークを用いる。Tips and Tricks for Mobile Developmentに挙げられているJavaScriptフレームワークの一部を紹介する。

Androidアプリケーションの作成

成果物のなかにAndroid用のサンプルアプリケーションがふくまれているので、これをビルドし、インストールをおこなってみよう。ターミナルを開き、/phonegap/Android/sample/ディレクトリに移動する。移動後、"android update project -p ."を実行し、プロジェクトをアップデートする。

% cd phonegap/Android/sample/
% android update project -p .
Updated local.properties

アップデート後、Android SDK and AVD Managerを起動する。

% android

Android SDK and AVD Managerを起動

Virtual DevicesのうちAndroid 2.2のエミュレータを起動した状態で、ターミナル上にてPhoneGapサンプルアプリケーションのインストールをおこなう。

% ant debug install

インストールに成功すると、アプリケーションランチャに「sample」アイコンが表示されるようになるので、これを起動する。

PhoneGapサンプルアプリケーションのビルド/インストールに成功すると、ランチャに「sample」が出現

サンプルアプリケーションを起動。このファイルのベースはphonegap/Android/sample/asses/www/index.html。ソースコードを見ると、各種ボタンやその機能はすべてHTML/CSS/JavaScriptで実現していることがわかる

「Call 411」ボタンをタップすると、発信画面に移動する

各APIの概要紹介

PhoneGapにはおもに次のAPIが用意されている。

API 概要 主要な対応プラットフォーム
Accelerometer モーションセンサー(加速度センサー)にアクセス。傾きや動きの情報を取得する Android, BlackBerry Widgets(OS 5.0以上), iPhone
Camera カメラにアクセス。写真のキャプチャやオプション定義、各種イベントを取得する Android, BlackBerry Widgets(OS 5.0以上), iPhone
Contacts Contacts(電話帳)データベースにアクセス。連絡先の作成や検索をおこなう Android, BlackBerry Widgets(OS 5.0以上)
Device デバイスの名前やプラットフォームバージョン、PhoneGapのバージョンを取得する Android, BlackBerry, BlackBerry Widgets(OS 5.0以上), iPhone
Events devicereadyイベント - PhoneGapのロードが完了した際に発火 Android, BlackBerry Widgets(OS 5.0以上), iPhone
Geolocation GPSセンサーにアクセス。GPS位置座標を取得する Android, BlackBerry (OS 4.6), BlackBerry Widgets(OS 5.0以上), iPhone
Network デバイスのネットワーク接続状態を取得する Android, BlackBerry (OS 4.6), BlackBerry Widgets(OS 5.0以上), iPhone
Notification アラートやビープ・バイブレーションなどのノーティファイ機能を使用 AnAndroid, BlackBerry (OS 4.6), BlackBerry Widgets(OS 5.0以上), iPhone