SVGでタイマーを作る
Scalable Vector Graphics（SVG）を用いて、「タイマー」を作りました。
長方形（バー）が縮むことで、時間経過が見えるタイマーです。
記事「1分タイマーの作り方2」では、Canvasを使いましたが、今回はSVGを使います。
（注）SVG（Scalable Vector Graphics）
SVGプログラミングの詳細は、前回記事「SVGで長方形を描く」をご参照ください。
以前、記事「1分タイマーの作り方」で、1分のカウントダウンタイマーをプログラミングしました。
また、記事「SVGで長方形を描く」で、長方形の描画と移動をプログラミングしました。
今回は、上記2つのプログラムを組み合わせることで、長方形の長さ変化により時間経過が見えるタイマーを作ります。
長方形（バー）が縮んでいくタイマー
- タイマー部： 1分のカウントダウンタイマー
- バー描画部： 長方形の描画・変形
（注）タイマー部やバー描画部の詳しい説明は、上記2つの記事をご覧ください。
1分タイマーのタイマー部
プログラム（タイマー部）
タイマーに関する行を、マーカー表示しました。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UYF-8" />
<title>One Minute SVG Bar Timer</title>
<script type="text/javascript">
//
// グローバル変数
//
// タイマー関連
var timer_ID; // タイマーID
var time; //
var set_time = 60; // 設定時間： 60(秒) = 1(分)
var interval = 1000; // 時間間隔： 1000(ミリ秒) = 1(秒)
// SVG関連
var w = 300; // 長方形の横幅（pixel）
var svgRect; //
//
// 長方形の変形、timeの更新
//
function Rectangle() {
time--;
svgRect.setAttribute("width", w*(time/set_time));
if (time==0) {
clearInterval(timer_ID);
}
}
//
// 長方形要素の取得、タイマーの設定
//
window.onload = function() {
//
svgRect = document.getElementById("rect");
//
timer_ID = setInterval("Rectangle()", interval);
time = set_time;
}
</script>
</head>
<body>
<svg width="300" height="50" style="background: green">
<rect id="rect" fill="orange" width="300" height="50">
</svg>
</body>
</html>
プログラム（タイマー部）の説明
グローバル変数は４個、関数は２個（Rectangle, function）です。
グローバル変数
- timer_ID： タイマーを識別するＩＤ
- time ： 経過時間を保存する変数
- set_time： 設定時間、60秒で初期化
- interval ： 時間間隔、1秒（1000ミリ秒）で初期化
window.onload = function()
この関数に、オンロード直後に実行するプログラムを記述します。
上記プログラムの35行目で、タイマーを設定しています。
timer_ID = setInterval("Rectangle()", interval);
1秒間隔で、Rectangle()関数を呼び出します。
36行目で、変数timeに値60を代入しています。
time = set_time;
（注）setInterval関数の詳しい説明は、記事「１分タイマーの作り方」をご参照ください。
Rectangle()
22行目で、変数timeから1引いています。
time--;
Rectangle()関数は、1秒に一回動きます。
すなわち、Rectangle()関数が動いたときは、前回動いたときより1秒経過しています。
24行目から26行目で、タイマーを消去しています。
if (time==0) {
clearInterval(timer_id);
}
変数timeの値が「0」ならば、タイマーを消去します。
1分タイマーのバー描画部
プログラム（バー描画部）
プログラムの内容は、プログラム（タイマー部）と同じです。
バーの描画に関する行を、マーカー表示しました。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UYF-8" />
<title>One Minute SVG Bar Timer</title>
<script type="text/javascript">
//
// グローバル変数
//
// タイマー関連
var timer_ID; // タイマーID
var time; //
var set_time = 60; // 設定時間： 60(秒) = 1(分)
var interval = 1000; // 時間間隔： 1000(ミリ秒) = 1(秒)
// SVG関連
var w = 300; // 長方形の横幅（pixel）
var svgRect; //
//
// 長方形の変形、timeの更新
//
function Rectangle() {
time--;
svgRect.setAttribute("width", w*(time/set_time));
if (time==0) {
clearInterval(timer_ID);
}
}
//
// 長方形要素の取得、タイマーの設定
//
window.onload = function() {
//
svgRect = document.getElementById("rect");
//
timer_ID = setInterval("Rectangle()", interval);
time = set_time;
}
</script>
</head>
<body>
<svg width="300" height="50" style="background: green">
<rect id="rect" fill="orange" width="300" height="50">
</svg>
</body>
</html>
プログラム（バー描画部）の説明
グローバル変数は2個、関数は2個（Rectangle, function）、要素は2個（svg, rect）です。
svg要素
<svg width="300" height="50" style="background: green"> </svg>
- width： svgの横幅は300px
- height： svgの高さは50px
- style ： ”background: green”
rect要素
<rect id="rect" fill="orange" width="300" height="50">
- width： rectの横幅は300px
- height： rectの高さは50px
- id ： ”rect”
- fill ： ”orange”
グローバル変数
- w ： バーの長さ、300で初期化
- svgRect： rect要素を保存する変数
window.onload = function()
33行目で、変数ｓｖｇRectに、rect要素を代入しています。
svgRect = document.getElementById("rect");
Rectangle()
23行目で、バーの長さを「1秒分」縮めています。
svgRect.setAttribute("width", w*(time/set_time));
setAttributeメソッドを用いて、width属性を書き換えています。
13行目、16行目より、wが300、set_timeが60なので、w*(time/set_time)の値は以下となります。
- timeが60のとき： 300*(60/60) = 300
- timeが30のとき： 300*(30/60) = 150
- timeが 0のとき： 300*( 0/60) = 0
