Ionic で簡易カウンターアプリ作ってみた

開発環境

• macOS 10.12.4
• Node.js 7.9.0

Ionic のインストール・プロジェクト作成

Ionic で簡単なカウンターアプリを作成したので、まとめてみました。

まずは npm install で cordova と ionic をグローバルインストールします。

$ npm install -g cordova ionic

Ionic がインストールできたので、ionic start コマンドでプロジェクトを作成してみます。

$ ionic start SampleApp blank --v2

blank の部分はテンプレートの種類で、他にも tabs や sidemenu などが指定できるようです。

それでは ionic serve コマンドでプロジェクトを起動してみます。

$ cd SampleApp
$ ionic serve

http://localhost:8100/ionic-lab を開くと、各モバイル端末でどのように表示されるかが見れるので、こちらを確認しながら開発していきたいと思います。

コードが変更されると自動で更新されるので、タイトルを変更してみます。

• src/pages/home/home.html

<ion-title>
  Ionic Blank
</ion-title>
↓
<ion-title>
  サンプルアプリ
</ion-title>

ブラウザが自動で更新され、タイトル部分が更新されたのがわかるかと思います。

カウンターアプリなので、『数値表示部分』『プラスボタン』『マイナスボタン』『リセットボタン』を配置していきます。

• src/pages/home/home.html

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>
↓
<ion-content padding>
  <div>
    <p align="center">0</p>
  </div>
  <ion-buttons>
    <button ion-button block round>プラス</button>
    <button ion-button block round>マイナス</button>
    <button ion-button block round color="danger">リセット</button>
  </ion-buttons>
</ion-content>

これでとりあえずデザインは OK なので、ロジックの部分を実装していきます。

• src/pages/home/home.ts

// ...

export class HomePage {

  public num: number = 0;

  constructor(public navCtrl: NavController) {

  }

}

• src/pages/home/home.html

  <div>
    <p align="center">{{num}}</p>
  </div>

これで見た目は変わりませんが、数字の表示部分が変数の値を表示するようになりました。

最後にそれぞれのボタンを押した時の動作を実装しましょう。

• src/pages/home/home.ts

export class HomePage {

  // ...

  plus() {
    this.num++;
  }

  minus() {
    this.num--;
  }

  reset() {
    this.num = 0;
  }

}

• src/pages/home/home.html

    <button ion-button block round (click)="plus()">プラス</button>
    <button ion-button block round (click)="minus()">マイナス</button>
    <button ion-button block round color="danger" (click)="reset()">リセット</button>

ほとんどコードは書いていないですが、これで完成です！

まとめ

Ionic を使って簡単なカウンターアプリを作ってみました。

簡単なアプリであれば、Webエンジニアでも比較的容易にアプリを作成することができるようなので、色々と試してみたいと思います。

Mobile App Development With Ionic 2: Cross-Platform Apps With Ionic, Angular, and Cordova