差分

このページの2つのバージョン間の差分を表示します。

--- 00.ionic4:08.ionic4でタイマーアプリ [2019/02/13] – [src/app/home/home.page.tsの編集] adash333
+++ 00.ionic4:08.ionic4でタイマーアプリ [2019/08/28] (現在) – [Ionic4でタイマーアプリ] adash333
@@ 行 7: / 行 7: @@
 </html>
+===== ソースコードとDEMOサイト ======
+https://github.com/adash333/ionic4-timer
+DEMO
+https://confident-raman-5dbccc.netlify.com/
 ===== すること =====
   -スタートボタンを押すと、00：00：00からカウントアップする
@@ 行 14: / 行 19: @@
 ソースコード
+https://github.com/adash333/ionic4-timer
 DEMO
+https://confident-raman-5dbccc.netlify.com/
+{{:00.ionic4:pasted:20190213-153449.png}}
 ===== 開発環境 =====
@@ 行 24: / 行 30: @@
 Panasonic CF-RZ6
 Windows10 Pro (1803)
 VisualStudioCode
+git version 2.20.1.windows.1
-nvm-windows 1.1.7
+Node v10.15.1
-Node 10.15.1
 npm 6.4.1
-yarn 1.13.0
+Ionic (Ionic CLI) 4.10.2
-ionic@4.10.2
+@ionic/angular 4.0.1
-cordova@8.1.2
+@angula/pwa 0.13.1
 </code>
@@ 行 82: / 行 88: @@
     <img src="assets/img/sakura.jpg">
     <ion-card-content align="center">
-      <h1>{{timer}}</h1>
+      <h1>{{ timer }}</h1>
     </ion-card-content>
   </ion-card>
-  <ion-button block color="{{ default }}" (click)="startStop()">
+  <ion-button expand="block" color="{{ default }}" (click)="startStop()">
     {{ startButton }}
   </ion-button>
@@ 行 95: / 行 101: @@
 {{:00.ionic4:pasted:20190213-073458.png}}
 (変更後)
-{{:00.ionic4:pasted:20190213-074611.png}}
+{{:00.ionic4:pasted:20190213-080734.png}}
 ＜コード解説1＞
@@ 行 115: / 行 121: @@
 </code>
 のところは、後で、home.page.tsで、timerを定義します。
-{{:00.ionic4:pasted:20190210-151954.png}}
+{{:00.ionic4:pasted:20190213-151155.png}}
 ===== src/app/home/home.page.tsの編集 =====
+home.page.htmlで記載した、''%%{{ timer }}%%''や、''%%{{ startButton }}%%''を定義します。
-元本と利息の入力を受け取り、10年後の支払額を計算して返すプログラムを記載します。home.tsを、ざっくり、下に置き換えます。
 <code javascript>
+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;
+  };
+}
 </code>
 (変更前)
 {{:00.ionic4:pasted:20190213-074843.png}}
 (変更後)
+{{:00.ionic4:pasted:20190213-080242.png}}
+STARTボタンを押すと、カウントアップし始めて、STOPボタンを押すと、カウントが停止します。
+{{:00.ionic4:pasted:20190213-081252.png}}
+===== PWA（Progressive Web Apps）化 =====
+Ctrl+Cでいったんサーバを停止し、以下を入力します。
-＜コード解説1＞
-Typescriptなので、以下のように型定義をしっかりしておかなくてはいけません。
 <code>
-  initValue: number;  // 元本入力欄と双方向データバインド
+ng add @angular/pwa
-  rate: number;       // 金利入力欄と双方向データバインド
+// だめな場合は、npm run ng add @angular/pwa
 </code>
+{{:00.ionic4:pasted:20190212-081615.png}}
-＜コード解説2＞
+うまくいっているのかわかりませんが、とりあえず、GitHubを通して、Netlifyにデプロイしてみたいと思います。
-あとは、calc()という、initVlaueとrateから10年後の金額answerを返す関数を定義します。
+{{:00.ionic4:pasted:20190213-083156.png}}
-ブラウザの画面で、元本と金利のところに数字を入力すると、自動的に10年後の金額が表示されます。
+===== GitHubに登録 =====
-{{:00.ionic4:pasted:20190212-075816.png}}
+  -https://github.com/ にログインして、新規リポジトリを作成（今回は、ionic4-timerという名前にしました）
+  -以下を入力して、GitHubにpush
+<code>
+git add .
+git commit -m "first commit"
+git remote add origin https://github.com/adash333/ionic4-timer.git
+git push -u origin master
+</code>
+{{:00.ionic4:pasted:20190213-152316.png}}
+{{:00.ionic4:pasted:20190213-152406.png}}
+{{:00.ionic4:pasted:20190213-152559.png}}
+{{:00.ionic4:pasted:20190213-152612.png}}
+https://github.com/adash333/ionic4-timer
+===== Netlifyにデプロイ =====
+  -https://www.netlify.com/ にログイン
+  -New site from Git　をクリック
+  -GitHubから、ionic4-timerを選択
+  -''%%npm run build --prod%%''と、''www/''と入力して、Deploy site をクリック
+  -デプロイがうまくいったら、リンクをクリックして、確認します
+  -スマホで、上のアドレスへ行き、スマホにアプリとして登録できるかチェックします
-===== ソースコード =====
+{{:00.ionic4:pasted:20190213-152816.png}}
+{{:00.ionic4:pasted:20190213-152841.png}}
+{{:00.ionic4:pasted:20190213-153142.png}}
+{{:00.ionic4:pasted:20190213-153247.png}}
+===== ソースコード =====
+https://github.com/adash333/ionic4-timer
 DEMO
+https://confident-raman-5dbccc.netlify.com/
+{{:00.ionic4:pasted:20190213-153449.png}}
 ===== 今回写経した本 =====