—2019/02/13 更新

今回は、以下の本のタイマーアプリを、Ionic4で実装してみたいと思います。

1. スタートボタンを押すと、00：00：00からカウントアップする
2. ストップボタンを押すと、カウントアップが止まる
3. リセットボタンを押すと、カウントがリセットされる
4. PWA化して、オフラインでもアプリとして利用できるようにする

ソースコード

DEMO

WindowsでのIonic4環境構築方法については、WindowsでIonicを始める方法をご覧ください。

Panasonic CF-RZ6
Windows10 Pro (1803)
VisualStudioCode 

nvm-windows 1.1.7
Node 10.15.1
npm 6.4.1
yarn 1.13.0
ionic@4.10.2
cordova@8.1.2

1. VisualStudioCodeでWindowsのC:/ionic/フォルダを開く
2. Ctrl+@でターミナル画面を開いて、以下を入力します

cd ionic
ionic start ionic4-timer blank --type=angular
// 何か聞かれたら、n + Enter

数分待ちます。

• 以下を入力して、サーバを起動します。

cd ionic4-timer
ionic serve

なお、サーバを停止するためには、Ctrl+C, Y, Enterの操作を行います。

以下の操作でもよいです。

ionic serve --lab

? Install @ionic/lab? には、Enterを入力します。（@ionic/labがインストールされます）

DEMO

http://twosquirrel.mints.ne.jp/?p=16984
Ionic3でタイマーアプリ
2017/5/13 2017/5/14

Ionic3バージョンのソースコード
https://github.com/adash333/ionic3-timer

目次：スマホ用ホームページ&スマホアプリ作成ソフトIonic4

前：

次：