Html5でアプリを作ろう!Ionicでモバイルアプリを作る【環境構築編1】
macでIonic開発環境構築の流れを簡潔な解説とコマンドのみのシンプル構造でメモ(自分用)
参照書籍:「Ionicでつくるモバイルアプリ制作入門」の2018年版(青本)
縁の下の働き者(homebrow、node、npm)のインストール
homebrowインストール
※Xcodeのコマンドラインツールのダウンロードが始まる
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
nodebrewのインストール
$ brew install nodebrew
インストール状況確認
$ brew list
$ nodebrew -v
nodebrewセットアップ
$ nodebrew setup
実行パスを通す
nodebrew setupを打った時のコマンドを入力
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
node.jpのインストール
$ nodebrew install-binary stable
nodeのバージョン確認
$ nodebrew list
使用するための設定と、その確認
$ nodebrew use stable
node.jsのバージョン確認
$ node -v
npmのバージョン確認
$ npm -v
ライブラリの更新
npmの更新
$ npm update -g npm
Homebrewの更新
$ brew update
Nodebrewの更新
$ brew upgrade nodebrew
Node.jsの更新
$ nodebrew ls-remote
縁の下の働き者たちのインストールが終わりました。
これで次にIonicのインストールができます。
Ionicのインストール
次はIonicのインストールなのですが、Ionic6からcordovaではなく、Ionic CLiのインストールを勧めてきます。cordovaと99%の互換性のあるライブラリーとのことです。
これまでのcordovaではxcodeなどのコンパイラーがCUIで動作していた気がしますが、このIonic CLiはxcodeやAndroid StudioのコンパイラーのGUI側に吐き出すようになっている気がします。
今回は前回の構築から時間が空いての再構築しているため、Cordovaの動作についてはあやふやです(汗)が、GUIで設定しながらコンパイルできるようになって楽になった気がします。
ここでIonic CLiを使用するか、cordovaを使用するかの選択があります。cordovaを入れていても、その後Ionic CLiをインストールするときは、cordovaのアンインストールを行います。
現在私はIonic CLiの開発環境を使用しています。99%の互換性とのことなので、とりあえず使っています。
Ionic CLiインストールの場合
Ionic CLI インストール
$ npm i -g @ionic/cli
Ionic CLI アップデートコマンド
$ npm i -g @ionic/cli to update
cordovaをインストールする場合
cordovaを使用する場合のコマンド(私は使っていません)
$ npm install -g cordova ionic
cordovaのアンインストールコマンド(Ionic CLiインストール前に実行)
npm uninstall -g ionic
お疲れさまでした。
Ionicのインストール作業は以上です。
次はコンパイル環境の構築です。アプリ作成を目指す私は必須です。
ディスカッション
コメント一覧
まだ、コメントがありません