ionic3で計算アプリ
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
ionic3で計算アプリ [2017/06/18] – [明細表示の追加と、見栄えの変更] adash333 | ionic3で計算アプリ [2017/06/19] – [リンク] adash333 | ||
---|---|---|---|
行 22: | 行 22: | ||
今回は、ionic3を用いて、「元本」と「利息」を入力すると、10年後までの支払額が出力されるようなアプリを作成します。 | 今回は、ionic3を用いて、「元本」と「利息」を入力すると、10年後までの支払額が出力されるようなアプリを作成します。 | ||
+ | |||
+ | ソースコードは以下のリンクへ。 | ||
+ | |||
+ | https:// | ||
====ionic3-calculateアプリの作成==== | ====ionic3-calculateアプリの作成==== | ||
行 233: | 行 237: | ||
====明細表示の追加==== | ====明細表示の追加==== | ||
- | home.htmlの、最後から1行目に以下を挿入 | + | src/ |
< | < | ||
行 273: | 行 277: | ||
====見栄えの変更==== | ====見栄えの変更==== | ||
- | home.ts | + | src/ |
+ | |||
+ | (変更前) | ||
< | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | (変更後) | ||
+ | < | ||
+ | < | ||
+ | < | ||
</ | </ | ||
+ | |||
+ | src/ | ||
+ | |||
+ | < | ||
+ | page-home { | ||
+ | h1,h2 { text-align: center; } | ||
+ | table { width: 100%; } | ||
+ | td {text-align: | ||
+ | |||
+ | / | ||
+ | div tr: | ||
+ | background-color: | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | {{: | ||
行 290: | 行 320: | ||
http:// | 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:// | ||
=====リンク===== | =====リンク===== | ||
前: | 前: | ||
行 306: | 行 361: | ||
次: | 次: | ||
<wrap hi> | <wrap hi> | ||
- | [[github上のionic3アプリのインストール]] | + | [[ionic3でタイマーアプリ]] |
</ | </ |
ionic3で計算アプリ.txt · 最終更新: 2019/02/12 by adash333