はじめてのMorphicチュートリアル(第8回)「サブモーフ」

今回はMorphicの大きな特徴ともいえるサブモーフについて学ぶ。

サブモーフとは、モーフの中に別のモーフを埋め込むことで、これにより様々なモーフを関連づけてリッチな表現を生み出すことが可能になる。

ここでは2つのモーフa,bを例にとって説明する。

モーフaは青色で横200px、縦100pxの長方形のモーフ、モーフbは赤色で縦横20pxの正方形のモーフとすると、以下のようなコードで表現できる。

a := Morph new color: Color blue; extent: 200@100.
b := Morph new color: Color red; extent: 20@20.

以下のコードで、この2つのモーフを画面に表示する。

a openInWorld.
b openInWorld.

two morphs

この2つのモーフをクリックするとマウスにくっついて動くが、それぞれは独立していて互いに何の関連もない。

この状態で以下のコードをDo itする。

コードを選択して右クリック後にDo itを選ぶことを、今後は単に「Do itする」と表現する。メニューから選ぶ代わりにCommand-D(Alt-D)を押しても同じである。

a addMorphBack: b.

上記のようにすると青色の長方形モーフaと赤色の正方形モーフbが一緒に動くようになる。これは、モーフaにモーフbが埋め込まれた状態で、いわばモーフaとモーフbが親子関係になったと言える。このとき、モーフbをモーフaのサブモーフと呼ぶ。

興味深いのは、コードをDo itした時点で埋め込まれたモーフbと外側のモーフaとに、レイアウト上何の変化も生じず、それまでの位置状態を保ったままだったことである。Morphicでは特に指定しない限りレイアウトのない状態となっている。

モーフbがモーフaのサブモーフである状態で、モーフbの位置を変えることができる。

b center: a center.

上記のコードはモーフbの中心を、モーフaの中心にあわせる。この後でモーフaを移動させると、モーフbはモーフaの中心に位置したまま一緒に移動する。
centered morph

今度はモーフaの位置を変えてみる。

a topLeft: 20@20.

上記のコードは、左上端が(20,20)という座標になるようにモーフaを移動する。この場合もモーフbはモーフaの中心に位置したまま一緒に移動する。

サブモーフになったモーフは親のモーフと一心同体となる。つまり、親のモーフを削除するとそのサブモーフも自動的に削除される。

モーフは他のモーフを何個でもサブモーフにすることができる。さらにサブモーフも別のモーフをサブモーフにすることができる。

ただし、サイクリックなサブモーフ化はできない。例えば以下のコードをDo itすると(しないほうがいいが)一瞬でハングする。

b addMorphBack: a. "注意:Do itするとハングする"

モーフ側で何のチェックも行われないので、サイクリックなサブモーフ化には気をつけるほうがいいだろう。

(第8回おわり)

【追記】

サブモーフの配置はMorphicで最も頭を悩ませるものの一つである。これに関しては以前にまとめた記事があるので参照してほしい。
Morphの設定