Cordovaを用いてハイブリットアプリを開発をはじめた
ゴール
Cordovaを用いたハイブリットアプリの開発環境を整える
Cordovaとは?
- 一言でまとめると
- Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript
- About Apache Cordova™から要点を抜き出すと
- web technologies are used, and they are hosted in the app itself locally
- Cordova provides a set of uniform JavaScript libraries that can be invoked, with device-specific native backing code for those JavaScript libraries
- 歴史的には
下準備
- AndroidStudioをインストール
- JVMのインスール
- JVMがない場合、AndroidStudioを開いたときにインスールしてね!とメッセージが出るのでそこからインストールするのが早い。
- ADT Pluginをインストール
- AndroidStudioの初回起動で言われた通りに進めれば入る
- node.jsをインストール
- 確認
$ java -version java version "1.6.0_65" Java(TM) SE Runtime Environment (build 1.6.0_65-b14-466.1-11M4716) Java HotSpot(TM) 64-Bit Server VM (build 20.65-b04-466.1, mixed mode) $ node -v v0.10.25 $ git --version git version 2.3.2 (Apple Git-55)
- パーミッション変更
sudo chown -R $(whoami) /usr/local
Cordovaの準備
- Cordovaのインストール
- 以下コマンドを実行(git必要)
$ sudo npm install -g cordova
シンボリックリンクはここに貼られている感じ
/usr/local/bin/cordova ->/usr/local/lib/node_modules/cordova/bin/cordova
$ source ~/.bash_profile
確認は以下で
$ android -h Usage: android [global options] action [action options] Global options: -h --help : Help on a specific command.
$ adb version Android Debug Bridge version 1.0.32
プロジェクトを作成する
- git管理かのディレクトリで以下コマンドでcordovaプロジェクトを作成。
cordova create timer_demo com.nifty.timer_demo TimerDemo -d
「timer_demoディレクトリを作りその配下にcom.nifty.timer_demoというアプリ識別子をもつTimerDemoという名前のアプリのプロジェクトを作成する」という感じ。
- platformを追加する
$ cordova platform add android Adding android project... Creating Cordova project for the Android platform: Path: platforms/android Package: com.nifty.timer_demo Name: TimerDemo Activity: MainActivity Android target: android-22 Copying template files...
$ cordova platform add ios Adding ios project... iOS project created with cordova-ios@3.8.0 Installing "cordova-plugin-whitelist" for ios
実行してみる
$ cordova emulate android
$ cordova emulate ios ios-sim was not found. Please download, build and install version 3.0.0 or greater from https://github.com/phonegap/ios-sim into your path. Or 'npm install -g ios-sim' using node.js: http://nodejs.org Error: /Users/OKD/sandbox/ffa500.github.io/sandbox/timer_demo/platforms/ios/cordova/run: Command failed with exit code 2
エミュレーターがないよ!と言われるので言われた通りにインストールする。 せっかくnodeがあるので以下で。emulateを再実行すれば起動確認できる。
$ npm install -g ios-sim
エミュレーターで確認完了