gihyo.jpサイトのロゴ

もっと使おうPhoneGap／Cordova 2.0.0

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

2012-08-16

前回は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 2.0.0では、wwwディレクトリ以下のファイル構成が大きく変更されました。

  • CSS/JavaScriptファイルの分離
  • サンプルJavaScriptコードの記述スタイル
  • アイコン/スプラッシュ画像が、res/以下に配置されるように
  • Jasminテスト用のJavaScriptコードが付属するように

CSS/JavaScriptファイルの分離

PhoneGap 1系ではサンプルのHTMLファイル(index.html)にJavaScriptコードが直接記述されていました。PhoneGap 2.0.0では、CSSファイルとJavaScriptファイルが分離されました。

また、表示の高速化を図るために、JavaScriptをロードする位置が<head>要素内から、<body>要素の最後に移動しています。

サンプルJavaScriptコードの記述スタイル

サンプルのJavaScriptコードの記述スタイルが変更されました。1系と2.0.0のサンプルコードを一部抜粋します。

PhoneGap 1.x.x （⁠index.htmlに直書き）
function onBodyLoad()
{
  document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady()
{
  navigator.notification.alert("Cordova is working")
}
PhoneGap 2.0.0（index.jsとして分離）
var app = {
  initialize: function() {
    this.bind();
  },
  bind: function() {
    document.addEventListener('deviceready', this.deviceready, false);
  },
  deviceready: function() {
    app.report('deviceready');
  },
  report: function(id) { 
    console.log("report:" + id);
    document.querySelector('#' + id + ' .pending').className += ' hide';
    var completeElem = document.querySelector('#' + id + ' .complete');
    completeElem.className = completeElem.className.split('hide').join('');
  }
};

上記のとおり、名前空間を汚染しないように意識したコードとなっています。

アイコン/スプラッシュ画像が、res/以下に配置されるように

アプリケーションのアイコン、起動時のスプラッシュ画像が、www/res以下に配置されるようになりました。対応しているOS分のpng画像が用意されています。

Jasminテスト用のJavaScriptコードが付属するように

JasminでJavaScriptのテストを行うためのサンプルコードがwww/spec以下に配置されるようになりました。

ターミナルからiOSシミュレータを起動するように

PhoneGap 2.0.0以降では、コマンドラインからプロジェクトのビルド、エミュレータの起動が行えるようになりました。プロジェクトディレクトリに3種類のコマンドが用意されています。

debug Xcodeプロジェクトをビルドします。ビルドには、xcodebuildが使用されます
emulate ios-simを用いて、iOSシミュレータを起動します
log console.logファイルを監視します

ios-simを導入し、ターミナル上からプロジェクトをビルドし、iOSシミュレータで動作の確認ができるようにしてみましょう。ここではHomebrewを用いてインストールを行いました。

Homebrewをインストールするには、ターミナルで次のコマンドを実行します。

% ruby >(curl -fsSk https://raw.github.com/mxcl/homebrew/go)

Homebrewをインストール後、続けて次のコマンドを実行してios-simをインストールします。

% brew install ios-sim

ios-simをインストール後は、ターミナルからiOSシミュレータを起動できるようになります。

% cd ~/HelloCordova/
% ./cordova/debug

Xcodeプロジェクトのビルド完了後、自動的にiOSシミュレータが起動します。Simulator session timed outエラーが発生してiOSシミュレータ上でPhoneGapアプリケーションが起動しない場合は、確実な手段ではありませんが、次の2点を試してみましょう。

  • iOSシミュレータ上で、「⁠コンテンツと設定をリセット」を行う
  • OSの再起動

なお、これら3種類のコマンドも実体はシェルスクリプトです。自分好みにスクリプトを改編したり、ほかのコマンドと組み合わせることで、より優れたターミナルでの開発環境の構築が可能になります。

次回はWeinreのインストール、使い方を解説していきます。

おすすめ記事

記事・ニュース一覧