ionic3で計算アプリ
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
ionic3で計算アプリ [2017/06/18] adash333 [明細表示の追加] |
ionic3で計算アプリ [2018/10/07] (現在) |
||
|---|---|---|---|
| ライン 22: | ライン 22: | ||
| 今回は、ionic3を用いて、「元本」と「利息」を入力すると、１０年後までの支払額が出力されるようなアプリを作成します。 | 今回は、ionic3を用いて、「元本」と「利息」を入力すると、１０年後までの支払額が出力されるようなアプリを作成します。 | ||
| + | |||
| + | ソースコードは以下のリンクへ。 | ||
| + | |||
| + | https://github.com/adash333/ionic3-calculate | ||
| ====ionic3-calculateアプリの作成==== | ====ionic3-calculateアプリの作成==== | ||
| ライン 141: | ライン 145: | ||
| </code> | </code> | ||
| は、Angularの"双方向データバインド"を使用して、ここで入力値（元本と利息）を受け取っています。 | は、Angularの"双方向データバインド"を使用して、ここで入力値（元本と利息）を受け取っています。 | ||
| + | |||
| + | {{:pasted:20180610-185810.png}} | ||
| ライン 273: | ライン 279: | ||
| ====見栄えの変更==== | ====見栄えの変更==== | ||
| - | home.ts | + | src/pages/home/home.html |
| (変更前) | (変更前) | ||
| ライン 287: | ライン 293: | ||
| <ion-card *ngIf="initValue && rate" color="primary"> | <ion-card *ngIf="initValue && rate" color="primary"> | ||
| </code> | </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}} | ||
| + | |||
| ライン 298: | ライン 322: | ||
| http://d.hatena.ne.jp/guimo/20120127/1327617371 | 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 | ||
| =====リンク===== | =====リンク===== | ||
| 前： | 前： | ||
| ライン 314: | ライン 363: | ||
| 次： | 次： | ||
| <wrap hi> | <wrap hi> | ||
| - | [[github上のionic3アプリのインストール]] | + | [[ionic3でタイマーアプリ]] |
| </wrap> | </wrap> | ||
ionic3で計算アプリ.1497773888.txt.gz · 最終更新: 2018/10/07 (外部編集)
