ユーザ用ツール

サイト用ツール


ionic3で計算アプリ

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
ionic3で計算アプリ [2017/06/18] – [src/pages/home/home.htmlの変更] adash333ionic3で計算アプリ [2019/02/12] (現在) – [ionic3で計算アプリ] adash333
行 1: 行 1:
 =====ionic3で計算アプリ===== =====ionic3で計算アプリ=====
 + ---// 2019/02/12 更新//
 +Ionic4バージョンは<wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:03.ionic4で計算アプリ|こちらへ]]</wrap>
  
 前回は、ionic3のおすすめの本を紹介させていただきました。\\ 前回は、ionic3のおすすめの本を紹介させていただきました。\\
行 22: 行 24:
  
 今回は、ionic3を用いて、「元本」と「利息」を入力すると、10年後までの支払額が出力されるようなアプリを作成します。 今回は、ionic3を用いて、「元本」と「利息」を入力すると、10年後までの支払額が出力されるようなアプリを作成します。
 +
 +ソースコードは以下のリンクへ。
 +
 +https://github.com/adash333/ionic3-calculate
  
 ====ionic3-calculateアプリの作成==== ====ionic3-calculateアプリの作成====
行 141: 行 147:
 </code> </code>
 は、Angularの"双方向データバインド"を使用して、ここで入力値(元本と利息)を受け取っています。 は、Angularの"双方向データバインド"を使用して、ここで入力値(元本と利息)を受け取っています。
 +
 +{{:pasted:20180610-185810.png}}
  
  
行 231: 行 239:
  
  
 +====明細表示の追加====
 +
 +src/pages/home/home.htmlの、最後から1行目に以下を挿入
 +
 +<code>
 +  <!--明細表示-->
 +  <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>
 +
 +{{:pasted:20170618-165918.png}}
 +
 +home.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>
 +
 +{{:pasted:20170618-170218.png}}
 +
 +====見栄えの変更====
 +
 +src/pages/home/home.html
 +
 +(変更前)
 +
 +<code>
 +  <!--入力済みの場合に表示-->
 +  <ion-card *ngIf="initValue && rate">
 +</code>
 +
 +(変更後)
 +<code>
 +  <!--入力済みの場合に表示-->
 +  <ion-card *ngIf="initValue && rate" color="primary">
 +</code>
 +
 +src/pages/home/home.scss を以下に書き換え。
 +
 +<code>
 +page-home {
 +  h1,h2 { text-align: center; }
 +  table { width: 100%; } 
 +  td {text-align: right; }
 +
 +  /*偶数行目の背景を着色*/
 +  div tr:nth-child(odd){
 +    background-color: cornsilk;
 +  }
 +}
 +</code>
 +
 +{{: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でサーバを停止してから、以下のコマンドを入力。
 +
 +<code>
 +ionic cordova platform add android
 +ionic cordova build android
 +</code>
 +
 +途中、何か聞かれたら、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
 =====リンク===== =====リンク=====
 前: 前:
行 244: 行 365:
 次: 次:
 <wrap hi> <wrap hi>
-[[github上のionic3アプリのインストール]]+[[ionic3でタイマーアプリ]]
 </wrap> </wrap>

ionic3で計算アプリ.1497768904.txt.gz · 最終更新: 2018/10/07 (外部編集)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki