ionic開発手順（Mac）

## ionicとは？
そもそもionicとはGoogle社のAngularというアプリケーションフレームワークをベースにしたモバイル開発に特化したJavascriptフレームワークになります。
Webブラウザでの表示（iphoneであればsafari、PCであればchrome）、ios、android等の環境周りを意識することなく開発することが可能となります。
具体的にはHTMLファイルはionic専用のカスタムタグを使用し、従来のjavascriptファイルは.tsファイルとしてTypescriptでコードを書きます。
これをionicフレームワークでビルドし、各環境用のモジュールが出力可能となるため、いちいちiosだったら、、、のようなIF文を書く必要は無くなります。

## ionic環境準備

1.nodebrewをインストールします。
nodebrewはnodeのバージョン管理をすることができる便利なツールになります。  
windowsですとnodistになります。

```
brew install nodebrew
brew upgrade nodebrew`
```
2.環境変数にnodebrewのインストールパスを追加します。

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

3.nodebrewを使用してnodeをインストールします。今回はバージョン8.9.4を使用します。  
なお、nodeをインストールすると一緒にnpmもインストールされます。
    
```
nodebrew install v8.9.4
nodebrew use v8.9.4
```

4.ionic開発で使用するcordovaとionicをnpmコマンドでインストールします。

```
npm install  -g  cordova
npm install -g  ionic
```

## ionicのプロジェクト作成

1.ionicでは「ionic start xxxx」で簡単にプロジェクトを作成することができます。
しかもホーム画面まで自動で作成されます。
ionic start コマンドを使用するとテンプレート（tab、sidemenu、aws等）を使用するか問われますが、ここではそのままエンターを押下。
デフォルトでtabsになります。
その後、ios、androidのnativeプラットフォームを作成するか問われますので、Yesを選択します。
最後にionic pro SDKをインストールするか問われますが、これは有料となるため、noを選択しています。  

```
$ionic start hoge

? What starter would you like to use: tabs
? Would you like to integrate your new app with Cordova to target native iOS and Android? Yes
? Install the free Ionic Pro SDK and connect your app? No
```

2.作成したプロジェクトのディレクトリへ移動し、実行してみます。
ブラウザが自動で起動し、Welcome画面が表示されれば成功です。

```
cd hoge
ionic serve
```

## 開発環境準備

1.visual studio codeをインストールします。
https://visualstudio.microsoft.com/ja/
※リンク先のvisual studio codeを選択してダウンロード＆インストールします。

2.visual studio codeを起動し、画面左メニューから拡張機能を選択します。
入力ボックスに「TSLint」と入力してエンターを押下すると「TSLint for visual studio code」が表示されるのでインストールを選択します。
これでTypescriptの開発が可能となります。

3.ファイル→開くを選択します。
作成したhogeプロジェクトのディレクトリを選択して開くボタンを押下。

## 実際に画面を編集してみよう

ionicの各画面はhode/src/pages/xxxフォルダ1つにつき1画面の構成となっています。
例えばhomeフォルダは以下のようになっていると思います。

・home.html
・home.scss
・home.ts

1.home.htmlを開き「Welcome to Ionic!」の部分を編集して保存します。
すると開いていたブラウザの画面が自動でリフレッシュされ、編集が反映されます。
これがionicのメリットの1つだと思います。もちろん不正な編集の場合はエラー画面となります。

## アラート画面を表示してみよう

1.home.htmlファイルを以下の用に編集します。
<ion-content>タグの下にionicのbuttonタグを追加しています。（clickしたらTestファンクションを呼び出します）

```
 <ion-navbar>
   <ion-title>Home</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
   <button ion-button color=“danger” (click)=‘Test()’>Danger</button>
 <h2>Welcome to Ionic!</h2>
 <p>
   This starter project comes with simple tabs-based layout for apps
   that are going to primarily use a Tabbed UI.
 </p>
 <p>
   Take a look at the <code>src/pages/</code> directory to add or change tabs,
   update any existing page or create new pages.
 </p>
</ion-content>
```

2.home.tsを以下のように編集します。
2行目でAlertControllerをimportし、constructorの引数にAlertControllerを受け取るようにします。
constructorはionicのビルド時に実行されるので、Functionはconstructorの外に記述します。


```
import { Component } from ‘@angular/core’;
import { NavController,AlertController } from ‘ionic-angular’;

@Component({
 selector: ‘page-home’,
 templateUrl: ‘home.html’
})
export class HomePage {

 constructor(public navCtrl: NavController, private alertCtrl: AlertController) {

 }

 Test() {
   let alert = this.alertCtrl.create({
     title: ‘エラー‘,
     subTitle: ‘通信エラーが発生しました’,
     buttons: [‘OK’]
   });

   alert.present();
 }

}
```

3.ブラウザの画面が自動でリフレッシュされ、画面上に赤色のDangerボタンが表示されたと思います。
押下するとhome.tsに記述したTest()が実行され、アラート画面が表示されます。