Snippets

対抗して作ってみた。

Visulanを実装している話

マイナー言語 Advent Calendar 2013の参加エントリーです。

Visulanとは?

Visulanという言語をご存知でしょうか。最近の言語をフォローしている方でも多分知らないと思います。なぜなら最近の言語ではないからです。発表されたのは 17年前、1996年になります(論文)。そうか、もうそんなに時間がたったのかあ。

ではなぜそんな言語をここで紹介しようと思ったのでしょうか。それは単にマイナー言語の中でもデモすると見栄えするからです。

まあ、とりあえず Visulanの処理系で、すこし動き始めたものが以下にあるので見てください。ちなみに Chrome 31と Firefox26でテストはました。

デモ1

f:id:dagezi:20131215084143p:plain

まあ、わけがわからないと思いますが、Playを押してみてください。なんかドットが動き始めたと思います。これが Visulanのプログラムを実行したところです。

Visulan = Visual Language

そもそも Visulanは Visual Languageの略です。プログラム言語とはなにか、と考えていらない要素を省いて行ったら文字までなくなった、そういう極北に来てしまったのが Visulanです。先ほど見た緑色の枠で囲まれたりしたドットの集まり、あれが Visulanのプログラムなのです。

アニメーションだけでは言語っぽくないので、もうすこし計算をさせてみます。二進加算器です。

f:id:dagezi:20131215084134p:plain

これを実行すると、紫と青の点滅を繰り返すドットが右に動いていって、上の2つの水色のドットを (繰り上がり付きで)足した結果を下に書いていきます。こうして、ちゃんと Visulanでも計算できることを示せました。頑張れば掛け算だってできるはずです。夢が広がりますね!!!!!

プログラミング言語の条件としてはチューリング完全であることがよくあげられますが、それは最初の論文の中にチューリングマシンをエミュレートすることで示してあります。まあ、実はそれはまだ対応していない機能を使っているので、この実装ではまだ示せないのですが。

Visulanの解説

もうそろそろ眠くなってきたのでさっさと解説します。大部分の人はデモさえ見れば満足でしょうから。詳しく知りたい人は論文を参照してください。

ターゲット

右側にある大きな緑色の矩形領域、これがターゲットです。別に右側にある必要はなく、隅にひげがついた緑色の矩形ならどれでもいいのですが。これが、データ領域のようなもの、Visulanのプログラムが操作する対象になります。

ペア

左側にいくつかある、2つの左右の部屋に分けられた緑色の矩形をペアといいます。これが Visulanのコードの本体です。 これは描き変えルールを示していて、左側にある絵にマッチしたら右側に置き換える、というだけです。複数の絵がマッチしたらどうするんだ、とか心配症の人は思うでしょうが、左上から優先順位が付けられます。

Visulanの実行とは、どんどん絵をみつけて置き換えていくだけ、それだけです。

拡張ペアとか宣言とか

論文を呼んでいただくとわかりますが、その他に拡張ペアとか宣言とかありますが、まだ実装してません。すみません。 まあ、反響出たらやるかもしれないので、やって欲しい人は dagezi先生に応援のメールとかを出してください。

編集機能

テキストエディタでvisulanを書くわけにも行かないので、当然ながら編集機能がついてます。はっきりいって使いやすいものじゃないと自負してますが、これは作者のセンスの無さだけではなく Visulanの思想も反映しているのですと言い訳しておきます。

編集はモードがあります。モードレスなんかクソ食らえです。Edit/Select/Pasteです。編集に Editモードがあるのは再帰的な気もしますが、書きながら気づいたので後で何とかします。

Editはドットをひとつひとつ置いていくモードです。モード選択ボタンの右に27個の色がついた場所がありますが、そこがパレットです。そこで選んだ色で絵を書いていきます。27色は 3の3乗ということで、「みたか27色、聞いたか 6重和音」って感じで選んだのですが、はっきりいって視認性悪かったと今では反省してます。あ、あとアルファベット26個+1で内部表現に都合がいいな、というもありました。

ちなみに Undoはありません。これは、作者の無精さもありますが、Visulanの思想に基づくものだ、といえなくもありません。でもオリジナルの実装にはあったような気もして牽強付会気味です。

Selectはわかるように矩形領域をドラッグで選択します。

選択した領域は Pasteモードで適当な場所に貼り付けられます。Pasteはコマンドではなくてモードです。Pasteモードになってから Pasteする場所をクリックで指定します。こういう変な UIになっているのは思想もあるけど、ではなく単にショートカットキーとかやるのが面倒くさかっただけです。

あと、みんな大好きセーブ機能はありません。代わりに Linkボタンを用意しときました。Linkボタンを押すと URLが出てくるので、それをどこかにコピーして保存しといてください。その URLに飛べば、ドット絵の状態にもどります。

ちなみに、編集は Play中でもできます。点を書くと、それがいきなり動き出したりして面白いっす。ただ、ペアの部分は描き変えてもすぐには影響しません。Pauseして Playしなおさないと反映されません。あしからず。

Visibility

一応思想思想と書きましたが、Visulanの思想の一つに Visibilityというものがあります。これは「すべての状態は画面に見せるべきだ」というものです。隠れた状態も持ってはいけないのです。隠れた状態を持たないことにより、ユーザにはコンピュータの動作がより予測しやすくなるだろう、という狙いです。くわしくは Scott Kim: Viewpointあたりでぐぐってください。

具体的な例としては、コピーペーストは、コピーしたものがペーストするまで画面上に見えません。つまり隠れた状態をもっているのです。そういうわけで、この実装のペーストはこんなふうになっているのです。

ちなみに Visulanを引き継いだ言語に Viscuitというのがあります。主に子供用の言語(というかシステム)として開発されています。

おしまい、

ということで楽しんでいただけたでしょうか。

最後に、今回の実装のソースは https://github.com/dagezi/visulan-js にあります。 あと、おまけとして ターゲットしかない画面を用意しとくので、すきなコードを書いてみてください。

ではごきげんよう。