Elementsのつまみ食い
阿部さんにコメントで教えて頂いた、タイルでプログラミングする Smalltalk、Elements ですが、これがまた凄く楽しいのです！これは遊んでみなくちゃ損だわねっ。
そこで、Smalltalkのつまみ食いで作成したスクリプト
| pen | pen := Pen new roundNib: 8; color: Color red. [Sensor yellowButtonPressed not] whileTrue: [ Sensor redButtonPressed ifTrue: [pen goto: Sensor cursorPoint] ifFalse: [pen place: Sensor cursorPoint]]
を、Elements で作成してみる、なんて、ちょっとしたチュートリアルを作ってみました。――「こんなに簡単ならチュートリアルなんて必要ないじゃん」とはつっこまないお約束ですよ。
起動とElementsの基本
Elementsは、Elements は Scratchにインスパイアされた、Smalltalk-80プログラミング言語向けの新しい グラフィカルユーザインターフェイスです。
Elements を起動すると以下のような画面(Elements Window)が開きます。
これは普通の Smalltalk の システムブラウザに相当するもので、ヘッダ、パレット、スクリプティングキャンバスから構成されます。
まず、Elements の基本的な文法要素（エレメント）を説明しましょう。
大きく、「四角い形のエレメント」と「パズルのピースのような形のエレメント」の２種類があります。
四角いエレメントは基本的にネストするように組み合わせることが出来ます。
パズルピース型のエレメントは基本的に数珠つなぎにすることが出来ます。
四角い外形を持つものが値や式、パズルピース型のが文ということですね。なのでクロージャでくるめば、
と、文を式に変えることが出来ます。この形のはめあわせのアイデアは とっても面白いモノだと思います。
ペン
この Elements のウインドウは、システムブラウザ相当で、ワークスペースみたいなのはありません。だから先のペンのプログラムでいう テンポラリ変数の生成に困ってしまいますが、それはとりあえず後回し（空のマスのまま）にします。
とりあえず、ペンの生成です。ウインドウのヘッダの左上の▽をクリックして、表示するクラスを選びます。これから Pen に関する
この状態でヘッダ右の [Messages]ボタンをクリックすると、パレットにPenのメッセージのエレメントが表示されます。
ちなみにクラスメソッドは、クラス名の直ぐ下の
また、[Classes]を選択すると、現在選ばれているカテゴリ内のクラスのエレメントが表示されます。
さて、件のコードの最初の文、
pen := Pen new color: Color red; roundNib: 8.
に必要なエレメントを、Pen と Color クラス のパレットからガンガン引っ張り出します。
あと、[Basics]パレットから、代入とリテラルも必要ですね。これらをどんどん組み立てていきます。ここら辺は見た目のままに組み立てていけばだいたい くっついていくので、取っつきやすいです。
さて、実はこの Elements、ちゃんとカスケードにも対応しています。
のようにドラッグ＆ドロップすると、ほら！
とちゃんとカスケードしちゃうのです（これにはかなりビックリしました。）。ここまででだいたいのメッセージ式は揃いました
で、最後にこれを合体させて、最初の文は完成です。（pen は空白ですけどね）
ブロックとかクロージャとか
今度は次の文
[Sensor yellowButtonPressed not] whileTrue: [ Sensor redButtonPressed ifTrue: [pen goto: Sensor cursorPoint] ifFalse: [pen place: Sensor cursorPoint]]
の作成のための材料を集めます。まず、グローバル変数 Sensor が必要ですね。クローバル変数を得るには、トップメニュー左上の[Valiables]の左横の▽をクリックして、そこで
のようなメニューが出るので、globals を選択すれば良いです。
意外にグローバル変数少ないですね。
さて、メッセージのエレメントを引っ張り出したいので、Sensor がクラスなのかを調べてみます。こういう時は、Object >> #class メッセージ で調べるのが定番です。Sensor class なエレメントを作ります。
実は各エレメントは直接実行することができます。このエレメントを右クリックすると、
のようなのが出るので、show result... を選択すると
と、こんなかんじ。というわけで、Sensor は InputSensor クラスのインスタンスなようです。選択、
そして、必要そうなタイルをまとめて引っ張り出し。
あとは Boolean >> #not と BlockContext >> #whileTrue: ですね。
さくさく組み立てます。
ただし、#ifTrue:ifFalse: については、Boolean ではなく、Basics パレットのテストエレメントを使います。（特別扱いですね）
必要な部品は揃ったので、あとは組み立てるだけです。
と言うわけで、(テンポラリ変数の pen 意外）必要な文はできあがりました。
テンポラリ
さて、最後まで棚上げしていた、テンポラリ変数 pen ですが、仕方がないのでメソッドコンテキストを間借りします。Elements Window のスクリプティングキャンバスの左上にちょこんといたエレメント、これがメソッドのタネです。ここを右クリックすると、
こんなメニューが開きます。add valiable を選びます。（ホントはここで renameを選んで、新しいメソッドを作るんですけどね）すると、変数名を聞いてくるので、
入力して OK すれば、テンポラリ変数が作られます。
で、この pen エレメントで、最後までお残ししてた空マスを埋めていきます。
以上で完成です。
まとめというか、感想というか
こうして Elements で遊んでて思うのは、なんというか センスがよいというか品質が高いというか、作りかけ感をあまり感じさせないのが良いですね。安心して遊べます。
ただ、Etoys とちがって、Elements のタイルスクリプトは、タイル（エレメント）のドロップ時に 型チェックをしてくれないので、実行すると構文エラーになっちゃうスクリプトを組み立てることが出来てしまいます。ここら辺はまだ未完成だからからでしょうか、今の Elements は単なるコードジェネレータっぽいところがあって、実際、グローバル変数の引っ張り出し方がわからなかったとき、リテラルエレメントで無理矢理
なことをやってみたら、動いてしまったという(w
ただ、完成してもSmalltalkの文法的に型チェックはちゃんと出来ないような気がします。
Etoys のようなタイルスクリプトがうれしいのは、見た目のフレンドリーさよりもむしろ、コンパイル時ならぬ コーディング時型チェックが、素人がプログラミングする最大の障壁――簡単なシンタックスエラーとそのデバック を排除できることにあります。
そういう意味で、Elements はタイルスクリプトの旨味が一つ失われてしまっています（つまり、Elements であったとしても、ちゃんと Smalltalkの文法をしらないと、文法エラーのないスクリプトはつくれないってこと！）
あと、タイルのネストが Smalltalk の メッセージの文法はあまりあっていないように感じています。Smalltalkのメッセージ式は、メッセージを後ろ、後ろにメッセージラリーで繋げていくのが気持ちよい文法なのですが、それがタイル化によってスポイルされてしまっています。また、セレクタがレシーバの後置なるので、タイルのお尻（セレクタ部）をマウスでの掴んでドラッグ＆ドロップになるので、ちょっとやりにくく感じます。
と、いう風にElements 自体はとっても出来がよいのですが、やっぱりタイル用に作られた文法でないというハンデは感じます。
一方で、Elements が予想外に魅力的だったのが、そのイメージがコンパクトなこと。Blue Book というか、まさに Smalltalk-80 という感じで、肥大化した Smalltalk のイメージに慣れたわたしの目には、そのあまりのクラスの探しやすさ、見やすさ、見通しのよさにビックリしてしまって、ウキウキしてしまいます。まるで千里眼を得たような気分。Elements Window や、カテゴリ階層分けの上手さ見やすさもあいまって、Smalltalk-80 の勉強用に、コードリーディングに、この小さいイメージはとってもいいかも。
また、Elements Window は 小さい画面でもとても見やすい/扱いやすい なので、iPodTouch みたいな、小さいタッチパネルなコンピュータにいれて、時間の合間に文庫本を読むように Smalltalk のコードを読んだりとか、いいなぁ・・とか思ってしまいます。いいなぁ。
