scratchを用いた...

Scratchを用いたプログラミング教育について

平成29年度ICT活用教育研修会

九州工業大学

齊藤剛史

2017年8月21日

講師紹介

名前： 齊藤剛史（さいとうたけし）

所属： 九州工業大学

大学院情報工学研究院

システム創成情報工学研究系

連絡先： scratch@slab.ces.kyutech.ac.jp

専門： 画像処理・パターン認識

2

内容

本日の流れ

資料についてHPで公開済み

http://www.slab.ces.kyutech.ac.jp/~saitoh/20170821_ICTIizuka/

3

Time Contents

10:20 – 10:25 (5min) ①Scratchを学ぶ

10:25 – 10:45 (20min) ②Scratchの操作説明

10:45 – 11:35 (50min) ③Scratchを用いたプログラミング教育例

11:35 – 11:50 (15min) ④プログラミング教育の導入について

①Scratchを学ぶ

平成29年度ICT活用教育研修会

九州工業大学

齊藤剛史

2017年8月21日

プログラミング言語

コンピュータプログラムを記述するための形式言語

おもに英語の単語と記号を組み合わせた、特殊な文法（構文）で記述される。

5

Wikipediaより

The 2017 Top Programming Languages

IEEE Spectrum2017.7.18

6

http://spectrum.ieee.org/computing/software/the-2017-top-programming-languages

最近の代表的なプログラミング言語

Python綺麗なコードが簡単に書ける言語

C言語組み込み・OS関係で使われている言語

Javaオブジェクト指向の代表的な言語

JavaScriptWeb系で最も使われている言語

PHPサーバーサイドのWebアプリケーションに適した言語

Swift iOS・OSXのアプリ開発に使われる新しい言語

Ruby日本で生まれたプログラミング言語

7

様々なプログラミング言語

画面に「Hello, world!」と

表示するプログラム #include <stdio.h>

int main(void){

printf("Hello, world!");return 0;

}

#include <iostream>

int main(){

std::cout << "Hello, world!" << std::endl;}

C

C++

public class Hello {public static void main(String[] args) {

System.out.println("Hello, world!");}

}

Java

10 PRINT "Hello, world!"20 END

BASIC

WRITE(6,10)10 FORMAT('Hello, World!')

STOPEND

FORTRAN

printf ('Hello, world!¥n')

MATLAB

program Hello(output);beginwriteln('Hello, world!')

end.

Pascal

8

Scratchでは？

#include <stdio.h>

int main(void){

printf("Hello, world!");return 0;

}

#include <iostream>

int main(){

std::cout << "Hello, world!" << std::endl;}

C

C++

public class Hello {public static void main(String[] args) {

System.out.println("Hello, world!");}

}

Java

10 PRINT "Hello, world!"20 END

BASIC

WRITE(6,10)10 FORMAT('Hello, World!')

STOPEND

FORTRAN

printf ('Hello, world!¥n')

MATLAB

program Hello(output);beginwriteln('Hello, world!')

end.

Pascal

9

Scratchとは？

Scratch（スクラッチ）米国マサチューセッツ工科大学（MIT）メディアラボが開発された、無償で利用できるプログラミング環境設計者：Mitchel Resnick（ミッチェルレズニック）

あらかじめ用意されたブロックを組み合わせることで簡単にプログラムの作成が可能

小学生から大人まで、誰でもすぐにプログラミングを始めることが可能

10

Scratchとは？

Scratch（スクラッチ）米国マサチューセッツ工科大学（MIT）メディアラボが開発された、無償で利用できるプログラミング環境設計者：Mitchel Resnick（ミッチェルレズニック）

あらかじめ用意されたブロックを組み合わせることで簡単にプログラムの作成が可能

小学生から大人まで、誰でもすぐにプログラミングを始めることが可能

11

Hat block

Stack block Boolean blockC Block Reporter block

Cap block

Scratchとは？

Scratchすべての年代の人々に使われている。

特に8歳から16歳向けにデザインされている。

150以上の国で使用されており、40カ国語以上に翻訳されている。

12

https://scratch.mit.edu/statistics/

Scratchとは？

ScratchWindows、Macなど、様々なコンピュータで利用できる。

ウェブアプリケーションのため、特別なソフトウェアを必要としない。

作成したプログラムの結果（動作）をすぐに画面で確認できるため、間違ったプログラムを作っても簡単に修正できる。

作成したプログラムをScratchのサイトで世界中の人々に公開したり、他人が作成したプログラムを見たりすることができる。

13

必要な動作環境

OSWindows、Chrome OS、Mac、Linux

WebブラウザChrome、Firefox、Safari、Edge、Internet Explorer

インターネット接続オフラインエディタを利用することで、インターネット接続なしでScratchプロジェクトを作成が可能

14

Scratchで何ができる？

他のプログラミング言語と同様に、様々なプログラムを作ることができる。シューティングゲーム

アドベンチャーゲーム

RPGゲーム

動く紙芝居のようなアニメーション

お金の計算

体調管理ソフト

物理シミュレーション

学校などで使うプレゼンテーション資料

ロボットや電子楽器などのような電子機器を制御するプログラム

15

ビジュアルプログラミング言語

プログラムをテキストで記述するのではなく、視覚的なオブジェクトでプログラミングするプログラミング言語

AgentSheets、Alice、Analytica、ASTERIA、Automator、CODE、Choregraphe、DRAKON、jMax、LabVIEW、ラダー・ロジック、Lava、Max/MSP、Microsoft Robotics Studio、Mindscript、MOONBlock、OpenMusic、Prograph CPX、プログラミン、Pure Data、Quartz Composer、SCADE、Simulink、Etoys、Scratch、Stagecast Creator、Subtext、SynthMaker、ThingLab、ToonTalk、VISCUIT、VisSim、Visulan、VSXuなど

16

Wikipediaより

ビジュアルプログラミング言語

プログラミン文部科学省が開発したビジュアルプログラミング言語

http://www.mext.go.jp/programin/

17

ビジュアルプログラミング言語

VISCUIT（ビスケット）2003年にNTTの研究で開発されたビジュアルプログラミング言語

http://www.viscuit.com/

18

③Scratchを用いたプログラミング教育例

平成29年度ICT活用教育研修会

九州工業大学

齊藤剛史

2017年8月21日

プログラミング教育の実践上の工夫

プログラミングに対して、児童生徒に抵抗感を与えないために、モチベーションを継続できるように工夫して実践する。

授業の進め方

サンプルプログラムや参考サイトのリンク集を用意して、児童生徒が自分で見比べて仕組みを理解したり、アルゴリズムを考えたりする。

児童生徒同士で一緒に取り組んだ

り、分からなくなった時に教えあ

ったりするような協働型の学習ス

タイルを導入する。

20

平成26年度文部科学省委託事業情報教育指導力向上支援事業 プログラミング教育実践ガイド

プログラミング教育の実践上の工夫

授業の進め方

目標を細分化し、小さな目標を達成する体験を積み重ねながら最終目標に近づけるようスモールステップで課題を設定することで、児童生徒の「プログラミングは難しい」という思い込みを払拭させ、自分にもできるという自己効力感を高めさせる。

児童生徒は、ある程度自分でコ

ンピュータを動かすことができ

るようになると、自分自身で発

展・改良する。

21

平成26年度文部科学省委託事業情報教育指導力向上支援事業 プログラミング教育実践ガイド

平成26年度文部科学省委託事業情報教育指導力向上支援事業 プログラミング教育実践ガイド

プログラミング教育の実践上の工夫

授業の方針

教員が全てを教えるのではなく、最小限の基礎知識から自分の思い描く働きを実現するために、児童生徒が考え、友達との協働によって確認・発展のアイデアを得て、試行錯誤しながらプログラミングするという児童生徒の主体性を重視する授業スタイルが望まれる。

22

取り組み内容

1. 基礎知識の説明

2. サンプルプログラムの紹介例

3. チュートリアルの利用例

4. 演習問題例

23

基礎知識の説明

「②Scratchの操作説明」を参考にして下さい。

サンプルプログラムの紹介例

総和を求めるプログラム

総和（1からNまでの総和）

N=10の場合

𝑆 = 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 = 55

N=100の場合

𝑆 = 1 + 2 +⋯+ 99 + 100 = 5050

公式

𝑆 = σ𝑖=1𝑁 𝑖 =

1

2𝑁(𝑁 + 1)

26

処理の流れ27

START

sum ← 0

i ≦ N

yes

no

END

i ← 1

sum ← sum + i

i ← i + 1

sum を出力

処理の流れ

フローチャート（flowchart、流れ図）プロセスの各ステップを箱で表し、流れをそれらの箱の間の矢印で表すことで、アルゴリズムやプロセスを表現する図

端子（開始／終了）プロセスの開始と終了を示す。

処理具体的な処理を示す。

判断一般に「Yes/No」あるいは「真/偽」が答えと

なる判断を表す。

入出力「ユーザーがXを入力」、「Xを表示」などと

書かれる。

28

処理の流れ29

START

sum ← 0

i ≦ N

yes

no

END

i ← 1

sum ← sum + i

i ← i + 1

sum を出力

総和を格納する変数

カウンタ

カウンタがN以下か確認する

現在までの総和に iを加える

カウンタを更新する

カウンタがN以下の場合

カウンタがNより大きい場合

結果（総和）を出力する

プログラム例30

チュートリアルの利用例

チュートリアルの利用

Scratch公式ウェブサイトに「お試し作品集」が用意されている。

チュートリアルの利用

Scratch公式ウェブサイトに「お試し作品集」が用意されている。

33

チュートリアルの利用

Scratch公式ウェブサイトに「お試し作品集」が用意されている。

34

チュートリアルの利用

ScratchのWebサイトで用意されているチュートリアルを利用する。名前を動かそう

飛ばしてみよう

ミュージックを作ろう

ゴールまで競争しよう

かくれんぼ

オシャレをしよう

物語を作ろう

ピンポンゲーム

さあ、踊ろう

キャッチゲーム

バーチャルペット

ゴールまで競争しよう

右側の説明を参考にする。

36

演習問題例

演習問題

10個のブロックを用いてプログラムを作りなさい。それぞれのブロックを1個以上使うこと。

数値等は変更してよい。

38

演習問題

10個のブロックを用いてプログラムを作りなさい。それぞれのブロックを1個以上使うこと。

数値等は変更してよい。

答えは一つだけでない。

39

④プログラミング教育の導入について

平成29年度ICT活用教育研修会

九州工業大学

齊藤剛史

2017年8月21日

プログラミング教育の課題

授業時間の確保

指導人材の養成・確保

指導方法・教育教材の開発・普及

環境整備

その他

41

実践事例

プログラミング教育実践ガイド平成26年度文部科学省委託事業情報教育指導力向上支援事業

小中高校の実践事例の紹介 1 年生からのプログラミング体験（小1：生活科，特別活動）

めざせ！行列のできるおすし屋さん！（小4：図画工作科）

プログラムロボット学習（小4～6：総合的な学習の時間）

調べた人物をプログラムで表現してみよう（小6：総合的な学習の時

間）

アニメーション制作でプログラミングの基礎学習（中2：技術・家

庭科（技術分野））

プログラミングを利用してLEDを制御しよう

車型ロボを制御して課題コースをクリアしよう

ペアで取り組む交差点の信号機プログラミング（中3：技術・家庭科（技術分野））

42

プログラミングの学び方

書籍で学ぶ。独学

プログラミング教室で学ぶ。

学習サイトで学ぶ。

43

Scartch関連図書（1/11）

スクラッチアイデアブック

ゼロから学ぶスクラッチプログラミング石原正雄（著）

出版社 カットシステム

ISBN-13 978-4877832179

発売日 2009/01

44

Scartch関連図書（2/11）

小学生からはじめるわくわくプログラミング阿部和広（著）

出版社 日経BP社

ISBN-13 978-4822285159

発売日 2013/7/25

45

Scartch関連図書（3/11）

ゲームで遊ぶな、ゲームを作ろう！

スクラッチ2.0アイデアブック

ゼロから学ぶスクラッチプログラミング石原正雄（著）

出版社 カットシステム

ISBN-13 978-4877833404

発売日 2014/4/1

46

Scartch関連図書（4/11）

スクラッチではじめるプログラミング石原正雄（著）

出版社 カットシステム

ISBN-13 978-4877833480

発売日 2014/07

47

Scartch関連図書（5/11）

いちばんはじめのプログラミング

Scratchで、作る楽しさ、考える楽しさをそだてる

Scratch2.0対応たにぐちまこと（著）

出版社 マイナビ

ISBN-13 978-4839954864

発売日 2015/3/24

48

Scartch関連図書（6/11）

Scratchではじめよう！プログラミング入門杉浦学、阿部和広（監修）

出版社 日経BP社

ISBN-13 978-4822297749

発売日 2015/6/11

49

Scartch関連図書（7/11）

Scratchで学ぶ

プログラミングとアルゴリズムの基本中植正剛、太田和志、鴨谷真知子（著）

出版社 日経BP社

ISBN-13 978-4822297930

発売日 2015/11/21

50

Scartch関連図書（8/11）

小学生からはじめるわくわくプログラミング2倉本大資（著）、阿部和広（監修）、酒匂寛（翻訳）

出版社 日経BP社

ISBN-13 978-4822295820

発売日 2016/5/12

51

Scartch関連図書（9/11）

CoderDojo Japan公式ブック

Scratchでつくる！たのしむ！プログラミング道場角田一平、とがぞの、高村みづき、若林健一、砂金よしひろ（著）

出版社 ソーテック社

ISBN-13 978-4800711519

発売日 2016/12/22

52

Scartch関連図書（10/11）

日経Kids+ 子どもと一緒に楽しむ！

プログラミング（日経ホームマガジン）日経PC21（編集）

出版社 日経BP社

ISBN-13 978-4822238810

発売日 2017/3/4

53

Scartch関連図書（11/11）

はじめてのプログラミング

（学研まんが入門シリーズ）橋爪香織、たきりょうこ（著）、阿部和広、うめ（小沢高広・妹尾朝子）（監修）

出版社 学研プラス

ISBN-13 978-4052045851

発売日 2017/4/18

54

プログラミングの学び方

書籍で学ぶ。

プログラミング教室で学ぶ。

TECH::CAMP https://tech-camp.in/

Life is Tech ! https://life-is-tech.com/

EX-Gram http://www.ex-gram.com/

CodeCamp https://codecamp.jp/

Tech Kids CAMP http://techkidscamp.jp/

STAR Programming SCHOOL http://www.star-programming-school.com/

TENTO http://www.tento-net.com/

など

学習サイトで学ぶ。

55

プログラミングの学び方

書籍で学ぶ。

プログラミング教室で学ぶ。

学習サイトで学ぶ。

paiza http://paiza.jp

Flappy Code http://studio.code.org/flappy/1

ドットインストール http://dotinstall.com/

Codecademy http://www.codecademy.com/

など

56

プログラミング教育の課題

授業時間の確保

指導人材の養成・確保

指導方法・教育教材の開発・普及

環境整備

その他

57

環境整備

コンピュータデスクトップ、ノートPC、タブレット

InterCLASSなどの授業支援システムがあると望ましい。

物理的セキュリティ対策

電源設備、熱対策

ネットワークウイルス対策

プリンタ

プロジェクタ、スクリーン

ホワイトボード

58

その他

児童生徒の事前知識パソコンの基本操作

キーボード操作

マウス操作

– 左クリック、右クリック、ダブルクリック、ドラッグ

アルファベット

59

その他

プログラムの管理先生が用意するサンプルプログラム

どのように児童・生徒に配布する？

サンプルプログラムを示しながら、一緒に作る。

共有フォルダを利用する。

学習システムを利用する。

児童・生徒が作成するプログラムどこに保存する？

自宅で作成したプログラムをどのように学校の端末で動かす？

USBメモリ、SDカード、メール、クラウドサービス

セキュリティ

60

その他

評価方法試験の実施

試験時間にプログラムを作成する問題は適していない。

– ブロックを描くことは難しい。

プログラムを理解する問題

– 問題文にプログラムを示し、どのように動作するのか考えさせる。

プログラムを修正する問題

– 問題文にプログラムを示し、動作を変更するためにはどのように修正すれば良いか考えさせる。

回答は一意でない。

課題の提出コピーが出回る可能性がある。

回答は一意でない。

プレゼンテーションの実施

61

プログラミングの手順62

問題発生 問題解決のアイデア

仕様決定

設計

コーディング

デバッグ

ドキュメント作成

問題の分析 問題解決に必要な仕様の洗い出し

仕様を実現するためのデータ構造、アルゴリズムの設計

設計に従ってプログラムの作成

プログラムの誤りの洗い出し プログラムの修正

プログラム開発の記録 利用者のための使用説明書作成

プログラミングの手順

どんなプログラムを作るか考えをまとめる。1. 紙やホワイトボードにアイデアを列挙する。

どんな種類（ゲーム、アニメーション）？

スプライト（キャラクタ）は？、背景は？、マウス操作は？、キー操作は？

2. アイデアを整理する。処理の流れ、変数

3. プログラムを作る

4. テストする（動作を確認する） → 直す

→ テストする → 直す → ・・・ある程度できたら、他の人にも体験してもらう。

63