アナログ時計の作り方 for IE5 Later

本サイトのDHTML Samples NEO for ie4/5にある 56、 57、 58、 59、 60、 61、 62、 63 番では、IE5以降で動作するアナログ時計を掲載しています。いずれも、IE4以降で利用できるDirect Animationを利用し、位置指定にIE5以降で利用できるDynamic Propertiesを使っています。が、ここでのテーマは、そのへんの技術的な話題ではありません。とにかく、ソースをいじって自分だけのアナログ時計を作ることです。DynamicHTMLやJavaScript、スタイルシートの知識がなくても、ソースを編集してオリジナルの時計を作れるように解説します(これらの知識があれば、もっと楽しい編集ができると思います)。

まずは、基本となる全ソースを示します。ブラウザでの表示はここをクリックしてください。時計を作るには、まず以下のソースをコピーし、エディタにペーストとし、本稿を参考に修正してHTMLファイルを編集し、ブラウザに読み込むという流れになります。なお、ソース中の赤で示した箇所が修正のポイントになるところです。完成した時計は、ご自分のホームページで自由に使っていただいてOKです。そして、｢これは!｣という時計ができたら、私あてにメールで送ってもらうとうれしいです(詳細は最後の作品募集で : 現在は募集しておりません)。

<HTML>
<HEAD>
<TITLE>DHTML SAMPLES</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<SCRIPT LANGUAGE="JavaScript1.2">
function setClock()	{
	var today = new Date()
	var HOUR = today.getHours()
		if(HOUR > 12)	{
			HOUR = HOUR - 12
		}
	var MINUTE = today.getMinutes()
	var SECOND = today.getSeconds()
	if(SECOND == 0)	{
		setTimeout("setClock()",1000)
	} else	{
		secondHand.Rotate(0,0,SECOND*6)
		longHand.Rotate(0,0,MINUTE*60/10)
		shortHand.Rotate(0,0,(HOUR*60*60+MINUTE*60)/120)
		clockHeart()
	}
}

//var baseSecond
function clockHeart()	{
	tmpToday = new Date()
	var baseSecond = tmpToday.getSeconds()
	secondHand.SetIdentity()
	secondHand.Rotate(0,0,baseSecond*6)
		if(baseSecond == 0)	{
			var baseMinute = tmpToday.getMinutes()
			longHand.SetIdentity()
			longHand.Rotate(0,0,baseMinute*60/10)

			var baseHour = tmpToday.getHours()
				if(baseHour > 12)	{
					baseHour = baseHour - 12
				}
			shortHand.SetIdentity()
			shortHand.Rotate(0,0,(baseHour*60*60+baseMinute*60)/120)
		}
	setTimeout("clockHeart()",1000)
}

function divSet(){
	secondHand.style.setExpression("left","document.body.clientWidth/2 - secondHand.offsetWidth/2");
	secondHand.style.setExpression("top","document.body.clientHeight/2 - secondHand.offsetHeight/2");
	shortHand.style.setExpression("left","document.body.clientWidth/2 - secondHand.offsetWidth/2");
	shortHand.style.setExpression("top","document.body.clientHeight/2 - secondHand.offsetHeight/2");
	longHand.style.setExpression("left","document.body.clientWidth/2 - secondHand.offsetWidth/2");
	longHand.style.setExpression("top","document.body.clientHeight/2 - secondHand.offsetHeight/2");

	num0.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*-3)*100 - num0.offsetWidth/2")
	num0.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*-3)*100 - num0.offsetHeight/2")

	num1.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*-2)*100 - num1.offsetWidth/2")
	num1.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*-2)*100 - num1.offsetHeight/2")

	num2.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*-1)*100 - num2.offsetWidth/2")
	num2.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*-1)*100 - num2.offsetHeight/2")

	num3.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*0)*100 - num3.offsetWidth/2")
	num3.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*0)*100 - num3.offsetHeight/2")

	num4.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*1)*100 - num4.offsetWidth/2")
	num4.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*1)*100 - num4.offsetHeight/2")

	num5.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*2)*100 - num5.offsetWidth/2")
	num5.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*2)*100 - num5.offsetHeight/2")

	num6.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*3)*100 - num6.offsetWidth/2")
	num6.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*3)*100 - num6.offsetHeight/2")

	num7.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*4)*100 - num7.offsetWidth/2")
	num7.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*4)*100 - num7.offsetHeight/2")

	num8.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*5)*100 - num8.offsetWidth/2")
	num8.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*5)*100 - num8.offsetHeight/2")

	num9.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*6)*100 - num9.offsetWidth/2")
	num9.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*6)*100 - num9.offsetHeight/2")

	num10.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*7)*100 - num10.offsetWidth/2")
	num10.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*7)*100 - num10.offsetHeight/2")

	num11.style.setExpression("left","document.body.clientWidth/2 + Math.cos(Math.PI*2/12*8)*100 - num11.offsetWidth/2")
	num11.style.setExpression("top","document.body.clientHeight/2 + Math.sin(Math.PI*2/12*8)*100 - num11.offsetHeight/2")


	clockCircle.style.setExpression("left","document.body.clientWidth/2 - clockCircle.offsetWidth/2")
	clockCircle.style.setExpression("top","document.body.clientHeight/2 - clockCircle.offsetHeight/2")

}

</SCRIPT>

<STYLE TYPE="text/css">

.number	{	position:absolute;width:30;height:30;
		font-size:30;font-family:Arial;
		text-align:center;color:white;
		filter:shadow(color="black",direction=135);
	}
.clockArea	{	position:absolute;width:240;height:240;
			background-color:pink;
		}

</STYLE>
</HEAD>

<BODY onload="divSet();setClock();">
<DIV ID="clockCircle" class="clockArea">
</DIV>
<!--以下、1-12の数値-->
<DIV ID="num0" CLASS="number">12</DIV>
<DIV ID="num1" CLASS="number">1</DIV>
<DIV ID="num2" CLASS="number">2</DIV>
<DIV ID="num3" CLASS="number">3</DIV>
<DIV ID="num4" CLASS="number">4</DIV>
<DIV ID="num5" CLASS="number">5</DIV>
<DIV ID="num6" CLASS="number">6</DIV>
<DIV ID="num7" CLASS="number">7</DIV>
<DIV ID="num8" CLASS="number">8</DIV>
<DIV ID="num9" CLASS="number">9</DIV>
<DIV ID="num10" CLASS="number">10</DIV>
<DIV ID="num11" CLASS="number">11</DIV>

<!-- 秒針 -->
<OBJECT ID="secondHand" CLASSID="clsid:369303C2-D7AC-11d0-89D5-00A0C90833E6"
 STYLE="position:absolute;width:200;height:200;">
<PARAM NAME="Line0001" VALUE="SetLineColor(0,0,0)">
<PARAM NAME="Line0002" VALUE="SetLineStyle(1,1)">
<PARAM NAME="Line0003" VALUE="PolyLine(2, 0,0, 0,-100)">
</OBJECT>

<!-- 長針 -->
<OBJECT ID="longHand" CLASSID="clsid:369303C2-D7AC-11d0-89D5-00A0C90833E6"
 STYLE="position:absolute;width:200;height:200;">
<PARAM NAME="Line0001" VALUE="SetLineColor(0,0,0)">
<PARAM NAME="Line0002" VALUE="SetLineStyle(1,1)">
<PARAM NAME="Line0003" VALUE="PolyLine(6, 0,0, -3,0, -3,-90, 3,-90, 3,0, 0,0)">
</OBJECT>

<!-- 短針 -->
<OBJECT ID="shortHand" CLASSID="clsid:369303C2-D7AC-11d0-89D5-00A0C90833E6"
 STYLE="position:absolute;width:200;height:200;">
<PARAM NAME="Line0001" VALUE="SetLineColor(0,0,0)">
<PARAM NAME="Line0002" VALUE="SetLineStyle(1,1)">
<PARAM NAME="Line0003" VALUE="PolyLine(6, 0,0, -3,0, -3,-70, 3,-70, 3,0, 0,0)">
</OBJECT>

</BODY>
</HTML>

せっかくなので、もう1つ。先の箇所を次のように指定すれば、15ピクセル幅で紺色＆ちょっと立体的な枠線になります(サンプル8)。

要するに、border:のあとにちょっと細工すればいいだけです。最初の数値が枠幅のピクセル値、次がsolidやoutsetなどの指定、最後が枠の色です。スタイルシートが分かれば、もっといろいろ応用できるので、興味があればここをどうぞ。

数字をイタリックにするなら、次の指定を追加すればOKです(サンプル13)。

filter:shadow(color="black",direction=135);はIE4以降で使えるビジュアルフィルターの指定です。要するに、文字に影やぼかしを付ける機能です。修正するなら、次の下線部分を書き換えてください。

最初が影の色、次が影の位置です。色については説明不要でしょう。位置として指定できるのは、0、45、90、135、180、225、270、315の数値です。たとえば45を指定すれば、時計の12時の位置から時計回りに45度の位置に影が表示されます。

これはスタイルシートを使った修正例ですが、次のように<FONT>タグを使っても問題はありません。

スタイルシートに詳しければ、次のように修正することで、文字の背景色を変えることもできます(サンプル18)。

スタイルシートが分かっていれば、他にもいろいろデザインを変えられるのでチャレンジしてみてください。

追加したのは最後の1行です。これは透明度を指定できるフィルターで、この指定なら30%の透明度を指定したことになります(サンプル22)。これだけだと、あまり面白くありませんが、このフィルター(alphaフィルターと呼びます)では、さらに指定を追加することでグラデーションを表示することも可能です。たとえば、先の記述を次のように変更します。

これで、背景が赤のグラデーションになります(サンプル23)。詳しいパラメータの説明は省きますが、あえて調べなくても、上の記述の数値を変えれば表示がいろいろと変化するので、試してみてください。

このビジュアルフィルターは、背景に画像を表示した場合も有効です。背景の画像によっては、文字や針が見づらくなることもありますが、透明度を設定すればどんな画像でも背景に置けるでしょう。

サンプル27は、すべての針の色を赤にした例です。

この数値の単位はピクセルで、値を大きくすれば線が太くなります。サンプル28は、すべての針の太さを3pxにした例です(針の色は先ほどの方法で青にしました)。

結果はサンプル29のように、短針の形が変化します。角の位置はいくらでも増やせますから、もっと凝った形の針を描くことも可能です。

以上は、長針の内部を水色にする変更例です(サンプル30)。まず注目したいのは、次の行が削除されている点です。

そして、次の2行を新たに追加しています。これによって、<PARAM>タグによるパラメータの指定行が計4行になっています。

じつは、最初のPolyLineによる記述では、ワイヤーフレームのように線を描くだけで内部を塗りつぶすことはできません。内部を塗りつぶすならPolygonを使う必要があります(角の指定方法は同じです)。そして、内部の色の指定が、SetFillColor(0,255,255)の部分です。RGBごとに0～255の数値で指定するだけです。

なお、<PARAM NAME="Line0001">のように、<PARAM>タグのNAME属性は、Line0001、Line0002、Line0003……と順番になっている必要があります。

結果はサンプル34のとおりです(これはこれで面白いと思います)。

(注)スクリプトに詳しい方なら、事前に変数に数値を入れ、上の記述の下線部分に変数を指定した方が簡単だと思われると思いますが、そうやると動きません。これは、このサンプルで使っているsetExpression()メソッドの引数に変数を入れられないためです(おそらく)。

makoto3こと井上健語

■アナログ時計の作り方 for IE5 Later

●時計の背景色を変える

●時計の背景を画像にする

●時計に枠を付ける

●数字のサイズや色を変える

●数字をやめて記号を使う

●背景にフィルターを使う

●針をカスタマイズする

○針の色を変える

○針の線の太さを変える

○針の形を変える

○針の内部を塗りつぶす

●時計のサイズを変える

○時計の背景部分のサイズを変える

○数値の位置を変える

○数値のサイズを変える

○針のサイズを変える

●作品募集