猫歩き・猫逃げ ワークショップ資料

スクラッチの起動

1. ブラウザを立ち上げ、キーワード「Scratch」で検索し、Scratchのホームページを開く。
   あるいは、アドレスバーに直接「http://scratch.mit.edu」と入力しても良い。
2. 「サインイン」からサインする。
   アカウント作成がまだの場合は「Scratchに参加しよう」からアカウントを作成する。
   アカウント作成をしなくてもプロジェクトを作ることはできるが、保存することができない。Eメールアドレスを準備していないなど、都合でアカウントを作成出来ない場合は、インターネット接続環境がなくても使用することができるオフラインエディター(Scratch 2 Offline Editor)を使うと良い。

用語

かんたんなプログラミング(ネコ歩き)

1. 全員の状態を一致させるため、ウィンドウの一番上の左の方(ロゴの右隣)にある「作る」を選ぶ(これに限らず、「ここ」「そこ」などの指示代名詞はなるべく使わない。指示は一度だけでなく、何度も繰り返す)。ファシリテーターは初期画面(「動き」カテゴリーが選ばれ、スクリプトが空で、ステージの中央にネコがいる状態)になっていることを確認する。
2. スプライト(ネコ)への最初の命令として、画面中央のブロックがたくさん並んでいるところ(ブロックパレット)から青色の「10歩動かす」のブロックをクリック。
   ステージのネコを観察して、どこが変わったかを子供に聞く(ちょっと右に動いた)。
   ネコの1歩は1ドットに等しい(必要に応じてドットの意味も説明。プロジェクタ－ならドットを目視できるので、実際に見させても良い)。クリックするたびに10ドット右に進む。
   ネコが画面からはみ出すまで何度もクリックさせる(ポイントはわざと面倒な事をさせること)。
   見えなくなったら、ネコの尻尾をマウスでドラッグして、ステージの中央に戻す。
   ファシリテーターは、子供たちをよく観察して、この時点でドラッグ、クリックが難しそうな子をサポート(その場合もなるべく手出しはせず、説明してその子にやらせる)。
3. これでも動かせるけど、指が疲れるので、ネコが勝手に動くようにしたい。そこで、「プログラム」を作る。 プログラムは命令を順番に並べたもの。スクリプトと同じ意味。
   そのためには、「10歩動かす」のブロックをドラッグして、画面右側の灰色のところ(スクリプトエリア)に持ってくる。これだけでは、まだなにも変わらない。ブロックをクリックすると動くだけ。
   つぎに、「制御」(左上から右に2番目、オレンジ色)をクリックし、「ずっと」のブロックを真ん中(スクリプトエリア)にドラッグし、「10歩動かす」のブロックをはさむ(近づけるとC字型の口の部分が開く)。
   「ずっと」をクリックすると、ネコが勝手に動いて画面からいなくなる。尻尾をドラッグして戻しても、またすぐに動き出す。
   動きを止めるにはステージの右上の赤い八角形のボタン(赤信号)をクリックする。ネコが止まったらドラッグして、ステージの中央に戻す。これで最初のプログラムができた(さきほどの手動操作と対比させる)。
   ファシリテーターはそれぞれのステップで子供たちの足並みが揃っているかを常に確認し、遅れていたら適宜サポート。
4. 赤信号が止まれなら、その隣の緑の旗のボタンをクリックすると動きそうだけど、動かない。
   これを動かすには、「緑の旗がクリックされたとき」ブロックを「ずっと」の上に付ける。ブロックをドラッグして近づけると、白いハイライトが表示されるので、そこで離すと合体する。
   これで緑の旗をクリックすると動き、赤信号をクリックすると止まるようになる。
5. 今度は、行きっぱなしのネコが自動的に戻ってくるようにしたい。そのためには、「動き」カテゴリーの「もし端についたら、跳ね返る」ブロックを「ずっと」の中、「10歩動かす」の下に入れる。
   緑の旗をクリックするとネコがステージを左右に往復する。
   (なにか変なことがないか聞く)ネコが右から左に進むとき、ひっくり返るのが変なので、ステージの下のスプライト一覧のネコの左上の「i」を押し、スプライト情報を出す。「回転情報」の中の「↔」(左右に反転するだけ)ボタンをクリックする。
6. (まだ変なことがないか聞く)よく見ると、ネコの足が動いていない。これを動くようにしたい。
   まず、赤信号をクリックして動きを止める。
   画面中央、スクリプトエリアの上に「コスチューム」というタブがある。これをクリックするとスクリプトエリアが切り替わり、ネコの絵が2枚表示される。これがネコの衣装(コスチューム)。絵のアイコンをクリックすると、ステージのネコの絵が切り替わる(まちがえてアイコンをドラッグすると上下のアイコンが入れ替わるので、その場合はもう一度ドラッグして元に戻す)。この切り替えを高速で行えば、パラパラマンガのように、足が動いて見えるのではないか。
   カテゴリーを「見た目」(左の上から2段目。紫色)に切り替え、「次のコスチュームにする」ブロックをクリックしてみる。すると、ネコの絵が切り替わる。つまり、このブロックをスクリプトの「ずっと」のなかに入れれば、動いて見えるはず。「次のコスチュームにする」を画面の真ん中(スクリプトエリア)にドラッグして、「ずっと」の中、「もし端についたら、跳ね返る」の下に付ける。
   緑の旗をクリックすると足を動かしながらネコが動き始める。
7. ネコが左右に動くだけでは面白く無いので、ステージ全体を動きまわるようにしたい。そのためにはネコの向きを変えれば良い。ネコの「スプライト情報」の「向き」の灰色の円の中にある青い線がネコの向きを示している。この線をドラッグするとネコの向きが変わる。

ネコから逃げろ！ゲームのつくり方

1. ネコを動かすことができたので、このネコから逃げるゲームを作る。ネコから逃げるものといえば(参加者に問いかける)、やっぱりネズミなのでそのキャラクター(スプライト)を新しく登場させる。
   そのためには、ステージの右下の「新しいスプライト:」のボタンの一番左、キャラクターのアイコン「スプライトをライブラリーから選択」ボタンをクリックする。
   左のカテゴリーから「動物」をクリックして選び、続いて下にスクロールさせて「Mouse1」をクリックしてから「OK」ボタンをクリックする。するとステージにネズミが現れる。
2. ネズミがちょっと大きいので小さくする。ステージの右上に5つ並んだボタンがあるので、右から2番目の矢印が内側に向いているアイコンのボタン「縮小」をクリックする。すると、カーソルが内向きの矢印に変わるので、それでネズミを何度もクリックしてちょうどいい大きさになるまで小さくする。ネコの1/3くらいがちょうどよい。
3. ネズミの動きをプログラムする。まず、ネコと同じように「制御」の「緑の旗がクリックされたとき」と「ずっと」を画面右側の灰色のところ(スクリプトエリア)にドラッグしてつなぐ。これは基本の形で、ほとんどのプログラム(スクリプト)はこの形になる。
   ネズミは自分のキャラクター(自キャラ)なので、コントロールできるようにしたい。ここでは、マウスの操作でステージの中を動かせるようにしてみる。動かすのだからそのブロックは「動き」カテゴリーにあるはず。切り替えると上から7番目に「マウスのポインター▼へ行く」というブロックがある。今回は「▼」をクリックせず、そのまま使う。このブロックを「ずっと」の中にドラッグしてはめる。プログラム全体の言葉をつなげて読むと、「緑の旗がクリックされたとき、ずっと、マウスのポインターへ行く」となる。これでよさそうなので、緑の旗をクリックしてみる。ネコが動き、ネズミをマウスでコントロールできる。
4. しかし、ネズミがネコに捕まってもなにも起こらない。そこはまだプログラムしていないから。次にそれをプログラムする。その前に、ネズミがネコに捕まるとはどういうことか考える(問いかけ)。赤信号で止めてから、ステージ上のネコとネズミが離れた位置にドラッグしてみる。これは捕まっていない。次に、ネコとネズミが重なった(触れた)状態にしてみる。これは捕まっている。つまり、ネコとネズミが触れているかどうかを調べることができれば、捕まったかどうか分かる。それには「調べる」カテゴリーのブロックを使う。
5. ブロックは沢山あるけれども、ここではネズミから見た時のネコの色(オレンジ色)に注目し、上から2番目の「■色に触れた」を使う。■をクリックすると、マウスの矢印がスポイトの形に変わるので、ネコのオレンジ色の上でクリックする。すると、その色が吸い取られて■の色が変わる。
   このブロックをスクリプトの中で使いたいけれども、このブロックは両端が尖った六角形なので、はめられる場所がない。それなので、とりあえず真ん中の灰色の空いているところにドラッグしておく。
6. 次に、ネコがネズミに捕まったとき(触れたとき)にどうなるか考える(問いかけ)。そのときは、ゲームが終了、つまり、ゲームオーバーになる。ゲームオーバーはゲームが止まって、操作しても動かなくなる状態のこと。赤信号のボタンを押した時と同じ。これを代わりに押してくれるブロックを使えば良い。「制御」の一番下にある「すべてを止める」がそれ。これもまだはめられる場所がないので、とりあえず真ん中の灰色の空いているところにドラッグしておく。
7. これで必要なブロックが揃ったので、これらをつなぎたい。そのためのブロックはないだろうか。そこで、左に並んでいる制御のブロックをみてみると、六角形の穴が開いたブロックがいくつかある。その中でも、「もし　なら」というブロックが使えそうだ。これも真ん中の灰色の空いているところにドラッグする。
8. 「もし　なら　でなければ」の六角形の穴に「■(オレンジ)色に触れた」をドラッグしてはめる。すると、「もし■(オレンジ)色に触れたなら」になる。続いて、「すべてを止める」を「もし■(オレンジ)色に触れたなら」の開いた口にはめる。すると、「もし■(オレンジ)色に触れたなら、すべてを止める」となる。
9. ここまでできたら、スクリプト全体を合体させる。「もし■(オレンジ)色に触れたならすべてを止める」の「も」をドラッグして、「ずっと」の中の一番下にはめる。スクリプト全体を読むと、「緑の旗がクリックされたとき、ずっと、マウスのポインターへ行く。もし■(オレンジ)色に触れたなら、すべてを止める」となる。これでスクリプトは完成した。
10. さっそく、緑の旗をクリックして遊んでみよう。ネコに捕まらないようにマウスを操作してネズミを動かす。ネコに捕まると全体が止まる(ゲームオーバー)。再開するには再度緑の旗を押す。(遊ぶ時間は数分程度。状況を見て判断)
11. これが簡単すぎるようなら、ネコを増やすと良い。ネコは複製(影分身)できる。ネズミの大きさを変えるときに使ったステージ左上のボタンの左端にスタンプのボタンがある。これを押してから、ネコの上でクリックすると、ネコが増える。ネコの数は全部で2匹から3匹がおすすめ。それ以上だと、難しくなりすぎる。(同じく遊ぶ時間は状況を見て判断)
12. また、それぞれのネコの速さを変えても良い。変えたいネコをステージの下の小さいアイコンから選んでから、スクリプトの「10歩動かす」の数字をクリックして、キーボードから数字を入力し、最後にEnterキーを押すと、そのネコの速さが変わる。同様に（ステージ下のスプライトリストにある）ネコのスプライト情報を開き、「向き」の右横にある青い線をドラッグすると向きが変わる。複数のネコの動きを別々にすると難しくなる。(同じく遊ぶ時間は状況を見て判断)
13. ステージが真っ白でさびしいので、背景をつけてみる。ステージ下の小さなアイコンの左端「ステージ」をクリックし、画面真ん中あたりの上の方にある「スクリプト」の右「背景」タブをクリックする。「新しい背景:」のすぐ下のボタンの中の「ライブラリーから背景を選択」（左端の山の絵）を押す。開いた「背景ライブラリー」の中から、好きな背景の絵をクリックして選んでから「OK」ボタンをクリックすると、その背景がステージにセットされる。
14. このゲームで遊ぶには、ステージを全画面にするとよい。それにはステージの左上（タイトルの左）にある青い長方形のボタンをクリックする(発表モード)。この状態で緑の旗をクリックするとゲームがスタートする。発表モードを抜けるには、左上の青い長方形のボタンをクリックする。(遊ぶ時間は状況を見て判断)
15. 保存について。ログイン状態でゲームを作った場合、自動的に保存される。画面右端のアカウント名の二つ隣に「保存しました」と出ていれば保存されている。「直ちに保存」と表示されている場合はその文字をクリックすれば保存される。ファイルは自動保存されるが作品名がないので作品名（プロジェクト名）を付ける。ステージの上のテキストボックスの「Untitled」（同一タイトルが複数あるとUntitled-xxとなっている場合もある）を書き換える。作品名は、本来はその作品に合った名前を付けるべきだが、ワークショップでは、日付、ニックネーム、下の名前など、統一したルールを決めておくとスムーズ。その際、個人情報に留意すること。
    キーボード入力は、なるべく自力でやらせるようにするが、どうしても難しい子は手伝う。
    
16. この後、時間が余れば、キャラクターの絵を描きかえたり(コスチュームタブのペイントボタン。色に注意)、効果音を入れたり(音タブの録音や読み込みボタン)、スコアやタイマーを追加したりする(「変数」カテゴリー)。何をやるかは状況(子供たちの関心)によって判断する。
17. スコアを作るには、ステージ下の小さなアイコンの左端の「ステージ」クリックしてから、「変数」カテゴリーの「新しい変数を作る」ボタンで「スコア」を追加する。変数関連のブロックが自動的に増え、ステージに「スコア」が表示される。
18. 「制御」に切り替えて「緑を旗をクリックしたとき」「ずっと」をつないだ基本のスクリプトを作り、「変数」に戻って、「スコアを0にする」を「緑を旗をクリックしたとき」と「ずっと」の間に入れる。同様に「スコアを1ずつ変える」を「ずっと」の中に入れる。

作品の共有

1. 完成した作品は右上の「共有」を押すことでインターネットで共有することで、他の友達もブラウザーから遊べるようになる。
   このとき、「リミックス」の概念を説明する。公開されたスクラッチ作品のライセンスははCC BY-SAなので、他の人の作品をリミックスしてもよい。むしろそうすべき。パクリや盗作ではないことをきちんと説明する（コミュニティーガイドライン「あなたはScratchで見つけた作品、アイディア、画像など全てのものを自由にリミックスできます。それはだれでも、あなたが共有したものを使うことができるということです。」という部分）。
2. もし自分のアカウントを作成せずに作っていた場合は、データファイルとして保存してダウンロードして持ち帰ることができる。
   「ファイル」→「手元のコンピュータにダウンロード」からファイルを保存する。自宅や学校でアカウントを作成したら、「ファイル」→「手元のファイルからアップロード」で作った作品を読み込むことができる。ただし、2.0で作った作品は1.4で読み込むことができない。
   
3. 作品を再度変更する場合は、「私の作品」の作品名のリンクをクリックし「中を見る」をクリックする。
   他の人の作品のコードも「中を見る」で見ることができることを説明する。