ionic2

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

必要なものをインストール

npm install -g ionic cordova ios-deploy

プロジェクト作成

今回はテンプレートにtutorialを指定。
途中、Dashboardを利用するか聞かれるが今回はNO。

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

とりあえずブラウザで確認してみる

cd {プロジェクト名}
ionic serve

見れた！

実機で確認してみる

手元のiOS10でやってみる。

Xcodeでアカウント登録

Xcode > Preferences > Accounts > Add Apple ID

ビルド

ionic cordova build ios --prod

Xcodeでビルドされたプロジェクトを開く

{プロジェクト名}/platforms/ios/

実行ターゲットを接続したiPhoneへ変更

USBでMacとiPhoneを接続する。
iPhone 7 Plusとなっている箇所を接続したiPhoneへ変更する。

署名証明書の設定

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をページフォルダへ作成

<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をページフォルダへ作成
公式のアラートコンポーネントを使用します。

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();
    }
}

他記述が必要なところ

src/app/app.module.ts

import { SamplePage } from '../pages/sample/sample';

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

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

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で入力した文字列に変更したら行けた。

　実機スクショ

できた！

まとめ

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