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 Spectrum�2017.7.18

6

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

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

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

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

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

� Web系で最も使われている言語� 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とは︖� Scratch

�Windows、Macなど、様々なコンピュータで利用できる。�ウェブアプリケーションのため、特別なソフトウェアを

必要としない。�作成したプログラムの結果（動作）をすぐに画面で確認

できるため、間違ったプログラムを作っても簡単に修正できる。

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

13

必要な動作環境� OS

�Windows、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の場合

�

� N=100の場合�

�公式�

�

���

�

�

26

処理の流れ27

START

sum ← 0

i Ni ≦ N

yes

no

END

i ← 1

sum ← sum + i

i ← i + 1

を出⼒sum を出⼒

処理の流れ�フローチャート（flowchart、流れ図）

�プロセスの各ステップを箱で表し、流れをそれらの箱の間の矢印で表すことで、アルゴリズムやプロセスを表現する図

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

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

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

なる判断を表す。�入出⼒

�「ユーザーがXを入⼒」、「Xを表示」などと書かれる。

28

処理の流れ29

START

sum ← 0

i Ni ≦ 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