はじめに
自分たちのチームでは振り返りや意思決定などをオンラインで行う場合、miroやGoogleDocumentなどの複数人で同時編集が可能なサービスを画面共有しながら会話をしています。
「時間を決めて各々で少し考えてみましょう。」みたいな時に、ブラウザを使いながらタイマーがあると便利な瞬間があります。Chromeの拡張機能でもいいのですが、これくらいなら生のJavaScriptを書いたり、ブックマークレットで実装してしまった方が早いかなと思い今回作ってみました。
JavaScript版
コードは下記の通りです。
let count = 10;
const countDown = () => {
console.log(--count);
}
const intervalId = setInterval(() => {
countDown();
if (count == 0) {
clearInterval(intervalId);
alert('finish')
}
}, 1000);至ってシンプルです。setInterval(func, count)は引数で指定した秒数間隔で処理を実行させる組み込み関数です。カウントがゼロになったらclearInterval(id)でsetInterval(func, count)を停止します。
Chromeのディベロッパツールを開き、「コンソール」タブでそのまま貼り付けて使って下さい。下図の様なカウントダウンの後にアラートが表示されるはずです。
音を鳴らす
ついでに音も鳴らしてみましょう。
const soundUrl = 'https://taira-komori.jpn.org/sound/playing01/pianoC2.mp3';
const music = new Audio(soundUrl);
music.play();上記のコードを先程のスクリプトに追記して同様にディベロッパツールのコンソールから実行してみて下さい。
最終的なコードは下記の通りです。
let count = 10;
const soundUrl = 'https://taira-komori.jpn.org/sound/playing01/pianoC2.mp3';
const music = new Audio(soundUrl);
const countDown = () => {
console.log(--count);
}
const intervalId = setInterval(() => {
countDown();
if (count == 0) {
clearInterval(intervalId);
music.play();
alert('finish');
}
}, 1000);以上です。