GO BACK

REALbasic教室 その3


「オブジェクトを操作する」


■基本プロパティを操作する


 では、いよいよREALbasicに用意されているGUI部品を使ったプログラミングへと進むことにしましょう。

 前回、for文のところで作成したプログラムをちょっと思い出してみましょう。


Sub Action ()
	dim x as string
	dim y as integer
	dim z as integer
	dim i as integer
	x = editField1.text
	y = Val(x)
	z = 0
	for i = 1 to y
		z = z + i
	next
	msgbox x + "までの合計:" + Str(z)
End Sub

 このようなものでしたね。ここでは、editField1というエディトフィールドに書かれているテキストを取り出すのに「x = editField1.text」ということをやっていました。

 REALbasicのオブジェクトは、そのさまざまな状況や性質が「プロパティ」というものとして用意されています。このプロパティを操作するのが、すなわちオブジェクトを操作するということなのです。

 このプロパティをプログラム内から利用する場合、


《オブジェクト名》.《プロパティ名》


−−このような形で記述します。

 例えば、エディトフィールドに書かれたテキストは「text」という文字列で設定されるプロパティとして用意されています。ということは、editField1.textというのは、editField1というオブジェクトのtextプロパティを示していたわけです。

 プロパティは、値を取り出すだけでなく、書き換えることもできます。例えば、今のtextプロパティを書き換えるプログラムを考えてみましょう。


Sub Action ()
	Dim X as single
	Dim Y as integer
	X = Rnd
	Y = X * 100
	EditField1.text = Str(Y)
End Sub

 これは、ボタンをクリックする度に0〜99までの数字をランダムにeditFieldへ書き出すプログラムです。

 簡単に補足説明しておきましょう。


Dim X as single
Dim Y as integer
まず、実数をおさめる変数Xと、整数をおさめる変数Yを定義します。


X = Rnd
Y = X * 100
Rndというのは、0〜1までの小数をランダムに返す関数です。つまり、ここでは0〜1の乱数を変数Xに収め、これに100をかけた値を変数Yに収めているわけです。こうすることで、0〜99までの乱数が得られます。

 ここで「確かに100倍すれば0〜99までの数字になるけど、小数点以下はどうやって切り捨てるのか?」と考えた人もいることでしょう。ここで忘れてはならないのは「変数Yは整数型の変数である」ということです。ここには整数しか入れることができません。ですから、小数点以下は無視されるため、自動的に整数になってしまうのです。


EditField1.text = Str(Y)
そして最後に、この部分で、得られた値をEditField1のテキストに設定しています。注意したいのは、設定する値は必ずStr ()を使って文字列に変換しないといけないということです。プロパティも、変数と同様に利用できる値の型が決まっています。textプロパティは、文字列型の値しか設定することはできません。ですから、Str ()で変換したものを設定しなければいけないのです。


 プロパティの中には、読み取ることはできるけれど書き換えることはできないものなどもあり、全てのプロパティが自由に読み書きできるというわけではありません。また、利用可能な値の型もプロパティによりさまざまです。しかし、プロパティの指定の仕方、読み書きの方法は全て共通しています。


値を取り出す: 《変数》=《オブジェクト》.《プロパティ》

値を変更する: 《オブジェクト》.《プロパティ》=《設定値》


 これが、プロパティ操作の基本中の基本といえるでしょう。


■オブジェクトの位置と大きさ


 今度は、オブジェクトを動かしてみましょう。オブジェクトを動かすのも、プロパティを利用します。オブジェクトのある位置に関するプロパティを変更してやればいいのです。

 では、Window1のウィンドウ内に、Ovalオブジェクト(円グラフィックのオブジェクト)を1つ作ってみて下さい。名前はデフォルトの「Oval1」のままにしておきます。そしてPropertiesパレットより「FillColor」をクリックしてカラーピッカーを呼び出し、塗りつぶす色を適当に変更しましょう。

 出来上がったら、ブラウザを開き、「Window1」オブジェクトの「MouseMove」イベントに以下のプログラムを記述します。


Sub MouseMove (X as Integer,Y as Integer)
	Dim ovalX as integer
	Dim ovalY as integer
	ovalX = Oval1.left
	ovalY = Oval1.top
	if X > OvalX  + Oval1.width / 2 then
		OvalX = OvalX + 5
	else
		OvalX = OvalX - 5
	end if
	if Y > OvalY  + Oval1.height / 2 then
		OvalY = OvalY + 5
	else
		OvalY = OvalY - 5
	end if
	Oval1.left = OvalX
	Oval1.top = OvalY
End Sub

 出来上がったら実行してみましょう。マウスをウィンドウの上でゆっくりと動かすと、グラフィックがマウスポインタへと近寄ってくるのがわかるでしょう(あまり早く動かすとうまく動かないかも知れません)。

 ここでは、いくつか新しい単語が見られます。ポイントを絞って補足しておきましょう。


Sub MouseMove (X as Integer,Y as Integer)
これは、マウスポインタがアプレットの領域上を移動した時に呼び出されるイベントです。1度だけでなく、移動している間は何度も連続して呼び出しつづけられます。

 このサブルーチンには、2つのパラメータが設定されています。XとYで、これらはそれぞれサブルーチンが呼び出された時のマウスポインタの横位置と縦位置が渡されます。つまり、XとYを調べれば、マウスポインタが現在どこにあるかわかるというわけです。

 REALbasicに用意されているイベントには、Actionのように全くパラメータを持たないものもあれば、このMouseMoveのようにパラメータでさまざまな値を受け渡すものもあります。これはイベントごとに違いますので、使う際によくそのサブルーチンの定義を見るようにしましょう。


ovalX = Oval1.left
ovalY = Oval1.top
これは、Oval1の位置を変数に収めている部分です。leftはオブジェクトの左側がウィンドウの左端からどれだけ離れているかを示すプロパティで、topはオブジェクトの上側がウィンドウの上部からどれだけ離れているか示すものです。オブジェクトの中心ではなく、左端/上端であることに注意して下さい。


if X > OvalX  + Oval1.width / 2 then
	OvalX = OvalX + 5
else
	OvalX = OvalX - 5
end if
ここでオブジェクトがマウスポインタのどちら側にあるかを調べています。widthというのは、オブジェクトの横幅を示すプロパティです。「OvalX + Oval1.width / 2」というのは、オブジェクトの左端に横幅の半分を足したもので、これはつまりオブジェクトの中心地点を計算しているのです。

 そしてそれがXすなわちマウスポインタの横位置より小さければ、オブジェクトの横位置が入っている変数に5を足し、それ以外の場合は5を引いています。


if Y > OvalY  + Oval1.height / 2 then
	OvalY = OvalY + 5
else
	OvalY = OvalY - 5
end if
同じようなIFがまた続きます。今度は縦位置についての処理です。基本的には横位置の処理と同じですね。ここで使われているheightというのは、オブジェクトの縦幅を示すプロパティです。


Oval1.left = OvalX
Oval1.top = OvalY
最後にオブジェクトのleftとtopのプロパティを変更し、オブジェクトを移動させます。


 いかがですか。このようにleft/topプロパティを操作することで、オブジェクトを自由に移動させることができるのです。今回はOvalを使いましたが、基本的にはどのオブジェクトでもこの方法で動かすことができます。


■オブジェクトへのグラフィックの描画


 オブジェクトを操作するのはプロパティを操作することだ、といいましたが、実をいえばそれだけではありません。オブジェクトには、その他にも「メソッド」と呼ばれるオブジェクト専用の命令を備えています。それらのメソッドを呼び出すことでオブジェクトを操作するという方法もあるのです。

 その一つが、「オブジェクトに何かを描画する」という場合です。−−これも簡単なサンプルを作ってみましょう。

 まず、新規にプロジェクトを作ります。そして、Canvasオブジェクトを一つ配置して下さい。名前はデフォルトのまま(Canvas1)にしておきます。そして縦横250ドット以上の大きさに広げて配置します。

 もう一つ、ボタンも作りましょう。こちらも名前はデフォルトのまま(PushButton1)にしておきます。

 できあがったら、プログラムの作成に入りましょう。ブラウザを開き、まずCanvas1オブジェクトのPaintイベントに以下のプログラムを記述します。


Sub Paint (g As Graphics)
	dim i as integer
	dim x as integer
	dim y as integer
	dim r as integer
	dim m as integer
	dim b as integer
	for i = 1 to 50
		x = rnd * 200
		y = rnd * 200
		r = rnd * 255
		m = rnd * 255
		b = rnd * 255
		g.foreColor = rgb(r,m,b)
		g.drawOval x,y,50,50
	next
End Sub

 これがCanvas1にグラフィックを描画するためのものです。もう一つ、PushButton1オブジェクトにも以下のプログラムを記述します。


Sub Action ()
	Canvas1.refresh
End Sub

 これで完成です。実行すると、キャンバスの領域に、ランダムに多数の円が描画されるのがわかります。ボタンをクリックするとまた円を描き直します。

 これは、オブジェクトに円を描画するdrawOvalというメソッドを利用した例です。このプログラムの仕組みはどうなっているのでしょう?

 まず、Paintイベントというのがどういうものか理解しなくてはいけません。これは、キャンバスの表示を作成するためのものです。REALbasicは、キャンバスを描き直す必要が生じた場合、このPaintイベントを発生させます。「描き直す必要」とは、例えば他のウィンドウに隠れていたのが前に移動した時であるとか、ウィンドウがリサイズされた時などがあげられるでしょう。こうしたとき、REALbasicはウィンドウやオブジェクトを自動的に再描画します。このとき、Paintイベントが発生するのです。ですからキャンバスに何かを表示させたい時は、このPaintを利用すればいいわけです。

 このPaintサブルーチンは、こんな形で始まっています。


Sub Paint (g As Graphics)


 パラメータが1つありますね。gという変数ですが(実は変数とはちょっと違うんですが)、これはGraphicsという型ですね。見たことのない型です。

 このGraphicsというのは、実はオブジェクトのグラフィック表示用オブジェクトなのです。つまり、キャンバスの中には、Graphicsという見えないオブジェクトが更に組み込まれていて、これがキャンバスの表示を一手に引き受けているのだと考えて下さい。キャンバスに何かを描こうとした場合、そのキャンバスのGraphicsオブジェクトに何かを描画するのです。するとそれが自動的にキャンバスに表示されます。

 つまり「g As Graphics」というのは「キャンバスのGraphicsオブジェクトがgという名前の変数に収められてパラメータとして受け渡されている」と考えるとよいでしょう。 このGraphicsには、描画のためのメソッドがいくつか用意されています。今回使ったdrawOvalというのもその一つで、枠線だけの円を描画するメソッドです。サブルーチンをよく見ると、


g.drawOval x,y,50,50


このように書かれていますね。メソッドというのは、それぞれのオブジェクトに固有のものです。ですからこれを利用する場合は、「どのオブジェクトのなんというメソッドか」をハッキリと指定しないといけません。そこで、


《オブジェクト》.《メソッド》


このように、オブジェクト名とメソッドの名前をピリオドで続けて記述して呼び出すようになっています。

 さて、drawOvalですが、これは4つのパラメータがあります。


g.drawOval 《円の左位置》,《円の上位置》,《横幅》,《縦幅》


このようにして呼び出します。こうした描画用メソッドは他にもいくつかあるので、まとめて紹介しておきましょう。


g.drawRect 《四角の左位置》,《四角の上位置》,《横幅》,《縦幅》
・枠線だけの四角形を描画する。

g.drawLine 《開始横位置》,《開始縦位置》,《終了横位置》,《終了縦位置》
・開始地点から終了地点まで直線を引く。

g.drawString 《文字列》,《文字の左位置》,《文字のベースライン位置》
・指定位置から文字列を描画する。

g.fillOval 《円の左位置》,《円の上位置》,《横幅》,《縦幅》
・中を塗りつぶした円を描く。

g.fillRect 《四角の左位置》,《四角の上位置》,《横幅》,《縦幅》
・中を塗りつぶした四角形を描画する。


 この他、このプログラムではプロパティも使っています。それは、Graphicsオブジェクトに何かを描画する時に使う色を示すg.foreColorプロパティです。これは、


g.foreColor = 《Colorオブジェクト》


このようにします。すると以後、上記にあげたようなメソッドを使って図形を描画しようとすると、設定した色で描かれるようになります。

 ここで使う《Colorオブジェクト》というのは、カラーそのものを示す専用のオブジェクトです。これは、通常「rgb」という関数を使って得ることができます。


rgb (赤,緑,青)


 赤・緑・青はいずれも0〜255までの整数でその輝度を設定します。例えば、まっかに設定したければrgb (255,0,0)となるわけです。

 最後に、ボタンに設定したRefreshというメソッドについても触れておきましょう。これは、再描画を強制的に行なわせるメソッドです。Canvas1.refreshは、つまりCanvas1を再描画せよ、という意味なのです。再描画をすると、REALbasicは自動的にPaintサブルーチンを呼び出すことは先に説明した通りです。つまり、このボタンでは、再秒がメソッドを呼び出すことで間接的にPaintサブルーチンを呼び出していたのです。


 この「メソッド」というものを使うようになると、話がちょっと難しくなったように感じたことでしょう。オブジェクト指向プログラミングの基本的な考え方が身についていないと内容が飲み込めないかも知れません。

 とりあえず、プロパティを操作するだけでもかなり面白いことができますから、まずはそちらを確実に使えるようにしてください。そして余力のある人だけ、メソッドを使ってみるとよいでしょう。メソッドを使うようになると、オブジェクトの内部がどのような構造になっているのか、おぼろげにわかってきます。そうなってくれば、あなたもいっぱしのREALbasicプログラマになったといえるでしょう。


GO NEXT


GO HOME