差分

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

--- 00.ionic4:03.ionic4で計算アプリ [2019/02/10] – [src/app/home/home.page.htmlの編集] 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/
 ===== 開発環境 =====
-年2月現在、残念ながら、CodeSandbox上では容易にIonic4アプリを作成することはできません。そのため、自分のパソコンで環境構築をすることとします。
+私の環境は以下のようになっていますが、Windowsパソコンの場合、
-当サイトではWindows10パソコンを利用します。Windows10パソコン購入後の環境構築については、<wrap hi>[[z_blog:2018:181219_windows10_config|Windows10購入時の設定]]</wrap>に記載させていただきました。
+<wrap hi>[[00.ionic4:01.windowsでionicを始める方法|WindowsでIonicを始める方法]]</wrap>
+の手順でインストールしていただければ、ほぼ同じ環境が整います。
+Windows10パソコン購入後のWindows Subsystem for Linuxでの環境構築については、<wrap hi>[[z_blog:2018:181219_windows10_config|Windows10購入時の設定]]</wrap>に記載させていただきました。
 <code>
 Panasonic CF-RZ6
@@ 行 60: / 行 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の編集 =====
@@ 行 145: / 行 154: @@
 bootstrapのようなgridシステムも利用できます。
-===== 見出し =====
+===== src/app/home/home.page.tsの編集 =====
+元本と利息の入力を受け取り、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 {
+  initValue: number;  // 元本入力欄と双方向データバインド
+  rate: number;       // 金利入力欄と双方向データバインド
+  constructor() {
+  }
+  // 複利計算
+  calc(): number {
+    if (isNaN(this.initValue) || isNaN(this.rate)) {
+      // 元本または利率が数字でないときはnullを返す
+      return null;
+    }
+    let answer: number = this.initValue;
+    for (let i = 0; i < 10; i++) {
+      // 金利計算を10回繰り返して複利計算
+      answer = answer * (1 + this.rate / 100)
+    }
+    return Math.floor(answer);  // 計算結果を整数に変換
+  }
+}
+</code>
+{{:00.ionic4:pasted:20190212-075709.png}}
+＜コード解説1＞
+Typescriptなので、以下のように型定義をしっかりしておかなくてはいけません。
+<code>
+  initValue: number;  // 元本入力欄と双方向データバインド
+  rate: number;       // 金利入力欄と双方向データバインド
+</code>
+＜コード解説2＞
+あとは、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
+(変更前)
+<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}}
+src/app/home/home.page.scss　を以下に書き換えます。
+<code>
+h1,h2 { text-align: center; }
+table { width: 100%; }
+td {text-align: right; }
+/*偶数行目の背景を着色*/
+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>
@@ 行 161: / 行 355: @@
 ===== 参考リンク =====
-http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic3で計算アプリ
+[[http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic3で計算アプリ]]
 最終更新: 2018/10/07
@@ 行 171: / 行 365: @@
 前：[[00.ionic4:02.おすすめのionic入門書2019年版|おすすめのIonic入門書2019年版]]
-次：
+次：[[00.ionic4:04.ionic4とfirebaseで掲示板part1|Ionic4とFirebaseでEmail認証つき掲示板 Part.1]]