サルでもわかる機械学習

ユーザ用ツール

サイト用ツール

トレース:
ionic3で計算アプリ

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
最新のリビジョン両方とも次のリビジョン
ionic3で計算アプリ [2017/06/18] – [ionic3-calculateアプリの作成] adash333ionic3で計算アプリ [2018/10/07] – 外部編集 127.0.0.1
行 10: 行 10:
  
 この本の第5章「スタンドアロンアプリを作る」を、Ionic3(Angular4)で写経してみます。\\ この本の第5章「スタンドアロンアプリを作る」を、Ionic3(Angular4)で写経してみます。\\
-Angular4用のコードは、下記サイトで配布されています。\\ 
  
-『Angular2によるモダンWeb開発』ダウンロードページ 
-2017年4月10日更新\\ 
-http://ec.nikkeibp.co.jp/nsp/dl/09653/index.shtml 
  
  
行 24: 行 20:
  
 {{:pasted:20170618-134010.png}} {{:pasted:20170618-134010.png}}
 +
 +今回は、ionic3を用いて、「元本」と「利息」を入力すると、１０年後までの支払額が出力されるようなアプリを作成します。
 +
 +ソースコードは以下のリンクへ。
 +
 +https://github.com/adash333/ionic3-calculate
  
 ====ionic3-calculateアプリの作成==== ====ionic3-calculateアプリの作成====
行 68: 行 70:
 {{:pasted:20170618-141750.png}} {{:pasted:20170618-141750.png}}
  
-=====src/pages/home/home.htmlの変更=====+====アプリ作成直後のファイル構成==== 
 + 
 +ionic3アプリ作成直後のファイル構成は、以下のようになっています。 
 + 
 +{{:pasted:20170618-142258.png}} 
 + 
 +package.jsonは以下のようになっています。（最初はあまり気にしないでよいと思いますが、@angula/coreと、@ionic/storageのversionは大事だと思います。） 
 + 
 +{{:pasted:20170618-142441.png}} 
 + 
 +Ctrl+@で、cmd.exeの画面を出して、ionic serveして、サーバを起動しておきます。 
 + 
 +<code> 
 +ionic serve 
 +</code> 
 + 
 + 
 + 
 + 
 +====src/pages/home/home.htmlの変更==== 
 + 
 +ページの見栄えを作成します。「元本」と「利息」の入力欄と、1年後から10年後までの支払額のリストを表示する枠を作成します。home.htmlをごっそり、以下のように書き換えてください。 
 + 
 +<code> 
 +<ion-header> 
 +  <ion-navbar> 
 +    <ion-title> 
 +      複利計算 
 +    </ion-title> 
 +  </ion-navbar> 
 +</ion-header> 
 + 
 +<ion-content padding> 
 +   
 +  <ion-list> 
 +    <ion-item> 
 +      <ion-label stacked>元本（円）</ion-label> 
 +      <ion-input type="tel" [(ngModel)]="initValue"></ion-input> 
 +    </ion-item> 
 +    <ion-item> 
 +      <ion-label stacked>金利（%）</ion-label> 
 +      <ion-input type="tel" [(ngModel)]="rate"></ion-input> 
 +    </ion-item> 
 +  </ion-list> 
 + 
 +  <!--入力済みの場合に表示--> 
 +  <ion-card *ngIf="initValue && rate"> 
 +    <ion-card-header> 
 +      10年後 
 +    </ion-card-header> 
 +    <!--結果表示--> 
 +    <ion-card-content> 
 +      {{calc() | number}}円 
 +    </ion-card-content> 
 +  </ion-card> 
 + 
 +</ion-content> 
 +</code> 
 + 
 +(変更前) 
 + 
 +{{:pasted:20170618-143228.png}} 
 + 
 +(変更後) 
 + 
 +{{:pasted:20170618-151506.png}} 
 + 
 +＜コード解説1＞\\ 
 +<ion-xxx>というところは、全て、ionic特有のUI（見栄え）の表記です。ionicの公式ドキュメントを参照しつつ、入力します。 
 + 
 +＜コード解説2＞\\ 
 +<code> 
 +[(ngModel)]="initValue" 
 +</code> 
 +は、Angularの"双方向データバインド"を使用して、ここで入力値（元本と利息）を受け取っています。 
 + 
 +{{:pasted:20180610-185810.png}} 
 + 
 + 
 +＜コード解説3＞ 
 +<code> 
 +<ion-card *ngIf="initValue && rate"> 
 +</code> 
 +の部分は、Angularの"NgIfディレクティブ"であり、「initVlaueとrate両方が存在する場合に、ion-card以下の部分を表示す。」ようにしています。 
 + 
 +＜コード解説4＞ 
 +<code> 
 + {{calc() | number}} 
 +</code> 
 +の部分は、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を、ざっくり、下に置き換えます。 
 + 
 +<code> 
 +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);  // 計算結果を整数に変換 
 +  } 
 + 
 +} 
 +</code> 
 + 
 +＜コード解説1＞ 
 +Typescriptなので、以下のように型定義をしっかりしておかなくてはいけません。 
 +<code> 
 +  initValue: number;  // 元本入力欄と双方向データバインド 
 +  rate: number;       // 金利入力欄と双方向データバインド 
 +</code> 
 + 
 +＜コード解説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行目に以下を挿入 
 + 
 +<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
 =====リンク===== =====リンク=====
 前： 前：
行 87: 行 363:
 次： 次：
 <wrap hi> <wrap hi>
-[[github上のionic3アプリのインストール]]+[[ionic3でタイマーアプリ]]
 </wrap> </wrap>

ionic3で計算アプリ.txt · 最終更新: 2019/02/12 by adash333
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki