もっと使おうPhoneGap／Cordova 2.0.0

第2回　iOSプロジェクト作成の手順変更，ターミナルからiOSシミュレータを起動する

PhoneGap, PhoneGap 2.0.0, Cordova, Xcode, iPhone

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

前回はPhoneGap 2.0.0の変更点を紹介しました。今回は，PhoneGap 2.0.0でiOSプロジェクトを実際に作成・動作確認をおこなうまでの手順と，ターミナルからiOSシミュレータを起動できるようにするまでの手順を紹介していきたいと思います。

PhoneGap入門書を書きました

株式会社マイナビより，拙著としてPhoneGap入門書「HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門（マイナビ，Amazon⁠）⁠」が9月初頭に出版・発売されます。PhoneGap 1.9.0をベースに解説，2.0.0での変更点やアップグレード手順をまとめています。

はじめてWebアプリケーションを作成する方から，現役のコーダーまで，標準仕様とともにPhoneGap/Cordovaをじっくり学習できるように工夫しました。書店で見かけたら，ぜひお手に取っていただけると幸いです。表紙のホットケーキが目印です。

『HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門』

『HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門』

それでは引き続き，本連載をお楽しみください。今後ともよろしくおねがいいたします。

iOSプロジェクトの作成手順

PhoneGap 2.0.0リリースにおいて，iOSプロジェクトの作成手順が大きく変更されました。第2回では，iOSプロジェクト作成の手順がどのように変わったかを紹介していきます。

なお，Androidなど他のOSではこれまでどおりの作成手順でプロジェクトを作成します。Androidの場合は，EclipseでAndroid Projectを作成するといった具合です。詳細については，前連載の記事をご参照ください。

必要な動作環境は次のとおりです。

  • OS: Mac OS X 10.7（Lion）以上
  • Xcode: 4.3 以上
  • Xcode Command Line Tools インストール済

ここでの動作環境は次のとおりです。

  • OS: Mac OS X 10.8（Mountain Lion）
  • Xcode: 4.4
  • PhoneGap: 2.0.0
  • シェル: zsh 4.3.11（i386-apple-darwin12.0）

おおまかなiOSプロジェクトの作成～実行までの手順は次のとおりです。

  1. Xcode Command Line Toolsのインストール
  2. PhoneGapのディスクイメージ（.dmg）より，binディレクトリをローカルハードディスクにコピー
  3. コピーしたbinディレクトリを，ターミナルの環境変数PATHに通す
  4. ターミナル上でcreateコマンドを実行し，Xcodeプロジェクトを作成
  5. Xcodeを起動し，実行する

1～3の作業は，初回のみ行えばOKです。

1．Xcode Command Line Toolsのインストール

Xcodeより，Command Line Toolsをインストールします。Xcodeを起動し，Preferences → Downloads → Components からインストールをおこないます。

Command Line Toolsをインストール

Command Line Toolsをインストール

2．PhoneGapのディスクイメージ（.dmg）より，binディレクトリをローカルハードディスクにコピー

PhoneGapのディスクイメージより，binディレクトリをローカルハードディスクにコピーします。Cordova-2.0.0.dmgをマウントし，インストーラと同階層に格納されているbinディレクトリをコピーします。ここでは，ユーザディレクトリ直下にコピーします。

Cordova-2.0.0.dmgをマウント後，binディレクトリをコピー

Cordova-2.0.0.dmgをマウント後，binディレクトリをコピー

3．コピーしたbinディレクトリを，ターミナルの環境変数PATHに通す

ユーザディレクトリ直下にコピーしたbinディレクトリを，ターミナルの環境変数PATHに通します。bashの場合は ~/.bashrc，zshの場合は ~/.zshrc に，次の1文を追加します。

export PATH=$PATH:~/bin

4．ターミナル上でcreateコマンドを実行し，Xcodeプロジェクトを作成

ターミナル上でcreateコマンドを実行します。createコマンドの書式は次のとおりです。

create <path_to_new_project> <package_name> <project_name>
path_to_new_project 新しいプロジェクトのパスを入力します。ユーザディレクトリ直下に HelloCordova を作成する場合は， ~/HelloCordova と指定します
package_name Xcodeプロジェクトを作成する際に入力するBundle Identifierと同一のものです
project_name プロジェクト名を指定します

ここでのプロジェクトの情報は次のとおりです。

プロジェクト名 HelloCordova
Bundle Identifier jp.gihyo.phonegap2

ユーザディレクトリ直下に展開する場合，createコマンドの書式は次のようになります。

create ~/HelloCordova jp.gihyo.phonegap2 HelloCordova

createコマンドの実体は，シェルスクリプトです。bin/templates以下にプロジェクトのテンプレートが格納されており，渡された引数に応じてファイルをコピー，sedコマンドでディレクトリ/ファイル名を置換しています。

デフォルトで作成されるプロジェクトをカスタマイズしたい場合は，bin/templates/project/www/ディレクトリ以下のファイル構成を変更すれば良いでしょう。

5．Xcodeを起動し，実行する

作成したXcodeプロジェクトを開きます。Finderから開いてもいいですが，ターミナルから直接開くと手間を省けます。

open ~/HelloCordova/HelloCordova.xcodeproj/

Xcodeを起動し，ファイルツリーを確認

Xcodeを起動し，ファイルツリーを確認

wwwディレクトリをはじめ，必要なファイルがすべて揃っている状態でプロジェクトが作成されます。PhoneGap 1系のように，いったんRunボタンを押してエラー表示を確認し，wwwディレクトリをXcodeプロジェクトに紐づける作業は不要になりました。Schemaを選択し，Runボタンをクリックして実行して動作を確認します。

Hello, Cordova!

Hello, Cordova!

PhoneGap, PhoneGap 2.0.0, Cordova, Xcode, iPhone

著者プロフィール

富田宏昭（とみだひろあき）

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