文書の過去の版を表示しています。

Ionic4でタイマーアプリ

—2019/02/13 更新

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

すること

スタートボタンを押すと、00：00：00からカウントアップする
ストップボタンを押すと、カウントアップが止まる
リセットボタンを押すと、カウントがリセットされる
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

新規Ionic4アプリの作成

VisualStudioCodeでWindowsのC:/ionic/フォルダを開く
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がインストールされます）

src/app/home/home.page.htmlの編集

ページの見栄えを作成します。

photoACから、さくらの画像ファイルをダウンロードして、sakura.jpgという名前に変更します。
src/assets/images/ フォルダを新規作成して、その中に、sakuar.jpgを移動します。

src/app/home/home.page.html

(変更前)

(変更後)

＜コード解説1＞
<ion-xxx>というところは、全て、ionic特有のUI（見栄え）の表記です。ionicの公式ドキュメントを参照しつつ、入力します。

＜コード解説2＞
Ionic4で画像ファイルなどを保存する場所は、src/app/assets/ フォルダに、img/ フォルダを作成し、その中にjpgファイルなど(たとえば、sakura.jpg　など)を保存します。
その後、画像ファイルをsrc/home/home.page.htmlなどで表示する場合は、以下のように表記します。