スマフォアプリをつくってみたいと思い、色々検索していたところ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ディレクトリがあるのでいじってみましょう！