00.ionic4:08.ionic4でタイマーアプリ
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
00.ionic4:08.ionic4でタイマーアプリ [2019/02/13] – [新規Ionic4アプリの作成] adash333 | 00.ionic4:08.ionic4でタイマーアプリ [2019/08/28] (現在) – [Ionic4でタイマーアプリ] adash333 | ||
---|---|---|---|
行 7: | 行 7: | ||
</ | </ | ||
+ | ===== ソースコードとDEMOサイト ====== | ||
+ | https:// | ||
+ | |||
+ | DEMO | ||
+ | https:// | ||
===== すること ===== | ===== すること ===== | ||
-スタートボタンを押すと、00:00:00からカウントアップする | -スタートボタンを押すと、00:00:00からカウントアップする | ||
行 14: | 行 19: | ||
ソースコード | ソースコード | ||
+ | https:// | ||
DEMO | DEMO | ||
+ | https:// | ||
+ | {{: | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 24: | 行 30: | ||
Panasonic CF-RZ6 | Panasonic CF-RZ6 | ||
Windows10 Pro (1803) | Windows10 Pro (1803) | ||
- | VisualStudioCode | + | 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 | npm 6.4.1 | ||
- | yarn 1.13.0 | + | Ionic (Ionic CLI) 4.10.2 |
- | ionic@4.10.2 | + | @ionic/ |
- | cordova@8.1.2 | + | @angula/pwa 0.13.1 |
</ | </ | ||
行 62: | 行 68: | ||
===== src/ | ===== src/ | ||
- | ページの見栄えを作成します。「元本」と「利息」の入力欄と、1年後から10年後までの支払額のリストを表示する枠を作成します。home.htmlをごっそり、以下のように書き換えてください。 | + | ページの見栄えを作成します。 |
+ | |||
+ | photoACから、さくらの画像ファイルをダウンロードして、sakura.jpgという名前に変更します。 | ||
+ | src/ | ||
+ | {{: | ||
src/ | src/ | ||
<code html> | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | Ionic4 Timer | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <img src=" | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | {{ startButton }} | ||
+ | </ | ||
+ | </ | ||
</ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
<コード解説1> | <コード解説1> | ||
< | < | ||
+ | Ionic4から、ボタンは、< | ||
<コード解説2> | <コード解説2> | ||
+ | Ionic4で画像ファイルなどを保存する場所は、src/ | ||
+ | その後、画像ファイルをsrc/ | ||
< | < | ||
- | [(ngModel)]="initValue" | + | <img src="assets/ |
</ | </ | ||
- | は、Angularの" | ||
- | {{: | ||
+ | 参考:https:// | ||
- | ===== ソースコード | + | <コード解説3> |
+ | < | ||
+ | {{ timer }} | ||
+ | </ | ||
+ | のところは、後で、home.page.tsで、timerを定義します。 | ||
+ | {{: | ||
+ | ===== src/ | ||
+ | home.page.htmlで記載した、'' | ||
+ | |||
+ | <code javascript> | ||
+ | import { Component } from ' | ||
+ | |||
+ | @Component({ | ||
+ | selector: ' | ||
+ | templateUrl: | ||
+ | styleUrls: [' | ||
+ | }) | ||
+ | export class HomePage { | ||
+ | public timer = " | ||
+ | public startButton = " | ||
+ | public seconds; | ||
+ | public minutes; | ||
+ | public hours; | ||
+ | public start; | ||
+ | public default; | ||
+ | public timer_id; | ||
+ | |||
+ | constructor() { | ||
+ | } | ||
+ | |||
+ | startStop() { | ||
+ | if (this.startButton === " | ||
+ | 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 + ':' | ||
+ | }, 10); | ||
+ | |||
+ | // STOPボタンにする | ||
+ | this.startButton = " | ||
+ | this.default = " | ||
+ | } else { | ||
+ | clearInterval(this.timer_id); | ||
+ | |||
+ | // STARTボタンにする | ||
+ | this.startButton = " | ||
+ | this.default = " | ||
+ | } | ||
+ | } | ||
+ | |||
+ | //private date = new Date(' | ||
+ | // ゼロを追加する | ||
+ | addZero(value) { | ||
+ | if (value < 10) { | ||
+ | value = ' | ||
+ | } | ||
+ | return value; | ||
+ | }; | ||
+ | } | ||
+ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | STARTボタンを押すと、カウントアップし始めて、STOPボタンを押すと、カウントが停止します。 | ||
+ | {{: | ||
+ | |||
+ | ===== PWA(Progressive Web Apps)化 ===== | ||
+ | Ctrl+Cでいったんサーバを停止し、以下を入力します。 | ||
+ | |||
+ | < | ||
+ | ng add @angular/ | ||
+ | // だめな場合は、npm run ng add @angular/ | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | うまくいっているのかわかりませんが、とりあえず、GitHubを通して、Netlifyにデプロイしてみたいと思います。 | ||
+ | {{: | ||
+ | |||
+ | ===== GitHubに登録 ===== | ||
+ | -https:// | ||
+ | -以下を入力して、GitHubにpush | ||
+ | < | ||
+ | git add . | ||
+ | git commit -m "first commit" | ||
+ | git remote add origin https:// | ||
+ | git push -u origin master | ||
+ | </ | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | https:// | ||
+ | |||
+ | ===== Netlifyにデプロイ ===== | ||
+ | -https:// | ||
+ | -New site from Git をクリック | ||
+ | -GitHubから、ionic4-timerを選択 | ||
+ | -'' | ||
+ | -デプロイがうまくいったら、リンクをクリックして、確認します | ||
+ | -スマホで、上のアドレスへ行き、スマホにアプリとして登録できるかチェックします | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
+ | ===== ソースコード ===== | ||
+ | https:// | ||
DEMO | DEMO | ||
+ | https:// | ||
+ | {{: | ||
===== 今回写経した本 ===== | ===== 今回写経した本 ===== |
00.ionic4/08.ionic4でタイマーアプリ.1550043240.txt.gz · 最終更新: 2019/02/13 by adash333