私が初めてデジタル時計に接したのは、中学一年生の頃でした。リーフ式と言って、数字の描かれた小さな板（リーフ）が、スロー回転のモーターと歯車によって１分毎にカタっとめくれる時計でした。デジタル時計とはいっても、当時のそれはＬＥＤ（液晶ディスプレイ）を使っておらず、時または分を表す数字の板を、モーターと歯車が家庭の交流式電源でゆっくりと回転して、機械的に一枚一枚めくっていくアナログ的なものでした。それでも、当時は、時計といえば、丸か四角の文字盤に長針と短針が回って動くアナログ時計が一般的だったので、上の機械式デジタル時計は意外と斬新に思われていました。
それに、それなりの趣（おもむき）があったと思います。カタカタ時計とも呼ばれ、１分経過すると、カタっと自然に音がして数字が変わります。デジタルとは言っても、その仕組みは多分にアナログ的だったのです。
そのようなことを踏まえて、デジタル時計とアナログ時計のどちらがどれくらい優れているのかということを私は考えてみました。結局は、どちらも一長一短があると思います。デジタル時計は、数字そのものの文字情報で時刻がわかります。言わば、人間の左脳を主に刺激すると言えましょう。一方、アナログ時計は、長針と短針の組み合わせの位置と形で、時刻がわかります。その感覚的なイメージ情報が、人間の右脳を主に刺激すると言えましょう。いずれの方式の時計も時刻が瞬時にわかりますが、人間の脳への刺激が微妙に異なっているとも言えると思います。
現在では、時刻表示のスペースがある場合は、デジタルとアナログを併用した時計がよく使われています。それが、現在のところ一番理想的な方式であるようです。例えば、日常テレビや車などで時刻以外の情報も重要な場合は、デジタル時計がよく使われます。その一方で、私たちは、お腹が空（す）いた時などに瞬時に感覚的に時刻を知りたい場合は、壁などにかかったアナログ時計を無意識に見てしまうような気がします。そうしたそれぞれの場合のために、デジタルとアナログが併用された時計があると、その時の状況に合わせて、どちらの方式の時計を見たらいいかを選べる。そういうメリットがあると思います。
私が今回新たに考案した時計は、デジタルとアナログの融合型です。デジタルとアナログの併用型の時計は、それぞれの時計が並んだり混在したりします。それに比べて、デジタルとアナログを渾然一体（こんぜんいったい）として区別がつかないようなものにしてしまおうというのが私のアイデアなのです。
実は、現在の私のプログラミング環境では、グラフィックス関係のプログラミングがあまり自由にできません。パソコンのハードウェア・ソフトウェア面での進歩・発展は著しく、そのモデルチェンジあるいはバージョンアップ毎に古いものが使えなくなってゆく傾向にありました。その経験を踏まえて、私は、グラフィックスのライブラリやパッケージソフトなどの新たな追加に頼りたくないと考えるようになりました。なるべくウィンドウズＯＳの標準システムで、プログラミングできないかと考えるようになりました。しかしながら、作成するプログラムによっては、どうしてもグラフィックス的な表現が必要になることも少なくありません。そのため、グラフィックス関係のソフトウェアの追加なしでグラフィックスっぽい表現ができないかと考えることとなりました。
そのヒントは、アスキーアートにありました。私がそれを見たのは、かなり古く、小学生の頃に、当時のコンピュータが打ち出した年賀状の活字印刷でした。それは、戌（いぬ）年に担任の先生が送って下さった年賀状でしたが、犬の絵を文字だけの活字でプリントしていました。その先生の手書きの書面によると、電子計算機に年賀状を入れて打ち出した、とされていました。小学生の私は、当時は実際に見たことも触れたこともない『電子計算機（コンピュータ）』というものをスゴいと思いました。
あれから時はだいぶ流れて、今日（こんにち）では、ＣＲＴや液晶ディスプレイの画面上に四角いウィンドウを作ることができます。そのウィンドウ内では、文字をどんな位置にでも表示することができます。アスキーアートのように、昔のコンピュータで紙面に順次プリントするものから、だいぶやり方が変わってきました。けれども、文字だけで、絵などのイメージを表現するという根本的な考え方は、昔も今も変わっていないと思います。
すなわち、私は、アナログ時計の文字盤と長針と短針をすべて数字で表現することができると考えました。これが、デジタルとアナログを融合した時計、すなわち、デジアナ時計というわけです。長針は、現在の時刻の分を表す数字を並べて作ります。また、短針は、現在の時刻の時を表す数字を並べて作ります。すると、何時何分かがぱっと見て、数字でもわかるし、長針短針の位置と形でもわかる時計ができるのです。
こうして述べていくと、大したプログラムではないことがわかると思います。よって、以下にウィンドウズＯＳのパソコンで動くＶＢスクリプトのプログラムリストを示します。（これと同じ動作をするＪスクリプトもおまけに作りました。参考までに、付録プログラムリストとして追記しました。）
デジアナ時計.hta
<STYLE type="text/css">
SPAN {position:absolute;}
#pnl1 {color:white; font-size:24pt;}
#pnl2 {color:red; font-size:24pt;}
#sbr {font-size:18pt; color:cyan;font-weight:bold;}
#lbr {font-size:10pt; color:yellow;}
</STYLE>
<HTA:Application Id=oHTA Border=dialog Scroll=no MaximizeButton=no Contextmenu=no />
<HEAD>
<TITLE>デジアナ時計</TITLE>
<SCRIPT LANGUAGE="VBScript">
Option Explicit
Const OrgX = 168 ' 文字盤の中心（横軸方向）
Const OrgY = 170 ' 文字盤の中心（縦軸方向）
Const pnlcnt = 12 ' 文字盤の上限数字
Const lbrcnt = 8 ' 長針（分）の文字数
Const sbrcnt = 3 ' 短針（時）の文字数
Dim mode, svSig, pseudo
Sub Window_OnLoad()
Call ResizeTo(370, 410)
Call drawShortLongHands()
Call drawPanel()
Call SetInterval("drawShortLongHands", 1000)
End Sub
Sub Document_OnDblClick()
If mode = 0 Then
mode = 1
Call ChangeToMono()
Document.Title = "デジアナ時計(モノトーン版）"
ElseIf mode = 1 Then
Call ClearInterval()
mode = 2
Set pseudo = New TimeForTestClass
svSig = pseudo.Signal()
Document.Title = "デジアナ時計テストパターン"
Call drawShortLongHands()
Call SetInterval("drawShortLongHands", 100)
Else
Call ClearInterval()
mode = 0
Set pseudo = Nothing
Document.Title = "デジアナ時計"
Call drawShortLongHands()
Call ChangeToColor()
Call SetInterval("drawShortLongHands", 1000)
End If
End Sub
Private Sub ChangeToMono()
Dim idx
For idx = 0 to pnlcnt - 1
pnl2(idx).style.visibility = "hidden"
Next
For idx = 0 to sbrcnt - 1
sbr(idx).style.color = "white"
Next
For idx = 0 to lbrcnt - 1
lbr(idx).style.color = "white"
Next
End Sub
Private Sub ChangeToColor()
Dim idx
For idx = 0 to pnlcnt - 1
pnl2(idx).style.visibility = "visible"
Next
For idx = 0 to sbrcnt - 1
sbr(idx).style.color = "cyan"
Next
For idx = 0 to lbrcnt - 1
lbr(idx).style.color = "yellow"
Next
End Sub
Sub drawShortLongHands()
Dim nowh, nowm, add, ang, bar, badj, idx, sig
If mode = 2 Then
nowh = pseudo.Hour()
nowm = Pseudo.Minute()
sig = pseudo.Signal()
If sig <> svSig Then
svSig = sig
If sig Then
Call ChangeToColor()
Else
Call ChangeToMono()
End If
End If
Else
nowh = CInt(Hour(Time))
nowm = CInt(Minute(Time))
End If
If nowh >= 12 Then nowh = nowh - 12
add = nowm \ 12
ang = nowh * 30 + 270 + add * 6
If ang >= 360 Then ang = ang - 360
If nowh >= 10 Then
bar = 25
badj = 25
Else
bar = 20
badj = 20
End If
For idx = 0 to sbrcnt - 1
Call drawDigi(bar, ang, nowh, sbr, idx, 0, 0)
bar = bar + badj
Next
ang = nowm * 6 + 270
If ang >= 360 Then ang = ang - 360
bar = 10
For idx = 0 to lbrcnt - 1
Call drawDigi(bar, ang, nowm, lbr, idx, 6, 10)
bar = bar + 16
Next
End Sub
Sub drawPanel()
Dim bar, ang, idx
bar = 150
ang = 300
For idx = 0 to pnlcnt - 1
Call drawDigi(bar, ang, -1, pnl1, idx, 0, 0)
Call drawDigi(bar, ang, -1, pnl2, idx, -5, -5)
ang = ang + 30
If ang = 360 Then ang = 0
Next
End Sub
Private Sub drawDigi(bar, ang, num, br, idx, ofsx, ofsy)
Dim rad, x, y
rad = Round(ang * 3.14 / 180, 2)
x = Round(bar * Cos(rad)) + OrgX + ofsx
y = Round(bar * Sin(rad)) + OrgY + ofsy
br(idx).style.left = x
br(idx).style.top = y
If num > -1 Then
br(idx).innerText = Cstr(num)
End If
End Sub
Class TimeForTestClass
Private Hcnt, Mcnt, sflag
Private Sub Class_Initialize
Hcnt = 0
Mcnt = -1
sflag = False
End Sub
Property Get Signal()
If Hcnt = 0 And Mcnt = 0 Then sflag = Not sflag
Signal = sflag
End Property
Property Get Hour()
Hour = Hcnt
End Property
Property Get Minute()
Mcnt = Mcnt + 1
If Mcnt > 59 Then
Mcnt = 0
Hcnt = Hcnt + 1
If Hcnt > 11 Then
Hcnt = 0
End If
End If
Minute = Mcnt
End Property
End Class
</SCRIPT>
</HEAD>
<BODY bgcolor="indigo" scroll=no>
<SCRIPT LANGUAGE="VBScript">
Dim idx, str
str = ""
For idx = 1 to pnlcnt
str = str + "<SPAN id=pnl2>" + Cstr(idx) + "</SPAN>"
str = str + "<SPAN id=pnl1>" + Cstr(idx) + "</SPAN>"
Next
For idx = 1 to lbrcnt
str = str + "<SPAN id=lbr></SPAN>"
Next
For idx = 1 to sbrcnt
str = str + "<SPAN id=sbr></SPAN>"
Next
Document.write(str)
</SCRIPT>
</BODY>
今回のプログラムは、ウィンドウの文字盤をダブルクリックすることによって、カラー表示モード・モノトーン表示モード・テストパターンモードの３つのモードに切り替えることができるようなっています。カラー表示モードでは、少しだけ凝ったデザインにしてみました。モノトーン表示モードでは、比較的シンプルな時計のデザインをねらってみました。テストパターンモードは、アナログ時計で表される時刻を短時間で全て試して、文字盤と短針・長針の数字の重なり具合をチェックできるようにしてあります。数字が重なって読みづらくなる場合がないかどうかをテストするために作りました。
プログラムの原理的なことを言うならば、時刻を取り出す関数をプログラムの中で使っています。コンピュータ上で作る時計プログラムは、中味はデジタル時計であることが多いことがわかります。画面上でいくらアナログ時計を作っても、中味はデジタルであることは明白です。つまり、パソコン画面上のアナログ時計は、いくらアナログっぽく見えても、本質的にはデジタルなのです。この記事の冒頭で述べた、昔のデジタル時計とは、全く正反対の性質のものだということがわかります。私が新たに考案したデジアナ時計も、基本的には今のデジタル時計と同じものなのかもしれません。
ただし、今回の時計プログラムのアナログ表現が全く意味がなかったかというと、そうでもないような気がします。というのは、文字盤に円状に配置する数字のＸＹ座標位置や、時刻をアナログ時計の短針・長針として配置するＸＹ座標位置を得るために、三角関数を使っています。Ｓｉｎ（サイン）やＣｏｓ（コサイン）の関数をプログラム上で利用する良い練習例になると思います。デジタル時計とアナログ時計とを結ぶものがＳｉｎやＣｏｓの三角関数だということは、当たり前と言ってしまえばそれまでです。けれども、そんなことは中学や高校でも習ったことがなかったので、そんな私には極めて新鮮に思われました。三角関数自体は高校などで学んだ記憶はありますが、あれから４０年以上も経った今になって、時計プログラムを作るのに役に立つとは思いませんでした。（ただし、一銭にもなりませんが…。）
付録プログラムリスト
デジアナ時計js.hta
<STYLE type="text/css">
SPAN {position:absolute;}
#pnl1 {color:white; font-size:24pt;}
#pnl2 {color:red; font-size:24pt;}
#sbr {font-size:18pt; color:cyan;font-weight:bold;}
#lbr {font-size:10pt; color:yellow;}
</STYLE>
<HTA:Application Id=oHTA Border=dialog Scroll=no MaximizeButton=no Contextmenu=no />
<HEAD>
<TITLE>デジアナ時計 Ｊスクリプト版</TITLE>
<SCRIPT LANGUAGE="JScript">
var mode, svSig;
var TimeForTestClass = function() {
var Hcnt = 0;
var Mcnt = -1;
var sflag = false;
this.Signal = function () {
if(Hcnt == 0 && Mcnt == 0) sflag = !sflag;
return sflag;
}
this.Hour = function () { return Hcnt; }
this.Minute = function () {
Mcnt += 1;
if(Mcnt > 59) {
Mcnt = 0;
Hcnt += 1;
if(Hcnt > 11) Hcnt = 0;
}
return Mcnt;
}
}
var pseudo = new TimeForTestClass();
window.onload = function () {
resizeTo(370, 410);
mode = 0;
drawShortLongHands();
drawPanel();
setInterval("drawShortLongHands()", 1000);
}
document.ondblclick = function () {
if(mode == 0) {
mode = 1;
changeToMono();
document.title = "デジアナ時計(モノトーン版）";
}
else if(mode == 1) {
clearInterval();
mode = 2;
svSig = pseudo.Signal();
document.title = "デジアナ時計テストパターン";
drawShortLongHands();
setInterval("drawShortLongHands()", 100);
}
else {
clearInterval();
mode = 0;
pseudo = null;
pseudo = new TimeForTestClass();
document.title = "デジアナ時計 Ｊスクリプト版";
drawShortLongHands();
changeToColor();
setInterval("drawShortLongHands()", 1000);
}
}
function changeToMono() {
for(i=0;i<pnlcnt;i++) pnl2[i].style.visibility = "hidden";
for(i=0;i<sbrcnt;i++) sbr[i].style.color = "white";
for(i=0;i<lbrcnt;i++) lbr[i].style.color = "white";
}
function changeToColor() {
for(i=0;i<pnlcnt;i++) pnl2[i].style.visibility = "visible";
for(i=0;i<sbrcnt;i++) sbr[i].style.color = "cyan";
for(i=0;i<lbrcnt;i++) lbr[i].style.color = "yellow";
}
var OrgX = 168 // 文字盤の中心（横軸方向）
var OrgY = 170 // 文字盤の中心（縦軸方向）
var pnlcnt = 12; // 文字盤の上限数字
var lbrcnt = 8 // 長針（分）の文字数
var sbrcnt = 4; // 短針（時）の文字数
function drawShortLongHands() {
var nowh, nowm, bar, badj
if(mode == 2) {
nowh = pseudo.Hour();
nowm = pseudo.Minute();
var sig = pseudo.Signal();
if(sig != svSig) {
svSig = sig;
if(sig)
changeToColor();
else
changeToMono();
}
}
else{
var now = new Date();
nowh = now.getHours();
nowm = now.getMinutes();
}
if(nowh >= 12) nowh -= 12;
var add = Math.floor(nowm / 12);
var ang = nowh * 30 + 270 + add * 6;
if(ang >= 360) ang -= 360;
if(nowh >= 10) {
bar = 25;
badj = 25;
}
else {
bar = 20;
badj = 20;
}
for(i=0;i<sbrcnt;i++) {
drawDigi(bar, ang, nowh, sbr, i, 0, 0);
bar += badj;
}
ang = nowm * 6 + 270;
if(ang >= 360) ang -= 360;
bar = 10;
for(i=0;i<lbrcnt;i++) {
drawDigi(bar, ang, nowm, lbr, i, 6, 10);
bar += 16;
}
}
function drawPanel() {
var bar = 150;
var ang = 300;
for(i=0;i<pnlcnt;i++) {
drawDigi(bar, ang, -1, pnl1, i, 0, 0);
drawDigi(bar, ang, -1, pnl2, i, -5, -5);
ang += 30;
if(ang == 360) ang = 0;
}
}
function drawDigi(bar, ang, num, br, idx, ofsx, ofsy) {
var rad = ang * Math.PI / 180;
var x = bar * Math.cos(rad) + OrgX + ofsx;
var y = bar * Math.sin(rad) + OrgY + ofsy;
br[idx].style.left = x;
br[idx].style.top = y;
if(num > -1) br[idx].innerText = num;
}
</SCRIPT>
</HEAD>
<BODY bgcolor="indigo" scroll=no>
<SCRIPT LANGUAGE="JScript">
var str = ""
for(i=1;i<=pnlcnt;i++) {
str += "<SPAN id=pnl2>" + i + "</SPAN>";
str += "<SPAN id=pnl1>" + i + "</SPAN>";
}
for(i=1;i<=lbrcnt;i++) {
str += "<SPAN id=lbr></SPAN>";
}
for(i=1;i<=sbrcnt;i++) {
str += "<SPAN id=sbr></SPAN>";
}
document.write(str);
</SCRIPT>
</BODY>
