第2回　世界をマルで埋めつくせ - そら豆スクリプト入門

＜＜ 1 2 3 4 5 6 7 8 ＞＞ 目次 用語集 演習回答

前回は、そら豆スクリプトで、どんなものが作れるのか
いくつか、ためしてもらった。

今回は、じっさいにプログラムを改造してみよう。
そして、プログラムを作るために必要な機能や考え方など、
プログラムを作る一番最初の感覚を味わえるはずだ。

改造といっても、ほんの1行だけなので
お気楽にチャレンジしてみてほしい。

プログラムを作る場所 †

次のデモページを呼び出してほしい。
これは、前回のマウスでマルを描くプログラムと同じものだ。

• デモページ

※FireFoxやGoogle Chromeの場合、リンクを右クリック-「別タブで開く」とすると、
別のタブでWebページをひらくことができるぞ。
これなら、この解説文とデモページを、
同時に開いておくことができて、とても便利。

さて、このデモページは、次のように、いくつかのエリアに分かれている。
ここで、プログラムを作っていくことができる。

• 実行エリア：そら豆スクリプトの実行結果を表示
• コード編集エリア：そら豆スクリプトのコードを入力・変更
• そうさボタン：
• データ表示エリア：変換したプログラムなどを表示する

「そうさボタン」の「うごかす」ボタンで、プログラムを実行できるのだった。
「とまる」ボタンは、プログラムの停止だ。

そのほかのボタンについては、もうすこしあとで説明する。

データ表示エリアは、変換したプログラムなどを表示する場所だ。
そら豆スクリプトは、「Processing.js」という別のプログラミング言語に変換して実行されている。
そのための変換結果などが、ここに表示される。

これは、最初のうちは、まったく意識しなくていいだろう。

じっさいのプログラムをながめてみよう †

では、じっさいのプログラムをながめてみよう。
プログラムの1行目は、次のようになっている。

//マウスの位置にマルを描く

行の先頭に、「/」(スラッシュ)が2個ならんでいると、
ここから行の最後まで、プログラムとしては無視される。
つまり、なにも実行されない。
こういう、プログラムから無視されるところを「コメント文」と呼ぶ。

じつこれ、人間用のメモなんだ。
プログラムは、コンピュータに対する動作の指示だけど
それを書いたり改造する人間にとっても、分かりやすいほうがいい。
そら豆スクリプトで書かれたプログラムは、日本語っぽくて分かりやすいけれど、
コメント文で説明を追加することで、もっと分かりやすくなる。

どんなふうにコメント文を書くかは、いくつか良い慣習がある。
たとえば、プログラムの先頭には、そのプログラムの名前・目的・作者名・利用条件などを書く。
このデモの1行目にも、これがどんなプログラムなのか書いてあるんだ。

※ちなみに、プログラムとして書かれた文章を「コード」(Code)と呼ぶ。
「コード編集エリア」は、コードを入力したり変更したりというように、
コードを「編集」する場所だ。

「コード」(Code)とは、
英語で暗号のことなんだけど、
プログラムがまるで暗号みたいに見えたので、
こんなふうに呼ばれたらしい。

改造して、シカクを描こう †

じゃあ、いよいよプログラムを改造するぞ。
最初にいったように、今回改造するのは、ほんの1行だけ
なので、いくつかの行があるけれど、下から2番目の行に注目してほしい。
(ほかの行の役割などは、次回説明する)

で、この下から2番目の行だけど、
前回紹介したようにマルを描く指示だったね。

{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル

そら豆スクリプトでは、基本的に、１行が、ひとつの指示になっている。
そして、行の一番右端にある言葉が、具体的に何をやるかの命令だ。
この場合は、一番最後に「マル」と書いてあるから、丸を描くんだ。

では、この「マル」を「シカク」に書きなおしてみよう。

{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカク

これで「うごかす」ボタンをクリックしてから、実行エリアにマウスをうごかすと、
ほらシカクを描くことができた。

では、次のコードをためしてみてほしい。

{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}の四角

「シカク」の代わりに「四角」と書いてみた。
この場合、どうなったかな。

そう、なにもおこらない。

プログラムで使えるのは、登録されている命令だけなんだ。
そら豆スクリプトでは、「マル」と「シカク」は最初から登録してあるけれど
「四角」や「楕円」は、登録されていない。

それに、次のような書きまちがいをしても、なにもおこらない(シカク->シカケ)。

{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカケ

プログラミングでは、どんな命令が使えるか、
きちんと確認していく必要があるんだ。

もしも、プログラムが思いどおりに動かないことがあれば
書きまちがいがないか、しっかりとチェックしよう。

シカクのサイズを変える †

そうしたら、もう一度シカクを描くように、プログラムを元にもどしてほしい。
右クリック-「元に戻す」とやるとラクチンかも。
もとに戻すと、こうなる。

{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカク

プログラムをうごかして、きちんと動くかどうかたしかめよう(これ重要)。
うまく動かなければ、書きまちがいがないかよく見てね。

どうしても、元にもどせない場合は、
Webブラウザの「再読み込み」ボタン(またはF5キー)を使おう。
それから、「マル」を「シカク」に書きなおす。

そうしたら、シカクを描く行を、もう一度よく見てほしい。
「{幅:50, 高さ:50}のシカク」と書いてあるよね。

この「{幅:50, 高さ:50}」が、シカクの大きさをあらわしている。
だから、次のようにこの行を書きかえると、シカクのサイズをかえることができる。

{x:@マウスX, y:@マウスY}に{幅:10, 高さ:10}のシカク

このように、そら豆スクリプトでは、
命令の前に書く「{幅:10, 高さ:10}の」といった言葉で、こまかな指示を出す。
命令を呼び出すとき、この値(あたい)がいっしょに渡される。

プログラミングの用語では、
このように命令にあたえる値を「引数」(ひきすう)と呼ぶ。

シカクを描く位置を変える †

今度は、マウスが描くシカクを、よく見てほしい。
シカクのどの位置に、マウスがあるかな？

そう。マウスは、シカクの左上の角にある。
このプログラムは、マウスの位置が左上になるようにシカクを描くんだ。

プログラムをよく読むと、「{x:@マウスX, y:@マウスY}に」と書いてあるよね。
これは、

• シカクの左上の横の位置xを、マウスの横の位置に合わせる
• シカクの左上の縦の位置yを、マウスの縦の位置に合わせる

ということ。
xとyは、縦横の位置をx-y座標をあらわしていて
数学的な慣習で、こういう記号の使い方をするんだ。

それから、

• 「@マウスX」が、現在のマウスの横の位置
  
• 「@マウスY」が、現在のマウスの縦の位置

をあらわしている。
これは、そら豆スクリプトの約束だ。

だから、次のように

{x:@マウスX, y:@マウスY}に{幅:10, 高さ:10}のシカク

と書いてあると、左上の角がマウスの位置があたるように
シカクを描くことになるんだ。

わかったかな。

練習問題 †

じゃあ、次のように書いたら、どのようなシカクが描かれるだろうか。

{x:0, y:0}に{幅:@マウスX, 高さ:@マウスY}のシカク

つまり、シカクの左上の位置が(0, 0)で、
シカクのサイズが、マウスの位置になって・・・
これは、ぜひ自分なりにたしかめてほしい。
(答えは、このページの最後で！)

プログラムを保存する †

どうだろう。うまく改造できたかな。

せっかく改造したプログラムなので、これを保存しておこう。

このデモページでは、次の手順でプログラムを保存できる。
Windows7でFirefoxを使った場合について説明しよう。

1. 「ほぞん」リンクをクリック
2. ファイル保存の確認ダイアログが表示されたら、「ファイルを保存する」を選択
3. 「OK」ボタンをクリック

これで、プログラムがファイルとして保存された。

「ダウンロードマネージャ」に、保存されたファイル名が表示されているので
右クリック-「保存したフォルダを開く」とすると、
そのプログラムのファイルを確認できる。

保存したプログラムをひらく †

保存したプログラムのファイルを再度読みこむには、次のようにする。

1. 「参照」ボタンをクリック
2. 読み込みたいプログラムファイルを選択する
3. 「開く」ボタンをクリック

これで、ファイルが読み込まれる。

GoogleChromeでは、「ファイルを選択」ボタンを使おう。

※もしも、うまく動かない場合には、メモ帳にコピペとかしてほしい。

位置を指定する座標について †

さて、プログラムでイラストなどを描くとき、
その位置をどうやって指定すればいいだろうか

フツウは「座標」という2つの値で指定する。
たとえば、シカクを描く場合、
左上の角の位置は、{x:10,y:20}という2つの値になる。

中学校あたりの数学に登場するグラフは、
X軸とY軸の直交座標上に描いていた(覚えているかな?)。
横軸をX軸、縦軸をY軸と呼び、
この二つの軸が直角に交わっている(次図)。

X軸とY軸の直交するところ(0,0)は、原点と呼ばれる。

直交座標上の、とある点の座標は、
原点からX軸上(横方向)の距離aと、
原点からY軸上の距離bという、
二つの値(a,b)で指定できる。

そら豆スクリプトの場合も、これとほぼ同じなんだ。
実行エリアは、左上の角が原点(0,0)になる

ただし、X軸が右に行くほど値が大きくなるのに対して、
Y軸は下にいくほど値が大きくなるところが違っている。

演習 †

では、いくつか自分なりに考えて、プログラムを改造してみよう。

練習問題のこたえ †

さて、先ほど出した問題だが、こたえ合わせをしてみよう。
次のように書いたら、どのようなシカクが描かれるだろうか。
と、いう問題だった。

{x:0, y:0}に{幅:@マウスX, 高さ:@マウスY}のシカク

つまり、シカクの左上の位置が、実行エリアの左上(0, 0)で、
シカクのサイズが、マウスの位置になって、
その結果、左上の角からマウスの位置までが
ちょうど対角線になったシカクが描かれることになる。

• つくってみた

どうだろう。
同じような結果になったかな？

演習問題 †

次のようなプログラムを作ってみよう。
ここまでの例題と同じように、
マル／シカクの行を修正すれば
できるはずだ。

これらも、自分の予想どおりになるか
じっさいに手を動かして
ためしてみよう。

１．次のようにして、幅と高さを同じにしないでマルを描く

幅:20、高さ:30

マルの位置は、マウスの位置にする

２．マルの横の位置を固定して、縦の位置はマウスに合わせて、マルを描いてみる

３．マウスの位置に合わせて、マルのサイズを指定する
マルの位置は、

x:100, y:100

にする

４．マウスの位置をシカクの位置に指定する
ただし、@マウスxと@マウスyを入れ替えてみる

５．マルを描く行のあと、次の行でシカクを描いてみる。
どんな結果が得られるだろうか

＜＜ 1 2 3 4 5 6 7 8 ＞＞ 目次 用語集 演習回答