差分

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

--- 00.ionic4:03.ionic4で計算アプリ [2019/02/12] – [明細表示の追加] 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の操作を行います。
+以下の操作でもよいです。
+<code>
+ionic serve --lab
+</code>
+? Install @ionic/lab? には、Enterを入力します。（@ionic/labがインストールされます）
+{{:00.ionic4:pasted:20190213-071421.png}}
 ===== src/app/home/home.page.htmlの編集 =====
@@ 行 298: / 行 309: @@
 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>
@@ 行 319: / 行 372: @@
 前：[[00.ionic4:02.おすすめのionic入門書2019年版|おすすめのIonic入門書2019年版]]
-次：
+次：[[00.ionic4:04.ionic4とfirebaseで掲示板part1|Ionic4とFirebaseでEmail認証つき掲示板 Part.1]]