ionic3で計算アプリ
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
ionic3で計算アプリ [2017/06/18] – [アプリ作成直後のファイル構成] adash333 | ionic3で計算アプリ [2017/06/18] – [Androidアプリのインストール] adash333 | ||
---|---|---|---|
行 10: | 行 10: | ||
この本の第5章「スタンドアロンアプリを作る」を、Ionic3(Angular4)で写経してみます。\\ | この本の第5章「スタンドアロンアプリを作る」を、Ionic3(Angular4)で写経してみます。\\ | ||
- | Angular4用のコードは、下記サイトで配布されています。\\ | ||
- | 『Angular2によるモダンWeb開発』ダウンロードページ | ||
- | 2017年4月10日更新\\ | ||
- | http:// | ||
行 24: | 行 20: | ||
{{: | {{: | ||
+ | |||
+ | 今回は、ionic3を用いて、「元本」と「利息」を入力すると、10年後までの支払額が出力されるようなアプリを作成します。 | ||
+ | |||
+ | ソースコードは以下のリンクへ。 | ||
+ | |||
+ | https:// | ||
====ionic3-calculateアプリの作成==== | ====ionic3-calculateアプリの作成==== | ||
行 78: | 行 80: | ||
{{: | {{: | ||
- | Ctrl+@で、cmd.exeの画面を出して、ionic serveして、サーバを起動してきます。 | + | Ctrl+@で、cmd.exeの画面を出して、ionic serveして、サーバを起動しておきます。 |
< | < | ||
行 88: | 行 90: | ||
====src/ | ====src/ | ||
+ | |||
+ | ページの見栄えを作成します。「元本」と「利息」の入力欄と、1年後から10年後までの支払額のリストを表示する枠を作成します。home.htmlをごっそり、以下のように書き換えてください。 | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | 複利計算 | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | 10年後 | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | {{calc() | number}}円 | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
(変更前) | (変更前) | ||
+ | |||
+ | {{: | ||
(変更後) | (変更後) | ||
+ | {{: | ||
- | Ctrl+@で、cmd.exeの画面を出して、ionic serve | + | <コード解説1>\\ |
+ | < | ||
+ | <コード解説2>\\ | ||
< | < | ||
- | ionic serve | + | [(ngModel)]=" |
</ | </ | ||
+ | は、Angularの" | ||
+ | <コード解説3> | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | の部分は、Angularの" | ||
+ | |||
+ | <コード解説4> | ||
+ | < | ||
+ | | ||
+ | </ | ||
+ | の部分は、Angularの" | ||
+ | なお、" | ||
+ | |||
+ | (参考)\\ | ||
+ | ionic公式サイト:見栄えについては、こちらの公式サイトを読んで、ionic特有のUI(user interface: | ||
+ | https:// | ||
+ | |||
+ | 今回は、以下のページを参考に、stacked-labelsを使用しています。\\ | ||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | |||
+ | bootstrapのようなgridシステムも利用できます。\\ | ||
+ | https:// | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ====src/ | ||
+ | |||
+ | 元本と利息の入力を受け取り、10年後の支払額を計算して返すプログラムを記載します。home.tsを、ざっくり、下に置き換えます。 | ||
+ | |||
+ | < | ||
+ | import { Component } from ' | ||
+ | import { NavController } from ' | ||
+ | |||
+ | @Component({ | ||
+ | selector: ' | ||
+ | templateUrl: | ||
+ | }) | ||
+ | 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を返す関数を定義します。 | ||
+ | |||
+ | |||
+ | (変更前) | ||
+ | |||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ブラウザの画面で、元本と金利のところに数字を入力すると、自動的に10年後の金額が表示される。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | ====明細表示の追加==== | ||
+ | |||
+ | src/ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <tr | ||
+ | *ngFor=" | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | home.tsに以下を挿入 | ||
+ | |||
+ | < | ||
+ | // 年毎の金額計算 | ||
+ | calcArray(): | ||
+ | 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; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ====見栄えの変更==== | ||
+ | |||
+ | src/ | ||
+ | |||
+ | (変更前) | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | (変更後) | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | src/ | ||
+ | |||
+ | < | ||
+ | page-home { | ||
+ | h1,h2 { text-align: center; } | ||
+ | table { width: 100%; } | ||
+ | td {text-align: | ||
+ | |||
+ | / | ||
+ | div tr: | ||
+ | background-color: | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
+ | (参考) | ||
+ | |||
+ | 文字の左右・中央揃え【text-align】:CSS入門\\ | ||
+ | http:// | ||
+ | |||
+ | 2012-01-27 | ||
+ | CSS3で表を縞模様にする\\ | ||
+ | http:// | ||
+ | |||
+ | ====Androidアプリの作成==== | ||
+ | |||
+ | VisualStudioCodeのcmd.exeの画面で、Ctrl+C, | ||
+ | |||
+ | < | ||
+ | ionic cordova platform add android | ||
+ | ionic cordova build android | ||
+ | </ | ||
+ | 途中、何か聞かれたら、YとしてEnter. | ||
+ | {{: | ||
+ | 数分かかる。 | ||
+ | {{: | ||
+ | どこにandroid-debug.apkファイルが作成されたのか表示される(下図の赤で囲った部分)ので、その場所に保存されているapkファイルを、自分のスマホにメールします。 | ||
+ | {{: | ||
+ | {{: | ||
+ | ====Androidアプリのインストール==== | ||
+ | メールしたapkファイル(約4MB)を、自分のandroidスマホにインストールします。\\ | ||
+ | 今回は、arrows M03にインストールしてみました。 | ||
+ | {{: | ||
+ | ====ソースコード==== | ||
+ | https:// | ||
=====リンク===== | =====リンク===== | ||
前: | 前: |
ionic3で計算アプリ.txt · 最終更新: 2019/02/12 by adash333