第71回Smalltalk勉強会でのLT内容（前編）

12/25に年末恒例のSmalltalk勉強会があり今年も参加してきた。昨年はビデオ参加で他の方の発表がちゃんと聞けなかったのだけど、今年はいろんな方の発表が聞けて多いに楽しんだ。
せっかくのチャンスなので自分も発表をしたけど、他の方の真面目な取り組みに対してかなり緊張感のない内容で申し訳なかった。
パワポなども一切持って行かずにその場でのぶっつけデモだったので、せめて発表内容についての簡単な説明をしてお詫びしたいと思う。

「オトナのためのVPL」

こんなタイトルの発表だったのだが、開始から２時間後の発表で、ビールですっかり酔っぱらってしまい１割も言えていなかったが趣旨としてはこんな感じだった。

Scratchびすけっとを始めとしてさまざまなビジュアルプログラミング言語（VPL）が流行している。テキスト系の言語に対してVPLを卑下する見方もあるけど、プロトタイピングなど使う場面によっては生産性を高める場合もあるだろう。
過去10年くらいグラフベースのVPLに取り組んできたが、2年前のSmalltalk勉強会の帰宅途中の会話にヒントを得て、Pharo Smalltalkの素晴らしい開発環境にシームレスにつながるVPLが作れないか試行錯誤した。
実用的な段階にはまだまだ遠いが、現状でどのような感じなのかを見てもらいたい。

Roassal3dの準備とFluoのインストール

デモではインストールから始めて格好よく見せようと思ったのだが、実は事前にRoassal3dのインストールを行っていた。

MetacelloConfigurationBrowser open.

でRoassal3dを選んでInstall Stable Versionを押し、インストールを済ませておく。
次に公開されているFluoの最新バージョンをインストールする。今回はデモでRoassalとLeapMotionを使ったのでそのパッケージを追加する。

Gofer new
  url: 'http://smalltalkhub.com/mc/oohito/Fluo/main';
  package: 'Grafeo';
  package: 'Fluo Core';
  package: 'Fluo Devices';
  package: 'Fluo UI';
  package: 'Fluo LeapMotion';
  package: 'Fluo Roassal3d';
  load.

上記をWorkspaceにコピペしてDo itすればよい。
なお、利用しているPharoのバージョンは3.0である。環境に合わせてダウンロードしておく。
小田さんの発表で「Jun」のPharo移植が述べられていたので、将来的には3D表示系としてそちらを採用する可能性が高いと思う。

Roassal3dのデモ

Fluo new openInWorld.

Workspaceで上記をDo itすると、以下のような画面が現れる。

左側のボタンでLoadを選んでRoassal3dDemo1を選ぶと以下のような画面になる。

これはRoassal3dの3Dビューに立方体を表示させ、それを黄色に赤のジョイスティックを模したMorphで上下左右に動かすデモである。ジョイスティックは赤いノブをマウスでドラッグすることで、上下左右に動かすことができるので試してみる。

ノードの説明

このデモには５つのノードがある。ノードの右下のプロパティボックスに小さな文字で書かれているのがノードの名前である。列挙すると以下の通り。

Roassal3dProxy
FluoR3AbsolutePosition
MonitorBehavior
JoystickBehavior
TimerBehavior

ノードは３種類あり、円の中央の図形で区別する。中央の図形が正方形のものはプロキシといってFluoの外の世界をつなぐノードである（このデモだとRoassal3dProxy）。円のものはビヘイビアと言ってFluo内でさまざまなデータ処理を行うノードである。三角形のものはトピックといってプロキシとビヘイビアをつなぐノードである（このデモだとFluo3dAbsolutePosition）。ノード間は一方向のアークで結ばれ、その向きでデータが流れる。
Roassal3dProxyはその名の通り、Roassal3dを用いるためのノードである。このノードは接続されたトピックに従ってRoassal3dのエレメントを生成して表示する。
FluoR3AbsolutePositionは、プロパティで指定した形状のRoassal3dエレメントを操作するトピックである。入力として３次元座標を受け取ると、その位置にエレメントを配置する。
MonitorBehaviorは受け取ったデータをプロパティボックスに表示するだけのデバッグ用ノードである。他には何もしない。
JoystickBehaviorは、プロパティボックスに表示したジョイスティックの位置の２次元座標(-1から+1の範囲)を送信するノードである。ただし、tickメッセージが来た時だけデータを送信する。
TimerBehaviorは、指定した間隔でtickメッセージを送信するノードである。
これらのノード間でデータは、（デバッグ用ノードであるMonitorBehaviorを除くと）TimerBehavior -> JoystickBehavior -> FluoR3AbsolutePosition -> Roassal3dProxyのように流れる。つまり、TimerBehaviorで生成されたtickメッセージがJoystickBehaviorに送られると、ジョイスティックの位置データがFluoR3AbsolutePositionに送られ、それが形状データとともにRoassal3dProxyに送られて3Dビューが更新される。

動かしてみる

TimerBehaviorのプロパティボックスにあるチェックボックスをクリックすると、tickメッセージの送信が100ms間隔で始まる。データを受け取ったノードは中央が白くなるのがわかる。ジョイスティックを動かすと座標がMonitorBehaviorに表示されることがわかる。
Roassal3dProxyのプロパティボックスにあるチェックボックスをクリックすると、下図のようにRoassal3dの3Dビューが現れ、立方体が中央に表示される。

ウィンドウをずらしてジョイスティックを操作すると、操作に応じて立方体が上下左右に動くのがわかる。

修正

このデモでは、上下の向きがジョイスティックと立方体の動きとで逆になってしまう。
発表時に南谷さんからその修正ができないかと問われたのだが、酔っぱらっていたためにその場で対応できなかった。
これに対応するにはデータを修正するノードを追加すれば良い。新しいノードを作るのは手間がかかるので、Smalltalk式を設定できるExpressionBehaviorを追加する。
Fluo画面の上部にあるnew behaviorというノードのプレースホルダをドラッグして、適当な場所でドロップすると、ポップアップメニューが現れる。
その中のdata convertサブメニューからExpressionBehaviorを選ぶとそのノードが追加される。

expression=の右の空欄をクリックすると入力欄が現れるので以下をコピペする。

data at: #y put: (data at: #y) negated. data

受け取ったDicionaryデータ(data)のyキーの数値の正負を反転させるというものである。ExpressionBehaviorはこのようにインスタントにSmalltalk式を埋め込むことができる。
後は下図のようにアークを繋いでデータの流れを変える。

アークを繋ぎ変えるには、アークをクリックして丸いハンドルを出し、それをドラッグ＆ドロップすることで行う。
以上でジョイスティックの上下の向きが立方体の動きと合うようになった。
記事が長くなったので、いったん打ち切ってLeapMotion関係は別記事にまとまる。