Install Node.js v5 and NPM for Mac
Cordovaの環境構築のためにパッケージマネージャーのNPMを入れます。
インストーラーのダウンロード
こちらからpkgファイルをダウンロードします。Node.js 特にnode.jsでなんか作る予定はないので、最新のv5を使っていきます。
node.jsインストーラーの起動
node.jsの動作確認
動作確認してみましょう。まずはバージョンのチェック。
$ node -v v5.10.1
さらにこちらの記事で作成されているサンプルを動かしてみます。
紹介されていたサンプルコード
var http = require('http');
http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello World\n');
}).listen(8124);
console.log('Server running at http://127.0.0.1:8124/');
http://localhost:8124/にアクセスしてみます。OKですね。
npmの動作確認
続いて、一緒にインストールされてnpmの確認。 バージョンチェック。
$ npm -v 3.8.3
cordovaをインストールしてみます。
$ sudo npm install -g cordova fetchMetadata → network ▄ ╢██████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
以上で、cordovaのインストールが完了しました。
sudoしないと、権限エラーで怒られました。
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR! at Error (native)
npm ERR! { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/local/lib/node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npmで古いバージョンのインストール
今日時点で、最新のCordovaのバージョンは6.1.1でした。既存の資産がバージョン5でないと動かない箇所があるみたいなので、古いバージョンを指定してインストールします。
$ cordova -v 6.1.1 $ sudo npm install -g cordova@5.4.1 （略） $ cordova -v 5.4.1
OKでした。
Cordovaのサンプルをブラウザと、Androidで実行するまで
このエントリーでは、こちらのCorova公式サイトのGetting Startedで紹介されている手順をやってみます。 cordova.apache.org
Cordovaの環境の準備はこちらのエントリで書いています。 begirama.hatenablog.com
それでは行きましょう。
プロジェクトの作成
cordova createコマンドで、プロジェクトの新規作成が行えます。
$ cordova -v 5.4.1 $ cordova create MyApp Creating a new cordova project.
以下の操作はすべて新しく作られたMyAppディレクトの中で作業を行います。
browserプラットフォームの追加
cordova platform addコマンドで、プラットフォームを追加します。
ここではGetting Startedの手順通り、browserを追加しています。
$ cordova platform add browser Adding browser project... Running command: /Users/rsogo/.cordova/lib/npm_cache/cordova-browser/4.0.0/package/bin/create /Users/rsogo/work/cordova_sample/MyApp/platforms/browser io.cordova.hellocordova HelloCordova Creating Browser project. Path: platforms/browser Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project Fetching plugin "cordova-plugin-whitelist@1" via npm Installing "cordova-plugin-whitelist" for browser
実行
cordova runコマンドで、先ほど追加したbrowserプラットフォームを実行します。
ここで、追加していないプラットフォームを指定すると、怒られます。
cordova run browser Running command: /Users/rsogo/work/cordova_sample/MyApp/platforms/browser/cordova/run Static file server running on port 8000 (i.e. http://localhost:8000) CTRL + C to shut down Static file server running @ http://localhost:8000/index.html CTRL + C to shut down
runすると、ブラウザが立ち上がって、Cordovaのマスコット（？）が表示されます。
ここまでがGetting Startedの内容ですが、Cordovaのマルチプラットフォーム感を味わうためにプラットフォームを追加してみましょう。
androidプラットフォームの追加
browserの時と同じようにandroidもplatform addコマンドで既存のプロジェクトに追加します。
$ cordova platform add android
Adding android project...
Running command: /Users/rsogo/.cordova/lib/npm_cache/cordova-android/4.1.1/package/bin/create /Users/rsogo/work/cordova_sample/MyApp/platforms/android io.cordova.hellocordova HelloCordova --cli
Creating Cordova project for the Android platform:
Path: platforms/android
Package: io.cordova.hellocordova
Name: HelloCordova
Activity: MainActivity
Android target: android-22
Copying template files...
Android project created with cordova-android@4.1.1
Installing "cordova-plugin-whitelist" for android
This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.
どんなものが生成されたのか見てみましょう。 MyAppの直下にplatformsというディレクトリがありますね。
$ ls config.xml hooks platforms plugins www platforms/ plugins/
更にplatformsの下には先程追加したbrowserとandroidのディレクトリがあります。
$ ls platforms/ android/ browser/ platforms.json
さらにandroidの中に入って行くと、Androidのよく見るプロジェクト構成になっています。
$ ls platforms/android/ AndroidManifest.xml assets libs res CordovaLib build.gradle platform_www settings.gradle android.json cordova project.properties src
実行
こちらも同じくcordova runコマンドのオプションにプラットフォーム名を指定して、実行できます。
$ cordova run android Running command: /Users/rsogo/work/cordova_sample/MyApp/platforms/android/cordova/run ANDROID_HOME=/Applications/adt-bundle-mac-x86_64-20140702/sdk JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_45.jdk/Contents/Home WARNING : No target specified, deploying to device 'CB5A26M91X'. Running: /Users/rsogo/work/cordova_sample/MyApp/platforms/android/gradlew cdvBuildDebug -b /Users/rsogo/work/cordova_sample/MyApp/platforms/android/build.gradle -PcdvBuildArch=arm -Dorg.gradle.daemon=true Picked up JAVA_TOOL_OPTIONS: -Dfile.encoding=UTF-8
こんな感じ。
いけましたね。
