サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


00.ionic4:08.ionic4でタイマーアプリ


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
00.ionic4:08.ionic4でタイマーアプリ [2019/02/13] – [src/app/home/home.page.tsの編集] adash33300.ionic4:08.ionic4でタイマーアプリ [2019/08/28] (現在) – [Ionic4でタイマーアプリ] adash333
行 7: 行 7:
 </html> </html>
  
 +===== ソースコードとDEMOサイト ======
 +https://github.com/adash333/ionic4-timer
 +
 +DEMO
 +https://confident-raman-5dbccc.netlify.com/
 ===== すること ===== ===== すること =====
   -スタートボタンを押すと、00:00:00からカウントアップする   -スタートボタンを押すと、00:00:00からカウントアップする
行 14: 行 19:
  
 ソースコード ソースコード
 +https://github.com/adash333/ionic4-timer
  
 DEMO DEMO
 +https://confident-raman-5dbccc.netlify.com/ 
 +{{:00.ionic4:pasted:20190213-153449.png}}
  
 ===== 開発環境 ===== ===== 開発環境 =====
行 24: 行 30:
 Panasonic CF-RZ6 Panasonic CF-RZ6
 Windows10 Pro (1803) Windows10 Pro (1803)
-VisualStudioCode +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 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> </code>
  
行 115: 行 121:
 </code> </code>
 のところは、後で、home.page.tsで、timerを定義します。 のところは、後で、home.page.tsで、timerを定義します。
-{{:00.ionic4:pasted:20190210-151954.png}}+{{:00.ionic4:pasted:20190213-151155.png}}
  
 ===== src/app/home/home.page.tsの編集 ===== ===== src/app/home/home.page.tsの編集 =====
行 189: 行 195:
 STARTボタンを押すと、カウントアップし始めて、STOPボタンを押すと、カウントが停止します。 STARTボタンを押すと、カウントアップし始めて、STOPボタンを押すと、カウントが停止します。
 {{:00.ionic4:pasted:20190213-081252.png}} {{:00.ionic4:pasted:20190213-081252.png}}
-===== ソースコード ===== 
  
 +===== PWA(Progressive Web Apps)化 =====
 +Ctrl+Cでいったんサーバを停止し、以下を入力します。
 +
 +<code>
 +ng add @angular/pwa
 +// だめな場合は、npm run ng add @angular/pwa
 +</code>
 +{{:00.ionic4:pasted:20190212-081615.png}}
 +
 +うまくいっているのかわかりませんが、とりあえず、GitHubを通して、Netlifyにデプロイしてみたいと思います。
 +{{:00.ionic4:pasted:20190213-083156.png}}
 +
 +===== GitHubに登録 =====
 +  -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 DEMO
 +https://confident-raman-5dbccc.netlify.com/
 +{{:00.ionic4:pasted:20190213-153449.png}}
  
 ===== 今回写経した本 ===== ===== 今回写経した本 =====


00.ionic4/08.ionic4でタイマーアプリ.1550045574.txt.gz · 最終更新: 2019/02/13 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki