ビジュアルプログラミング(20) - エレファント・ビジュアライザー調査記録

プログラム電卓(Blockly)(8)

「Blockly | Google Developers」を使って簡単なプログラムを作ることができる「プログラム電卓(Blockly)」でグラフを表示することができるようにしました。「Charts | Google Developers」を使っています。グラフは「Blockly | Google Developers」のサンプルを参考にしています。

使い方

(1) グラフを表示する領域
(2) ボタンの領域(ボタン1～ボタン8)
(3) ブロックを選択する領域(ツールボックス)
(4) ブロックを表示する領域
(5) ボタンの領域(ボタン1～ボタン8)
(6) 変数の領域( $x,y,z,a,b,c,,d,e,f$ )
(7) リストを表示する領域(変数名：list)
(8) リストを表示する領域(変数名：list2)
(9) リストを表示する領域(変数名：list3)
(10) リストを階層表示するチェックボックス
(11) テキストを表示する領域(変数名：text)
(12) ブロックの領域に読み込むボタン
(13) サンプルを選択するリスト
(14) ブロックの領域をテキストにしたものを入力する領域
(15) ブロックの領域をテキストにしたものを表示するボタン
(16) ブロックの領域をテキストにしたものを表示する領域

(3)の領域からブロックを選択して(4)の領域にドラッグ＆ドロップしてつなげていってプログラムを作り、(6)の領域に変数の値を入力し、(2)または(5)のボタン(どちらでも同じです)のどれかを押すと、プログラムが実行されて(6)の領域に変数の値が表示されます。

(7)の領域には変数 list の値、(8)の領域には変数 list2 の値、(9)の領域には変数 list3 の値、(11)の領域には変数 text の値が表示されます。

(10)のチェックボックスをチェックすると、(7)、(8)、(8)の領域にはリストが階層的に表示されます。このとき変数 list、list2、list3 はリストを設定してください。

「もし」と「ボタン1」から「ボタン8」までのブロックをつなげたところに実行する内容をつなげると、指定したボタンを押したときにそのプログラムが実行されます。「もし」は(3)の領域の「Logic」以下の「If」以下にあります。「ボタン1」から「ボタン8」までは(3)の領域の「Logic」以下の「Button」以下にあります。

「ボタン…実行」ブロックと数値(1 から 8 まで)のブロックを組み合わせると「ボタン1」から「ボタン8」までを実行することができます。「ボタン…実行」は(3)の領域の「Logic」以下の「Button」以下にあります。

(15)のボタンを押すと(4)の領域の内容をJSONで表したテキストが(16)の領域に表示されます。これをテキストエディタなどにコピー＆ペーストして保存しておくと、これを読み出して(14)の領域にコピー＆ペーストの後(12)のボタンを押すと(4)の領域を復元することができます。

(13)のリストを選択すると(14)の領域にサンプルのテキスト(JSON)が表示されます。その後(12)のボタンを押すと(4)の領域にサンプルが表示されます。

「プログラムを実行」

にテキストを接続すると、テキストをJavaScriptのプログラムとして実行することができます。「プログラムを実行」は(3)のツールボックス領域の「Text」以下にあります。

「リスト？」

は、接続したものがリストかどうかを調べることができます(リストのとき真となります)。「リスト？」は(3)のツールボックス領域の「Lists」以下にあります。

グラフの表示

(2つの要素( $x$ 座標と $y$ 座標)からなるリストを要素とする)リスト $[ [x_1, y_1], [x_2, y_2], \cdots, [x_n, y_n] ]$ を作成して「グラフ表示」

と接続すると、点の列 $(x_1, y_1), (x_2, y_2), \cdots, (x_n, y_n)$ を通るグラフを表示することができます。

また、上記のようなリストを要素とするリストを作成して「グラフ複数表示」と接続すると

リストに含まれるすべてのグラフを表示することができます。

「グラフ表示」、「グラフ複数表示」は(3)の領域の「Graph」以下にあります。

サンプル「テキスト電卓」の使い方

(13)のサンプル選択リストから「テキスト電卓」を選択すると(14)の読み込みテキスト領域にサンプルのテキスト(JSON)が表示されます。その後(12)のブロック読み込みボタンを押すと(1)のブロック領域に「テキスト電卓」のサンプルが表示されます。

ボタン	動作の内容
1	(2)または(5)のボタン領域の「1」のボタンを押すと、 (11)のテキスト領域にテキスト計算のサンプルを表示します。
2	(2)または(5)のボタン領域の「2」のボタンを押すと、 (11)のテキスト領域の内容をJavaScriptのプログラムとして実行します。

サンプル「リスト電卓」の使い方

(13)のサンプル選択リストから「リスト電卓」を選択すると(14)の読み込みテキスト領域にサンプルのテキスト(JSON)が表示されます。その後(12)のブロック読み込みボタンを押すと(1)のブロック領域に「リスト電卓」のサンプルが表示されます。

ボタン

動作の内容

(10)のリスト階層表示チェックボックスをチェックし、
(2)または(5)のボタン領域の「1」のボタンを押すと、
(7)のリスト領域にリスト計算のサンプルを表示します。

(10)のリスト階層表示チェックボックスをチェックし、
(2)または(5)のボタン領域の「2」のボタンを押すと、
(7)のリスト領域の内容を数式と見なして計算して、x に表示します。
数式としての意味は以下のようになります。

リストの内容	数式としての意味
["+", x, y]	x + y
["-", x, y]	x - y
["*", x, y]	x * y
["/", x, y]	x / y
["%", x, y]	x を y で割った余り
["^", x, y]	x の y 乗
["-", x]	-x

サンプル「関数のグラフ」の使い方

(13)のサンプル選択リストから「関数のグラフ」を選択すると(14)の読み込みテキスト領域にサンプルのテキスト(JSON)が表示されます。その後(12)のブロック読み込みボタンを押すと(1)のブロック領域に「関数のグラフ」のサンプルが表示されます。

ボタン	動作の内容
1	(2)または(5)のボタン領域の「1」のボタンを押すと、 (1)のグラフ表示領域に円が表示されます。
2	(2)または(5)のボタン領域の「2」のボタンを押すと、 (1)のグラフ表示領域に楕円が表示されます。
3	(2)または(5)のボタン領域の「3」のボタンを押すと、 (1)のグラフ表示領域にリサジュー曲線が表示されます。
4	(2)または(5)のボタン領域の「4」のボタンを押すと、 (1)のグラフ表示領域に2次関数のグラフが表示されます。
5	(2)または(5)のボタン領域の「5」のボタンを押すと、 (1)のグラフ表示領域に3次関数のグラフが表示されます。
6	(2)または(5)のボタン領域の「6」のボタンを押すと、 (1)のグラフ表示領域に正弦曲線が表示されます。
7	(2)または(5)のボタン領域の「7」のボタンを押すと、 (1)のグラフ表示領域にボタン1からボタン6までのすべてのグラフが表示されます。