差分

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

--- 00.ionic4:03.ionic4で計算アプリ [2019/02/12] – [src/app/home/home.page.tsの編集] adash333
+++ 00.ionic4:03.ionic4で計算アプリ [2019/02/13] (現在) – [新規Ionic4アプリの作成] adash333
@@ 行 1: / 行 1: @@
 ====== Ionic4で計算アプリ ======
- ---//2019/02/10 更新//
+ ---//2019/02/12 更新//
 Ionic4アプリ第1弾として、計算アプリを作成してみたいと思います。
@@ 行 15: / 行 15: @@
   -PWA化して、オフラインでもアプリとして利用できるようにする
-ソースコード
+https://github.com/adash333/ionic4-calculate
 DEMO
+https://musing-swartz-845c0d.netlify.com/
@@ 行 65: / 行 66: @@
 ionic serve
 </code>
-{{:00.ionic4:pasted:20190210-150425.png}}
+{{:00.ionic4:pasted:20190213-071108.png}}
-なお、サーバを停止するためには、Ctrl+C, Y, Enterの操作を行います。（Ubuntuだと、Ctrl+Cのみですぐにサーバ停止します。）
+なお、サーバを停止するためには、Ctrl+C, Y, Enterの操作を行います。
 ===== src/app/home/home.page.htmlの編集 =====
@@ 行 156: / 行 160: @@
 <code javascript>
 import { Component } from '@angular/core';
-import { NavController } from 'ionic-angular';
 @Component({
-  selector: 'page-home',
+  selector: 'app-home',
-  templateUrl: 'home.html'
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
 })
 export class HomePage {
@@ 行 166: / 行 170: @@
   initValue: number;  // 元本入力欄と双方向データバインド
   rate: number;       // 金利入力欄と双方向データバインド
-  constructor(public navCtrl: NavController) {
+  constructor() {
   }
   // 複利計算
   calc(): number {
@@ 行 183: / 行 187: @@
     return Math.floor(answer);  // 計算結果を整数に変換
   }
 }
 </code>
+{{:00.ionic4:pasted:20190212-075709.png}}
 ＜コード解説1＞
@@ 行 197: / 行 202: @@
 あとは、calc()という、initVlaueとrateから10年後の金額answerを返す関数を定義します。
+ブラウザの画面で、元本と金利のところに数字を入力すると、自動的に10年後の金額が表示されます。
+{{:00.ionic4:pasted:20190212-075816.png}}
+===== 明細表示の追加 =====
+src/app/home/home.page.htmlの、最後から1行目に以下を挿入します。
+<code javascript>
+  <!--明細表示-->
+  <ion-card *ngIf="initValue && rate">
+    <table>
+      <tr
+        *ngFor="let value of calcArray(); let i = index">
+        <td>{{i}}年目</td>
+        <td>{{value | number}}円</td>
+    </table>
+  </ion-card>
+</code>
+{{:00.ionic4:pasted:20190212-080002.png}}
+home.page.tsに、以下を挿入します。
+<code>
+  // 年毎の金額計算
+  calcArray(): number[] {
+      if (isNaN(this.initValue) || isNaN(this.rate)) {
+      // 元本または利率が数字でないときはnullを返す
+      return null;
+      }
+      let answer: number = this.initValue;
+      let ret: number[] = [answer];
+      for (let i = 0; i < 10; i++) {
+        // 金利計算を10回繰り返して複利計算
+        answer = answer * (1 + this.rate / 100)
+        ret.push(Math.floor(answer)); // 整数に変換
+      }
+      return ret;
+  }
+</code>
+{{:00.ionic4:pasted:20190212-080134.png}}
+===== 見栄えの変更 =====
+src/app/home/home.page.html
 (変更前)
-{{:pasted:20170618-152628.png}}
+<code>
+  <!--入力済みの場合に表示-->
+  <ion-card *ngIf="initValue && rate">
+    <ion-card-header>
+年後
+    </ion-card-header>
+    <!--結果表示-->
+    <ion-card-content>
+      {{calc() | number}}円
+    </ion-card-content>
+  </ion-card>
+</code>
+{{:00.ionic4:pasted:20190212-080321.png}}
 (変更後)
+<code>
+  <!--入力済みの場合に表示-->
+  <ion-card *ngIf="initValue && rate" color="primary">
+    <ion-card-header>
+      <h1>10年後</h1>
+    </ion-card-header>
+    <!--結果表示-->
+    <ion-card-content>
+      <h2>{{calc() | number}}円</h2>
+    </ion-card-content>
+  </ion-card>
+</code>
+{{:00.ionic4:pasted:20190212-080406.png}}
-{{:pasted:20170618-153348.png}}
+src/app/home/home.page.scss　を以下に書き換えます。
-ブラウザの画面で、元本と金利のところに数字を入力すると、自動的に10年後の金額が表示される。
+<code>
+h1,h2 { text-align: center; }
+table { width: 100%; }
+td {text-align: right; }
-{{:pasted:20170618-153426.png}}
+/*偶数行目の背景を着色*/
+tr:nth-child(odd){
+  background-color: cornsilk;
+}
+</code>
+{{:00.ionic4:pasted:20190212-081104.png}}
-作成中
+(参考)
+文字の左右・中央揃え【text-align】：CSS入門\\
+http://kumacrow.blog111.fc2.com/blog-entry-287.html
+-01-27
+CSS3で表を縞模様にする\\
+http://d.hatena.ne.jp/guimo/20120127/1327617371
+見栄えはかなり微妙ですが、このまま突き進んで、PWA化します。
+===== PWA（Progressive Web Apps）化 =====
+Ctrl+Cでいったんサーバを停止し、以下を入力します。
+<code>
+ng add @angular/pwa
+</code>
+{{:00.ionic4:pasted:20190212-081615.png}}
+うまくいっているのかわかりませんが、とりあえず、GitHubを通して、Netlifyにデプロイしてみたいと思います。
+（PWA化できているかどうかは、NetlifyのサイトをAndroidスマホで閲覧して、スマホにアプリとして登録し、オフラインで複利計算ができるかどうかを試すことによって、確認したいと思います。）
+===== GitHubに登録 =====
+  -https://github.com/ にログインして、新規リポジトリを作成（今回は、ionic4-calculateという名前にしました）
+  -以下を入力して、GitHubにpush
+<code>
+git add .
+git commit -m "first commit"
+git remote add origin https://github.com/adash333/ionic4-calculate.git
+git push -u origin master
+</code>
+{{:00.ionic4:pasted:20190212-081845.png}}
+{{:00.ionic4:pasted:20190212-082039.png}}
+{{:00.ionic4:pasted:20190212-082059.png}}
+===== Netlifyにデプロイ =====
+  -https://www.netlify.com/ にログイン
+  -New site from Git　をクリック
+  -GitHubから、ionic4-calculateを選択
+  -''%%npm run build --prod%%''と、''www/''と入力して、Deploy site をクリック
+  -デプロイがうまくいったら、リンクをクリックして、確認します
+  -スマホで、上のアドレスへ行き、スマホにアプリとして登録できるかチェックします
+{{:00.ionic4:pasted:20190212-082212.png}}
+{{:00.ionic4:pasted:20190212-082256.png}}
+{{:00.ionic4:pasted:20190212-082610.png}}
+{{:00.ionic4:pasted:20190212-082706.png}}
+  *PWA化されたかどうかは、『スマホで、5分以上間隔をあけて、サイトに2回訪問したときに、”ホーム画面に追加”の表示が出るかどうか』で判断することとします。結構面倒ですね。
+===== ソースコード =====
+https://github.com/adash333/ionic4-calculate
+DEMO
+https://musing-swartz-845c0d.netlify.com/
 ===== 今回写経した本 =====
 <html>
@@ 行 235: / 行 365: @@
 前：[[00.ionic4:02.おすすめのionic入門書2019年版|おすすめのIonic入門書2019年版]]
-次：
+次：[[00.ionic4:04.ionic4とfirebaseで掲示板part1|Ionic4とFirebaseでEmail認証つき掲示板 Part.1]]