MacにCordva環境入れてみた

スマフォアプリをつくってみたいと思い、色々検索していたところCordovaはhtml/css/javascriptだけの開発でなんかうまいことブラウザとAndroidとiOSとへうまく展開してくれるらしい。

そこでさっそく、Cordovaの環境をMacに構築してみた。

スポンサーリンク

Crodovaのインストール

基本的にはここの通りに進めていきます。

node.jsの導入

まずnodeが必要らしいのでインストールします。のちのちのバージョン管理を考えて「nodebrew」というnodeのバージョン管理を簡単にしてくれる素晴らしいツールを導入します。bash

[~@%] brew install nodebrew

パスも通しましょう。以下はzshの場合です。bashの方は.zshrcではなく.bash_profileとしてください。

[~@%] echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> .zshrc 
[~@%] source .zshrc 

次に最新版のnodeをインストールします。

[~@%] nodebrew install-binary latest
[~@%] nodebrew ls
v10.8.0

current: none

現在のバージョンに何も指定されていないので先ほどいれた最新バージョンを指定しましょう。

[~@%] nodebrew use v10.8.0
use v10.8.0
[~@%] nodebrew ls
v10.8.0

current: v10.8.0
[~@%] node -v
v10.8.0

node -vで指定したバージョンが表示されればOK!
異なるバージョンが表示された方は以前に別の方法でnodeをいれていると思われます。なので、それを使うかこれを機に以前のものをアンインストールするか、どちらでも大丈夫です。

nodeを入れるとnpmも付いてきます。

[~@%] npm -v
6.1.0

それではさっそくCordovaをインストールしましょう。

[~@%] npm install -g cordova
/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
+ cordova@8.0.0
added 415 packages from 394 contributors in 27.303s

╭───────────────────────────────────────────────────────────────╮
│ │
│ New minor version of npm available! 6.1.0 → 6.3.0 │
│ Changelog: https://github.com/npm/npm/releases/tag/v6.3.0 │
│ Run npm install -g npm to update! │
│ │
╰───────────────────────────────────────────────────────────────╯

簡単でしたね!

初めてのアプリ起動

プロジェクト作成

適当なディレクトリに移動して以下のコマンドを実行します。

[~@%]cordova create MyApp

プラットフォーム追加

次にプラットーフォムなるものを追加します。browser, android, iosなどがあります。

要するにどの環境で動かした以下ですね。とりあえずbrowserを追加します。

[~@%]cd MyApp
[~/MyApp@%]cordova platform add browser

アプリ起動

それでは早速起動してみましょう。

以下のコマンドを実行します。

[~@%]cordova run browser

するとブラウザが起動したのではないでしょうか。

あとは自分の作りたいように編集するだけです。

MyApp/www/配下にindex.htmlやjs,cssディレクトリがあるのでいじってみましょう!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク