【WEBアプリ】 ストップウォッチアプリ
第3回は、ストップウォッチアプリを作っていきます。
今回作成するのは、再生ボタン・一時停止ボタン・リセットボタンの機能を備えた簡単なストップウォッチアプリです。
1. 初期データのダウンロード
① 以下のURLにアクセス
https://drive.google.com/drive/folders/1BVQqkWrx4nIhZA8WTFfHLWgX2JjgJ2CY?usp=sharing
② ストップウォッチアプリ 教材.zip をダウンロード
③ ダウンロードにあるZipファイルを解凍。
④
の「基本的なはじめ方」を参考に準備する。
2. 数字のカウントアップ
① 必要なテキスト・ボタンの配置
② 開始ボタンで数字を変更
onclick や function がわからない人は、
の「 ② ボタンを押したらアラート」を見よう。
document.getElementById、がわからない人は、第1回の
の「 ④ 増えていく、numberをテキストに反映させる。 」を参考にしよう。
③ 1秒ごとにカウントする
startTimer()の関数名を、countUpSecond()に変更しよう。
それとは別に、startTimer()という関数をもう1度作ろう。
つまり、1000ミリ秒(= 1秒)ごとに、関数 countUpSecond() が呼び出されて、カウントが1増えて表示されている。
3. ストップボタンを押せるようにしよう
① 「一時停止」と名前が変わるようにしよう
まず、開始ボタンにidをつけよう。
そして、開始ボタンが押されたタイミングで、ボタン文字が変わるようにしよう。
ボタンのテキストの変更は、textContentを使うよ。
② もう1回押したら、開始に戻るようにしよう
ここで、フラグ変数を使っていく。
タイマーが今動いているかどうかを表す変数、timerIsActiveを定義するよ。
一番最初に、画面が読み込まれた時は、タイマーは動いていないから、最初はfalse(偽)に設定しておく。
変数で習った、=の意味を思い出そう。
つまり、
は、
timerIsActiveがtrueの時(タイマーが動いてる時)、
timerIsActiveをfalseにする。
timerIsActiveがfalseの時(タイマーが動いていない時)、
timerIsActiveをtrueにする。
ことを表している。
といっても、難しいので、
Consoleを使って確認してみよう。
ここで、timerIsActive がfalseだったら、開始と表示して、trueだったら、一時停止と表示しよう。
③ コードを省略して書こう。
実は、コードが長くなってしまうと読みにくいため、いくつか省略してかけるので、変更してみよう。
second++は、
second = second + 1 を表す。
1足したい時や、1引きたい時だけ使える。
変数名 == true、は == true の部分を省略できるよ。
④ わからなくならないようにコメントを残そう
コメントとは、どのコードが何を書いてるかがわからなくならないように残すメモのこと。
実行結果には全く影響がない。
⑤ 実際に一時停止するようにしよう
さっき書いた、setInterval(一定時間ごとの関数呼び出し)に名前をつけよう。
名前の付け方は、変数に代入するのと同じやり方だよ。
ついでに、setIntervalをする場所を変えよう。
そして、一時停止するときに、timerを停止しよう。
今回は、タイマーの名前をtimerにしているが、なんでも支障はない。
4. 秒ではなく、分や時も表示しよう。
今の段階では、1分を過ぎたとしても、80 秒などと表示される。
そこで、表示するときに、分や時も表示していく。
① 分などを入れる場所を作ろう
② 時分秒を計算しよう
secondという変数とtimeという名前に変えよう。
秒や分、時を入れておける変数を作ろう。
秒から時や分を求めるのは簡単。
1時間 = 3600秒
1分 = 60秒
なので、これを使って計算していく。
時…timeを3600で割って切り捨て
分…timeから時(hour)分秒すうを引いてから、60で割って切り捨て
秒…timeを60で割ったあまり
と計算できる。
なぜか、うまく表示されない。
これは、表示するdocument.getElementByIdをしっかり書いていないから。
5. リセットボタンが動くようにしよう
【TRY】 リセットボタンを押したら、リセットしよう。
※できるだけ、解答を見ずにやってみよう。
【解答】 リセットボタンが動くようにしよう
6. デザインを整えよう
【TRY】 ストットアプリと同じようにデザインを整えよう。
わからなかったら、前回のスロットアプリの
5. デザインを調整しよう をみよう
【解答】 デザインを整えよう
7. 完成
これで完成です。
お疲れ様でした。
8. 解答データ
① 以下のURLにアクセス
https://drive.google.com/drive/folders/1BVQqkWrx4nIhZA8WTFfHLWgX2JjgJ2CY?usp=sharing
② ストップウォッチアプリ 解答.zip をダウンロード
9. 次回予告
次回は、宝探しゲームを作成します。
お楽しみに。
宝探しゲーム