ionic3で計算アプリ
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
ionic3で計算アプリ [2017/06/18] – [src/pages/home/home.tsの変更] adash333 | ionic3で計算アプリ [2019/02/12] (現在) – [ionic3で計算アプリ] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
=====ionic3で計算アプリ===== | =====ionic3で計算アプリ===== | ||
+ | ---// 2019/02/12 更新// | ||
+ | Ionic4バージョンは< | ||
前回は、ionic3のおすすめの本を紹介させていただきました。\\ | 前回は、ionic3のおすすめの本を紹介させていただきました。\\ | ||
行 22: | 行 24: | ||
今回は、ionic3を用いて、「元本」と「利息」を入力すると、10年後までの支払額が出力されるようなアプリを作成します。 | 今回は、ionic3を用いて、「元本」と「利息」を入力すると、10年後までの支払額が出力されるようなアプリを作成します。 | ||
+ | |||
+ | ソースコードは以下のリンクへ。 | ||
+ | |||
+ | https:// | ||
====ionic3-calculateアプリの作成==== | ====ionic3-calculateアプリの作成==== | ||
行 141: | 行 147: | ||
</ | </ | ||
は、Angularの" | は、Angularの" | ||
+ | |||
+ | {{: | ||
+ | |||
<コード解説3> | <コード解説3> | ||
行 152: | 行 161: | ||
| | ||
</ | </ | ||
- | の部分は、Angularの" | + | の部分は、Angularの" |
+ | なお、" | ||
(参考)\\ | (参考)\\ | ||
行 229: | 行 239: | ||
+ | ====明細表示の追加==== | ||
+ | |||
+ | 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:// | ||
=====リンク===== | =====リンク===== | ||
前: | 前: | ||
行 242: | 行 365: | ||
次: | 次: | ||
<wrap hi> | <wrap hi> | ||
- | [[github上のionic3アプリのインストール]] | + | [[ionic3でタイマーアプリ]] |
</ | </ |
ionic3で計算アプリ.txt · 最終更新: 2019/02/12 by adash333