0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

プロデルAdvent Calendar 2024

Day 1

スミレ畑の遊び方と解説

Last updated at Posted at 2024-12-01

TL;DR

  • 「スミレ畑」はPWAの日本語プログラミング言語のインタプリタ実行環境です
  • スミレ畑はプロデルと同じ文法,言語仕様です
  • スミレ畑は標準入出力と、タートルグラフィックスでの図形描画ができます
  • シンタックスハイライトやプログラム掲示板と連携したプログラム共有機能を持っています

日本語プログラミング言語実行環境「スミレ畑」

スミレ畑は、日本語プログラミング言語「スミレ」のプログラムを実行できるPWA(プログレッシブウェブアプリ)です。
日本語で記述したプログラムを実行できます。

スミレは.NET 6.0以降(旧.NET Coreと呼ばれていたもの)で動作するプロデル互換の日本語プログラミング言語です。文法や言語仕様はプロデルと同一です。プロデルと異なる点はライブラリと実行環境です。

使い方

画面の説明など使い方は、公式サイトに記載しています。
https://sum.irelang.jp/sumirebatake/

サンプルを実行する

単にプログラム例や動作に興味がある方は、サンプルを選択して開くことができます。画面下部の「プログラム置き場」には、サンプルコードが用意されています。
プログラムに選択したサンプルが読み込まれるので[実行する]をクリックします。

image.png

ダイアログによる入出力

Webブラウザの汎用ダイアログを利用して、文字列を入力したり、メッセージダイアログを表示するプログラムです。

「お名前は」と聞いて名前とする
「[名前]さん、こんにちは!」と表示する

コンソールの入出力

スミレ畑の標準入力は、画面右側の「コンソール」タブと「入力」タブを使います。
出力結果は「コンソール」タブのテキストボックスに追記され
「入力」タブには、プログラムへ入力する内容をテキストで指定できます。

繰り返す
  コンソールから受け取って内容とする
  内容が空なら繰り返しを抜け出す
  内容を出力する
そして

image.png

カメ(タートルグラフィックス)で図形を描画する

「キャンバス」タブには、図形の描画結果が表示されます。
キャンバスにはカメを使ってタートルグラフィックスによるカメの軌跡で図形を描画できます。キャンバス上で「カメ」種類のオブジェクトを作ると、カメを操作して図形を描けます。
カメを使ったサンプルは、複数用意されていますので、プログラム例はそちらをご覧ください。

キャンバスにカメを作って、かめさんとする
かめさんの位置は{200,150}
かめさんの線色は「緑色」
4回繰り返す
	かめさんを100だけ進める
	かめさんを90度回転する
そして

キャンバスを使う

座標系で位置と大きさを指定して図形を描く場合には、キャンバスに直接用意された描画手順を使います。

キャンバスに「スミレ畑」という文字を書く
	その位置は{100,100}
	その背景色は「紫」
	そのフォントは「36pt sanserif」

キャンバスに四角形を描く
	その大きさは{100,100}
	その位置は{150,150}
	その線色は「黄緑」
	その背景色は「緑」

キャンバスを更新する

仕様

スミレ畑は、Blazor WebAssemblyという技術を使っています。この技術を使うことでC#のコードをWebブラウザ内部で実行できます。Webブラウザであれば、PC以外のスマホやタブレット、Windows以外のOSでも同じように実行できます。

スミレ畑はプロデルのパーサと実行環境のコードを移植して実装していますので、プロデルの文法や実行環境をほぼそのまま移植でき、実質上Windows専用だったプロデルのプログラムを、様々な環境で実行できるのが特徴です。

スミレ畑はインタプリタの実行環境です。JavaScriptで同等のコードを書いた場合や、WebAssemblyにコンパイルされたバイナリと比べると、実行速度は劣ります。

AtCoderなどのプログラミングコンテストのテスト環境としては速度面が弱点ですが、それなりに使用できる速度で動作しますので、学習向けにアルゴリズムを実装して試すなどの用途では十分使えます。

便利な使い方(?)

シンタックスハイライトが使える

[検証]ボタンをクリックすると、プログラムが解析されて、プログラムの字句が色分けされます。
色分けされたプログラムを書式も含めてコピーされるため、リッチテキストに対応したエディタで色分けされたコードを貼り付けたいときに便利です。

image.png

プログラム掲示板と連携したプログラム共有

アカウント登録が必要ですが、プロデルのプログラム掲示板と連携しています。
投稿時に、分類を「スミレ畑」としてプログラムを投稿すると、そのプログラムをそのままスミレ畑で開くことができます。投稿を非公開にして、投稿URLをブログやSNSなどで共有することもできます。

サポートされていない機能

イベント手順全般

現時点では「待機」手順がないため、キー入力やマウス入力を受け付ける手段がありません。スミレの実行環境の実装とBlazor WebAssemblyの仕様とがかみ合っていない部分があり、スミレの実行環境を見直すことで実現したいと思っています。

今後について

Webブラウザで気軽に日本語プログラミング言語を体験できるアプリは、大切だと思っています。現状は実験段階や試行錯誤をしている段階で多少遊べる程度ですが、ゲームなどちょっとしたプログラムが実行できるアプリとして機能拡充したいと思っています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?