デジタル時計・応用編


前回のデジタル時計では、

GraphicsWindow.BrushColor = "white"
……ブラシの色を白にする

GraphicsWindow.FillRectangle(0, 0, 55, 20)
……座標(0, 0)から(55, 20)に白色の四角形を書いて塗りつぶし

GraphicsWindow.BrushColor = "black"
……ブラシの色を黒にする

GraphicsWindow.DrawText(0, 0, Clock.Time)
……座標(0, 0)に、時間を書き入れる

という手順を1秒ごとに繰り返すことで、時計を描画しました。
ただし、Small Basicでは描画の方法が他にもあります。
それについて、ここに書いておきます。
いろんな書き方を知っていれば、この後の応用に使うこともできるでしょう。

Shapeオブジェクトを使う

前回はGraphicsWindowオブジェクトを使って時計を描きました。
GraphicsWindowというのは、紙みたいなものです。
紙に白いペンで四角形を書いて塗りつぶして、黒いペンで時間を書いて、……を繰り返したのが前回です。
Shapeオブジェクトというのは、ガラス板のようなものです。
ガラス板に文字を書いて、出したり引っ込めたりすることができます。
前回、座標(0, 0)に時間を書く時に、

GraphicsWindow.DrawText(0, 0, Clock.Time)

と記述しましたが、Shapeオブジェクトだと、

Shapes.AddText(Clock.Time)

こうなります。これは「何の文章を書くか」を決めただけで、座標は決めていません。
座標は更に、Shapes.Move(shapeName, x, y)という別の表記が必要です。

Shapes.Move(Shapes.AddText(Clock.Time), 0, 0)

これで、「Shapes.AddText(Clock.Time)」を座標(0, 0)に移動したことになります。
(もっとも、座標(0, 0)だから動かしていないのと同じですが……)

しかし、「Shapes.Move(Shapes.AddText(Clock.Time), 0, 0)」って、Shapeの中にShapeがあってちょっとややこしいですね。
こういう時は、Shapeに名前を付けることができます。
この、「名前を付けることができる」のが、GraphicsWindowとの大きな違いです。

TimeShape = Shapes.AddText(Clock.Time)

これで、「Shapes.AddText(Clock.Time)」に「TimeShape」という名前を付けました。
どんな名前でも付けられますが、ぱっと見てわかりやすい名前にするのが良いでしょう。

TimeShape = Shapes.AddText(Clock.Time)
Shapes.Move(TimeShape, 0, 0)

「TimeShape」を座標(0, 0)に移動しました、と書きました。

Shapeのもうひとつの特徴が、「表示・非表示の切り替えができる」ということです。
GraphicsWindowだと、白で塗りつぶして黒で書いて……という作業でしたが、
Shapeなら非表示にする・表示する、を繰り返せばOKです。

Shapes.HideShape(TimeShape)

これが、「TimeShape」を非表示にするという意味。

Shapes.ShowShape(TimeShape)

こちらは、「TimeShape」を表示するという意味になります。

では、前回のデジタル時計、

GraphicsWindow.Width = 100
GraphicsWindow.Height = 30
Timer.Interval = 1000
Timer.Tick = OnTick
Sub OnTick
  GraphicsWindow.BrushColor = "white"
  GraphicsWindow.FillRectangle(0, 0, 55, 20)
  GraphicsWindow.BrushColor = "black"
  GraphicsWindow.DrawText(0, 0, Clock.Time)
EndSub

これを、Shapeで再現してみましょう。

GraphicsWindow.Width = 100
GraphicsWindow.Height = 30
Timer.Interval = 1000
Timer.Tick = OnTick
Sub OnTick
  Shapes.HideShape(TimeShape)
  GraphicsWindow.BrushColor = "black"
  TimeShape = Shapes.AddText(Clock.Time)
  Shapes.Move(TimeShape, 0, 0)
  Shapes.ShowShape(TimeShape)
EndSub

異なるのはサブルーチン「OnTick」の中身だけです。
「白く塗りつぶす」が「Shapes.HideShape(TimeShape)」、
「黒で時間を描く」がそれ以降に対応しています。
Shapeオブジェクトは他にも、回転や拡大縮小、透明度の設定など色々なことが出来るので便利ですが、「Shapeオブジェクトを作って、目的の座標に移動」という二度手間がかかります。
他にも違いとして、

・Shapeで描いたオブジェクトの上に、GraphicsWindowで描いたオブジェクトをかぶせることができない(Shapeが必ず上)
GraphicsWindowで四角形・三角形・楕円を描く場合、描く方法が線で描く場合と図形を塗りつぶす場合の2通り用意されているが、Shapeでの四角形・三角形・楕円は塗りつぶししかない

などなどがあります。
用途に応じて使い分けましょう。

テキストボックス

テキストボックスというのは、インターネットでも良く見かける、



これのことです。文章を打ち込むための箱です。
本来は入力用に使うものなので、時計を表示する為に使うのはちょっとおかしいのではありますが……。
ただ、このテキストボックスは純粋に「テキストを表示する」為のスペースですので、ここに時計を表示する場合、GraphicsWindowでの「白く塗りつぶす」に当たる作業が必要ありません。

Small Basicでテキストボックスを表示するには、

Controls.AddTextBox(0, 0)

これで、座標(0, 0)にテキストボックスが表示されます。
テキストボックスのサイズを変更したい場合は、「Controls.SetSize」を使いますが、その場合は作ったテキストボックスに予め名前を付けておいた方が、プログラムが見やすくなります。

TimeBox = Controls.AddTextBox(0, 0)
Controls.SetSize(TimeBox, 80, 20)

テキストボックスに「TimeBox」という名前を付けた後に、「TimeBox」の大きさを幅80ピクセル、高さ20ピクセルにしました。

このテキストボックスに文字を表示する方法ですが、

Controls.SetTextBoxText(TimeBox, text)

これで「TimeBox」の中に「text」と表示できます。
実際に表示したいのは「Clock.Time」ですから、

Controls.SetTextBoxText(TimeBox, Clock.Time)

こうですね。
プログラム全体は以下の通り。

GraphicsWindow.Width = 200
GraphicsWindow.Height = 30
GraphicsWindow.BrushColor = "black"
TimeBox = Controls.AddTextBox(0, 0)
Controls.SetSize(TimeBox, 80, 20)
Timer.Interval = 1000
Timer.Tick = OnTick
Sub OnTick
  Controls.SetTextBoxText(TimeBox, Clock.Time)
EndSub

タイマーで変化するのは時間だけなので、サブルーチン「OnTick」内はシンプルです。
テキストボックス自体は、タイマー発動前に記述しました。
タイマーが動くたびにテキストボックス自体を書き直す必要がないからです。

次:カウントダウンタイマー


▲TOPへ戻る