前回は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をじっくり学習できるように工夫しました。書店で見かけたら、ぜひお手に取っていただけると幸いです。表紙のホットケーキが目印です。
それでは引き続き、本連載をお楽しみください。今後ともよろしくおねがいいたします。
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プロジェクトの作成~実行までの手順は次のとおりです。
- Xcode Command Line Toolsのインストール
- PhoneGapのディスクイメージ(.dmg)より、binディレクトリをローカルハードディスクにコピー
- コピーしたbinディレクトリを、ターミナルの環境変数PATHに通す
- ターミナル上でcreateコマンドを実行し、Xcodeプロジェクトを作成
- Xcodeを起動し、実行する
1~3の作業は、初回のみ行えばOKです。
1.Xcode Command Line Toolsのインストール
Xcodeより、Command Line Toolsをインストールします。Xcodeを起動し、Preferences → Downloads → Components からインストールをおこないます。
2.PhoneGapのディスクイメージ(.dmg)より、binディレクトリをローカルハードディスクにコピー
PhoneGapのディスクイメージより、binディレクトリをローカルハードディスクにコピーします。Cordova-2.0.0.dmgをマウントし、インストーラと同階層に格納されているbinディレクトリをコピーします。ここでは、ユーザディレクトリ直下にコピーします。
3.コピーしたbinディレクトリを、ターミナルの環境変数PATHに通す
ユーザディレクトリ直下にコピーしたbinディレクトリを、ターミナルの環境変数PATHに通します。bashの場合は ~/.bashrc、zshの場合は ~/.zshrc に、次の1文を追加します。
4.ターミナル上でcreateコマンドを実行し、Xcodeプロジェクトを作成
ターミナル上でcreateコマンドを実行します。createコマンドの書式は次のとおりです。
path_to_new_project |
新しいプロジェクトのパスを入力します。ユーザディレクトリ直下に HelloCordova を作成する場合は、 ~/HelloCordova と指定します |
package_name |
Xcodeプロジェクトを作成する際に入力するBundle Identifierと同一のものです |
project_name |
プロジェクト名を指定します |
ここでのプロジェクトの情報は次のとおりです。
プロジェクト名 |
HelloCordova |
Bundle Identifier |
jp.gihyo.phonegap2 |
ユーザディレクトリ直下に展開する場合、createコマンドの書式は次のようになります。
createコマンドの実体は、シェルスクリプトです。bin/templates以下にプロジェクトのテンプレートが格納されており、渡された引数に応じてファイルをコピー、sedコマンドでディレクトリ/ファイル名を置換しています。
デフォルトで作成されるプロジェクトをカスタマイズしたい場合は、bin/templates/project/www/ディレクトリ以下のファイル構成を変更すれば良いでしょう。
5.Xcodeを起動し、実行する
作成したXcodeプロジェクトを開きます。Finderから開いてもいいですが、ターミナルから直接開くと手間を省けます。
wwwディレクトリをはじめ、必要なファイルがすべて揃っている状態でプロジェクトが作成されます。PhoneGap 1系のように、いったんRunボタンを押してエラー表示を確認し、wwwディレクトリをXcodeプロジェクトに紐づける作業は不要になりました。Schemaを選択し、Runボタンをクリックして実行して動作を確認します。
ファイル構成の変更点
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のサンプルコードを一部抜粋します。
上記のとおり、名前空間を汚染しないように意識したコードとなっています。
アイコン/スプラッシュ画像が、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をインストールするには、ターミナルで次のコマンドを実行します。
Homebrewをインストール後、続けて次のコマンドを実行してios-simをインストールします。
ios-simをインストール後は、ターミナルからiOSシミュレータを起動できるようになります。
Xcodeプロジェクトのビルド完了後、自動的にiOSシミュレータが起動します。Simulator session timed outエラーが発生してiOSシミュレータ上でPhoneGapアプリケーションが起動しない場合は、確実な手段ではありませんが、次の2点を試してみましょう。
- iOSシミュレータ上で、「コンテンツと設定をリセット」を行う
- OSの再起動
なお、これら3種類のコマンドも実体はシェルスクリプトです。自分好みにスクリプトを改編したり、ほかのコマンドと組み合わせることで、より優れたターミナルでの開発環境の構築が可能になります。
次回はWeinreのインストール、使い方を解説していきます。