MOON DROP 〜Etoysチュートリアル：前編〜
月が地球に落ちるお話が、なぜだか reddit に取り上げられて、ちょっとビックリ。うれしいのだけれど、反面、小学生もつかっている環境で、極々初歩的なバグをだしてハマってる本職プログラマ・・・という、とっても情けない姿をさらしてしまったわけで、心中複雑...。
それはさておき。うちの辺境ブログは、普段はプログラマな読者ばかりなので、Etoys の使い方とか そんなに配慮していなかったのですが、紹介されたおかげで 興味有るけれどプログラムなんて組んだことない、という人がいらっしゃっているかもしれません。Etoys は小学校の授業でも使われているほど、ハードルの低いプログラミング環境ですから、「このシミュレーションを作ってみたーい、けどプログラミングはねぇ」と思っていても、やってみたら、意外に簡単に作れちゃうハズ。
というわけで、せっかくのご縁ですし、先のエントリーを肴に Etoys のお手軽チュートリアルを書いてみました。（やってる中身は変わらないのです）
長くなったので前後編で。今夜は前編なり。
インストールと初期設定
何事も、まずはここから。今回はSquealland.org の最新版を使います。
実はちょっと古いけれど最初っから日本語化されてて使いやすいのが日本のスクイークランドにあって、そちらの方が安全確実なのですが、使いたい新しいタイルがあるとか、私が新しもの好きだからとかで(^^; あえて最新のを。
http://squeakland.org/download/ にWindows/Mac/Linux 用のインストーラがあるので、自分のOSに合わせてダウンロード、インストーラに従いインストールしてください。
さて、インストールされた Etoys を起動すると
な画面がひらきます。これは日本語フォントのインストールをしたい、ってコトなので そのまま Yesを選択してください*1。日本語フォントのダウンロード＆インストールが自動的に行われます。（2回目の起動以降時は、ローカルに保持ったフォントファイルを取り込む様になります）
日本語フォントのセットアップが終わると
な画面が開くハズ。ようこそ Etoysへ！（でも、下のタイルは日本語じゃないかもしれない）
起動できたところで次は環境設定。画面上の緑色のメニューバーより、地球儀の書いてある旗のアイコンをクリックしてください。
言語選択リストが表示されるので「Japanese(日本語)」をチェック（最初から選択されているならそれで良し！）
以上で、インストールと設定はおしまいです。
プロジェクト（あたらしいページ）を作る
Etoys の スクリプティングは、スケッチブックに動く絵を描くような感じです。だから新しい何かを書き始めるときは真っ白な新しいページを開くのが当然。このページのことをプロジェクトと呼びます。
新しいプロジェクトを作るには、画面上の緑色のバーより、いかにもな感じのアイコンをクリックします。
すると新しいプロジェクトが作られ、それへの「窓」が開きます。
とりあえず「名無し」じゃあんまりなのでタイトルを付けましょう。うーんと、BLUE DROP MoonDrops とでも付けましょうか。名前の部分をクリックすると変更できますので 新しい名前を入力。
そうしたら、さっそく窓の中をクリックして新しいプロジェクトに入りましょう。
地上の重力シミュレーション
チュートリアルの一番最初の課題は、定番の地上での重力シミュレーション。まずは落とすお月様を作ります。
お月様の見てくれを作成
新しいオブジェクトは、緑のバーのおもちゃ箱アイコンをクリックし、開いた引き出しの中からオブジェクトをドロップして作ります。
「楕円」というオブジェクトがありますのでそれをトレイの外にドラック＆ドロップ。（引っ張り出すと 新しい楕円オブジェクトが作られるので、トレイの中の「楕円」が消えてしまうことはありません。ご安心を）
さっそくこの新しい楕円オブジェクトに「月」という名前を付けましょう。名前を変更するにはオブジェクトを真ん中ボタンクリック（またはAlt + クリック）すると、
のように名前と、その他ゴチャゴチャが出てくるので、プロジェクトに名前を付けた要領で変更します。ちなみにこの周りを取り囲むよに出現する 小さくて丸いカラフルなアイコンはハロといいます。ハーロ！ハロ、今日も元気だね。
楕円のまんまじゃ月に見えないので、まずは形を整えます。月のハロを表示させて、その中の右下にいる黄色いハロをドラッグします。
そうするとオブジェクトのサイズを拡大・縮小思いのまま。
次に、ノッペラボウのままでは月がどっちを向いているか解らなくってのちのち困るので、クレーターをくっつけてあげます。またもハロを表示させて、その中から左上のほうの白いハロをクリックして、メニューを開きます。
「ドロップを受け入れるか」をチェックを入れます。
おもちゃ箱から新しい楕円を引っ張り出して、クレータと名付けます。ここで一つひみつを明かします。実はEtoysのオブジェクトはマウスでトンッとたたくだけで掴んだままになるのです。で、目的の場所まで移動してもう一度トンッとたたけばそこに落ちます。
そう言うことなので、クレータを掴んでお月様の上にトンッと落とせば、先ほど「ドロップを受け入れる」様にしたので、月とクレータは親子関係のオブジェクトになります。月を移動すればクレータもくっついていきますし、月を回せばその上に乗っかって一緒に回るようになります。
（用が済んだら「ドロップを受け入れるか」のチェックは元通りにしておいたほうがいいです。予期せずオブジェクトを上に落としちゃったら取り込んじゃうんで）
スクリプティング！〜その１：新しい変数を追加
さぁ、見てくれは出来ました。重力のスクリプトを書きましょう。
ハロを出します。左の列の水色のお目々アイコンをクリックすると、ビュワーが開きます。
ビュワー。オブジェクトの中身を表示するからビュワーです。Etoysではスクリプトを作るのにこのビュワーを使います。
早速 月の移動速度を保持する変数を追加します。ビュワーの一番上の赤いアイコンをクリックすれば変数名入力ダイアログが開くので、
「速度」と入力します。
スクリプティング！〜その２：新しいスクリプトを追加
お気づきと思いますが、ビュワーは項目をカテゴリ毎に表示しています。ですが、今見えているのはオブジェクトのすべてのカテゴリではありません。見えてないカテゴリを見るには、カテゴリの切り替えを行います。今見えてるカテゴリ名をクリックするとカテゴリのリストが表示されるので新たに切り替えて表示したいカテゴリを選びます。
スクリプトを書きたいので当然「スクリプト」カテゴリをチョイス！です。
今は項目が「空のスクリプト」しかありませんが、新しいスクリプトを追加するにはこの「空のスクリプト」をドラッグしてビュワーの外に引っ張り出して置いてあげます。そうすると、とたんにタイルがスクリプトエディタに大変身。
コレを使ってタイルスクリプトを組むんですね。（Etoy使いはスクリプトエディタをスクリプタと格好良く略します）とりあえず、「スクリプト１」という味気ない名前を「落ちる」に変更してあげましょう。名前重要です。
スクリプティング！〜その３：代入文
Etoys ではプログラムを タイルスクリプトで記述します。プログラマのみなさんには「なんで直接キーボードでコードを叩かせてくれないのさ、ブーブー」と思っていると思いますので、ここで タイルスクリプトのメリットとデメリットを軽く説明。
まずはメリット。タイルの組合せでコードを書くということは、つまり、タイルをドロップした時点で構文や型のチェックがなされるため、文法的に間違ったタイルスクリプトは、そもそも作ることが出来ません。（間違ったことをしようとすれば、その場でタイルが弾かれるのでとてもわかりやすい）これはつまり、コンパイルエラーが絶対おきないってことです。
プログラマをやってると慣れてしまって意識しなくなってしまうのですが、文法エラーはいつだって意地悪。直接をズバリを教えてくれることなんて滅多になくって、後は推理か経験か、という世界。昔々を思い出せば、絶対「あーっ、全然わかんない！」と頭を抱えたころが有ったはず。というわけで、文法エラーが発生しないことは、非プログラマがプログラミングするときホントに大きな助けになります。（文法の不具合は論理の不具合とちがって、思考の道具として本質的なところ（内なる論理のデバッグ）と関係無いので端折れる苦労なら積極的に端折りたい）
デメリットは、書きたいコードがわかっていても、タイルをどこから取得すればいいかわからないとコードが書けないこと。それとコードの見栄えを調節出来ないこと。これはプログラマにとってはちょっとイライラするところかもしれません。（Etoys の場合タイルの取得元は殆どの場合 ビュワーですので、シンプルです。すぐになれると思います）
蘊蓄はここまで。タイルスクリプトの事始めとして、速度の代入文を作成します。（加速していく処理ですね）
代入文の作り方ですが、ビュワーから「月の速度」項目の←の部分を掴んでスクリプタにドロップします。（←を掴んで取得したタイルは左辺値になるってことです）
次に右辺値、変数の中身の取得法。今度は 項目名の部分を掴んでスクリプタにドロップします。ドロップされる範囲が緑で強調されるので注意しながらそこにドロップ。
そのままではなんだか意味のない文ですね。速度を加える処理を書きたいです。[速度]←[速度][+][1] みたいなのが書きたいのですが、算術演算子パネルはいずこより持ってくればいい？
実は算術演算については値の右側の矢印をクリックすると出てきます。
演算の種類は上下の矢印で順番に選べますし、演算子（上図の場合「+」）の部分をクリックすれば、演算子の一覧が表示されるのでそこからダイレクトに選択することも可能です。
というわけで、代入文が完成。
スクリプティング！その４：タートルグラフィック
今度は月を動かす文を作成。Etoys は パパート先生のLOGOより受け継いだ由緒正しきタートルグラフィックを引き継いでます。動くオブジェクトの主観座標系を基本にする教育のための幾何学「タートル幾何学」を用いたプログラミングが可能です。（と、かっこつけて言ってみましたが、要はオブジェクトなりきりプレイです）「タートル幾何学」の基本は オブジェクトが進むことと、オブジェクトが方向を変えること――「進める」と「回す」です。
これは Etoys の基本なので、「基本」カテゴリから 「月を進める」スクリプトをスクリプタにドラッグ＆ドロップ。（頭に！アイコンがついている項目はメソッドです）
進む距離は 月の速度 の分だけなので、定数になっている部分の上から 変数「速度」のタイルをドロップ。
これで最初のスクリプトは完成です。
ペンの使い方
さあ、出来たスクリプトを動かしましょう・・・のその前に。
月が動いた軌跡を残したいので、そのようにしましょう。ビュワーより、カテゴリ「ペンの使い方」をチョイス。
ここら辺もタートルグラフィック由来の機能。ペンを床におろせば線が引けて、床から上げれば線は引かれません。(LOGOでは動かすのは陸ガメみたいなドーム状のロボットで、本当に床に敷いた模造紙に線を引いていたのですよ！）
線の種類は、今回は等加速度運動であることをみたいので、「点」を選びます。
月の向きを下向きに
こんどは、せっかく「重力」のつもりなので、月の動く方向を画面下にしてあげます。
「向き」の値は、図のように時計回りで一周360度になります。マイナスで指定すると逆回りになりますよ！ちなみについでなので Etoys の座標系を説明しちゃいますが、左下の角が座標 (0,0) になります。ごく普通の人の感覚ですが、コンピュータ屋さんの常識ではちょっとビックリです*2。
スクリプトの実行
さあ、細かい準備もおわりました。スクリプトを実行しましょう。Etoys のスクリプト実行は、
- ビックリマークアイコンをクリックで１回実行
- 時計アイコンをクリックで定周期に実行（チクタク実行）
の二通りがあります。Etoys ではあんまりループはつかわなくって（ループタイルは最近までなかったです）、構造化定理にある「順次」「選択」「反復」の前者二つしかない、ちょっと毛色が変わった考え方をするのです。
ループするより、一つのスクリプト（ループの中身に相当）をチクタクで一定時間毎に何回も実行する。微分的なことをする（ちょっとづつ動かす）のが多いので、チクタクの方が作りやすいですし、何より構造化定理はプログラムの絶対の基本の姿じゃないしね。パラダイムがちがうのですよ。（プログラマじゃない人ならスッとなじめると思いますが、プログラマな人ほど手こずるかもですね。）
というわけでこの月が「落ちる」スクリプトもチクタクで実行します。
等加速度運動になっているのがわかりますね。よし、最初のステップが完成です。
蛇足ですが、放っておくと月が画面の外にどんどん行ってしまうので（しかも加速しながら）、画面の外に飛び出す前に ゆとりを持ってスクリプトを止めてあげてくださいましね。
地表の重力シミュレーションをちょっと改良
動きはできました。けれど、放っておくと何処までも何処までも墜ちていくのは不便なので、飛び出す前に止まるように改良するのが吉でしょう。
普通、落ちるモノは地表に衝突すれば止まるので、地表をつくってそれとの衝突判定をする処理を追加します。緑のメニューバーより おもちゃ箱アイコンをクリックして、引き出しから「四角形」オブジェクトを取り出します。これに「大海原」と名前を付けてあげましょう。
「四角形」はもとから水色で水っぽいですが、もっと濃くって海〜！！って感じの色に変えてあげます。
オブジェクトの色は 右列の紫色のハロをより変更します。このハロをクリックすると色パレットが表示され、マウスカーソルがスポイトになるので、パレット上の色なり、画面の中の他のオブジェクトの色なり、好きな色を選んでください。
次に大海原に着水したらもう進まないように、条件分岐を書いてあげます。条件分岐パネルはちょっと特殊なところにしまってあります。スクリプタの中にオレンジのおもちゃ箱アイコンがありますが、それをクリックします。
すると、こんな感じの引き出しが開くので、テストパネルをそこから取り出します。（スクリプタの中にドロップしましょう）。テストパネルの一番上にテスト式を作ります。衝突判定ですね。
さてさて、衝突判定処理ですが、Etoysの定番は オブジェクトの色を使った判定するというもの。オブジェクトの特定の色の部分、またはオブジェクトの全体が、他の色と触れているか居ないかで判断するのです。（ちょっと変わった「定番」ですね）
「テスト」カテゴリより、今回は「月のモーフはその色の上にあるか」タイルをチョイスしてセット。
その後 色の部分（画面のちょい暗めの赤の四角）をクリックすれば、マウスカーソルがスポイトになりますので、大海原の青々した部分を吸い取ります。これで海に着水したかどうかの判断式が完成です。そしたら、
「はい」と「いいえ」のブロックにそれぞれ処理タイルをドロップすれば、条件分岐の完成です。動かしてみましょう。
・・・計画通り！（にやり）
*1:もし、フォントのダウンロードに失敗する時は、http://metatoys.org/pub/FontJapaneseEnvironment.sar をダウンロードして、マイドキュメント直下に作られている MySqueak の中にいれて再チャレンジしてみてください
*2:確かパパート先生のLOGOの場合は画面中央が 0,0 だったと思いました。という余談
