====== Ionic4で計算アプリ ====== ---//2019/02/12 更新// Ionic4アプリ第1弾として、計算アプリを作成してみたいと思います。以下の本を参考にさせていただいています。この本の第5章「スタンドアロンアプリを作る」を、Ionic4(Angular7)で写経してみます。 ===== すること ===== -「元本」と「利息」を入力すると、１０年後までの支払額が出力される -PWA化して、オフラインでもアプリとして利用できるようにする https://github.com/adash333/ionic4-calculate DEMO https://musing-swartz-845c0d.netlify.com/ ===== 開発環境 ===== 私の環境は以下のようになっていますが、Windowsパソコンの場合、 [[00.ionic4:01.windowsでionicを始める方法|WindowsでIonicを始める方法]] の手順でインストールしていただければ、ほぼ同じ環境が整います。 Windows10パソコン購入後のWindows Subsystem for Linuxでの環境構築については、[[z_blog:2018:181219_windows10_config|Windows10購入時の設定]]に記載させていただきました。


Panasonic CF-RZ6
Windows10 Pro (1803)
VisualStudioCode 

Windows Subsystem for Linux (WSL)
Ubuntu18.04
VisualStudioCodeのターミナル画面をWSLのBashに設定
git 2.17.1
anyenv 
nodenv 1.1.2-69-gced0e70
node 10.14.2

{{:00.ionic4:pasted:20190210-143318.png}} 私の場合、以下のようにフォルダ共有しています。


Windowsの C:/Users/a/a/
Ubuntuの  /mnt/c/Users/a/a/

また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、[[http://i-doctor.sakura.ne.jp/web/doku.php?id=z_blog:2018:181219_windows10_config#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%85%B1%E6%9C%89%E3%81%AE%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A|こちらの設定]]にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。 ===== 新規Ionic4アプリの作成 ===== -VisualStudioCodeでWindowsのC:/Users/a/a/ionic/フォルダを開く -Ctrl+@でターミナル画面を開いて、以下を入力します


cd ionic
ionic start ionic4-calculate blank --type=angular
// 何か聞かれたら、n + Enter

なんだか、最初のこのインストールにものすごく時間がかかるのはIonic4の欠点だと思います。しかも、この時点で405MB!!。なんとかならないのでしょうか。。。 {{:00.ionic4:pasted:20190210-145650.png}} {{:00.ionic4:pasted:20190210-145840.png}} *以下を入力して、サーバを起動します。


cd ionic4-calculate
ionic serve

{{:00.ionic4:pasted:20190213-071108.png}} なお、サーバを停止するためには、Ctrl+C, Y, Enterの操作を行います。 ===== src/app/home/home.page.htmlの編集 ===== ページの見栄えを作成します。「元本」と「利息」の入力欄と、1年後から10年後までの支払額のリストを表示する枠を作成します。home.htmlをごっそり、以下のように書き換えてください。 src/app/home/home.page.html



  
    
      複利計算
    
  



  
    
      元本（円）
      
    
    
      金利（%）
      
    
  

  
  
    
      10年後
    
    
    
      {{calc() | number}}円

（変更前） {{:00.ionic4:pasted:20190210-150904.png}} （変更後） {{:00.ionic4:pasted:20190210-151345.png}} ＜コード解説1＞というところは、全て、ionic特有のUI（見栄え）の表記です。ionicの公式ドキュメントを参照しつつ、入力します。＜コード解説2＞


[(ngModel)]="initValue"

は、Angularの"双方向データバインド"を使用して、ここで入力値（元本と利息）を受け取っています。 {{:00.ionic4:pasted:20190210-151954.png}} ＜コード解説3＞

の部分は、Angularの"NgIfディレクティブ"であり、「initVlaueとrate両方が存在する場合に、ion-card以下の部分を表示す。」ようにしています。＜コード解説4＞


 {{calc() | number}}

の部分は、Angularの"片方向データバインド"を使用して、10年後に支払額を以下の場所で表示するようにしています。なお、" | number"の部分は、Decimal Pipeによる数値表示の書式設定を行っており、ここでは、3桁ごとのカンマがつけられます。（筆者は詳細を理解しておりません。すみません。。。）（参考）https://ionicframework.com/docs/components ionic公式ドキュメント：見栄えについては、こちらの公式サイトを読んで、ionic特有のUI（user interface:見栄え）に慣れておく必要があります。最初は、これがかなり面倒ですが、bootstrapと同様、慣れるしかありません。（bootstrapを利用したい場合は、ionicではなく、Angular4+ng-bootstrpを利用することになります。）今回は、以下のページを参考に、stacked-labelsを使用しています。 https://ionicframework.com/docs/api/input



  Stacked Label

https://ionicframework.com/docs/api/grid bootstrapのようなgridシステムも利用できます。 ===== src/app/home/home.page.tsの編集 ===== 元本と利息の入力を受け取り、10年後の支払額を計算して返すプログラムを記載します。home.tsを、ざっくり、下に置き換えます。


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);  // 計算結果を整数に変換
  }
  
}

{{:00.ionic4:pasted:20190212-075709.png}} ＜コード解説1＞ Typescriptなので、以下のように型定義をしっかりしておかなくてはいけません。


  initValue: number;  // 元本入力欄と双方向データバインド
  rate: number;       // 金利入力欄と双方向データバインド

＜コード解説2＞あとは、calc()という、initVlaueとrateから10年後の金額answerを返す関数を定義します。ブラウザの画面で、元本と金利のところに数字を入力すると、自動的に10年後の金額が表示されます。 {{:00.ionic4:pasted:20190212-075816.png}} ===== 明細表示の追加 ===== src/app/home/home.page.htmlの、最後から1行目に以下を挿入します。


  
  
    
      
        {{i}}年目
        {{value | number}}円

{{:00.ionic4:pasted:20190212-080002.png}} home.page.tsに、以下を挿入します。


  // 年毎の金額計算
  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;
  }

{{:00.ionic4:pasted:20190212-080134.png}} ===== 見栄えの変更 ===== src/app/home/home.page.html (変更前)


  
  
    
      10年後
    
    
    
      {{calc() | number}}円

{{:00.ionic4:pasted:20190212-080321.png}} (変更後)


  
  
    
      10年後
    
    
    
      {{calc() | number}}円

{{:00.ionic4:pasted:20190212-080406.png}} src/app/home/home.page.scss　を以下に書き換えます。


h1,h2 { text-align: center; }
table { width: 100%; } 
td {text-align: right; }

/*偶数行目の背景を着色*/
tr:nth-child(odd){
  background-color: cornsilk;
}

{{:00.ionic4:pasted:20190212-081104.png}} (参考) 文字の左右・中央揃え【text-align】：CSS入門\\ http://kumacrow.blog111.fc2.com/blog-entry-287.html 2012-01-27 CSS3で表を縞模様にする\\ http://d.hatena.ne.jp/guimo/20120127/1327617371 見栄えはかなり微妙ですが、このまま突き進んで、PWA化します。 ===== PWA（Progressive Web Apps）化 ===== Ctrl+Cでいったんサーバを停止し、以下を入力します。


ng add @angular/pwa

{{:00.ionic4:pasted:20190212-081615.png}} うまくいっているのかわかりませんが、とりあえず、GitHubを通して、Netlifyにデプロイしてみたいと思います。（PWA化できているかどうかは、NetlifyのサイトをAndroidスマホで閲覧して、スマホにアプリとして登録し、オフラインで複利計算ができるかどうかを試すことによって、確認したいと思います。） ===== GitHubに登録 ===== -https://github.com/ にログインして、新規リポジトリを作成（今回は、ionic4-calculateという名前にしました） -以下を入力して、GitHubにpush


git add .
git commit -m "first commit"
git remote add origin https://github.com/adash333/ionic4-calculate.git
git push -u origin master

{{: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/ ===== 今回写経した本 ===== ===== 参考リンク ===== [[http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/ionic3で計算アプリ]] 最終更新: 2018/10/07 ===== リンク ===== 目次：[[00.ionic4:index.html|スマホ用ホームページ&スマホアプリ作成ソフトIonic4]] 前：[[00.ionic4:02.おすすめのionic入門書2019年版|おすすめのIonic入門書2019年版]] 次：[[00.ionic4:04.ionic4とfirebaseで掲示板part1|Ionic4とFirebaseでEmail認証つき掲示板 Part.1]]