とにかく3分はかってみる：3分タイマー
実装の目次
- UIを表示する
- UIをクリックできるようにする
- UIをクリックしたらカウントダウンを開始する
- タイムアップの処理を追加する
- 改良版
UIを表示する
Jetpack の API である jetpack.statusBar.append を使い、ステータスバーにUIを表示します。
jetpack.statusBar.append({
html: '<span id="disp">JetTimer</span>',
width: 100,
onReady: function(doc) {
// UI表示直後に実行する処理
}
});
UIをクリックできるようにする
UI表示直後に実行する処理として、<span>タグで実装したUIをクリックできるようにします。onReady の引数 doc はUIとして表示されるHTMLの document オブジェクトです。この doc から jQuery を使って <span> タグで実装したUIを参照し、クリック時の処理を追加します。
jetpack.statusBar.append({
html: '<span id="disp">JetTimer</span>',
width: 100,
onReady: function(doc) {
//コード追加ここから -----------
$("#disp", doc).click(function() {
// UIをクリックしたときの処理
});
//コード追加ここまで -----------
}
});
UIをクリックしたらカウントダウンを開始する
UIをクリックしたときの処理として、setInterval を使って1秒おきにカウントダウンを行います。その前に、グローバルな変数 count を宣言してカウントダウン開始時点の残り秒数である180をセットしておきます。
setInterval で1秒ごとに実行される処理として、変数 count の値を1減らし、ステータスバーのUIに「あと○○秒」と表示します。
なお、 setInterval は Jetpack のAPIのひとつであり、 window.setInterval と同様の使い方ができます。
var count = 3 * 60;//コード追加
jetpack.statusBar.append({
html: '<span id="disp">JetTimer</span>',
width: 100,
onReady: function(doc) {
$("#disp", doc).click(function() {
//コード追加ここから -----------
setInterval(function() {
count--;
$("#disp", doc).text("あと" + count + "秒");
}, 1000);
//コード追加ここまで -----------
});
}
});
タイムアップの処理を追加する
変数 count が0になったら jetpack.notifications のAPIを使って「タイムアップ！」と通知を表示し、 setInterval による繰り返し処理を中止するようにします。繰り返し処理を中止するには、 setInterval の戻り値であるタイマーのIDを引数として clearInterval を呼び出します。
var count = 3 * 60;
jetpack.statusBar.append({
html: '<span id="disp">JetTimer</span>',
width: 100,
onReady: function(doc) {
$("#disp", doc).click(function() {
var timerId = setInterval(function() { //コード変更
count--;
$("#disp", doc).text("あと" + count + "秒");
//コード追加ここから -----------
if (count == 0) {
jetpack.notifications.show("タイムアップ！");
clearInterval(timerId);
}
//コード追加ここまで -----------
}, 1000);
});
}
});
改良版
以上でとにかく3分はかってみるだけの機能は実装できました。しかし、以下のように色々と改善の余地があります。
- ソースコードのインデントが深すぎて見通しが悪い
- 「あと○○分○○秒」と表示したい
- タイムアップした後に再度カウントダウン開始できるようにしたい
- カウントダウン中に再度クリックするとバグる
これらについて対応した改良版 JetTimer は以下のURLから入手可能です。