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

第1回 PhoneGapとは

この記事を読むのに必要な時間:およそ 5 分

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を選択

著者プロフィール

富田宏昭(とみだひろあき)

株式会社キクミミでFileMaker/SQLiteを使ったWebアプリ開発に従事しながら,オープンソースソフトウェアのハウツー記事執筆を行う。趣味は横乗り系スポーツ,美術館めぐり,高速ジャンクション鑑賞。

コメント

コメントの記入