VPGLのご紹介

Try a Visual Programming Graphical Language (VPGL)

VPGLは、電子ブロックから着想を得た、オブジェクト指向の図示的なプログラミング「言語」です。

まずは簡単な例(1+2+…+Nの計算)から:

これは、単なる画像ではなく実行限定(編集禁止)モードになっているVPGLのIDEアプリが張り付けてあるもので、左上のRUNボタンを押すと、プログラム図の実行が始まります。(このサイトでVPGLを実行するためにはjavascriptを有効にする必要があるのでご了承ください。)

RUNボタンを押すとダイアログが一つ表示されますので、(おおむね1000ぐらいまでの)整数を一つ入力してOKボタンを押します。すると、表示されているSUMメソッドのプログラム図が実際に実行されて、その結果を表示するダイアログがポップアップします。そのダイアログを閉じると実行が終了します。例えば100を入力すると、計算実行後5050が表示されるダイアログがホップアップするという感じです。

図の解釈方法とIDEでの作図方法については説明を書く予定になっていてまだなのですが、この図をみていただければ、この手続きが(NumberクラスのSUMメソッドが:

1.上から落ちてきた入力Nが、0以下ならば0を下に出力
(マスB2で、入力が0より大きいかどうか判定し、小さければ、マスD2からC5への経路で出力が下から出る)

2.上から落ちてきた入力Nが、0以上ならば、N+SUM(N-1)を下に出力(マス目B4でSUM自身を呼び出して、C4でNを足してC5から下に出力)

という再帰的定義になっていることが読み取れると思います。(もしスマートフォンなどでご覧の場合には、IDEの部分をピンチイン/アウトしていただければ見やすくなります)

このVPGLのIDEは、プログラム図の作図、編集、デバッグなどが、仮想キーボードからの単語入力と、図上のシングル/ダブルのクリック/タップのみで可能となっています。このため、物理キーボードが不要となっており、タブレット/スマートフォン上でのプログラミングが可能となっています。

また、VPGLはオブジェクト指向言語です。SUMも数値であるNumberクラスの一つのメソッドとして定義されています。VPGLでは、親クラスを指定することによる「継承」も可能で、現在版では、多重継承も試験実装されています。

VPGLは汎用のプログラミング言語として設計されていますが、総和や素数の計算などのような、テキストペースのアプリを動かしてもあまりアトラクティブでなかったので、以下のように3D世界のアプリが動くような拡張機能を試しに導入してみました。

VPGL の 3D機能の試作

現在VPGLは上記のようなプログラム図をたくさん作成することで3Dアプリが作れるようにライブラリ機能が拡張されています。簡単にまとめると、VPGLのインタプリタの中に、その試作拡張機能としてUnityのような3Dプラットフォームが含まれ(自作で、Unityとは関係/連携はありません)ていて、3D世界のイベント(タイマーやオブジェクトの衝突など)のハンドラと、オブジェクトの操作処理がVPGLで記述できるようなものを試作してみました。

3Dブロック崩しの例

例えば3Dブロック崩しはこんな感じです。RUNボタンを押してみてください。打ち返しバーはマウスカーソルを当てて左クリックでドラックするか又は指でタッチしてドラッグすると移動できます。球が台から落ちるか、上部にあるBreakボタンを押すと停止します。

このブロック崩しは、クラスBlkListとクラスBreakOutの17枚のプログラムチャートでプログラムされています。各チャートは、Class:メニューでこれらのクラスを選択して、Method:メニューのメソッド一覧の各項目を選択するとみることができます。(内容の解説は計画中)

プラレールのような3D鉄道おもちゃアプリの例

(これは、今のところVPGLで一番複雑なアプリで)3Dの汽車のおもちゃアプリです。アプリ内「Viewpoint」メニューを切り替えると真上からの視点から、真横からの視点や、運転席からの視点に切り替わります。また「BranchNext」チェックボックスをチェックすると次の分岐ポイントで曲がります。上にあるBreakボタンを押すと終了します。また、汽車が止まっている状態で、下地をシングルタップ/ダブルタップすると、線路配置をアレンジできます。(収拾できなくなったら、WEBページを再読み込みすれば、元に戻ります)

複雑とは言いましたが、クラスRRCar/RRLayout/RRRail合わせて32枚のプログラム図による実装です。

この言語を作ったいきさつ

私は、さる複写機/大型プリンタのメーカーに30年ほと勤務していました。
この言語は、この複写機の上にある小窓の液晶タッチパネルだけでプログラミングする手段を作れないかということが元の作成動機です。

開発にかかわっていたコピー機やプリンタ製品の将来が、いわゆる「オフィスの紙離れ」でそんなに明るくないと個人的にも思っていたので、何かしらのブレークスルーができないかと思っていました。とはいえ、具体的に何というアイディアも思い浮かばなかったので、これらの機械を利用する人が、独自にプログラム可能にして、具体的にアイディアややりたいことを持っている人が、自分で機械の機能を改造追加できるような手段を提供しようという他力本願な目論見でした。

なので、使えるユーザーインターフェースは上についている液晶タッチパネルだけで、物理キーボードとマウスもなしという制約を設定しての開発の時に、文字でのプログラミングは入れるのも、見るのも書き換えるのも容易でないだろうと考え、図でプログラミングすることを考えました。

ところが、図の方も、タッチパネルの画面が狭いので、ごちゃごちゃしないように整理整頓して見せる必要があるなと思ったときに、昔の電子ブロックの格子状の配置のことを思い出したという経緯です。

今の出来では、元のタッチパネルでのプログラミングを成就するには、正直まだ改良が相当いりますが、タブレット端末か、ぎりぎりスマートフォンの画面では作業できそうな感じにはなっていると思います。

ちなみに、これは、会社に内緒で、自宅でやっていたまま(正直そうせざるを得ない事情がありました)、退職したので、会社はこのアプリ言語のことを知らないと思います。

ご覧いただきありがとうございました。

ご覧いただきありがとうございました。

ここまでVPGLの概要と、各種VPGLで記述されたアプリケーション例をご紹介しました。何分にも、言語仕様、作図/編集操作の方法、チュートリアルを含むプログラミングテクニックなどの説明がいまだまったく不十分ですので、今後、記述をアップしていく予定です。

パブリックなトップは、https://vpgl.net/jpで、記述はそちらの下に追加していこうかと思っています。

わたくし千田(kste9947@gmail.com)といたしましては、なにはともあれ、このプログラミング「言語」を面白がっていただけるように改良することを考えて活動中です。

留意事項につきまして:

このVPGLの言語実行処理系とIDEは、現在すべて完全クライアントサイドのJvaScript+HTMLのシングルページアプリケーションでできてあります。Webブラウザを装備しているデバイスなら、CPU/OSを問わずに動作するようにするためで、全体がコンパイルされた機械語で書かれているわけではなく、ブラウザのJavascriptエンジン上での実行である関係上、メモリを多量に使用します。おおむねRAMが2GB以下のデバイス(最廉価のAmazon Fireタブレット等)ではメモリ不足の警告が出ることがあります。(特に汽車のアプリ)

ご了承ください。

とれた特許について

とれた特許は、第7338096号です。公報に自分の名前と住所が書かれているので、話が全く盛れません。