#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}のマル
そら豆スクリプトでは、基本的に、１行が、ひとつの指示になっている。~
そして、行の一番右端にある言葉が、具体的に何をやるかの命令だ。~
この場合は、一番最後に「マル」と書いてあるから、丸を描くんだ。~
では、この「マル」を「シカク」に書きなおしてみよう。~
{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]
次のようなプログラムを作ってみよう。~
ここまでの例題と同じように、~
マル／シカクの行を修正すれば~
できるはずだ。~
これらも、自分の予想どおりになるか~
じっさいに手を動かして~
ためしてみよう。~
''１．''次のようにして、幅と高さを同じにしないでマルを描く~
幅:20、高さ:30
マルの位置は、マウスの位置にする~
''２．''マルの横の位置を固定して、縦の位置はマウスに合わせて、マルを描いてみる~
''３．''マウスの位置に合わせて、マルのサイズを指定する~
マルの位置は、
x:100, y:100
にする~
''４．''マウスの位置をシカクの位置に指定する~
ただし、@マウスxと@マウスyを入れ替えてみる~
''５．''マルを描く行のあと、次の行でシカクを描いてみる。~
どんな結果が得られるだろうか~
----
[[＜＜>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]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
