まっつん総研連絡用ブログ

プログラミング教育とかMSXとか。

MSX-BASICでビジュアルプログラミング環境を作ってみた

f:id:matsun-ri:20220120234654j:plain
実行画面のサンプル

 マウスで命令ブロックをドラッグ&ドロップすることによりコーディングできるビジュアルプログラミング環境*1を、MSX-BASICで作ってみました。
 名付けて、MSX用ビジュアルプログラミング開発環境『MSX T-LEX』*2です。
 MSXが、令和のプログラミング教育の最前線で戦えるかもしれない可能性。

 いわゆるベーパウェアです


目次

できること

  • MSXでマウスを使ってビジュアルプログラミングを楽しめる
  • LOGOっぽいタートルグラフィックス(の一部)を味わうことができる
  • MSXが令和のプログラミング教育の最前線で戦えるかもしれない可能性を感じることができる
  • フルBASICなので、高速化の余地が大きい

動画

バージョン1

www.youtube.com

  • この頃はモノクロでした。

バージョン2

www.youtube.com

  • 強化ポイント1:256色カラーに対応
  • 強化ポイント2:描画精度の向上
  • 強化ポイント3:日本語プログラミングとMSX BASICの命令に対応
  • 強化ポイント4:条件分岐(IF文)に対応

画面サンプル

ソースコード(英語ブロック)

f:id:matsun-ri:20220121000037j:plain
ソースコード(英語ブロック)

ソースコード(日本語ブロック)

f:id:matsun-ri:20220121000107j:plain
ソースコード(日本語ブロック)

実行結果

f:id:matsun-ri:20220121000123j:plain
実行結果

画面解説

f:id:matsun-ri:20220120234311j:plain
画面説明
  • ブロックエリア ブロック(命令)が格納されています。
    • パレット切替 クリックすることで、表示するブロックを、英語系・日本語系・MSX命令系に切り替えることができます。
  • コードエリア コーディングを行います。
    • ブロックエリアのブロックをドラッグし、コードエリアにドロップすることでコーディングを行います。
      • 行間にドロップすると挿入されます。
      • ブロック構文(IF,REPEATなど)の間にドロップすると、ブロック構文内に挿入されます。
    • 左ドラッグ すでに設置したブロックを移動します。ブロック構文の先頭をドラッグすると、ブロック構文が丸ごと移動します。
    • 右クリック ブロックを削除します。ブロック構文の先頭を右クリックすると、ブロック構文が丸ごと削除されます。
  • ヒントエリア ドラッグ中のブロックの機能が表示されます。
  • 機能エリア クリックするか、ファンクションキーを押すことで、機能が実行されます。
    • EXIT T-LEXを終了します。
    • LOAD 保存済みのソースファイルを読み込みます。
    • SAVE 編集中のコードエリアの内容を、名前を付けて保存します。
    • OVERWRITE 編集中のコードエリアの内容を、現在のファイル名で上書きします。
    • RUN 編集中のコードエリアの内容を実行するため、コンパイルを開始します。

とりあえず試してみる

 以下のURLをクリックすると、WebMSXで起動します。*3
 https://webmsx.org/?MACHINE=MSXTRJ&DISKA_URL=https://github.com/matsun-ri/msx-t-lex/raw/main/disk-image/T-LEX.dsk&MOUSE_MODE=1&BASIC_RUN=lex.bas
 .BASファイルをアスキーセーブしているので、本来より読み込みにかなり時間が掛かります。

詳細

 ソースコードや詳しい内容は、GitHubにあります。
 github.com
内容

  • 実行環境
  • 各ファイルの説明
  • より多くのサンプルコード
  • 実行方法
  • 動作のしくみ
  • できないこと
  • すべきこと

免責事項

 繰り返しますが、これはベーパウェアです。
 少しでも期待した純粋な心を持つ人は、一切のエラートラップをしていないことに憤りを感じたり、実はMSX BASICのソースコードを吐き出して実行しているだけという事実にずっこけたり、コードペインは枠外にスクロールできないので「1画面プログラム」しか作れないことに絶望したり、サクサク動かすためだけにMSX3が欲しくなったらいいと思います。

*1:正確には、まるでMSX用ビジュアルプログラミング開発環境のようにふるまうBASICプログラムです。

*2:MSX TINY LOGO EXECUTOR/LEXICAL ANALYZERの略ということにしています。

*3:日本版MSXturboRモードにてホストOSのマウスを使用