Ionic4でタイマーアプリ

—2019/02/13 更新

今回は、以下の本のタイマーアプリを、Ionic4で実装してみたいと思います。

https://github.com/adash333/ionic4-timer

DEMO
https://confident-raman-5dbccc.netlify.com/

1. スタートボタンを押すと、00：00：00からカウントアップする
2. ストップボタンを押すと、カウントアップが止まる
3. リセットボタンを押すと、カウントがリセットされる
4. PWA化して、オフラインでもアプリとして利用できるようにする

ソースコード
https://github.com/adash333/ionic4-timer

DEMO
https://confident-raman-5dbccc.netlify.com/

WindowsでのIonic4環境構築方法については、WindowsでIonicを始める方法をご覧ください。

Panasonic CF-RZ6
Windows10 Pro (1803)
VisualStudioCode
git version 2.20.1.windows.1

Node v10.15.1
npm 6.4.1
Ionic (Ionic CLI) 4.10.2
@ionic/angular 4.0.1
@angula/pwa 0.13.1

1. VisualStudioCodeでWindowsのC:/ionic/フォルダを開く
2. Ctrl+@でターミナル画面を開いて、以下を入力します

cd ionic
ionic start ionic4-timer blank --type=angular
// 何か聞かれたら、n + Enter

数分待ちます。

• 以下を入力して、サーバを起動します。

cd ionic4-timer
ionic serve

なお、サーバを停止するためには、Ctrl+C, Y, Enterの操作を行います。

以下の操作でもよいです。

ionic serve --lab

? Install @ionic/lab? には、Enterを入力します。（@ionic/labがインストールされます）

ページの見栄えを作成します。

photoACから、さくらの画像ファイルをダウンロードして、sakura.jpgという名前に変更します。
src/assets/images/ フォルダを新規作成して、その中に、sakuar.jpgを移動します。

src/app/home/home.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic4 Timer
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content padding>
  <ion-card color="dark">
    <img src="assets/img/sakura.jpg">
    <ion-card-content align="center">
      <h1>{{ timer }}</h1>
    </ion-card-content>
  </ion-card>
 
  <ion-button expand="block" color="{{ default }}" (click)="startStop()">
    {{ startButton }}
  </ion-button>
</ion-content>

(変更前)

(変更後)

＜コード解説1＞
<ion-xxx>というところは、全て、ionic特有のUI（見栄え）の表記です。ionicの公式ドキュメントを参照しつつ、入力します。
Ionic4から、ボタンは、<ion-button>と表記するようになっています。

＜コード解説2＞
Ionic4で画像ファイルなどを保存する場所は、src/app/assets/ フォルダに、img/ フォルダを作成し、その中にjpgファイルなど(たとえば、sakura.jpg　など)を保存します。
その後、画像ファイルをsrc/home/home.page.htmlなどで表示する場合は、以下のように表記します。

<img src="assets/img/sakura.jpg">

参考：https://scotch.io/courses/build-your-first-angular-website/adding-an-imagelogo-in-angular

＜コード解説3＞

{{ timer }}

のところは、後で、home.page.tsで、timerを定義します。

home.page.htmlで記載した、{{ timer }}や、{{ startButton }}を定義します。

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  public timer = "00:00:00";
  public startButton = "START";
  public seconds;
  public minutes;
  public hours;
  public start;
  public default;
  public timer_id;
 
  constructor() {
  }
 
  startStop() {
    if (this.startButton === "START") {
      this.start = new Date();
      this.timer_id = setInterval(() => {
        this.seconds = Math.floor((new Date().getTime() - this.start.getTime()) / 1000);
        this.minutes = Math.floor(this.seconds / 60);
        this.hours = Math.floor(this.minutes / 60);
 
        this.seconds = this.seconds - this.minutes * 60;
        this.minutes = this.minutes - this.hours * 60;
 
        // 1桁の場合は0を補完
        this.hours = this.addZero(this.hours);
        this.minutes = this.addZero(this.minutes);
        this.seconds = this.addZero(this.seconds);
 
        this.timer = this.hours + ':' + this.minutes + ':' + this.seconds;
      }, 10);
 
      // STOPボタンにする
      this.startButton = "STOP";
      this.default = "danger";
    } else {
      clearInterval(this.timer_id);
 
      // STARTボタンにする
      this.startButton = "START";
      this.default = "primary";
    }
  }
 
  //private date = new Date('2000/1/1 0:00:00');
  // ゼロを追加する
  addZero(value) {
    if (value < 10) {
      value = '0' + value;
    }
    return value;
  };
}

(変更前)

(変更後)

STARTボタンを押すと、カウントアップし始めて、STOPボタンを押すと、カウントが停止します。

Ctrl+Cでいったんサーバを停止し、以下を入力します。

ng add @angular/pwa
// だめな場合は、npm run ng add @angular/pwa

うまくいっているのかわかりませんが、とりあえず、GitHubを通して、Netlifyにデプロイしてみたいと思います。

1. https://github.com/ にログインして、新規リポジトリを作成（今回は、ionic4-timerという名前にしました）
2. 以下を入力して、GitHubにpush

git add .
git commit -m "first commit"
git remote add origin https://github.com/adash333/ionic4-timer.git
git push -u origin master

https://github.com/adash333/ionic4-timer

1. https://www.netlify.com/ にログイン
2. New site from Git　をクリック
3. GitHubから、ionic4-timerを選択
4. npm run build --prodと、www/と入力して、Deploy site をクリック
5. デプロイがうまくいったら、リンクをクリックして、確認します
6. スマホで、上のアドレスへ行き、スマホにアプリとして登録できるかチェックします

https://github.com/adash333/ionic4-timer

DEMO
https://confident-raman-5dbccc.netlify.com/

http://twosquirrel.mints.ne.jp/?p=16984
Ionic3でタイマーアプリ
2017/5/13 2017/5/14

Ionic3バージョンのソースコード
https://github.com/adash333/ionic3-timer

目次：スマホ用ホームページ&スマホアプリ作成ソフトIonic4

前：

次：