Ionic5+AngularでAndroidスマホアプリ開発 【開発環境構築編】

プログラミング
プログラミング

このシリーズでは、ionic5とAngular使ってアプリケーションを構築するところから、Androidアプリをビルドして、端末にインストールして動かすところまでを説明します。

環境

項目
OSUbuntu 18.04
CPU6core 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 npm

npmでn packageをインストールします。

$ sudo npm install n -g

n packageでNode.jsをインストールします。

$ sudo n stable

最初に入れた古いnodejs, npmはアンインストールし、シェルを再ログインします。

$ sudo apt purge -y nodejs npm
$ exec $SHELL -l

Node.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を使ってみることにします。

インストールは、以下からパッケージをダウンロードしてインストールするだけです。

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...

ターミナルから以下のコマンドで起動できます。

$ code
VSCodeの画面。

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公式ページ

Open-Source UI Toolkit to Create Your Own Mobile or Desktop Apps
Ionic Framework is an open-source UI toolkit to create your own mobile and desktop apps using web technologies with integrations for popular frameworks.

コメント

タイトルとURLをコピーしました