差分

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

--- 00.ionic4:08.ionic4でタイマーアプリ [2019/02/13] – [新規Ionic4アプリの作成] 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>
@@ 行 62: / 行 68: @@
 ===== src/app/home/home.page.htmlの編集 =====
-ページの見栄えを作成します。「元本」と「利息」の入力欄と、1年後から10年後までの支払額のリストを表示する枠を作成します。home.htmlをごっそり、以下のように書き換えてください。
+ページの見栄えを作成します。
+photoACから、さくらの画像ファイルをダウンロードして、sakura.jpgという名前に変更します。
+src/assets/images/ フォルダを新規作成して、その中に、sakuar.jpgを移動します。
+{{:00.ionic4:pasted:20190213-073637.png}}
 src/app/home/home.page.html
 <code 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>
 </code>
+(変更前)
+{{:00.ionic4:pasted:20190213-073458.png}}
+(変更後)
+{{:00.ionic4:pasted:20190213-080734.png}}
 ＜コード解説1＞
 <ion-xxx>というところは、全て、ionic特有のUI（見栄え）の表記です。ionicの公式ドキュメントを参照しつつ、入力します。
+Ionic4から、ボタンは、<ion-button>と表記するようになっています。
 ＜コード解説2＞
+Ionic4で画像ファイルなどを保存する場所は、src/app/assets/ フォルダに、img/ フォルダを作成し、その中にjpgファイルなど(たとえば、sakura.jpg　など)を保存します。
+その後、画像ファイルをsrc/home/home.page.htmlなどで表示する場合は、以下のように表記します。
 <code>
-[(ngModel)]="initValue"
+<img src="assets/img/sakura.jpg">
 </code>
-は、Angularの"双方向データバインド"を使用して、ここで入力値（元本と利息）を受け取っています。
-{{:00.ionic4:pasted:20190210-151954.png}}
+参考：https://scotch.io/courses/build-your-first-angular-website/adding-an-imagelogo-in-angular
-===== ソースコード =====
+＜コード解説3＞
+<code>
+{{ timer }}
+</code>
+のところは、後で、home.page.tsで、timerを定義します。
+{{:00.ionic4:pasted:20190213-151155.png}}
+===== src/app/home/home.page.tsの編集 =====
+home.page.htmlで記載した、''%%{{ timer }}%%''や、''%%{{ startButton }}%%''を定義します。
+<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でいったんサーバを停止し、以下を入力します。
+<code>
+ng add @angular/pwa
+// だめな場合は、npm run ng add @angular/pwa
+</code>
+{{:00.ionic4:pasted:20190212-081615.png}}
+うまくいっているのかわかりませんが、とりあえず、GitHubを通して、Netlifyにデプロイしてみたいと思います。
+{{:00.ionic4:pasted:20190213-083156.png}}
+===== GitHubに登録 =====
+  -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}}
 ===== 今回写経した本 =====