差分

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

--- 00.ionic4:03.ionic4で計算アプリ [2019/02/12] – [src/app/home/home.page.tsの編集] adash333
+++ 00.ionic4:03.ionic4で計算アプリ [2019/02/13] (現在) – [新規Ionic4アプリの作成] adash333
@@ 行 1: / 行 1: @@
 ====== Ionic4で計算アプリ ======
- ---//2019/02/10 更新//
+ ---//2019/02/12 更新//
 Ionic4アプリ第1弾として、計算アプリを作成してみたいと思います。
@@ 行 15: / 行 15: @@
   -PWA化して、オフラインでもアプリとして利用できるようにする
-ソースコード
+https://github.com/adash333/ionic4-calculate
 DEMO
+https://musing-swartz-845c0d.netlify.com/
@@ 行 65: / 行 66: @@
 ionic serve
 </code>
-{{:00.ionic4:pasted:20190210-150425.png}}
+{{:00.ionic4:pasted:20190213-071108.png}}
-なお、サーバを停止するためには、Ctrl+C, Y, Enterの操作を行います。（Ubuntuだと、Ctrl+Cのみですぐにサーバ停止します。）
+なお、サーバを停止するためには、Ctrl+C, Y, Enterの操作を行います。
 ===== src/app/home/home.page.htmlの編集 =====
@@ 行 202: / 行 206: @@
 ===== 明細表示の追加 =====
 src/app/home/home.page.htmlの、最後から1行目に以下を挿入します。
@@ 行 241: / 行 244: @@
 {{:00.ionic4:pasted:20190212-080134.png}}
+===== 見栄えの変更 =====
+src/app/home/home.page.html
+(変更前)
-作成中
+<code>
+  <!--入力済みの場合に表示-->
+  <ion-card *ngIf="initValue && rate">
+    <ion-card-header>
+年後
+    </ion-card-header>
+    <!--結果表示-->
+    <ion-card-content>
+      {{calc() | number}}円
+    </ion-card-content>
+  </ion-card>
+</code>
+{{:00.ionic4:pasted:20190212-080321.png}}
+(変更後)
+<code>
+  <!--入力済みの場合に表示-->
+  <ion-card *ngIf="initValue && rate" color="primary">
+    <ion-card-header>
+      <h1>10年後</h1>
+    </ion-card-header>
+    <!--結果表示-->
+    <ion-card-content>
+      <h2>{{calc() | number}}円</h2>
+    </ion-card-content>
+  </ion-card>
+</code>
+{{:00.ionic4:pasted:20190212-080406.png}}
+src/app/home/home.page.scss　を以下に書き換えます。
+<code>
+h1,h2 { text-align: center; }
+table { width: 100%; }
+td {text-align: right; }
+/*偶数行目の背景を着色*/
+tr:nth-child(odd){
+  background-color: cornsilk;
+}
+</code>
+{{:00.ionic4:pasted:20190212-081104.png}}
+(参考)
+文字の左右・中央揃え【text-align】：CSS入門\\
+http://kumacrow.blog111.fc2.com/blog-entry-287.html
+-01-27
+CSS3で表を縞模様にする\\
+http://d.hatena.ne.jp/guimo/20120127/1327617371
+見栄えはかなり微妙ですが、このまま突き進んで、PWA化します。
+===== PWA（Progressive Web Apps）化 =====
+Ctrl+Cでいったんサーバを停止し、以下を入力します。
+<code>
+ng add @angular/pwa
+</code>
+{{:00.ionic4:pasted:20190212-081615.png}}
+うまくいっているのかわかりませんが、とりあえず、GitHubを通して、Netlifyにデプロイしてみたいと思います。
+（PWA化できているかどうかは、NetlifyのサイトをAndroidスマホで閲覧して、スマホにアプリとして登録し、オフラインで複利計算ができるかどうかを試すことによって、確認したいと思います。）
+===== GitHubに登録 =====
+  -https://github.com/ にログインして、新規リポジトリを作成（今回は、ionic4-calculateという名前にしました）
+  -以下を入力して、GitHubにpush
+<code>
+git add .
+git commit -m "first commit"
+git remote add origin https://github.com/adash333/ionic4-calculate.git
+git push -u origin master
+</code>
+{{:00.ionic4:pasted:20190212-081845.png}}
+{{:00.ionic4:pasted:20190212-082039.png}}
+{{:00.ionic4:pasted:20190212-082059.png}}
+===== Netlifyにデプロイ =====
+  -https://www.netlify.com/ にログイン
+  -New site from Git　をクリック
+  -GitHubから、ionic4-calculateを選択
+  -''%%npm run build --prod%%''と、''www/''と入力して、Deploy site をクリック
+  -デプロイがうまくいったら、リンクをクリックして、確認します
+  -スマホで、上のアドレスへ行き、スマホにアプリとして登録できるかチェックします
+{{:00.ionic4:pasted:20190212-082212.png}}
+{{:00.ionic4:pasted:20190212-082256.png}}
+{{:00.ionic4:pasted:20190212-082610.png}}
+{{:00.ionic4:pasted:20190212-082706.png}}
+  *PWA化されたかどうかは、『スマホで、5分以上間隔をあけて、サイトに2回訪問したときに、”ホーム画面に追加”の表示が出るかどうか』で判断することとします。結構面倒ですね。
+===== ソースコード =====
+https://github.com/adash333/ionic4-calculate
+DEMO
+https://musing-swartz-845c0d.netlify.com/
 ===== 今回写経した本 =====
 <html>
@@ 行 267: / 行 365: @@
 前：[[00.ionic4:02.おすすめのionic入門書2019年版|おすすめのIonic入門書2019年版]]
-次：
+次：[[00.ionic4:04.ionic4とfirebaseで掲示板part1|Ionic4とFirebaseでEmail認証つき掲示板 Part.1]]