はじめに
iOSアプリだけ欲しいという新規の話があり、それならMac上にIonic Frameworkの環境を作ってみようという話になった。オレの中で。
日本語ドキュメントは公式のものがある。多分このままやればうまくいくはず。
ionicframework.com
Ionic FrameworkはオープンソースのUIツールキットで、HTML、CSS、JavaScriptなどのウェブ技術を使って、 Angular や React 、 Vue といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。
iOSネイティブのアプリが得意ならIonicとか考えないんだけど、動作環境的にPWAで許してくれなさそうというのはある。
目次
環境設定
Node.jsとnpmのインストール
環境設定のページを見るとNodeとnpmが必要と書いてある。確認してみる。
あれ？入ってない。というわけでインストール。これを参照。
qiita.com
- Homebrewのインストール
- nodebrewのインストール
- Node.jsのインストール
Homebrew
Homebrewは入っていたけど古いので最新をインストール。詳細は省略。
nodebrew
簡単に入る。
~ % brew -v
Homebrew 3.0.11-148-gb117529
Homebrew/homebrew-core (git revision 2a8b9b6; last commit 2019-07-15)
Homebrew/homebrew-cask (git revision 82630e1; last commit 2019-07-16)
~ %
~ %
~ % nodebrew -v
nodebrew 1.0.1
Usage:
nodebrew help Show this message
nodebrew install <version> Download and install <version> (from binary)
nodebrew compile <version> Download and install <version> (from source)
nodebrew install-binary <version> Alias of `install` (For backword compatibility)
nodebrew uninstall <version> Uninstall <version>
nodebrew use <version> Use <version>
nodebrew list List installed versions
nodebrew ls Alias for `list`
nodebrew ls-remote List remote versions
nodebrew ls-all List remote and installed versions
nodebrew alias <key> <value> Set alias
nodebrew unalias <key> Remove alias
nodebrew clean <version> | all Remove source file
nodebrew selfupdate Update nodebrew
nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version
nodebrew exec <version> -- <command> Execute <command> using specified <version>
Example:
nodebrew install v8.9.4
nodebrew use v8.9.4
Node.jsのインストール
インストールできるバージョンを確認しろって書いてある。
~ % nodebrew ls-remote
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6
v0.1.0 v0.1.1 v0.1.2 v0.1.3 v0.1.4 v0.1.5 v0.1.6 v0.1.7
v0.1.8 v0.1.9 v0.1.10 v0.1.11 v0.1.12 v0.1.13 v0.1.14 v0.1.15
v0.1.16 v0.1.17 v0.1.18 v0.1.19 v0.1.20 v0.1.21 v0.1.22 v0.1.23
v0.1.24 v0.1.25 v0.1.26 v0.1.27 v0.1.28 v0.1.29 v0.1.30 v0.1.31
v0.1.32 v0.1.33 v0.1.90 v0.1.91 v0.1.92 v0.1.93 v0.1.94 v0.1.95
v0.1.96 v0.1.97 v0.1.98 v0.1.99 v0.1.100 v0.1.101 v0.1.102 v0.1.103
v0.1.104
v0.2.0 v0.2.1 v0.2.2 v0.2.3 v0.2.4 v0.2.5 v0.2.6
v0.3.0 v0.3.1 v0.3.2 v0.3.3 v0.3.4 v0.3.5 v0.3.6 v0.3.7
v0.3.8
v0.4.0 v0.4.1 v0.4.2 v0.4.3 v0.4.4 v0.4.5 v0.4.6 v0.4.7
v0.4.8 v0.4.9 v0.4.10 v0.4.11 v0.4.12
v0.5.0 v0.5.1 v0.5.2 v0.5.3 v0.5.4 v0.5.5 v0.5.6 v0.5.7
v0.5.8 v0.5.9 v0.5.10
v0.6.0 v0.6.1 v0.6.2 v0.6.3 v0.6.4 v0.6.5 v0.6.6 v0.6.7
v0.6.8 v0.6.9 v0.6.10 v0.6.11 v0.6.12 v0.6.13 v0.6.14 v0.6.15
v0.6.16 v0.6.17 v0.6.18 v0.6.19 v0.6.20 v0.6.21
v0.7.0 v0.7.1 v0.7.2 v0.7.3 v0.7.4 v0.7.5 v0.7.6 v0.7.7
v0.7.8 v0.7.9 v0.7.10 v0.7.11 v0.7.12
v0.8.0 v0.8.1 v0.8.2 v0.8.3 v0.8.4 v0.8.5 v0.8.6 v0.8.7
v0.8.8 v0.8.9 v0.8.10 v0.8.11 v0.8.12 v0.8.13 v0.8.14 v0.8.15
v0.8.16 v0.8.17 v0.8.18 v0.8.19 v0.8.20 v0.8.21 v0.8.22 v0.8.23
v0.8.24 v0.8.25 v0.8.26 v0.8.27 v0.8.28
v0.9.0 v0.9.1 v0.9.2 v0.9.3 v0.9.4 v0.9.5 v0.9.6 v0.9.7
v0.9.8 v0.9.9 v0.9.10 v0.9.11 v0.9.12
v0.10.0 v0.10.1 v0.10.2 v0.10.3 v0.10.4 v0.10.5 v0.10.6 v0.10.7
v0.10.8 v0.10.9 v0.10.10 v0.10.11 v0.10.12 v0.10.13 v0.10.14 v0.10.15
v0.10.16 v0.10.17 v0.10.18 v0.10.19 v0.10.20 v0.10.21 v0.10.22 v0.10.23
v0.10.24 v0.10.25 v0.10.26 v0.10.27 v0.10.28 v0.10.29 v0.10.30 v0.10.31
v0.10.32 v0.10.33 v0.10.34 v0.10.35 v0.10.36 v0.10.37 v0.10.38 v0.10.39
v0.10.40 v0.10.41 v0.10.42 v0.10.43 v0.10.44 v0.10.45 v0.10.46 v0.10.47
v0.10.48
v0.11.0 v0.11.1 v0.11.2 v0.11.3 v0.11.4 v0.11.5 v0.11.6 v0.11.7
v0.11.8 v0.11.9 v0.11.10 v0.11.11 v0.11.12 v0.11.13 v0.11.14 v0.11.15
v0.11.16
v0.12.0 v0.12.1 v0.12.2 v0.12.3 v0.12.4 v0.12.5 v0.12.6 v0.12.7
v0.12.8 v0.12.9 v0.12.10 v0.12.11 v0.12.12 v0.12.13 v0.12.14 v0.12.15
v0.12.16 v0.12.17 v0.12.18
v4.0.0 v4.1.0 v4.1.1 v4.1.2 v4.2.0 v4.2.1 v4.2.2 v4.2.3
v4.2.4 v4.2.5 v4.2.6 v4.3.0 v4.3.1 v4.3.2 v4.4.0 v4.4.1
v4.4.2 v4.4.3 v4.4.4 v4.4.5 v4.4.6 v4.4.7 v4.5.0 v4.6.0
v4.6.1 v4.6.2 v4.7.0 v4.7.1 v4.7.2 v4.7.3 v4.8.0 v4.8.1
v4.8.2 v4.8.3 v4.8.4 v4.8.5 v4.8.6 v4.8.7 v4.9.0 v4.9.1
v5.0.0 v5.1.0 v5.1.1 v5.2.0 v5.3.0 v5.4.0 v5.4.1 v5.5.0
v5.6.0 v5.7.0 v5.7.1 v5.8.0 v5.9.0 v5.9.1 v5.10.0 v5.10.1
v5.11.0 v5.11.1 v5.12.0
v6.0.0 v6.1.0 v6.2.0 v6.2.1 v6.2.2 v6.3.0 v6.3.1 v6.4.0
v6.5.0 v6.6.0 v6.7.0 v6.8.0 v6.8.1 v6.9.0 v6.9.1 v6.9.2
v6.9.3 v6.9.4 v6.9.5 v6.10.0 v6.10.1 v6.10.2 v6.10.3 v6.11.0
v6.11.1 v6.11.2 v6.11.3 v6.11.4 v6.11.5 v6.12.0 v6.12.1 v6.12.2
v6.12.3 v6.13.0 v6.13.1 v6.14.0 v6.14.1 v6.14.2 v6.14.3 v6.14.4
v6.15.0 v6.15.1 v6.16.0 v6.17.0 v6.17.1
v7.0.0 v7.1.0 v7.2.0 v7.2.1 v7.3.0 v7.4.0 v7.5.0 v7.6.0
v7.7.0 v7.7.1 v7.7.2 v7.7.3 v7.7.4 v7.8.0 v7.9.0 v7.10.0
v7.10.1
v8.0.0 v8.1.0 v8.1.1 v8.1.2 v8.1.3 v8.1.4 v8.2.0 v8.2.1
v8.3.0 v8.4.0 v8.5.0 v8.6.0 v8.7.0 v8.8.0 v8.8.1 v8.9.0
v8.9.1 v8.9.2 v8.9.3 v8.9.4 v8.10.0 v8.11.0 v8.11.1 v8.11.2
v8.11.3 v8.11.4 v8.12.0 v8.13.0 v8.14.0 v8.14.1 v8.15.0 v8.15.1
v8.16.0 v8.16.1 v8.16.2 v8.17.0
v9.0.0 v9.1.0 v9.2.0 v9.2.1 v9.3.0 v9.4.0 v9.5.0 v9.6.0
v9.6.1 v9.7.0 v9.7.1 v9.8.0 v9.9.0 v9.10.0 v9.10.1 v9.11.0
v9.11.1 v9.11.2
v10.0.0 v10.1.0 v10.2.0 v10.2.1 v10.3.0 v10.4.0 v10.4.1 v10.5.0
v10.6.0 v10.7.0 v10.8.0 v10.9.0 v10.10.0 v10.11.0 v10.12.0 v10.13.0
v10.14.0 v10.14.1 v10.14.2 v10.15.0 v10.15.1 v10.15.2 v10.15.3 v10.16.0
v10.16.1 v10.16.2 v10.16.3 v10.17.0 v10.18.0 v10.18.1 v10.19.0 v10.20.0
v10.20.1 v10.21.0 v10.22.0 v10.22.1 v10.23.0 v10.23.1 v10.23.2 v10.23.3
v10.24.0 v10.24.1
v11.0.0 v11.1.0 v11.2.0 v11.3.0 v11.4.0 v11.5.0 v11.6.0 v11.7.0
v11.8.0 v11.9.0 v11.10.0 v11.10.1 v11.11.0 v11.12.0 v11.13.0 v11.14.0
v11.15.0
v12.0.0 v12.1.0 v12.2.0 v12.3.0 v12.3.1 v12.4.0 v12.5.0 v12.6.0
v12.7.0 v12.8.0 v12.8.1 v12.9.0 v12.9.1 v12.10.0 v12.11.0 v12.11.1
v12.12.0 v12.13.0 v12.13.1 v12.14.0 v12.14.1 v12.15.0 v12.16.0 v12.16.1
v12.16.2 v12.16.3 v12.17.0 v12.18.0 v12.18.1 v12.18.2 v12.18.3 v12.18.4
v12.19.0 v12.19.1 v12.20.0 v12.20.1 v12.20.2 v12.21.0 v12.22.0 v12.22.1
v13.0.0 v13.0.1 v13.1.0 v13.2.0 v13.3.0 v13.4.0 v13.5.0 v13.6.0
v13.7.0 v13.8.0 v13.9.0 v13.10.0 v13.10.1 v13.11.0 v13.12.0 v13.13.0
v13.14.0
v14.0.0 v14.1.0 v14.2.0 v14.3.0 v14.4.0 v14.5.0 v14.6.0 v14.7.0
v14.8.0 v14.9.0 v14.10.0 v14.10.1 v14.11.0 v14.12.0 v14.13.0 v14.13.1
v14.14.0 v14.15.0 v14.15.1 v14.15.2 v14.15.3 v14.15.4 v14.15.5 v14.16.0
v14.16.1
v15.0.0 v15.0.1 v15.1.0 v15.2.0 v15.2.1 v15.3.0 v15.4.0 v15.5.0
v15.5.1 v15.6.0 v15.7.0 v15.8.0 v15.9.0 v15.10.0 v15.11.0 v15.12.0
v15.13.0 v15.14.0
io@v1.0.0 io@v1.0.1 io@v1.0.2 io@v1.0.3 io@v1.0.4 io@v1.1.0 io@v1.2.0 io@v1.3.0
io@v1.4.1 io@v1.4.2 io@v1.4.3 io@v1.5.0 io@v1.5.1 io@v1.6.0 io@v1.6.1 io@v1.6.2
io@v1.6.3 io@v1.6.4 io@v1.7.1 io@v1.8.1 io@v1.8.2 io@v1.8.3 io@v1.8.4
io@v2.0.0 io@v2.0.1 io@v2.0.2 io@v2.1.0 io@v2.2.0 io@v2.2.1 io@v2.3.0 io@v2.3.1
io@v2.3.2 io@v2.3.3 io@v2.3.4 io@v2.4.0 io@v2.5.0
io@v3.0.0 io@v3.1.0 io@v3.2.0 io@v3.3.0 io@v3.3.1
~ %
そりゃいっぱいあるよね。思い切って最新を入れてもいいが、お手本のように安定版を入れてみる。
エラーになったのでこちらを参照してリトライした。
qiita.com
~ % nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v14.16.1/node-v14.16.1-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/shigeo-t/.nodebrew/src/v14.16.1/node-v14.16.1-darwin-x64.t
Warning: ar.gz: No such file or directory
~ %
~ % mkdir -p ~/.nodebrew/src
~ % nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v14.16.1/node-v14.16.1-darwin-x64.tar.gz
Installed successfully
~ %
有効化してPATHを通す。
~ % nodebrew ls
v14.16.1
current: none
~ % node -v
zsh: command not found: node
~ % nodebrew use v14.16.1
use v14.16.1
~ % nodebrew ls
v14.16.1
current: v14.16.1
~ %
~ % echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
~ % echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
~ % source .zprofile
~ % node -v
v14.16.1
~ %
貼付けの都合上、zshにしてユーザ名表示しないようにしているのでbashとzsh両方環境設定した。
npmの確認
上記の参照例にはnpmは無かった。Linux等では別にインストールしていた気もするが、nodebrewならまとめていれてくれる気がしたので確認する。
~ % node -v
v14.16.1
~ % npm -v
6.14.12
~ %
入ってた。
これでNode.jsとnpmの準備は完了。
環境設定 - Ionic Framework 日本語ドキュメンテーション ではVS Codeがお勧めされている。
もちろん、エディタも必要でしょう。Visual Studio Code をおすすめします。Visual Studio Codeは Microsoft製の無料でとてもパワフルなテキストエディタです。
しかし、VS Codeは入っているのにコマンド起動できない。
オレがVS Codeをインストールしないわけがない。やっぱり環境変数だろう。ということで探してみるとこれが見つかった。
code.visualstudio.com
~ % cat << EOF >> ~/.zprofile
# Add Visual Studio Code (code)
export PATH="\$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
EOF
~ % source .zprofile
~ % code
~ %
これでコマンド起動できるようになった。Macめんどくせー。前は呼べてた気がしたんだけど。オレがVS Codeを起動するときはほぼコマンド起動だし。OSバージョンアップのせい？
gitの確認
gitはもちろん必要なので確認する。入っている。
~ % git --version
git version 2.24.3 (Apple Git-128)
~ %
まあ、これでいいか。
ということで疲れたので、準備編ということで終わる。まったくIonicの環境構築には進んでいない。
