ionic3で計算アプリ

差分

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

この比較画面へのリンク

--- ionic3で計算アプリ [2017/06/18] – [明細表示の追加] adash333
+++ ionic3で計算アプリ [2019/02/12] (現在) – [ionic3で計算アプリ] adash333
@@ 行 1: / 行 1: @@
 =====ionic3で計算アプリ=====
+ ---// 2019/02/12 更新//
+Ionic4バージョンは<wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:03.ionic4で計算アプリ|こちらへ]]</wrap>
 前回は、ionic3のおすすめの本を紹介させていただきました。\\
@@ 行 22: / 行 24: @@
 今回は、ionic3を用いて、「元本」と「利息」を入力すると、１０年後までの支払額が出力されるようなアプリを作成します。
+ソースコードは以下のリンクへ。
+https://github.com/adash333/ionic3-calculate
 ====ionic3-calculateアプリの作成====
@@ 行 141: / 行 147: @@
 </code>
 は、Angularの"双方向データバインド"を使用して、ここで入力値（元本と利息）を受け取っています。
+{{:pasted:20180610-185810.png}}
@@ 行 273: / 行 281: @@
 ====見栄えの変更====
-home.ts
+src/pages/home/home.html
 (変更前)
@@ 行 287: / 行 295: @@
   <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}}
@@ 行 298: / 行 324: @@
 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: / 行 365: @@
 次：
 <wrap hi>
-[[github上のionic3アプリのインストール]]
+[[ionic3でタイマーアプリ]]
 </wrap>

ionic3で計算アプリ.1497773888.txt.gz · 最終更新: 2018/10/07 (外部編集)