ドラッグ＆ドロップのみでスクリプトを組む（後編・テキスト版）
前編で Morph やスクリプタの作り方、扱い方はおわかりいただけたはずだ。後編では本格的にドラッグ＆ドロップによるスクリプティングに挑戦してみよう。
【図：ついに登場？(笑)「決まった枠の中からはみ出さずに動き続ける Ellipse 」たち。】
■色を変える
画面への登場のしかたこそ、プロトタイプからのドラッグ＆ドロップというなじみの薄い方法だったが、Ellipse はドロー系ソフトで楕円ツールを使って描かれたそれと同じ性質を備えている。すなわち、大きさや扁平率のほかに、ボーダーラインの太さと色、内部の塗りつぶしに使う色を自由に変えられる。
▼ドロー系ソフト的な変更のしかた 〜その１：ハロと専用のパレットを使う〜
1. Ellipse をコマンド＋クリックして選択。
2. マジェンタハロをクリック。
〔図：01-068〕
3. パレットが現れる。上の段で塗りつぶしの色をクリックして指定する。
〔図：01-069〕
4. 下の段で枠の色を指定する。
5. 「Border Width」と書かれた領域でボタンをプレスし左右にドラッグすると線の太さを変えられる。
〔図：01-070〕
6. うまく変更できたら Accept 、元に戻したければ Cancel
内部の塗りつぶし色設定に関しては Cancel が効かないらしい。
▼ドロー系ソフト的な変更のしかた 〜その２：メニューコマンドを使う〜
1. Ellipse をコマンド＋クリックで選択。
2. 赤ハロをクリックしてメニューを呼び出す。
3. fill style → change color... を選択。
〔図：01-071〕
4. カラーパレットが現れるので好きな色をクリックして選択。
〔図：01-072〕
5. パレットが消えて、Ellipse がその色になる。
6. 再び、コマンド＋クリックで選択。
7. border style → change width... を選択。
〔図：01-073〕
8.好きな太さになるまでマウスをドラッグし、クリックして決定。
〔図：01-074〕
カラーパレットの上部にある「translucent」と書かれた横長の矩形領域は、透明度を指定するスライダになっている。クリック(もしくはドラッグ)してグレイのバーの長さを短くすると透明度が増す。
〔図：01-075〕
【図：translucent バーによる透明度の変更】
▼ビューワを使う方法
ビューワに通常２〜３枚表示されているパネルの上部には、そのパネルに含まれるフレーズが分類されているカテゴリ名称が書かれている。その左側にある緑の上下矢印ボタンもしくはカテゴリ自身をクリックしたとき表示されるポップアップメニューを使ってパネルに表示するカテゴリを切り換えられる。
1. ビューワが閉じていたら開く。フラップがなければ水色ハロで呼び出す。
2. color & border パネル(pane=ペインとも言う)がなければ呼び出す。
5.「Ellipse's color ←」フレーズタイルを探す。
4.「←」の右側の黄色の矩形をクリック。
〔図：01-076〕
4. カラーパレットが現れるので、好きな色をクリックして選択する。
他に borderColor、borderWidth で線の色や太さを変えられる。
■枠からはみ出たことを知る方法 〜その１：足下の色から判断〜
５ドットずつ前進するスクリプトをスタートさせると、Ellipse はわき目もふらず進み続ける。彼の行動範囲を Rectangle の中に限定するにはどうしたらよいのだろうか。
カテゴリ「tests」や「observation」には、Morph の置かれた状況を判断するためのフレーズタイルが収められている。「observation」の「Ellipse's colorUnder」はMorph (の中心点)の下にどんな色があるかを観察する機能を提供する。
1. いずれかのパネルのカテゴリ欄をクリック。
2. メニューから observation を選択。
〔図：01-077〕
3. Ellipse をクリックしてピックアップ。
4. ドラッグして Ellipse's colorUnder の右手の矩形の中の色の変化を観察。
〔図：01-078〕
この機能を利用すると、Rectangle の上にいるかはみ出したかどうかを判断できそうだ。
■カメレオン機能を付加する
Ellipse's colorUnder フレーズのスクリプト中での使い方を知るために、Ellipse に、自分のいる場所と同じ色になるスクリプトを組んでみよう。
1. color & border パネルの Ellipse's color ← □ を紫色の矢印の部分でクリック＆ピックアップ。
2. スクリプタにドロップイン。
〔図：01-079〕
3. ビューワのパネルのひとつを observation カテゴリに切り換える。
4. Ellipse's colorUnder の colorUnder パネルをクリック＆ピックアップ。
5. スクリプタ上の Ellipse's color ← □ の矩形にドロップイン。
〔図：01-080〕
6. Ellipse の進行方向に Rectangle が位置するように移動。
7. スクリプタの時計アイコンをクリックしてスクリプトをスタートさせる。
〔図：01-081〕
Ellipse は 最初デスクトップと同じ色になり、続いてRectangle にさしかかるとRectangle と同じになる。
■枠からはみ出ると警告の赤に変わる機能を付ける
外部からの刺激(メッセージ)に反応するだけでなく、状況を判断し作業を切り換える力を持つようになると、Morph はぐっと我々に近い存在に思えてくる。条件分岐パネルは、スクリプトの単調な繰り返しにバリエーションを持たせるのに役立つ。このパネルと、前の色を変えるスクリプトを利用して Rectangle の上では黄色だが、はみ出ると赤くなるスクリプトを組んでみよう。
1. スクリプタに Ellispe's color ← Elllipse's underColor フレーズがあれば破棄する。
2. スクリプタ右上のベージュのボタンをクリック。
〔図：01-082〕
3. 条件分岐パネルがピックアップされるので、スクリプタ内にドロップイン。
〔図：01-083〕
4. ビューワの observation パネル内の「Ellipse's colorUnder □」フレーズをピックアップ。
5. スクリプタの Test の項目にドロップイン。
6.「Ellipse's colorUnder = □ color」となるので、この□をクリック。
7. カラーパレット(カラーピッカー)が現れるので、Rectangle の地の部分をクリック。
8. ビューワの color & border 内の Ellipse's color ← □ フレーズを紫矢印をクリック＆ピックアップ。
9. 条件分岐パネルの Yes の項目にドロップイン。
10. 同様に Ellipse's color ← □ フレーズを No の項目にもドロップイン。
11. Yes の項目の □ color をクリックしてパレットから黄色を指定。
12. No の項目の □ color をクリックしてパレットから赤色を指定。
〔図：01-084〕
13. EllipseMoprh を適当な場所に置いて、スクリプタの時計ボタンをクリック。
〔図：01-085〕
■枠からはみ出たとき来た道を戻る
上のスクリプトで色を変えると同時に方向も変えれば、行動範囲を枠内に限った性質を付加できる。はみ出したら来た道を戻る(180 度方向転換する)パネルを追加してみよう。
1. スクリプタの No 項目に Ellipse's heading ← <数値> フレーズをドロップイン。
2. ビューワの Ellipse's heading の heading パネルをクリックしてピックアップ。
3. スクリプタの Ellipse's heading ← <数値> パネルの <数値> 部分にドロップイン。
4. 同じ Ellipse's heading ← Ellipse's heading の heading の後ろの緑の矢印をクリック。
5.「 + 1 」という式パネルが追加される
6.「 1 」をクリックして 180 とタイプして入力後、enter キーで決定。
〔図：01-086〕
〔図：01-087〕
【図：壁に当たると引き返す。】
これで壁(境界線)に反射する仕組みを加えれば、最初の絵の様な性質を持つ Morph を作ることができる…のだが、残念ながらここで行き詰まる。たとえば貴方が今の Ellipse だとしよう。貴方は目をふさがれ、特殊なめがねで足下の一点が許された行動範囲に塗られた色と同じかどうかを知ることができるとする。そして、今、進んでいる向き(方角)を知らされた状態で、足下の色が突然変わったとき次にどちらに向けばよいか判断できるだろうか？ 否。縦と横のどちらの境目を越えてしまったのかが分らないからだ。
いずれにせよ、今のままでは枠から身の半分もはみ出さないと判断がつかないなどの問題もあるので、また別の方法を考えることにしよう。
■枠からはみ出たことを知る方法 〜その２：位置情報から判断〜
ビューワの geometry パネルには自分の位置(x、y、top、bottom、left、right)や大きさ(width、height、scaleFactor)、原点と結んだ線分(長さ=distance)が x 軸となす角度(theta)などの幾何的な情報を示すフレーズが集められている。Ellipse も Rectangle も同じ情報を違いに参照しあえるので、例えば Ellipse の右端(right) が Rectangle の右端を越えたら右手の縦のラインにぶつかったことを、left で比べれば左手の縦のラインに、top では上の横、bottom では下の横と判断できることが分る。
〔図：01-088〕
【図：geometry パネルの情報】
■壁にぶつかったら跳ね返る
ぶつかったときに反射するような角度の計算は上下の横のラインの場合は「180 - <進んできた角度>」、左右の縦のラインの場合は「0 - <進んできた角度>」となる。こうした仕組みをフレーズパネルで表現すると次図のようになる。
〔図：01-089〕
【図：壁にぶつかったときに跳ね返るスクリプト１】
ただ、これだと枠(壁)に突入するタイミングによっては、境界にトラップされて身動きが取れなくなることがあるので、方向転換をしたら無条件に一歩前進するよう Ellipse forward by ← 5 パネルを方向転換パネルの後にそれぞれ追加しておく。
〔図：01-090〕
【図：壁にぶつかったときに跳ね返るスクリプト２】
スクリプトをスタートさせると、イメージ通り、枠の中ではね回るのを見ることができるだろう。
■同じ性質の仲間をつくる
ひとりだけでは寂しいので、同じ性質をもつ Ellipse を量産してみよう。
▼緑ハロを使う
1. Ellipse をコマンド＋クリックで選択。
2. 緑ハロをクリックすると複製がピックアップされる。
〔図：01-091〕
3. 適当な場所でクリックしてリリース。
▼メニューを使う
1. Ellipse をコマンド＋クリックで選択。
2. 赤ハロでメニューを表示。
3. sibling ... → make a sibling instance を選択。
〔図：01-092〕
メニューで make mutiple siblings ... を選んで数を指定すれば、指定した数だけのコピーをいっきに作ることができる。なお、これらの作業はスクリプトを止めずに Ellipse が動いた状態でも可能である！ 逆に、スクリプトを止めた状態で複製された Ellipse は静止した(スクリプトは機能していない)状態にあるので、それぞれのビューワから当該スクリプトをおのおのスタートさせる必要がある。
■一斉にスクリプトをスタートさせる
各々のビューワからスクリプトをスタートさせるのは面倒である。今扱っている Morph のように単一のスクリプトしか持たない Morph の場合、All Scripts を使うとスクリプトの一斉スタート、ストップが大変楽になる。
1. Widgets フラップから All Scripts をデスクトップにドラッグ＆ドロップ。
〔図：01-093〕
2. Start ボタンをクリックすると、Ellipse たちが動き出す。
〔図：01-094〕
3. Stop ボタンをクリックすると、全員、停止する。
■一斉にスタート、ストップさせるためのスクリプトを組む
scripting カテゴリにはにはスクリプトの制御に関するフレーズもあるので、これを別のスクリプタにまとめれば、指定した全てのスクリプトを一斉にスタートさせるためのスクリプトを組むことができる。こうしたスクリプトは Rectangle に持たせるのがいいだろう。
1. Rectangle のビューワを開く。
2. パネルのひとつを scripts カテゴリに切り換える。
〔図：01-095〕
3. Rectangle's emptyScript をクリックしてピックアップ。デスクトップでリリース。
4. 各 Ellipse のビューワの scripting カテゴリから Ellipse start script script1 を新しく作った Rectangle の空のスクリプタにドロップインする。
〔図：01-096〕
この Rectangle のスクリプトをスクリプタの「!」ボタン(時計ボタンではない)で do すると、一斉に各 Ellipse たちのスクリプトを開始することができる。別の空のスクリプタを作り、Ellipse start script script1 の変わりに Ellipse pause script script1 フレーズをドロップインしたものを用意すれば、一斉に Ellipse たちのスクリプトを停止することもできる。
〔図：01-097〕
【図：開始のためのスクリプタ。】
〔図：01-098〕
【図：停止のためのスクリプタ。】
■一斉にスタート、ストップさせるためのボタンを作る
こうして作られたスクリプタは右上の◎ボタンをクリックすることで内容を保持したまま非表示にすることができる(ちなみに右端の(×) ボタンだとスクリプト自体の削除になる)。スクリプトはビューワの中でもスタート＆ストップできるので、これで扱っても良いが同じ働きのボタンがあればより便利だ。
1. 「一斉スタート」スクリプタの Rectangle ボタン(ビューワ内なら同フレーズのメニューアイコンボタン)をクリック。
〔図：01-099〕
2. メニューが表示されるので、button to fire this script を選ぶ。
〔図：01-100〕
3. ボタンが作られピックアップされるので適当な場所でリリース。
〔図：01-101〕
4. 作ったボタンをコマンド＋クリックで選択。
5. 赤ハロでメニューを呼び出し、change label を選択。
〔図：01-102〕
6. go などとタイプして入力し、enter で決定。
〔図：01-103〕
これでスクリプトを一斉スタートさせる go ボタンができる。一斉にストップするスクリプタについても同じ事をして stop などと名付ける。
〔図：01-104〕
【図：ボタンでスタート、ストップする Ellipse たち】
前へ 次へ
＃更新履歴＃
2002.02.24 後編、Swiki に移植。テキスト版作成。グラフィック版へリンク。
2002.02.19 テキスト版、図入り版相互リンク(Ｔ/Ｆ リンク)。 →削除
2002.02.18 自分で 100 ゲット(^_^;)。BBS 開設。
2002.02.17 図版挿入。#1 完成。
2002.02.17 3.2gamma ベース。初稿図版なし版暫定公開。
●感想、要望、苦情(^_^;)は 鷲見 か BBS まで、お気軽にどうぞ。
このページを編集 (14558 bytes)
 |
以下の 1 ページから参照されています。 |
This page has been visited 2613 times.