GO BACK

Squeak教室　上級編その4

「オリジナルモーフの作成」

■モーフのサブクラスを作る

　Squeakの一番のウリは、なんといってもモーフです。さまざまな部品が手軽に使える、あの環境は他に変えがたいものがあります。せっかくSmalltalkを使えるようになったのですから、オリジナルのモーフ部品に挑戦してみたいですね。

　モーフといえども、Smalltalkのクラスとして用意されていることに変わりはありません。もちろん、非常に多くの機能が組み込まれていますから、その全てを実装しようとすると膨大な作業になります。が、別にそれらを全て作る必要はありません。ほら、継承を使えば、受け継いだクラスの全機能を使うことができたでしょう？　だから、モーフの基本クラスを継承して新しいクラスを作れば、基本的な事柄はすべてそっちがやってくれるはずです。後は、そのモーフ特有の機能だけを組み込めばいいのですよ。

　では、簡単なモーフを作ってみましょう。作成するのは「ぐるぐるモーフ」です。楕円のモーフというのがありますが、あんな形でぐるぐると何何重にも円が重なり表示されるモーフを作ってみることにしましょう。

　では、デスクトップのワールドメニューの「開く」から「package browser」を選び、ブラウザを呼び出して下さい。そして、モーフのクラス「MyMorph」を作ってみましょう。前に、ワークスペースからMyTestClassを作りましたが、ブラウザを使ってもやり方は同じです。クラスを作成するコードを書き、それを実行すればいいのです。

　先に作成した「Tuyano」の「TestClasses」カテゴリを選択してみて下さい。その下のコード編集のエリアに「Object subclass: #NameOfSubclass・・」といったテキストが表示されるはずです。これは、クラス定義のテンプレートです。つまり、「こんな形で書けばクラスができるよ」ということを示していたんですね。

　では、この部分にクラス定義を書き込みましょう（このテンプレートのテキストは消しちゃっていいです）。以下のコードを記述して、このエリアでescキーを押して現れるメニューから「了解」を選びます。これで、新しいクラス「MyMorph」が、Tuyano-TestClassカテゴリ内に作成されます。

Morph subclass: #MyMorph
	instanceVariableNames: 'frameColor frameWidth '
	classVariableNames: ''
	poolDictionaries: ''
	category: 'Tuyano-TestClasses'

　今回のクラスは、「Morph subclass: #MyMorph」となっていますね？　つまり、「Morph」というクラスを継承して作っていることになります。このMorphクラスが、モーフの最も基本となるものです。Squeakで使われているモーフは、全てこれを継承して作られているのです。

　また、今回は「instanceValiableNames」というところに「frameColor frameWidth」という２つのものが書かれていますね？　これは「インスタンス変数の変数名一覧」を示すものです。つまり、この新しいクラスMyMorphでは、「frameColor」と「frameWidth」という２つのインスタンス変数を持っている、というわけです。

　インスタンス変数というのは、タイルスクリプティングのところでも登場しましたが、「それぞれのインスタンス（つまりオブジェクト）ごとに値を持てる変数」のことです。これとは反対に「クラスごとに１つの値しか持てない（つまりすべてのインスタンスで同じ値になる）変数」を「クラス変数」といいます。インスタンス変数を用意すれば、作成したオブジェクトごとに細かな設定などをそこに保存しておけます。今回は、フレーム（輪郭線）の色と太さをインスタンス変数で持たせることにしました。

■メソッドを作る

• インスタンス変数（frameColor、frameWidth）の値を取り出したり、変更したりするためのもの。
• インスタンスの初期化処理。初期化の際にインスタンス変数に値を設定しておかないといけない。
• 画面に表示する際の処理。
• マウスでプレスしたときの処理。サンプルとして、インスタンス変数の値を変更するような機能を用意する。
  

frameColor
	^ frameColor

frameColor: t1 
	frameColor _ t1

frameWidth
	^ frameWidth

frameWidth: t1 
	frameWidth _ t1

■初期化と部品の描画

initialize
	bounds _ 0 @ 0 corner: 50 @ 40.
	owner _ nil.
	submorphs _ EmptyArray.
	color _ self defaultColor.
	frameColor _ Color red.
	frameWidth _ 5

• 位置　　横位置 @ 縦位置
• 大きさ　横幅 @ 縦幅
• 領域　　横位置 @ 縦位置 corner: 右位置 @ 下位置
• 領域　　横位置 @ 縦位置 extent: 横幅 @ 縦幅
  

drawOn: t1 
	| x y w h x1 y1 w1 h1 m n |
	x _ self left.
	y _ self top.
	w _ self width.
	h _ self height.
	m _ self frameWidth * 4.
	m < 1
		ifTrue: [m _ 1].
	w > h
		ifTrue: [n _ h // m]
		ifFalse: [n _ w // m].
	n < 1
		ifTrue: [n _ 1].
	0
		to: n
		do: [:i | 
			x1 _ w / 2 // n * i.
			y1 _ h / 2 // n * i.
			w1 _ x + w - x1.
			h1 _ y + h - y1.
			w1 <= 0
				ifTrue: [w1 _ 1].
			h1 <= 0
				ifTrue: [h1 _ 1].
			t1
				fillOval: (x + x1 @ (y + y1) corner: w1 @ h1)
				color: self color
				borderWidth: self frameWidth
				borderColor: self frameColor]

　ちょっと長いですが、それほど複雑なわけではないので間違えないように書きましょう。ここでは、部品を描くのに新しいものが登場してますね。最後のdo: のブロック文にある「t1 ・・」というやつです。これは、整理するとこんなものになります。

t1 fillOval: 領域 color: 色 borderWidth: 輪郭の太さ borderColor: 輪郭色

　最初の「t1」は引数で渡されるものですが、これはCanvasというオブジェクトが設定されています。このCanvasにある描画用のメソッドを呼び出すと、このモーフに描画がなされるような仕組みになっているのです。今回は「fillOval」という塗りつぶした円を描画するメソッドを使いましたが、この他に輪郭のみの円を描く「frameOval」や、四角形を描く「fillRectangle」「frameRectangle」といったものも用意されています。

　それから、最初のところで「self left」・・というようにして、自身の位置と大きさの値を変数に取り出しているところがありますね。この「self」っていうのは、自分自身（つまりこのインスタンス自身）を示すものです。また、「left」「top」「width」「height」は、それぞれ横位置・縦位置・横幅・縦幅を得るメソッドです。

　さあ、これで部品の表示だけはできるよになりました。とりあえず、実際に部品が動くか確かめてみましょう。ワークスペースを開き、そこに「MyMorph new openInHand」と書き込んで評価してみましょう。マウスポインタのところにMyMorphが現れますよ。

　そのまま適当な場所に配置し、ハロを呼び出して大きさを変えてみましょう。大きくすると、自動的にぐるぐるが増えて、常に部品の中をぐるぐる模様でいっぱいにします。どうです、自分だけのオリジナルなモーフが動いているのは、ちょっと感動的でしょう？

　ところで、クラスからインスタンスを作る場合には、通常「new」というのを使うんですが、今回は「openInHand」というのを使ってますね。これ、単に「マウスポインタのとこにできたほうが便利だろう」というだけの問題ではありません。

　前にいったように、Squeak・トーイってのは、モーフの部品の他に、パネルスクリプティングなどで操作するための「プレーヤー」というものがあります。なので、単純にモーフのインスタンスを作っただけだと、プレーヤーがなくていろいろ面倒になっちゃうんです。なので、この「openInHand」など、あらかじめ用意されているメソッドでインスタンス生成して使うのが基本のようです。

■イベント処理を作る

handlesMouseDown: evt 
	evt shiftPressed
		ifTrue: [^ true].
	^ false

mouseDown: evt 
	| str1 n c |
	str1 _ FillInTheBlank request: 'width of frame:'
		initialAnswer: self frameWidth asString.
	str1 = ''
		ifTrue: [^ self].
	n _ str1 asInteger.
	self frameWidth: n.
	str1 _ FillInTheBlank request: 'frame color name:'
		initialAnswer: 'red'.
	str1 = ''
		ifTrue: [^ self].
	c _ Compiler evaluate: 'Color ' , str1.
	self frameColor: c.
	self flash.
	PopUpMenu notify: 'set now'

GO NEXT