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

開発環境

  • macOS 10.12.4
  • Node.js 7.9.0

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

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

まずは npm installcordovaionic をグローバルインストールします。

$ npm install -g cordova ionic

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

$ ionic start SampleApp blank --v2

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

f:id:enomotodev:20170519205103p:plain

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

$ cd SampleApp
$ ionic serve

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

f:id:enomotodev:20170519205109p:plain

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

  • src/pages/home/home.html
<ion-title>
  Ionic Blank
</ion-title>
↓
<ion-title>
  サンプルアプリ
</ion-title>

f:id:enomotodev:20170519205114p:plain

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

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

  • 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>

f:id:enomotodev:20170519205119p:plain

これでとりあえずデザインは 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

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