Android
iOS
Cordova
ハイブリッドアプリ
Ionic3

ionic3でハイブリッドアプリを作ってみよう。 - 導入編

公式ドキュメント

https://ionicframework.com/docs/

開発環境

macOS High Sierra

$ node -v
v8.9.1
$ npm -v
5.5.1

上記のインストールなどは割愛。

Ionic CLI のインストール

プロジェクトに合ったcordovaとionicをインストールする。

$ npm install -g ionic@3.18.0 cordova@7.1.0

インストールが完了したら確認する。

$ cordova -v
7.1.0
$ ionic -v
3.18.0

指定したものが入っていればOK。
今回はバージョンの指定をしているが、@以降を省けば最新版がインストールされます。

新しいプロジェクトを作成

新しいionicプロジェクトを始めるには以下のコマンドで一発です。
今回は「myapp」というプロジェクトを作りましょう。

$ ionic start myapp

すぐに何か聞かれます。

$ ionic start myapp

? What starter would you like to use:
  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

ionicではいろんなテンプレートが用意されていて選べるようですね。
ここはシンプルなblankを選びます。

途中に以下を聞かれますがとりあえず一旦noにしておきましょう。

? Install the free Ionic Pro SDK and connect your app? (Y/n)

セットアップが終わったらプロジェクトのディレクトリに移動

$ cd myapp

起動してみる

ブラウザで起動

blank というテンプレでプロジェクトが作成されたので、まずはブラウザで起動してみましょう。

$ ionic serve

ブラウザが立ち上がり、以下が表示されれば成功です。

Kobito.SDLL3N.png

platformの追加

iosで起動するにはまずplatformの追加をします。

$ ionic cordova platform add ios

android版の場合は

$ ionic cordova platform add android

とすればオーケー。

プラットフォームの追加が終わるとルートディレクトリにいろいろファイルやディレクトリが生成されます。

platform追加前

total 376
-rw-r--r--    1 ryo  staff      87 12  1 11:25 ionic.config.json
drwxr-xr-x  470 ryo  staff   15040 12  1 11:25 node_modules
-rw-r--r--    1 ryo  staff  174444 12  1 11:25 package-lock.json
-rw-r--r--    1 ryo  staff    1083 12  1 11:25 package.json
drwxr-xr-x    9 ryo  staff     288 12  1 11:25 src
-rw-r--r--    1 ryo  staff     576 11 30 14:08 tsconfig.json
-rw-r--r--    1 ryo  staff     178 11 30 14:08 tslint.json
drwxr-xr-x    7 ryo  staff     224 12  1 11:36 www

platform追加後

total 408
-rw-r--r--    1 ryo  staff    6208 12  1 11:48 config.xml
-rw-r--r--    1 ryo  staff     108 12  1 11:47 ionic.config.json
drwxr-xr-x  476 ryo  staff   15232 12  1 11:48 node_modules
-rw-r--r--    1 ryo  staff  183173 12  1 11:48 package-lock.json
-rw-r--r--    1 ryo  staff    1593 12  1 11:48 package.json
drwxr-xr-x    4 ryo  staff     128 12  1 11:48 platforms
drwxr-xr-x    9 ryo  staff     288 12  1 11:48 plugins
drwxr-xr-x    7 ryo  staff     224 12  1 11:47 resources
drwxr-xr-x    9 ryo  staff     288 12  1 11:25 src
-rw-r--r--    1 ryo  staff     576 11 30 14:08 tsconfig.json
-rw-r--r--    1 ryo  staff     178 11 30 14:08 tslint.json
drwxr-xr-x    7 ryo  staff     224 12  1 11:36 www

iosで起動する

※事前にxcodeのインストールは済ませておきましょう。
エミュレーターが立ち上がりブラウザで表示されたものと同じものが表示されていたら成功です。

$ ionic cordova run ios

Kobito.8SGxu2.png

ちなみに$ ionic cordova platform add iosを実行せず、このコマンドだけでもplatformの追加と実行までしてくれます。

実機で確認したい場合は、実機をPCにつないで

$ ionic cordova run ios --device

とすれば実機にアプリがインストールされ、確認することができます。

おまけ

xcodeやandroid studioが入ってなかったり、エミュレーター起動したくないとか、
スマホの確認したいけどブラウザで起動してからスマホ表示に切り替えるの面倒くさいなーって人はこのコマンドでスマホ表示が確認できます。

$ ionic serve --lab