=====ionic3で計算アプリ===== ---// 2019/02/12 更新// Ionic4バージョンは[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:03.ionic4で計算アプリ|こちらへ]] 前回は、ionic3のおすすめの本を紹介させていただきました。\\ 今回は、ionic3で計算アプリを作成してみたいと思います。\\ 以下の本を参考にさせていただいています。この本の第5章「スタンドアロンアプリを作る」を、Ionic3(Angular4)で写経してみます。\\ （環境）\\ Windows8.1\\ Node 6.11.0\\ Ionic CLI 3.4.0\\ VisualStudioCode 1.13.1 {{:pasted:20170618-134010.png}} 今回は、ionic3を用いて、「元本」と「利息」を入力すると、１０年後までの支払額が出力されるようなアプリを作成します。ソースコードは以下のリンクへ。 https://github.com/adash333/ionic3-calculate ====ionic3-calculateアプリの作成==== C:/ionic/ フォルダの下に、ionic3-calculateというionic3アプリを作成することとします。 C:/ionic/　フォルダの中で右クリック　＞　Open with Code をクリック {{:pasted:20170618-134916.png}} VisualStudioCodeが起動して、下のような画面になるので、Ctrl + @ を押して、cmd.exeの画面を表示させる。 {{:pasted:20170618-135014.png}} {{:pasted:20170618-135300.png}} cmd.exeで、以下のコマンドを入力して、ionic3アプリを作成する。


ionic start ionic3-calculate blank

{{:pasted:20170618-140911.png}} npm installのところで数分待つ。 {{:pasted:20170618-140931.png}} ionic3-calculateフォルダに移動し、ionic serveによりサーバを起動します。


cd ionic3-calculate
ionic serve

{{:pasted:20170618-141034.png}} すると、１分くらいで自動的にブラウザが開いて、下のような画面になります。ブラウザは、Chromeをお勧めします。このサイトでは、今後、以下のように、左側に縦長のChrome（ブラウザ）の画面を、右側に、VisualStudioCodeの画面を並べて表示することが多いです。 {{:pasted:20170618-141322.png}} サーバを停止したい場合は、VisualStudioCodeのcmd.exeの画面でCtrl+C, Y, Enter で停止することができます。サーバを停止しなくても、VisualStudioCodeでファイルなどを修正すると、それをionicが検知して、自動的に再コンパイルして、数十秒待つと、左側のChromeに変化が反映されます。今回は、分かりやすさを重視して、いったん、Ctrl+C, Y, Enterにより、サーバを停止します。 {{:pasted:20170618-141750.png}} ====アプリ作成直後のファイル構成==== ionic3アプリ作成直後のファイル構成は、以下のようになっています。 {{:pasted:20170618-142258.png}} package.jsonは以下のようになっています。（最初はあまり気にしないでよいと思いますが、@angula/coreと、@ionic/storageのversionは大事だと思います。） {{:pasted:20170618-142441.png}} Ctrl+@で、cmd.exeの画面を出して、ionic serveして、サーバを起動しておきます。


ionic serve

====src/pages/home/home.htmlの変更==== ページの見栄えを作成します。「元本」と「利息」の入力欄と、1年後から10年後までの支払額のリストを表示する枠を作成します。home.htmlをごっそり、以下のように書き換えてください。



  
    
      複利計算
    
  



  
  
    
      元本（円）
      
    
    
      金利（%）
      
    
  

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

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


[(ngModel)]="initValue"

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

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


 {{calc() | number}}

の部分は、Angularの"片方向データバインド"を使用して、10年後に支払額を以下の場所で表示するようにしています。\\ なお、" | number"の部分は、Decimal Pipeによる数値表示の書式設定を行っており、ここでは、3桁ごとのカンマがつけられます。（筆者は詳細を理解しておりません。すみません。。。）（参考）\\ ionic公式サイト：見栄えについては、こちらの公式サイトを読んで、ionic特有のUI（user interface:見栄え）に慣れておく必要があります。最初は、これがかなり面倒ですが、bootstrapと同様、慣れるしかありません。（bootstrapを利用したい場合は、ionicではなく、Angular4+ng-bootstrpを利用することになります。）\\ https://ionicframework.com/docs/components/#overview 今回は、以下のページを参考に、stacked-labelsを使用しています。\\ https://ionicframework.com/docs/components/#stacked-labels\\ {{:pasted:20170618-150740.png}} bootstrapのようなgridシステムも利用できます。\\ https://ionicframework.com/docs/components/#grid {{:pasted:20170618-144831.png}} ====src/pages/home/home.tsの変更==== 元本と利息の入力を受け取り、10年後の支払額を計算して返すプログラムを記載します。home.tsを、ざっくり、下に置き換えます。


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

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

  constructor(public navCtrl: NavController) {
  }

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

}

＜コード解説1＞ Typescriptなので、以下のように型定義をしっかりしておかなくてはいけません。


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

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


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

{{:pasted:20170618-165918.png}} home.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;
  }

{{:pasted:20170618-170218.png}} ====見栄えの変更==== src/pages/home/home.html (変更前)

(変更後)

src/pages/home/home.scss　を以下に書き換え。


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

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

{{:pasted:20170618-172102.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 ====Androidアプリの作成==== VisualStudioCodeのcmd.exeの画面で、Ctrl+C, Y, Enterでサーバを停止してから、以下のコマンドを入力。


ionic cordova platform add android
ionic cordova build android

途中、何か聞かれたら、YとしてEnter. {{:pasted:20170618-183404.png}} 数分かかる。 {{:pasted:20170618-183606.png}} どこにandroid-debug.apkファイルが作成されたのか表示される（下図の赤で囲った部分）ので、その場所に保存されているapkファイルを、自分のスマホにメールします。 {{:pasted:20170618-183656.png}} {{:pasted:20170618-183952.png}} ====Androidアプリのインストール==== メールしたapkファイル(約4MB)を、自分のandroidスマホにインストールします。\\ 今回は、arrows M03にインストールしてみました。 {{:pasted:20170618-184414.png}} ====ソースコード==== https://github.com/adash333/ionic3-calculate =====リンク===== 前： [[おすすめのIonic3入門書2017年版]] \\ [[sidebar|目次]]\\ 次： [[ionic3でタイマーアプリ]]