差分

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

--- 00.ionic4:08.ionic4でタイマーアプリ [2019/02/13] – [src/app/home/home.page.htmlの編集] 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>
@@ 行 130: / 行 135: @@
 })
 export class HomePage {
+  public timer = "00:00:00";
+  public startButton = "START";
+  public seconds;
+  public minutes;
+  public hours;
+  public start;
+  public default;
+  public timer_id;
-  initValue: number;  // 元本入力欄と双方向データバインド
-  rate: number;       // 金利入力欄と双方向データバインド
   constructor() {
   }
-  // 複利計算
+  startStop() {
-  calc(): number {
+    if (this.startButton === "START") {
-    if (isNaN(this.initValue) || isNaN(this.rate)) {
+      this.start = new Date();
-      // 元本または利率が数字でないときはnullを返す
+      this.timer_id = setInterval(() => {
-      return null;
+        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";
     }
-    let answer: number = this.initValue;
-    for (let i = 0; i < 10; i++) {
-      // 金利計算を10回繰り返して複利計算
-      answer = answer * (1 + this.rate / 100)
-    }
-    return Math.floor(answer);  // 計算結果を整数に変換
   }
+  //private date = new Date('2000/1/1 0:00:00');
+  // ゼロを追加する
+  addZero(value) {
+    if (value < 10) {
+      value = '0' + value;
+    }
+    return value;
+  };
 }
 </code>
-{{:00.ionic4:pasted:20190212-075709.png}}
+(変更前)
+{{: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}}
 ===== 今回写経した本 =====