差分

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

--- 00.ionic4:08.ionic4でタイマーアプリ [2019/02/13] – [src/app/home/home.page.htmlの編集] adash333
+++ 00.ionic4:08.ionic4でタイマーアプリ [2019/08/28] (現在) – [Ionic4でタイマーアプリ] adash333
@@ 行 7: / 行 7: @@
 </html>
+===== ソースコードとDEMOサイト ======
+https://github.com/adash333/ionic4-timer
+DEMO
+https://confident-raman-5dbccc.netlify.com/
 ===== すること =====
   -スタートボタンを押すと、00：00：00からカウントアップする
@@ 行 14: / 行 19: @@
 ソースコード
+https://github.com/adash333/ionic4-timer
 DEMO
+https://confident-raman-5dbccc.netlify.com/
+{{:00.ionic4:pasted:20190213-153449.png}}
 ===== 開発環境 =====
@@ 行 24: / 行 30: @@
 Panasonic CF-RZ6
 Windows10 Pro (1803)
 VisualStudioCode
+git version 2.20.1.windows.1
-nvm-windows 1.1.7
+Node v10.15.1
-Node 10.15.1
 npm 6.4.1
-yarn 1.13.0
+Ionic (Ionic CLI) 4.10.2
-ionic@4.10.2
+@ionic/angular 4.0.1
-cordova@8.1.2
+@angula/pwa 0.13.1
 </code>
@@ 行 81: / 行 87: @@
   <ion-card color="dark">
     <img src="assets/img/sakura.jpg">
-    <ion-card-content>
+    <ion-card-content align="center">
-      <h1 text-align="center">{{ timer }}</h1>
+      <h1>{{ timer }}</h1>
     </ion-card-content>
   </ion-card>
@@ 行 115: / 行 121: @@
 </code>
 のところは、後で、home.page.tsで、timerを定義します。
-{{:00.ionic4:pasted:20190210-151954.png}}
+{{:00.ionic4:pasted:20190213-151155.png}}
 ===== src/app/home/home.page.tsの編集 =====
-home.page.htmlで記載した、{{ timer }}や、{{ startButton }}を定義します。
+home.page.htmlで記載した、''%%{{ timer }}%%''や、''%%{{ startButton }}%%''を定義します。
 <code javascript>
@@ 行 187: / 行 193: @@
 {{:00.ionic4:pasted:20190213-080242.png}}
-＜コード解説1＞
+STARTボタンを押すと、カウントアップし始めて、STOPボタンを押すと、カウントが停止します。
-Typescriptなので、以下のように型定義をしっかりしておかなくてはいけません。
+{{:00.ionic4:pasted:20190213-081252.png}}
+===== PWA（Progressive Web Apps）化 =====
+Ctrl+Cでいったんサーバを停止し、以下を入力します。
 <code>
-  initValue: number;  // 元本入力欄と双方向データバインド
+ng add @angular/pwa
-  rate: number;       // 金利入力欄と双方向データバインド
+// だめな場合は、npm run ng add @angular/pwa
 </code>
+{{:00.ionic4:pasted:20190212-081615.png}}
-＜コード解説2＞
+うまくいっているのかわかりませんが、とりあえず、GitHubを通して、Netlifyにデプロイしてみたいと思います。
-あとは、calc()という、initVlaueとrateから10年後の金額answerを返す関数を定義します。
+{{:00.ionic4:pasted:20190213-083156.png}}
-ブラウザの画面で、元本と金利のところに数字を入力すると、自動的に10年後の金額が表示されます。
+===== GitHubに登録 =====
-{{:00.ionic4:pasted:20190212-075816.png}}
+  -https://github.com/ にログインして、新規リポジトリを作成（今回は、ionic4-timerという名前にしました）
+  -以下を入力して、GitHubにpush
+<code>
+git add .
+git commit -m "first commit"
+git remote add origin https://github.com/adash333/ionic4-timer.git
+git push -u origin master
+</code>
+{{:00.ionic4:pasted:20190213-152316.png}}
+{{:00.ionic4:pasted:20190213-152406.png}}
+{{:00.ionic4:pasted:20190213-152559.png}}
+{{:00.ionic4:pasted:20190213-152612.png}}
+https://github.com/adash333/ionic4-timer
+===== Netlifyにデプロイ =====
+  -https://www.netlify.com/ にログイン
+  -New site from Git　をクリック
+  -GitHubから、ionic4-timerを選択
+  -''%%npm run build --prod%%''と、''www/''と入力して、Deploy site をクリック
+  -デプロイがうまくいったら、リンクをクリックして、確認します
+  -スマホで、上のアドレスへ行き、スマホにアプリとして登録できるかチェックします
-===== ソースコード =====
+{{:00.ionic4:pasted:20190213-152816.png}}
+{{:00.ionic4:pasted:20190213-152841.png}}
+{{:00.ionic4:pasted:20190213-153142.png}}
+{{:00.ionic4:pasted:20190213-153247.png}}
+===== ソースコード =====
+https://github.com/adash333/ionic4-timer
 DEMO
+https://confident-raman-5dbccc.netlify.com/
+{{:00.ionic4:pasted:20190213-153449.png}}
 ===== 今回写経した本 =====