プログラミング教育教材『Scratch』 体験研修
-研修資料若林 茂
藤本 健司
尾山 匡浩
研修会資料

Scratch3の起動方法【デスクトップ上にショートカットがある場合】・ショートカットをダブルクリック【デスクトップ上にショートカットがない場合】❷この部分をクリック

・画面左下のWindowsマークをクリック・次に一覧からScratch Desktopをクリック❶この部分をクリック
研修会資料

Scratch3の画面の解説④ ブロックパレット② ステージ⑤ スクリプトエリア① スプライト③ スプライトリスト

研修会資料

Scratch3の画面の解説❶ スプライト・専門用語でいうとオブジェクトといいます。

・ステージに配置されている画像のことだと思ってもらってかまいません。
・Scratchではスプライトやステージの背景全てにスクリプト※を設定できます。
・スプライトは元々準備されているものの他に自分で追加することも可能です。
※ スクリプト=プログラムと思ってください。

研修会資料① スプライトScratch3の画面の解説❷ ステージ② ステージ・背景にあたります。
・ステージにもスクリプトを設置できます。
・基本的には1つ以上のスプライトがステージ上に存在する形になります。

・ステージの背景を複数用意して切り替えることも可能です。

研修会資料

Scratch3の画面の解説❸ スプライトリスト
・使用しているスプライトの一覧が確認できます。

・以下の確認や変更を行うことができます▶スプライト名▶スプライトの位置の確認▶スプライトの大きさ▶スプライトの表示・非表示▶スプライトの向き

・他にもステージの一覧を確認出来たり，スプライトの追加・ステージの追加を行うことができます。
研修会資料③ スプライトリスト

Scratch3の画面の解説④ ブロックパレット ❹ ブロックリスト・プログラムを組み立てるための部品であるブロックが置かれています。
・ブロックには簡単なスクリプトが書かれており，役割毎に分かれています。
・点線で囲んでいる部分は，役割毎に分類されており，クリックすることで自分が必要な役割のブロックを表示させることができます。

・ブロックはドラッグして，スクリプトエリアにドロップして使用します。
研修会資料

Scratch3の画面の解説⑤ スクリプトエリア➎ スクリプトエリア
・ブロックパレットからブロックをドラッグアンドドロップにて配置することでスクリプトを組み立てることができます。

研修会資料

【補足：日本語とにほんご】
Scratchには，2種類の日本語表記が準備されています▶日本語：漢字とひらがなが混在（本資料ではこちらを使用）▶にほんご：ひらがなのみ

ケースに応じて使い分けてみてください【言語変更方法】❶この部分をクリック❷どちらかをケースにあわせて選択
研修会資料

ネコを動かしてみる■ まずは，ネコを動かしてみましょう！

研修会資料

ネコを動かしてみる(やり方1)❶ 「10歩動かす」というブロックをドラッグ

研修会資料

ネコを動かしてみる(やり方2)❷ ドラッグしたままスクリプトエリアに移動して，ドロップ

研修会資料

ネコを動かしてみる(やり方3)❸ ブロックを左クリック！
※クリックした回数分動きます

研修会資料動かせた人は・・・■ブロック内の10という数字は変更することができます。数字をクリックしていろいろな数字を入れてみてください➡ プラスの数字だけでなくマイナスも入れれます

研修会資料【補足：ステージ】【ステージサイズ】480×360ピクセル【比率】横4:縦3【歩数とピクセルの関係】1歩＝1ピクセル【中心】x座標=0，y座標=0【注意点】
・（-）を使用することもあるが小学生には難しいかもしれないので低学年は注意が必要
・横がx，縦がｙ※自分で背景を用意するときは横と縦の比が4:3のものを用意するとピッタリおさまります
研修会資料見た目を変えてみよう■ ネコの見た目を変えてみましょう。

研修会資料

見た目を変えてみる(やり方1)❶ 見た目を左クリック

研修会資料

見た目を変えてみる(やり方2)❷ ブロックをドラッグしたままスクリプトエリアに移動して，ドロップ

研修会資料

見た目を変えてみる(やり方3)❸ ブロックを左クリック！
※クリックするとネコが2秒間しゃべります

研修会資料

動きと見た目の組み合わせ■ ネコの動きと見た目を組み合わせてみましょう。

研修会資料

動きと見た目を合わせてみる(やり方1)❶ 見た目ブロックをドラッグして，先ほどの動きブロックの下側に移動する

研修会資料

動きと見た目を合わせてみる(やり方2)❷ 左の図のように影ができるので，影が出来たらドロップする

研修会資料

動きと見た目を合わせてみる(やり方3)❸ 左の図のようにブロック同士がくっついて1つの塊になります。

研修会資料

動きと見た目を合わせてみる(やり方4)❹ ブロックの塊を左クリック！
※動きブロックと見た目ブロックのプログラムが上から順番に動作します

研修会資料

少し考えてみましょう■ 以下の見た目ブロックと動きブロックを使用して次のプログラムを作ってみてください。
使用するブロック

ブログラム内容

1.100歩動いて，色の効果が25変わる
2.100歩戻って，色の効果が25変わる
3.これを3回繰り返す
研修会資料

補足
■ スクリプトエリアからブロックを削除したい場合には・・・
削除方法1
1.ブロックにマウスポインタを合わせる
2.右クリックを押すと左図のように3種類選択肢が出るので，「ブロックを削除」を選択する。

削除方法2
1.ブロックをドラッグして，ブロックパレットにドロップする※ ブロックの塊を削除する場合はこちらの方が楽です
研修会資料

【解答】

プログラム

■ 正解のプログラムは右のようになります。
正解のプログラムを作れたでしょうか？
でも本当に右のプログラムは正しいのでしょうか・・・
何度か実行してみてください。

研修会資料

もう少し考えてみましょう■ 先ほどのプログラムの特徴を以下に挙げてみます。
●動きと見た目の変化が恐ろしく早い！
（多分，目で見てその変化を追えている人はいないはず・・・）➡ でも，問題で指定された内容はきちんと満たしている●同じ内容を何度も書いてある(ブロックが長くなりすぎてわかりにくい・・・）➡ でも，問題で指定された内容はきちんと満たしている

研修会資料

どうすればもっと良くなる？
●動きと見た目の変化が恐ろしく早い！
➡動きブロックと見た目ブロックの間に少し休みがあるといいなぁ。

●同じ内容を何度も書いてある➡同じ内容を繰り返す方法があると楽だなぁ。

➡ 制御ブロックで解決できます

研修会資料

制御ブロックでできること
●待機

●繰り返し

●条件分岐

●その他

➡入力内容まで処理を待つことができる➡制御ブロックで囲んだ内容を繰り返し実行できる➡指定された条件を満たす場合，処理を行う。

➡プログラムの強制停止や複製など研修会資料

もう一度考えてみましょう■ 以下のブロックを使用して次のプログラムを作ってみてください。
使用するブロック

ブログラム内容

1.100歩動いて，色の効果が25変わる
2.100歩戻って，色の効果が25変わる
3.これを3回繰り返す
研修会資料

【解答】

プログラム

■ 正解のプログラムは右のようになります。
正解のプログラムを作れたでしょうか？
制御ブロックを使う前のプログラムと比べてどうでしょうか？

研修会資料

プログラムらしくするために■ 今まで作ってきたプログラムは，ブロックを左クリックしなければ動きませんでした。
通常，プログラムを実行するためには何かしらのトリガー（きっかけ）が必要になります。
Scratchではこのトリガーを実現するためにイベントブロックが準備されています。

研修会資料

イベントブロック一覧
記載されている内容を満たしたときに，このブロックの下がわのブロックが実行される➡ このブロックは必ず先頭に来ることに注意

研修会資料

イベントブロックを使ったプログラム■ 緑色の旗を押したとき■ スペースキーの旗を押したとき

研修会資料

イベントブロック一覧
記載されている内容を満たしたときに，このブロックの下がわのブロックが実行される➡ このブロックは必ず先頭に来ることに注意

研修会資料

正多角形をプログラムを使ってかく【事前準備】

1. まずペンを使えるようにします。
2. ブロックパレット左下の部分を左クリック(左図参照）

この部分を左クリック【A -①分類（学習指導要領に例示されている単元等で実施するもの）算数第５学年】

研修会資料

正多角形をプログラムを使ってかく【事前準備】
3. 下図のような画面が出てくるので，「ペン」の項目を左クリック

この部分を左クリック
研修会資料

正多角形をプログラムを使ってかく4. 左図のようにペンという項目が出てきます
5. これで準備は完了です

研修会資料

【補足】ペン一覧

研修会資料

正多角形をプログラムを使ってかく使用するブロック

ブログラム内容【正三角形の場合】

1. ペンを下して，100歩動く
2.？度回して，100歩動く 【❓の部分は自分で考えてみてください】
3.これを?？回繰り返す【❓❓の部分は自分で考えてみてください】4.ペンを上げる
ヒント1：内角ではなく外角

ヒント2：❓×❓❓=360度

研修会資料

正多角形をプログラムを使ってかく
正解プログラム【正三角形の場合】

研修会資料

【補足】線を全て消す
プログラム「全部消す」ブロックを左クリックするか，左図のようにブロックを組むとスペースキーを押すことで簡単に消すことができる。

研修会資料

もう少し高度なプログラム■ ネコがボールに近づくとボールの色が変わり，遠ざかるとボールの色が戻るというプログラム（センサーに近づくとライトがついて，遠ざかるとライトが消えるという現象をイメージ）【A -② 分類（学習指導要領に例示されている単元等で実施するもの）理科第6学年に類似】

研修会資料

もう少し高度なプログラム【問題】
・ネコがボールの半径100歩以内に入ったら，ボールの色を3秒間青色にし，それ以外は，ボールの色を1秒間オレンジ色にする【A -② 分類（学習指導要領に例示されている単元等で実施するもの）理科第6学年に類似】

研修会資料

もう少し高度なプログラム【事前準備1：スプライトの追加】❶スプライトリストの中の
左図の点線で囲まれた部分をクリックする❶この部分をクリック

研修会資料

もう少し高度なプログラム【事前準備1：スプライトの追加】❷Ballをクリック

研修会資料❷スプライト選択画面が出てくるので，「Ball」を選択する

もう少し高度なプログラム【事前準備1：スプライトの追加】❸Ballが追加❸スプライトリストに「Ball」が追加されている

研修会資料

【補足：スクリプトリスト1】【スプライトの名称】
変更することも可能【スプライトのx座標とy座標：位置を示す】
値を入力することでスプライトの位置を変更することも可能【スプライトの大きさ・向き】
変更可能（大きさは100が基準）【スプライトの表示・非表示】
目のマーク：ステージ上に表示
目に斜線 ：ステージ上に表示しない

研修会資料

【補足：スクリプトリスト2】【スプライトの削除】
選択しているスプライトの右上にあるゴミ箱をクリックすると削除できる※削除するかの確認なく，削除されるので注意が必要
間違って消した場合には，画面上部のメニューから，「編集」➡「削除の取り消し」で復旧可能【スプライトの追加】
スプライトの追加が可能研修会資料【ステージ】
ステージ（背景）の一覧が並んでいる
スプライトリストのように背景を選択するとその背景がステージ上に反映される【背景の追加】背景の追加が可能【補足：スクリプトリスト3】【スプライトの追加】
スプライトの追加が可能【背景の追加】背景の追加が可能➡ 【●●をアップロード】PCに保存している画像を指定して使用できる➡ 【サプライズ】Scratchで用意されているスプライト，または，背景をランダムで選択➡ 【描く】自分で好きな絵を描いてスプライトや背景にできる➡ 【●●を選ぶ】 Scratchで用意されているスプライト，または，背景を選択できる

研修会資料

【補足：コスチューム1】・１つのスプライトに複数の画像が準備されていることがあります。
これを「コスチューム」と呼びます。
コスチュームにはそれぞれ名称が設定されており，「見た目」ブロックで「コスチューム名」をしていするとステージ上のスプライトの見た目を変更することが可能です。

研修会資料【補足：コスチューム2】❶コスチュームの画面にするには，まず，左図の点線部のコスチュームをクリックします。
❷今回はBallですが，このスプライトには，「ball-a」～「balle」の5種類が用意されています。
※追加したい場合には，画面左下のマークから追加することが可能です（追加方法は補足：スクリプトリスト3参照）
研修会資料

もう少し高度なプログラム【事前準備2：ブロックの準備】▶ Ballのスクリプトエリアに以下のブロックを準備します【イベントブロック】【制御ブロック】【見た目ブロック】初登場【調べるブロック】

初登場【演算ブロック】※ ブロックの個数は複数かもしれません

研修会資料

【補足】ブロックの種類❶ハットブロックプログラム(ブロックの塊)を開始するためのブロック。ハットブロックの下に組み合わされたブロックを実行する機能を持っています❷スタックブロック
上部が凹，下部が凸の形状をしており，上下どちらともにブロックを結合させることができます❸真偽ブロック
真偽というのは，条件にあっていれば，真(True)で，間違っていれば偽(False)と表現されます（このケースでは左側の値が50よりも小さい時は真，50よりも大きければ偽となります。形状は六角形で，制御ブロックなどの六角形の穴にいれて使います
研修会資料

【補足】ブロックの種類❹値ブロック値ブロックは，数値や文字列など何らかの数値を維持するためのブロックになります。形状は楕円形で，スタックブロックなどの数値や文字列を入れる楕円形の入力部分にはめ込むことが可能です➎C型ブロック
C型ブロックは，このブロックの中に他のブロックを入れて使用するブロックになります。複数回繰り返したり，条件に応じて処理を変更したりすることが可能になります。C型ブロックには，上下が凹凸になっており，上下と結合できるタイプと，左図のように下側には結合できないタイプがあります❻キャップブロック
キャップブロックは，実行中の指定したプログラムを停止させることが可能。プ
ログラムの暴走を防いだり，意図的に特定の処理を止めるのに役立ちます
研修会資料もう少し複雑なプログラム■ 事前準備2で準備したブロックを使って以下の内容のプログラムを作成してください
ブログラム内容【条件】
1.ネコ(スプライト1）がBallの半径100歩より近くに来るとBallの色が青色(コスチューム：ball-b）に3秒変わる
2.それ以外(100歩より遠いとき）は，Ballの色がオレンジ色(コスチューム：ball-a)に1秒変わる※ スプライト1については，ドラッグアンドドロップで場所を変更することとし，今回はBallのみにプログラムを作成してください

研修会資料

もう少し高度なプログラム
正解プログラム【Ball側】

研修会資料

もう少し高度なプログラム(応用)■ ネコ(スプライト1)を自由にステージ上を移動させるようにプログラムで組んで結果を見てみましょう■ 条件(数値など）をいろいろ変えてみましょう■ ネコ以外のスプライトが近づいた場合は，違う色のボールになるようにして見ましょう※ 答えはあえて載せません。正解は1つではないということをご自身の体験をもって実感していただければと思います
研修会資料

【付録】
・動きブロック一覧
・見た目ブロック一覧

研修会資料

動きブロックの種類【付録1】➡ スプライトを指定した歩数分，現在の向きの方向に動かす（－の数字を入れると逆向きに動く）➡ スプライトを指定した角度分，時計回りに回転させる➡ スプライトを指定した角度分，反時計回りに回転させる➡ スプライトをマウスポインタや他のスプライトの場所に瞬時に移動させる※ 他のスプライトがない場合は，マウスポインタのみ選択できる

研修会資料

動きブロック一覧【付録2】➡ スプライトを入力したx,y座標に移動させる➡ スプライトをマウスポインタや他のスプライトの場所に入力した秒数だけかけて移動させる※ 他のスプライトがない場合は，マウスポインタのみ選択できる➡ スプライトを指定した秒数だけかけて，指定した座標にむけて移動させる➡ スプライトを入力した角度に向ける

研修会資料

動きブロック一覧【付録3】➡ スプライトをマウスポインタや他のスプライトの方向に向ける※ 他のスプライトがない場合は，マウスポインタのみ選択できる➡ 「～ずつ変える」ブロックについては，スプライトのx座標，または，y座標を入力した数値ずつ変える「～にする」ブロックは，スプライトのx座標，または，y座標を入力された数値に瞬時に変更する※ 通常は，これらのブロックは制御ブロックと一緒に使用する研修会資料

動きブロック一覧【付録4】➡ スプライトが左右の画面の端に触れたときに，向きを反転させる➡ スプライトの回転方法を3種類から設定する▶ 左右のみ▶ 回転しない▶ 自由に回転➡

➡ 選択中のスプライトのx座標，y座標，向きの値を知ることができる。左のようにチェックボックスにチェックを入れるとステージ上に選択中のスプライトの当該項目の値が表示される。

研修会資料

見た目ブロック一覧【付録5】➡ スプライトから指定された文字がふきだしとして表示される※秒数が指定されているときは，その秒数だけ表示される➡ スプライトのコスチュームやステージの背景を変更することが可能。

▶ コスチュームや背景を直接指定して変更▶ コスチュームや背景を次のものに変更の2種類が選択可能。
研修会資料

見た目ブロック一覧【付録6】➡ スプライトの大きさを指定した数値(％)分ずつ変更できる➡ スプライトの大きさを指定した数値(％)に変更できる※100にすると元のサイズに変更される➡ スプライトの色や効果を指定した数値分ずつ変更できる➡ スプライトの色や効果を指定した数値に変更できる※0にすると色や効果を変更する前の元の画像に戻る➡ スプライトにいろいろ行った大きさ，色，効果などの内容を消去して初期状態にする➡ スプライトをステージ上に表示したり，隠したり(表示しなく）することができる
研修会資料

見た目ブロック一覧【付録7】➡ スプライトの大きさを指定した数値(％)分ずつ変更できる➡ スプライトの大きさを指定した数値(％)に変更できる※100にすると元のサイズに変更される➡ スプライトの色や効果を指定した数値分ずつ変更できる➡ スプライトの色や効果を指定した数値に変更できる※0にすると色や効果を変更する前の元の画像に戻る➡ スプライトにいろいろ行った大きさ，色，効果などの内容を消去して初期状態にする➡ スプライトをステージ上に表示したり，隠したり(表示しなく）することができる
研修会資料

見た目ブロック一覧【付録8】➡ スプライトの表示順を変更する。
※同じ位置に異なるスプライトがある場合，後ろの層にあると前の層にあるスプライトが被さって見えなくなる。

➡

➡ 選択中のスプライトのコスチューム
番号，背景の番号，大きさを知ることができる。左のようにチェックボック
スにチェックを入れるとステージ上に選択中のスプライトの当該項目の値が表示される。

研修会資料

■資料作成神戸市立工業高等専門学校
電子工学科
藤本 健司
※この資料に関するお問い合わせはfujimoto@kobe-kosen.ac.jpまで
研修会資料