ionic2でインストールから新規ページ追加して、実機確認してみた！

# ionic2
Angular2を利用して、ハイブリットアプリ開発ができるフレームワークです。

# 必要なものをインストール
```bash
npm install -g ionic cordova ios-deploy
```

# プロジェクト作成
今回はテンプレートに`tutorial`を指定。
途中、Dashboardを利用するか聞かれるが今回はNO。

```bash
ionic start {プロジェクト名} {テンプレート}
```

# とりあえずブラウザで確認してみる
```bash
cd {プロジェクト名}
ionic serve
```
見れた！
![スクリーンショット 2017-10-29 16.59.44.png](https://qiita-image-store.s3.amazonaws.com/0/58712/fb450f13-720b-a4e5-7882-c776d0f44a73.png)

# 実機で確認してみる
手元のiOS10でやってみる。

## Xcodeでアカウント登録
`Xcode > Preferences > Accounts > Add Apple ID`

## ビルド
```bash
ionic cordova build ios --prod
```
## Xcodeでビルドされたプロジェクトを開く
`{プロジェクト名}/platforms/ios/`

## 実行ターゲットを接続したiPhoneへ変更
USBでMacとiPhoneを接続する。
`iPhone 7 Plus`となっている箇所を接続したiPhoneへ変更する。
![スクリーンショット 2017-10-29 17.38.15.png](https://qiita-image-store.s3.amazonaws.com/0/58712/bec8727b-2685-da45-47e0-7f96ebcb1f77.png)

## 署名証明書の設定
- Xcode上のプロジェクトをダブルクリックして、`General`を選択。
- `Identity`の`Bundle Identifier`に任意の文字列入力。
- `General > Signing > Add Accounts`を選択。
- 自分のAppleアカウントをダブルクリック。
- `No Signing`と出るので、下の`+`から追加。
- `iOS Developpers`を選択。

## 実行
- 左上の再生ボタンをクリック！
- iPhoneのロックを解けと言われるので、言うとおりに。
- HOME画面にアプリが配置されているはず。
- 実行しようとすると・・・、できない。

## iPhone上で証明書の信頼を行う。
- iPhoneの`設定 > 一般 > デバイス管理`
- 自分のAppleアカウントが表示されているので、タップして信頼させる。

## こんどこそ実行。
- HOMEでアプリタップ、実機確認完了！

# ページを増やしてみる
- tutorialのトグルメニューにリンクを追加し、作成したページに飛ばすまで実装する。
- ボタンを押したらアラートが表示されるページを作ってみる。

## ページの作成
`src/pages/`配下に新規ページ用フォルダを作る。
`sample`フォルダを作成しました。
### html作成
- `sample.html`をページフォルダへ作成

```html
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Sample</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <button ion-button block (click)="tappedAlert()">アラートが出るボタン</button>
</ion-content>
```

### TS作成
- `sample.ts`をページフォルダへ作成
- 公式のアラートコンポーネントを使用します。

```ts:sample.ts
import { Component } from '@angular/core';

import { AlertController } from 'ionic-angular';

@Component({
    selector: 'page-sample',
    templateUrl: 'sample.html'
})
export class SamplePage {
    constructor(public alertCtrl: AlertController) {
    }

    tappedAlert() {
        let alert = this.alertCtrl.create({
            title: 'Sampleアラートです！',
            subTitle: 'ここに説明を書きます。ionicでサンプル実装してみた！',
            buttons: ['おっけー']
        });
        alert.present();
    }
}

```

### 他記述が必要なところ
```ts:src/app/app.module.ts
import { SamplePage } from '../pages/sample/sample';

  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    SamplePage
  ],

  entryComponents: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    SamplePage
  ],
```
```ts:src/app/app.compornent.ts
import { SamplePage } from '../pages/sample/sample';

    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage },
      { title: 'Sample', component: SamplePage },
    ];
```

### 確認
- 再度ビルドからの手順を実行し、実機で確認。
- と思ったらビルドでめっちゃエラーでる・・
- どうやら署名関係のエラー。さっきXcodeで署名を弄ったからか・・・
- config.xmlの署名をXcodeで入力した文字列に変更したら行けた。

###　実機スクショ
できた！
<img width="200" alt="07365841-FD90-43FB-A821-875145C9ABCB.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/58712/51c6b9cb-c787-c166-1a88-02c6fc819b62.png">


# まとめ
初めてiPhoneアプリに触ってみましたがわりとサクサク行けました！
が、最後の署名のところの回避が大分怪しい・・・ｗ
署名関係は調べたら修正します。