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

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

ユーザ用ツール

サイト用ツール


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


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
00.ionic4:08.ionic4でタイマーアプリ [2019/02/13] – [PWA(Progressive Web Apps)化] 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>
  
行 202: 行 208:
 {{:00.ionic4:pasted:20190213-083156.png}} {{: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でタイマーアプリ.1550071144.txt.gz · 最終更新: 2019/02/13 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki