2019年8月21日、8月23日実施 山梨県下の小学校教員対象研修 プログラミング体験

1. プログラミング教育に係る研修会
日 時
2019 年 8 月 21 日(水) 13:30～15:30
2019 年 8 月 23 日(金) 13:30～15:30
但し、8/21,23 は同一内容
場 所 サンテクノカレッジ
内 容
ブロック・プログラミング
Scratch(スクラッチ)を使ったプログラミング体験
もし、算数の図形の授業においてプログラミングを行うなら…
正多角形を描こう!!
2017 年、2018 年に実施した研修とは、内容の構成が異なっています。
サンテクノカレッジ・プログラミング教育研究会
http://www.suntech.ac.jp/kids/
「プログラミング体験教室」
～ はじめてのプログラミング体験! ～
2019 年度バージョン

2. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto
目 次
1 Scratch(スクラッチ)について 0
2 Scratch(スクラッチ)の画面 0
3 Scratch(スクラッチ)のブロックの組み合わせの練習 0
4 図形を描くための準備 0
5 プログラミング体験 0
5.1 体験 1 正三角形を描いてみよう (その 1) 0
5.2 体験 2 正三角形を描いてみよう (その 2) 0
5.3 体験 3 正多角形を描いてみよう 0
5.4 体験 4 正六角形を別の方法で描いてみよう 0
5.5 体験 5 正方形を回転させて模様を描いてみよう (難) 0
6 Scratch(スクラッチ)で作成したプログラムの保存方法、読み込む方法 0
6.1 プログラムの保存方法 (ダウンロード) 0
6.2 プログラムの読み込む方法 (アップロード) 0
7 Scratch(スクラッチ)の補足説明 0
7.1 背景の選択 0
7.2 新しいスプライトの追加 (鉛筆) 0
7.3 画面の座標に関して 0
7.4 色とカラーの番号 0
7.5 カテゴリー、コード、ブロックパレット 0
8 Scratch(スクラッチ)のアカウントの作成の手順 0
9 Web ブラウザに関して 0
10 補足 0
10.1 文部科学省 プログラミング教育 0
10.2 小学校を中心としたプログラミング教育ポータル 0
11 その他 0

3. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 1
本研修で使用する Scratch(スクラッチ, 以下スクラッチと明記する)とは、米国マサチューセ
ッツ工科大学(MIT)の研究所の MIT メディアラボで開発され公開されているビジュアル・プログラ
ミング言語です。または、ブロック・プログラミング言語です。
Scratch(スクラッチ) Web サイト https://scratch.mit.edu/
図 1 スクラッチの画面
 無償で利用可能です。
 世界各国で使用中されています。
 オンライン版、オフライン版が選択可能です。
 オンライン版は、特別なソフトウェアは不要です。
インターネットに接続でき、Web ブラウザの環境があれば使用できます。
 初心者でも OK です。
 ビジュアル・プログラミング型言語です。
 マウスでブロックを移動させて、ブロックの組み合わせでプログラミングができま
す。
図 2 スクラッチのブロックの組み合わせ例
組
み
合
わ
せ
る
て
ブロックの一例
の(一例)
 スクラッチの特徴
1 Scratch(スクラッチ)について

4. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 2
 オンライン版
 インターネットに接続でき、Web ブラウザの環境があれば使用できます。
 インターネットの環境があれば、どこでも使用可能です。
 オフライン版
 あらかじめ、PC にソフトウェアをインストールする必要があります。
 インターネットの環境がない場合には、オフライン版で使用することができます。
 学校の環境によっては、オフライン版の方が向いているかもしれません。
表 1 スクラッチのバージョン
Scratch 1.4 Scratch 2.0 Scratch 3.0
オフライン版 オフライン版 オンライン版
オフライン版
これは、オンライン版
本研修では、一番良く使用される「Scratch3.0」の「オンライン版」を使って説明します。
 スクラッチのバージョン
【補足】Scratch 3.0 のオフラインエディター版のインストール方法
ダウンロードサイトより該当のものをダウンロード https://scratch.mit.edu/download
 Scratch デスクトップ

5. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 3
スクラッチの画面を図 2 に示します。画面は、[ステージ][スプライトリスト][カテゴリー][ブ
ロックパレット][スクリプトエリア]の 5 つの部分に分かれています。
図 3 スクラッチの画面
表 2 スクラッチの画面の説明
機 能 説 明
[ステージ] スプライト(絵や物)が組み合わせたブロックによって動きます。
スプライトを動かす場所です。
[スプライ] ステージ上で動くキャラクターのことです。
[スプライトリスト] 使用しているスプライト(絵や物)の一覧が表示されています。
[カテゴリー] コード、コスチューム、音
コードの中には、ブロックの種類を色で区別しています。
[ブロックパレット] [コード]で選択された機能のブロックを一覧表示しています。
[スクリプトエリア] ブロックを組み合わせる場所です。
[緑の旗] プログラムを開始(スタート)します。
[赤丸] プログラムを停止(ストップ)します。
[ステージの全画面表示] 作成したステージが、全画面表示されます。
2 Scratch(スクラッチ)の画面
説明
カテゴリー
スクリプトエリア
ステージの全画面表示
ステージ
スプライト
スプライトリスト
ブロックパレット
赤丸 (停止)緑の旗

6. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 4
 ブロックを組み合わせてプログラミング
 様々な種類の制御や式のブロックを組み合わせることで、プログラムを作成できま
す。
 ブロックは、移動や回転などを制御するブロック、値の大小を調べるブロック、値の
計算を行うブロック、繰り返しや条件分岐の処理を行うブロックなど 10 種類のカテ
ゴリーに分けられています。
 ブロックをスクリプトエリアにドラッグ&ドロップし、ブロック同士を近づけると磁
石のようにブロック同士がつながり、そのひとかたまりになったものがスクリプトに
なります。
 スクリプトは、上から順番にブロックが実行されます。
 プログラムは、ステージ上で動かす
 スプライトは、ステージ上で座標軸の範囲で動きます。
ステージの中心が(X 座標, Y 座標) = (0,0)
横方向が、X 軸を意味し、-240～240 の範囲で動きます。
縦方向が、Y 軸を意味し、-180～180 の範囲で動きます。
図 4 画面の座標
 スプライトごとに、動かすプログラムが必要
 複数のスプライトを動かすときは、各スプライト(キャラクター)が各層になって重ね
ているイメージです。
 例えば、各スプライトが透明なフィルムに書かれていて、そのフィルムが層になって
重なり、それぞれの透明なフィルムに動きを書きます。
 スクラッチのプログラミングとは
スクリプトエリアに、カテゴリーのコードの中からブロックパレットを組み合わせて、
スプライト (絵や物) の動きを決めます。

7. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 5
① 初期画面
② 猫を動かすためのブロックを組み合わせる
ブロックをドラッグしながら(マウスの左側のボタンを押しながら)移動させ、離します。
③ 猫が動くかどうかの確認
をクリックしてスタートさせる。
猫が少し移動した。
④ 猫をずっと動かす
3 Scratch(スクラッチ)のブロックの組み合わせの練習
説明
クリック
ドラッグ
2 つのブロック
を
X 軸方向に+10 移動
右方向に+10 移動

8. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 6
⑤ 猫のコスチュームを変えて動かす ⑥ 猫が端についたら、折り返えす
(げぇ、猫が逆さになって移動していた)
⑦ おかしくない猫の移動
図 5 ブロックの組み合わせ練習
スプライトを動かしていて、困ったときに役立つブロックとして、次のものがあります。
画面の中央(中心)にスプライトを移動させる。
スプライトを右に向ける。

9. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 7
① ペンの機能を追加
② コードの中にペンが追加
ペンのブロックが使用できるようになった。
図 6 拡張機能 ペン
4 図形を描くための準備
説明
クリック
クリック

10. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 8
[定規、分度器、コンパス]であっても、[スクラッチ]であっても正三角形の性質は必要です。
と を 3 回繰り返すと、
線を引く 向きを変える
図 7 正三角形 (定規,分度器)
5 プログラミング体験
説明5.1 体験 1 正三角形を描いてみよう (その 1)
説明
ステップ 1 ステップ 2 ステップ 3 (ステップ 1’)
60°60°
120°
内角, 外角
ステップ 1 ステップ 2 ステップ 3 (ステップ 1’)
60°
 定規・分度器
 スクラッチ 正三角形を描く部分
60°線を引く
角度を求める
線を引く
ステップ 1 ステップ 2
60°
向きを変える
線を描く
準備

11. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 9
と を 3 回繰り返すと
図 8 正三角形を描く部分 (スクラッチ)
図 9 正三角形を描くブロック
ポイント このブロックを入れてみると良いかも
ステップ 1 ステップ 2
入力
クリック
クリック
 ブロックの定義
始めの向きに

12. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 10
図 10 正三角形を描くスクラッチのプログラム (ブロック例)
 スクラッチ
スペースを押すと線を消す

13. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 11
体験 1 で、正三角形を描くことができました。図 10 の図形のブロックをよく見てみると同じこ
とを繰り返しています。その部分を違うブロックに置き換えてみます。
図 11 繰り返しのブロックを使用した場合
表 3 正多角形の性質
【正三角形】 【正方形】
3 辺, 120°(一つの内角は 60°より) 4 辺, 90°(一つの内角は 90°より)
【正五角形】 【正六角形】
5 辺, 72°
三角形は 3 個 180°× 3 = 540°
一つの内角: 540°÷ 5 = 108°
外角: 180°－ 108°= 72°
または
外角: 360°÷ 5 = 72°
6 辺, 60°
三角形は 4 個 180°× 4 = 720°
一つの内角: 720°÷ 6 = 120°
外角: 180°－ 120°= 60°
または
外角: 360°÷ 6 = 60°
5.2 体験 2 正三角形を描いてみよう (その 2)
説明
ポイント 辺の数 外角の大きさ
変更
ポイント
このブロックを入れ
てみると良いかも
値を変更

14. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 12
【正方形】 【正五角形】
【正六角形】 【正八角形】
【正十二角形】 【正二十角形】
図 12 正多角形のブロック例
5.3 体験 3 正多角形を描いてみよう
説明

15. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 13
プログラムを実行すると、あっと言う間に実行が終了してしまいます。ここのブロックが実行で
きているのかどうかわからない場合があります。そのようなときは、 というブロックを
意図的に入れることで、ひとつのブロックが実行したあとに一休みをさせることができます。
1 秒ではなく、0.5 秒としても良いです。
図 13 正多角形の 1 秒待つを加えたブロック例
正多角形の「辺の長さ」を表す「〇〇歩動かす」も変化させている。
例えば、 から へ。100 歩のままだと、画面からはみだしてしまうため。
正五角形を少し変形させると、星形も描くことができる。
図 14 は、実行結果の後で、猫の位置を少しずらしてある。
図 14 星形の描画結果例
 動きを理解するためのポイント
 辺の長さも変化
正多角形を描いている様子を見るために入れている
 星形の描画

16. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 14
正六角形には、正三角形が 6 つあり、その正三角形は合同になっていることを確かめる方法で
描きます。同じ大きさの正三角形を 6 つ描きます。
図 15 正三角形を 6 つ使用した描画
図 16 正三角形を 6 つ繰り返したブロック例
5.4 体験 4 正六角形を別の方法で描いてみよう
説明
正三角形を描画
向きを上に
次の正三角形を描くために
回転させている

17. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 15
正方形を回転させて描くと模様ができます。
体験 4 の正三角形の場合でしたが、他の多角形でも同様なことができます。描画する個数も増
やすと異なる模様を描くことができます。
図 17 正方形を繰り返し描画した実行例
図形の大きさに該当する の値を変化させると異なる大きさを描くことができ
ます。
また、ペンの色を指定する を使うことで、ペンの色を変更することができ
ます。
描いた図形を消さず、ペンの色を変え、図形の大きさを変えて、さらに描画をすることで素敵な
模様を描くこともできます。
図 18 正方形の大きさ、ペンの色を変更した実行例
5.5 体験 5 正方形を回転させて模様を描いてみよう (難)
説明
1 周は 360 度で、
4 個描くので、
90 度ずつ回転させる
8 個描画した場合
18 個描画した場合

18. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 16
① ファイルをクリック ② ダウンロードをクリック
③ 保存する場所の決定
ダウンロードした Scratch プロジェクトは名前を変えることもできますが、
プロジェクト名.sb3 という名前です。
図 19 プログラムの保存方法
① ファイルをクリック ② アップロードをクリック
③ どの Scratch プロジェクトのファイルをアップロードするかの選択
アップロードしたいファイルを選択する。拡張子が、.sb3 というファイルです。
図 20 プログラムの読み込む方法
6 Scratch(スクラッチ)で作成したプログラムの保存方法、読み込む方法
説明
6.1 プログラムの保存方法 (ダウンロード)
クリック
クリック
6.2 プログラムの読み込む方法 (アップロード)
クリック
クリック

19. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 17
スクラッチには、たくさんの背景があらかじめ用意されています。
図 21 背景の選択
スクラッチには、たくさんのスプライトも用意されています。
図 22 スプライトの追加
7 Scratch(スクラッチ)の補足説明
説明7.1 背景の選択
背景の
変更
クリック
7.2 新しいスプライトの追加 (鉛筆)
クリック
クリック
クリック

20. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 18
図 23 画面の座標
色は、カラーの番号として、0～199 までの 200 種類で表すことができます。
で指定できます。
図 24 色とカラーの番号
鉛筆が表示された7.3 画面の座標に関して
O
Y
X
Y の値は、－180 ～ 180 の範囲
X の値は、－240 ～ 240 の範
囲
7.4 色とカラーの番号
+0 +2 +4 +6 +8 +10 +12 +14 +16 +18
0
20
80
60
40
180
160
140
120
100
199
0

21. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 19
コード、コスチューム、音やブロックの種類(ブロックの機能)を色で区別しています。
[コード]
スプライト(絵や物)の動作
を表すブロックがあります。
ブロックの種類(ブロックの
機能)を色で区別します。
[コスチューム]
同じスプライト(絵や物)でも
異なる絵が用意されているも
のもあります。
[音]
いろいろな音声も用意されて
います。
図 25 カテゴリーの種類
7.5 カテゴリー、コード、ブロックパレット
カテゴリー

22. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 20
[コード]で選択された機能のブロックを一覧表示しています。
ブロックパレット

23. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 21
図 26 コード(ブロックパレット)

24. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 22
アカウントは無くても使用できます。しかし、アカウントを作成した方が、作成した作品の保
存などの管理が便利です。また、アカウントを作成しておけば、どの環境でもサインインすれば
自分の作品を見ることや作成することができます。
① スクラッチのトップページで Scratch に参加 または Scratch に参加しよう をクリック
https://scratch.mit.edu/
② ユーザー名、パスワードの入力 ③ 生まれた年と月、性別と国の情報を入力
④ 電子メールアドレスの入力
メールアドレスは存在していないとダメ
⑤ 作成完了のメッセージ
ユーザー名を入力
パスワードを 2 回入力
ック
クリック
Japan を選択
クリック
メールアドレスを入力
情報を受信する場合はチェック
クリック
作成したユーザー名
登録したメールアドレス
クリック
クリック
8 Scratch(スクラッチ)のアカウントの作成の手順

25. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 23
⑥ 登録した電子メールアドレスの確認
登録した電子メールアドレス宛に確認のメッセ
ージが届きます。
⑦ 確認作業終了
図 27 スクラッチのアカウント作成手順
【サインインの方法】スクラッチのトップページで サインインをクリック
https://scratch.mit.edu/
図 28 サインインの方法
クリック
作成したユーザー名
クリック
作成したユーザー名が表示
クリック
クリック
パスワードを入力
ユーザー名を入力

26. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 24
Web ブラウザとしての「Internet Explorer（インターネットエクスプローラー）」は、開発元の
マイクロソフト社では、2013 年にリリースされた「Internet Explorer 11」のバージョンを最後
にし、開発を終了しています。現在は、Windows 10 の標準 Web ブラウザは「Microsoft Edge（マ
イクロソフトエッジ）」へ移行しています。
Scratch では、Internet Explorer では利用できません。Microsoft Edge への移行が必要になり
ます。
Microsoft Edge など他の Web ブラウザを使用することができない場合は、オフライン版の
Scratch デスクトップを用いるしかありません。
Scratch3.0 のサポートブラウザは以下となっています。
表 4 サポートブラウザ
デスクトップ・ノートパソコンの場合
Google Chrome
Microsoft Edge
Firefox
Safari
タブレット PC の場合
Mobile Chrome
Mobile Safari
9 Web ブラウザに関して

27. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 25
文部科学省の小学校学習指導要領および指導要領解説に小学校でのプログラミング教育が新た
に位置づけされています。
文部科学省 http://www.mext.go.jp/
また、スケジュールを 2020 年度より小学校でのプログラミング教育が全面実施のスケジュール
と明記されています。
http://www.mext.go.jp/a_menu/shotou/new-cs/1383986.htm
http://www.mext.go.jp/a_menu/shotou/new-cs/1384661.htm
2018 年 11 月に、文部科学省から「小学校プログラミング手引(第二版)」が公開されています。
小学校プログラミング教育の手引（第二版）
http://www.mext.go.jp/a_menu/shotou/zyouhou/detail/1403162.htm
http://www.mext.go.jp/component/a_menu/education/micro_detail/__icsFiles/
afieldfile/2018/11/06/1403162_02_1.pdf
この手引き(第二版)では、小学校段階のプログラミングに関する学習活動の分類(例)として下
記のようになっています。
図 29 手引書によるプログラミングに関する学習活動の分類例
今回の研修の内容(体験 1)の正多角形を描くことは、手引き(第二版) の
A 学習指導要領に例示されている単元等で実施するもの
A-① プログラミングを通して、正多角形の意味を基に正多角形をかく場合(算数 第 5 学年)
に該当します。
10 補足
10.1 文部科学省 プログラミング教育

28. サンテクノカレッジ プログラミング教育研究会 Y.Yamamoto 26
小学校を中心としたプログラミング教育ポータルサイトとして、
https://miraino-manabi.jp/
があります。
事例集等の作成や文科省の手引に掲載している指導例の具体的な実践事例などが掲載されてい
ます。
本校も学校法人として、未来の学びコンソーシアムには、早い段階から趣旨に賛同していま
す。
この資料に関しては、山本芳彦 (yoshi@suntech.ac.jp) までお願いします。
なお、本研修で説明した内容および紹介したものは、Scratch Web サイトで公開しています。
山本が作成したものは、ユーザー名 ymmtyshk で公開しています。
(https://scratch.mit.edu/users/ymmtyshk)
11 その他
10.2 小学校を中心としたプログラミング教育ポータル