はじめに
ハイブリッドアプリを作成するためにCordovaの環境構築手順をまとめていきます。
利用環境は以下の通り
- Mac Yosemite(10.10.5)
- Node.js(0.10.26)
- Xcode(6.4)
Cordovaってなに？
「Apache Cordova」はOSSのフレームワークで、ハイブリッドアプリを作成することができます。
ハイブリッドアプリでは、HTMLやCSS、Javascriptを用いてUIやロジックを作るため、iOSやAndroid、WindowsPhoneといった複数のOSでも個別に作り込む必要がなくなります。また、既存のWeb技術がそのまま使える点も大きな魅力となります。
カメラ操作やファイル操作などネイティブの制御を行う際は、Javascriptからプラグインを経由してネイティブのロジックを呼び出し、実現しています。よく利用する機能はプラグインとして公開されているため、基本的にはプラグインを利用するのみで済みます。
既存のプラグインで対応できない場合は既存のプラグインをカスタマイズするか、独自にプラグインを作成することでネイティブでできることはほぼ実現できます。
事前準備
Node.jsのインストール
Node.jsここからダウンロードし、インストールします。
Xcodeのインストール
AppStoreから「Xcode」を検索し、インストールします。
Cordovaのインストール
Node.jsのnpmを用いて、Cordovaをインストールします。
「ターミナル」から以下のコマンドを実行します。
$ sudo npm install -g cordova
上記コマンドで最新のCordovaがインストールされます。
パラメータ-vでインストールされたバージョンを確認します。
$ cordova -v
5.2.0
（2015/09/08時点では5.2.0がインストールされています。）
Cordovaプロジェクトの作成
Cordovaのプロジェクトを作成します。
プロジェクトを作成するフォルダに移動します。
ここでは/Users/[ユーザー名]/Documents/srcフォルダ内に作成します。
作成するフォルダに移動後、以下のコマンドを実行します。
$ cordova create SampleCordova com.example.SampleCordova SampleCordova
これでSampleCordovaのプロジェクトが作成されます。
cordova create以降の引数は以下の内容となります。
- 第１引数-SampleCordova:プロジェクトフォルダ名
- 第２引数-com.example.SampleCordova:アプリ識別名(iOSのBundle Identifier)
- 第３引数-SampleCordova:プロジェクト名(Xcodeのプロジェクト名)
プロジェクトのフォルダに移動します。
$ cd SampleCordova
プラットフォームの追加
作成したSampleCordovaで使用するプラットフォーム(iOSやAndroid、WindowsPhoneなど)を追加します。ここではiOSのみを追加します。
$ cordova platform add ios
lsコマンドで追加されたプラットフォームの種類を確認することができます。
$ cordova platform ls
Installed platforms: ios 3.9.1
Available platforms: amazon-fireos, android, blackberry10, browser, firefoxos, webos
iOSのプラットフォームが追加され、プラットフォームのバージョンは3.9.1がインストールされていることがわかります。
iOS Simulatorのインストール
実行させるためのSimulatorをインストールします。
$ sudo npm install -g ios-sim
プロジェクトのビルド
Simulatorで実行できるようにプロジェクトのビルドをします。
$ cordova build
Simulatorの実行
Simulatorを実行します。
$ cordova emulate ios
Simulatorが起動し、Cordovaのアプリが表示されます。
Xcodeプロジェクト
プラットフォームにiOSを追加するとXcodeのプロジェクトファイルが生成されます。/Users/[ユーザー名]/Documents/src/SampleCordova/platforms/iosのフォルダに格納されているため、Xcodeを用いてビルド、Simulatorの起動等も行えます。
おわりに
Cordovaの環境構築は特につまづくことなく終わりました。
プラグインの追加手順や構成などは徐々にまとめていきます。