6章-3 Cordovaでハイブリッドアプリ開発環境を整える【共通】- 【連載】ハイブリッドアプリの最新情報とその動向【Corodva】
【連載】ハイブリッドアプリの最新情報とその動向【Corodva】
6章-3 Cordovaでハイブリッドアプリ開発環境を整える【共通】
前回まででAndroidとiOS独自の設定が終わったので、今回は共通の設定を行う。
AndroidとiOSの設定をしていないと進められない部分もあるので、まだの方は以下のリンクから。
共通の設定ではコマンドラインを使った設定が多々あるのでコマンドラインを起動しておく。
共通の設定
・node.jsとnpmのインストール
・Cordovaのインストール
・プロジェクトの作成
・プラットフォームの追加
・エミュレーターの起動
node.jsとnpmのインストール
Cordovaは、NPMパッケージとして配布されるので、Node.jsとnpmのインストールを行う。インストールは以下のリンクから。node.jsをインストールすると、同時にnpmもインストールされる。
Mac OS X Installer (.pkg)を選択します(画像参照)
インストールが正しくされているかを確認するためにのバージョン確認。
$ node -v
$ npm -v
正しくインストールされていれば、バージョン情報が表示される。
Cordovaのインストール
Node.jsのnpmユーティリティを使って、コルドバmoduleをインストール。コマンドラインにて以下のコマンドを実行。
(※MacやLinux上では「sudo」を付けないと、エラーが起こる可能性があるので注意)
$ sudo npm install -g cordova
また、上記のように「-g」オプションを付けてインストールすること。
同様に、インストールが正しくされているかを確認。
$ cordova -v
プロジェクトの作成
Cordovaのインストールが終了したら、/usr/local/binに移動し、プロジェクトを作成する。
$ cd /usr/local/bin
Cordovaのインストールが正しくされていれば、このディレクトリに「Cordova」が配置されているはず。（コマンドで「ls」叩けば中身を見ることができる）
例えば、「TestCordova」という名前のプロジェクトを作成する場合は以下のようになる。
$ cordova create TestCordova
プロジェクトの作成についての詳細はこちらを参照のこと。テンプレートを使用するなど、プロジェクトの作成の際にはオプションの指定も可能だが、プロジェクトを作成するだけなら、上記のコマンドだけで十分。
ちなみにこの段階でエラーが生じる場合はCordovaが正しくインストールされていない場合があるので注意。
プロジェクトが作成されたら、「Creating a new cordova project.」と表示される。
プラットフォームの追加
対象プラットフォームを加える。今回はiOSとAndroidでの開発を念頭に置いているので、2つを追加。まずは先程作成したTestCordovaプロジェクトに移動。
$ cd /usr/local/bin/TestCordova
続けて、以下のコマンドを実行する。
$ cordova platforms add ios
$ cordova platforms add Android
これでプラットフォームの追加は完了。
ブラウザ上でエミュレーターAPIを起動するためにはブラウザもプラットフォームに追加する必要がある。入れておきたい方は以下のコマンドを。
$ cordova platform add browser
Androidを追加するときに、以下のようなエラーが出ることがある。
これは対応するAPIがはいっていないですよ、と怒られているのでそれをいれてあげればいい。詳細は以下のページで。ちなみにXXには数値が入る。
シュミレータ・エミュレータの起動
●iOSシュミレータの準備
Xcodeでの起動も可能だけど、今回はコマンドラインから。
ちなみにCordovaのアプリ開発にはコマンドラインでの操作を良く使うので、基本的な操作は覚えておくといい。
ios-simがインストールされていない場合は以下のコマンドを実行。
（※Xcodeがインストールされていれば不要？？）
$ sudo npm install -g ios-sim
インストールが完了したら、プロジェクトのディレクトリに移動。
このページの順序どおりに実施している場合は、/usr/local/binの直下にプロジェクトのディレクトリがあるはず。
例えば、「TestCordova」というプロジェクトの場合は
$ cd /usr/local/bin/TestCordova
続いて
$ cordova build ios
を実施すれば、ios向けのビルドが行われる。
(※ビルドを行う前に、プラットフォームの追加が必要なので注意！)
最後に、シュミレータを起動させるには以下のコマンドを実行。
$ cordova emulate ios
このようにシミュレータが立ち上がるはず。 （下の画像のDevice is Readyが点滅してるはず。)ソースをいじる前はこの画面がでてくる。
●Androidエミュレータの準備
設定については以下のページを参照。
また、この辺りで
$ android
のコマンドを叩いたときに、「android: command not found」とか出てくる場合は、パスが通っていない可能性があるので下の記事の最後の方を参照して、パスを通す。
さて、Android AVDの設定まで終わったらエミュレータの起動まで実施する。
サンプルプロジェクトのディレクトリに移動して、ビルドからエミュレータ起動までを実施。
$ cd /usr/local/bin/TestCordova
ビルド
$ cordova build android
エミュレータの起動
$ cordova emulate android
これでエミュレータが表示されたら完了。しかし、最初の方にも言った通りこの標準のエミュレータは基本的に使えない。 なので高速化する方法をいろいろと試したので、そのうち紹介する。
以上で開発環境が整った。おそらくAndroidの設定でハマってしまう方がいるはず。
環境設定は一人でやっていてもなかなか解決できないので、質問等あればコメントに！
次回はCordovaでHelloWorld!
