Web備忘録 プログラミングを中心に技術的な事柄を忘れないように書き残します。

[Ionic3]開発環境構築方法

[Ionic3]開発環境構築方法
目次

Ionicとは

Ionic

Ionicとは、モバイルアプリケーションを構築するためのWebコンポーネントを提供する UI Framework です。Ionicは Apache Cordova 上に構築されることを想定されているため、ハイブリットアプリの開発に用いられます。具体的には以下のような技術を利用しながら開発を行うことになります。

  • Apache Cordova
  • Angular
  • Sass
  • Typescript

初期の学習コストがかかることは否めませんが、各プラットフォーム向けのUI・デザインを同一コンポネントでシンプルに表現できるため、トータルで開発工数の削減が期待できます。もちろんハイブリッドアプリの開発による恩恵もあります。

ハイブリッドアプリによるアプリ開発の際、有力な選択肢の一つであることは間違いありません。

Ionicのバージョン

Ionicはいくつかのバージョンがあり、ベースとなるAngularのバージョンと連動しています。

  • 2015年5月 Ionic1.0.0(AngularJS1対応)
  • 2017年1月 Ionic2.0.0(Angular2対応)
  • 2017年4月 Ionic3.0.0(Angular4対応)

Angular自体が1から2で大きく変わっているので、基本的には Ionic2(Angular2) もしくは Ionic3(Angular4) で開発を行います。ただし日本語ドキュメントが少ない点は留意する必要があるかもしれません。

ここでは Ionic3 の環境を構築してみます。

Node.js(npm)のインストール

npm(Node.js のパッケージ管理ツール)が必要なので、まずは Node.js をインストールします。

Node.js はすべてデフォルト設定のままインストールすればよいです。インストールが完了すれば、PowerShellないしターミナルから下記コマンドを実行してみましょう。バージョン情報が正しく表示されればインストールは完了です。 

$ node -v
$ npm -v

Ionic CLI のインストール

まずは npm で Ionic CLI のインストールをマシングローバルに行います。cordova も同時にインストールしておきます。 

$ npm install -g ionic cordova

インストールができたらバージョンを確認しておきます。ここでは 3.6.0 でした。 

$ ionic -v
3.6.0
$ cordova -v
7.0.1

CLI の使い方

Ionic CLI Documentation

上のサイトがドキュメントなので必要に応じて調べると良いでしょう。

プロジェクトの作成

Ionic CLI でプロジェクト(myapp)を作成します。ionic start コマンドを実行すると、プロジェクトのテンプレートの選択肢が表示されます。今回は tutorial を選択してみましょう。 

$ ionic start myapp
? What starter would you like to use: (Use arrow keys)
  tabs ............... ionic-angular A starting project with a simple tabbed interface
  blank .............. ionic-angular A blank starter project
  sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
  super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development.
  conference ......... ionic-angular A project that demonstrates a realworld application
> tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
  aws ................ ionic-angular AWS Mobile Hub Starter

完了後、テンプレートとなるプロジェクトが作成されているはずです。早速実行してみましょう。 

$ cd myapp
$ ionic serve

作成されたプロジェクトのディレクトリに移動して、ionice serve コマンドを実行します。このコマンドは、ローカルに開発用サーバーを立て、ブラウザで動作の確認を行えます。実行後、自動でブラウザが立ち上がり、画面が表示されれば成功です。

ionic serve コマンド実行後

サーバーは [Ctrl + C] で停止します。

ここまでの手順で開発環境は一通り完成です。非常にお手軽です。

対応プラットフォームの追加

ブラウザでのアプリ起動はできましたが、このままでは Android や iOS といったプラットフォームごとのアプリをビルドしたりすることができません。まずは対応プラットフォームをCLIで追加します。 

$ ionic cordova platform add android
$ ionic cordova platform add ios
? The plugin @ionic/cli-plugin-cordova is not installed. Would you like to install it and continue? YES

Android と iOS それぞれ追加しました。実行時に上のように聞かれるかもしれませんが、必要なプラグインなのでYESでインストールしておきましょう。初回はそれなりに時間がかかりますが、焦らず待ちましょう。

ビルド

JavaSDK, AndroidSDK が正しく導入できていれば、Android のビルドが通るはずです。iOSも同様に必要な環境が揃っていればビルドできます。次のコマンドを実行し、ビルドを行います。 

$ ionic cordova build

次の記事内で一応 JavaSDK と AndroidSDK の導入手順をまとめています。

[VSCode] Cordovaの開発環境構築

コマンド実行後、プラットフォームが複数あると、どのプラットフォーム向けにビルドするか聞かれます。今回は Android 向けのビルドを行いました。

Android の場合、.apk ファイルが生成されます。これを実機にインストールすると作成したアプリが動作確認できます。

iOS 向けのビルドは mac が必要になります。以上。

Ionicカテゴリの最新記事