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

[[<<>SoraMame.ps.js/入門/part.1]] [[1>SoraMame.ps.js/入門/part.1]] ''2'' [[3>SoraMame.ps.js/入門/part.3]] [[4>SoraMame.ps.js/入門/part.4]] 5 6 7 8 [[>>>SoraMame.ps.js/入門/part.3]] [[目次>SoraMame.ps.js/入門]] [[用語集>SoraMame.ps.js/入門/Glossary]] [[演習回答>SoraMame.ps.js/入門/Practice]]

----

[[前回>SoraMame.ps.js/入門/part.1]]は、そら豆スクリプトで、どんなものが作れるのか~
いくつか、ためしてもらった。~

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

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

#contents

*プログラムを作る場所 [#tc882bb1]

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

-[[デモページ:http://www.catch.jp/program/soramame/SoraMame_Script.html]]

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

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

#ref(demo_web.png)

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

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

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

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

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


*じっさいのプログラムをながめてみよう [#db2b02cc]

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

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

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

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

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

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

「コード」([[Code:http://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%BC%E3%83%89]])とは、~
英語で暗号のことなんだけど、~
プログラムがまるで暗号みたいに見えたので、~
こんなふうに呼ばれたらしい。~

*改造して、シカクを描こう [#d267cc1f]

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

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

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

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

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

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

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

#ref(sikaku_01.png)

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

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

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

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

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

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

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

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

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


*シカクのサイズを変える [#p2ead2af]

そうしたら、もう一度シカクを描くように、プログラムを元にもどしてほしい。~
右クリック-「元に戻す」とやるとラクチンかも。~
もとに戻すと、こうなる。
 
 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカク

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

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

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

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

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

#ref(sikaku_02.png)

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

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



*シカクを描く位置を変える [#edef0f40]

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

#ref(sikaku_corner.png)

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

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

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

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

それから、

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

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

だから、次のように~

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

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

わかったかな。~

**練習問題 [#t111b4b2]

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

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

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


*プログラムを保存する [#d3e7ea76]

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

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

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

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

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

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


*保存したプログラムをひらく [#r1449dca]

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

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

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

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

※もしも、うまく動かない場合には、[[メモ帳:http://www.wanichan.com/beginner/windows/xp/3/2/]]に[[コピペ:http://plaza.rakuten.co.jp/nemurico/diary/200802200000/]]とかしてほしい。~


*位置を指定する座標について [#rc40258c]

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

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

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

#ref(x-y_dimension.png);

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

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

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

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


*演習 [#z3b89d15]

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

**練習問題のこたえ [#wdb38872]

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

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

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

-[[つくってみた:http://www.catch.jp/program/soramame/sample/SoraMame_lesson_21b.html]]
-[[つくってみた:http://www.catch.jp/program/soramame/sample/lesson/SoraMame_lesson_21b.html]]


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

**演習問題 [#r39fd415]

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

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



''1.''次のようにして、幅と高さを同じにしないでマルを描く~

 幅:20、高さ:30

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


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


''3.''マウスの位置に合わせて、マルのサイズを指定する~
マルの位置は、

 x:100, y:100

にする~


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


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

----

[[<<>SoraMame.ps.js/入門/part.1]] [[1>SoraMame.ps.js/入門/part.1]] ''2'' [[3>SoraMame.ps.js/入門/part.3]] [[4>SoraMame.ps.js/入門/part.4]] 5 6 7 8 [[>>>SoraMame.ps.js/入門/part.3]] [[目次>SoraMame.ps.js/入門]] [[用語集>SoraMame.ps.js/入門/Glossary]] [[演習回答>SoraMame.ps.js/入門/Practice]]

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS