MacにCordova環境の構築

篠原 隆司

アフィリエイト広告を利用しています

このページの内容が役に立ったら X (旧twitter) でフォローして頂けると励みになります
挨拶や報告は無しで大丈夫です

このページの内容は、2018年3月13日に行った記録です。

iMacにCordovaをインストールしていきます。

環境について

Cordovaのインストール先

iMac (Retina 5K, 27-inch, Late 2015)

OSは2018年3月なので「High Sierra」です。
新しいのが出るたび更新しているので2021年1月現在は「Big Sur」になっています。

操作はWindows10から

で、CordovaをiMacに入れていくのですが、操作はメインマシンであるWindows10から行います。

Windows10からSSHで操作していくのですが、SSHでってことなので、同じ操作をiMacのターミナルから行うのと完全に同じことになります。

「Windows使わないよ。macだけだよ」って方も普通に読み進めていけるかと思います。

ちなみにやり方としては、Windows10でターミナルを起動し、sshで接続です。
例えば▼です。

win + r > cmd > enter
> ssh ユーザー名@192.168.1.2

macのユーザー名とIPアドレスを指定します。
コマンドプロンプトだと辛いので個人的には Tera Term がおすすめです。

経緯

メインマシンはWindows10ってことで最初はVisual Studioでやっていたんです。Visual Studioは普通にCordova開発に対応しています。
けど、まぁまぁクセがあります。
で、なんやかんやで、Cordovaそのものを細かく調整したいとかなんとかってなってきて、「Visual Studio経由だと覚えなくていいものも勉強しないといけないんじゃ？」って感じになってくるんですよね。

VisualStudioだけでもある程度まではできるけど、それなりのアプリを作ろうとしたら結局Cordovaのことを知っていく必要があるので、「Cordovaを知ってCordovaを使う」じゃなく「Cordovaを知ってさらにVisual StudioからCordovaを扱う方法を知って使う」になるので、Visual StudioからCordovaを扱う方法を知ってどうすんの？Cordovaそのものの知識を持ったならCordovaを生で使ったほうがいいじゃんってなりますよね。

ってことで、Visual Studioは使わず、生のCordovaを触っていく方向になったという経緯です。

セットアップ

参考サイト

Xcodeのインストール

App Storeから普通にインストールします。

Xcodeコマンドラインツールのインストール

ターミナルを起動し、下記を実行

xcode-select --install

ダイアログがでるので「インストール」を選択

次の画面で、同意するなら「同意する」を選択

nodebrewのインストール

ターミナルを起動し、下記を実行

curl -L git.io/nodebrew | perl - setup

追記する

vi ~/.bash_profile
export PATH=$HOME/.nodebrew/current/bin:$PATH

設定を反映

source ~/.bash_profile

Node.jsのインストール

リモート管理されているNode.jsのバージョンを確認

nodebrew ls-remote

安定版をインストール

nodebrew install-binary stable

ローカルにインストールされているバージョンを確認

nodebrew ls

使用するバージョンに切り替え

nodebrew use v6.6.0

バージョンを確認

node -v
v6.5.0
npm -v
3.10.3

キャッシュをクリア

sudo npm cache clean

npmのバージョンアップ

nodebrewでinstallが失敗するようになったのでnpmをバージョンアップします。

リモート管理されているNode.jsのバージョンを確認

nodebrew ls-remote

安定版をインストール

nodebrew install-binary stable

ローカルにインストールされているバージョンを確認

nodebrew ls

使用するバージョンに切り替え

nodebrew use v8.10.0

バージョンを確認

node -v
v8.10.0
npm -v
5.6.0

Cordovaのインストール

インストール

npm install -g cordova

バージョン確認

cordova -v
8.0.0

プロジェクトの作成

作成

# ディレクトリ作成 & 移動
cd /Users/ユーザー名/Documents/app/任意のパス

# プロジェクトを作成
cordova create CordovaTest

# ディレクトリ移動
cd CordovaTest

# プラットフォームを追加
cordova platform add browser ios android

# 確認
cordova info

※内容を確認してエラーが無くなるようにする

実行

# ブラウザで実行
cordova run browser

# アンドロイドで実行
cordova run android

# iOSで実行
cordova run ios

アップデート

ここまでだと当時の古いバージョンのままなので最新版へのアップデートは▼カテゴリからご覧ください。
https://aulta.co.jp/blog/mac-environment/cordova