シリーズ目次
- 仕様説明編
- インストール他 準備編
- アプリを作ってみよう編
開発環境の準備
Ionic を使うためのツールのインストール
本項で説明を省略しているツール
以下のツールのインストールは 本項で説明を省略しています
- Node.js
- Git
- Xcode (MacでiPhoneアプリを作成する場合)
- Android Studio (Windowsでandroidアプリを作成するの場合)
- IDEエディタ (筆者はVisual Studio Code を使用しています。)
- ブラウザ (筆者は Chrome を使用しています。)
Ionic CLI のインストール
Ionic CLI をインストールします。Ionic CLI をインストールすると, ionicコマンドを動かすことができるようになり, Ionicプロジェクトをコマンドひとつで自動構築したり、リリース用にビルドすることができるようになります。次のコマンドを実行してください
npm install ionic cordova -g
インストールには 5分ほど時間がかかることもあります。完了したら、次のようにインストールした パッケージ名とバージョン情報が表示されました
+ ionic@5.4.1
+ cordova@9.0.0
added 688 packages from 392 contributors
Ionic がインストールできなかったらバージョンを上げてみよう
npm update -g npm
npm update -g
Ionicプロジェクトを作ってみる
Ionicプロジェクトを作成
環境がととのったのでプロジェクトを作成してみます。
以下のコマンドを入力します。
ionic start --type=ionic-angular
今回のプロジェクトは以下の仕様です
- Project name: MobileSkyWay
- Starter template: tutorial
作成されたプロジェクトを起動してみる
VSCode で作成されたフォルダを開きターミナルで以下のコマンドを実行します。
ionic serve
自動的にブラウザが立ち上がります。