このシリーズでは、ionic5とAngular使ってアプリケーションを構築するところから、Androidアプリをビルドして、端末にインストールして動かすところまでを説明します。
環境
| 項目 | 値 |
|---|---|
| OS | Ubuntu 18.04 |
| CPU | 6core Intel(R) Core(TM) i7-5820K CPU @ 3.30GHz |
| メモリ | 12 GB |
| ディスクサイズ | 100 GB |
事前準備
Node.jsのインストール
Node.jsは、バージョン管理ができるように「n package」を使ってインストールします。
n packageをインストールするために、nodejs, npmをインストールします。
$ sudo apt install -y nodejs npmnpmでn packageをインストールします。
$ sudo npm install n -gn packageでNode.jsをインストールします。
$ sudo n stable最初に入れた古いnodejs, npmはアンインストールし、シェルを再ログインします。
$ sudo apt purge -y nodejs npm
$ exec $SHELL -lNode.jsのstableの最新版がインストールされていることを確認
$ node -v
v12.16.2ちなみに、任意のNode.jsのバージョンを使いたい場合は、以下のように実行
$ sudo n 9.11.1
$ node -v
v9.11.1エディターのインストール
エディターは好みで問題ありませんが、公式での好みはVisual Studio Codeのようですので、私もVisual Studio Codeを使ってみることにします。
インストールは、以下からパッケージをダウンロードしてインストールするだけです。
ターミナルから以下のコマンドで起動できます。
$ code
Ionicの環境構築
Ionic関連のツールをインストールします。
$ sudo npm install -g @ionic/cli native-run cordova-resインストール時に以下のようにパーミッションエラーが出る場合があります。
EACCES: permission denied, mkdir '/home/hoge/.npm/_libvips'パーミッションを無視してインストールするオプションを付けて、インストールしてください。
$ sudo npm install -g @ionic/cli native-run cordova-res --unsafe-permこれだけでIonicが使えるようになります。
IonicでWebアプリを作ってみる
Ionicが正しくインストールできたか確かめるために、Webアプリを作ってみます。
$ ionic start testApp tabs --type=angular --capacitor作成されたディレクトリに移動します。
$ cd testAppアプリを起動します。
$ ionic serve自動でブラウザが起動して、以下のような画面が表示されたら、Ionicが正しくインストールできています。
以上です、お疲れさまでした。
Ionic5+Angularのスマホアプリ開発環境構築編まとめ
今回は、Ionic＋Angularでスマホアプリを開発するための開発環境構築手順について説明しました。
次は、Androidアプリのビルド環境のセットアップ方法を説明します。
参考
Ionic公式ページ
コメント