第19回九工大わくわく科学教室

一番はじめのプログラミング九州工業大学齊藤剛史

2019年3月16日

人間とコンピュータの違い2

人間 コンピュータ

計算⼒ 遅い すばやく計算

記憶⼒ ちょっとしたことでも忘れる ぼう大な量でも忘れない

判断⼒ 時に悩む 正確にすばやく判断

⾏動⼒ ある 自分からは何もしない

柔軟性 ある 言われた通りにしか動かない

常識 ある ない。プログラム次第

人間とコンピュータの違い3

人間 コンピュータ

計算⼒ 遅い すばやく計算

記憶⼒ ちょっとしたことでも忘れる ぼう大な量でも忘れない

判断⼒ 時に悩む 正確にすばやく判断

⾏動⼒ ある 自分からは何もしない

柔軟性 ある 言われた通りにしか動かない

常識 ある ない。プログラム次第

それぞれの得意なことを生かそう

人間が⾏動（処理）を決めてコンピュータに指示を与える

プログラミング︖プログラミング（programming）とは、プログラムを作成することにより、人間の意図した処理を⾏うようにコンピュータに指示を与える⾏為である。Wikipediaより引用

4

1 + 2 + 3 +‥+ 1000 = ︖

#include <stdio.h>

void main(void){int sum = 0;for(int i=1; i<=1000; i++)

sum += i;printf(“sum = %d¥n”, sum);

}

1から1000まで足し算するプログラム

プログラミング︖プログラミング（programming）とは、プログラムを作成することにより、人間の意図した処理を⾏うようにコンピュータに指示を与える⾏為である。Wikipediaより引用

コンピュータにさせたい仕事を順番に書くこと。コンピュータは人間でないため、人間の言葉は理解できない。

コンピュータが理解できる言葉（プログラム）で指示を書く必要がある。

5

プログラムはどこにある︖ハードウェア（Hardware）

ゲーム機ビデオデッキ自動⾞

ソフトウェア（Software）カセットSDカードCD / DVD / Blu-ray

プログラム（Program）人間が普段使用する言語に近い言葉で書かれたコンピュータへの命令⽂たるプログラム。

6

最近の代表的なプログラミング言語 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（ミッチェルレズニック）

MITメディアラボのライフロング・キンダーガーテン・グループ（The Lifelong Kindergarten group）によって開発と保守が⾏われてる。

10

Scratchとは︖ Scratch（スクラッチ）

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

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

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

11

Hat block

Stack block Boolean blockC Block Reporter block

Cap block

Scratchとは︖ Scratch

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

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

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

12

必要な動作環境デスクトップ

Chrome (63+)

Edge (15+)

Firefox (57+)

Safari (11+)

タブレットMobile Chrome (62+)

Mobile Safari (11+)

オフライン環境Scratchデスクトップをインストールすることで、インターネット接続無しで利用可能

13

Scratchで何ができる︖他のプログラミング言語と同様に、様々なプログラムを作ることができる。シューティングゲームアドベンチャーゲームRPGゲーム動く紙芝居のようなアニメーションお⾦の計算体調管理ソフト物理シミュレーション学校などで使うプレゼンテーション資料ロボットや電子楽器などのような電子機器を制御するプログラム

14

Scratch公式ウェブサイトにアクセス（1/2）15

(1) Googleなどの検索画面で「scratch」と⼊⼒する。

Scratch公式ウェブサイトにアクセス（2/2）16

「Scratch – Imagine, Program, Share」をクリックする。

Scratch公式ウェブサイト

「作る」をクリックする。

17

プログラムを作る（2/9）18

プログラムを作る（3/9）

(1)「イベント」をクリックする。

(2) をドラッグして

19

プログラムを作る（4/9）

におく。(3)スクリプトエリアにおく。

20

プログラムを作る（5/9）

(4)「⾒た目」をクリックする。

21

をドラッグして、(5) をドラッグして、

の下につなげる。

プログラムを作る（6/9）

(6)「�」をクリックする。

22

プログラムを作る（7/9）

「こんにちは︕」が表示された。

23

プログラムを作る（8/9）(7)「●」をクリックする。

」が消える。「Hello!」が消える。

プログラムが終了した。

24

プログラムを作る（9/9）

(1) 「こんにちは︕」でなく別の言葉を試そう。

25

(2)「�」をクリックする。

コンピュータに保存する（1/2）

(1)「ファイル」－「コンピュータに保存する」をクリックする。

26

コンピュータに保存する（2/2）27

ト 」がダウンロードされる。(3) sb3ファイル「Scratchのプロジェクト.sb3」がダウンロードされる。

コンピュータから読み込む（1/2）

み込む」をクリックする。(1)「ファイル」－「コンピュータから読み込む」をクリックする。

28

コンピュータから読み込む（2/2） Sb3ファイルが保存されているフォルダに移動する。開きたいsb3ファイルを選択する。

開きたいファイルを選択する。(2)開きたいファイルを選択する。

する。(3)開くをクリックする。

29

Scratchの画面構成

ステージステージスクリプトエリアスクリプトエリア

ブロックパレットブロックパレット

スプライトリストスプライトリスト

30

スプライト「スプライト」

＝「着せ替え自由のキャラクター画像」

31

ステージ「ステージ」

＝「スプライトが動き回る舞台」スプライトを動かす。スプライトの⾒かけを変化する。

32

ステージと座標ステージの大きさは横幅480画素、縦幅360画素

�240�240�240�240

�180�180

�180�180

X座標

Y座標

480画素

360画素�0, 0

�240, 0

�240, 180

�240, �180

�0, 180

��240, �180

��240, 180

��240, 0

�0, �180

33

「画素」＝「歩」

スクリプト「スクリプト」

＝「俳優『スプライト』のための台本」

34

ブロック「ブロック」＝「命令」

35

ブロック 9グループに分かれている。グループ名 説明 ブロック数動き スプライトを右や左に動かしたり、回転させたりするブロックのグループ 18

⾒た目 スプライトにセリフを言わせたり、表示したり隠したりするブロックのグループ 20

音 音の種類を変えたり、音の大きさを変えたりするブロックのグループ 9

イベント 何かのできごとをきっかけにプログラムを動かすブロックのグループ 8

制御 どのブロックを実⾏するかを思い通りにするためのブロックのグループ 11

調べる スプライトやキーボードの状態などを調べるブロックのグループ 18

演算 計算をするためのブロックのグループ 18

変数 独自に作成できる変数ブロックのグループ 5

作ったブロック 独自に作ったブロックのグループ －

合計 107

36

二つのスプライトを使ったプログラム37

ステージのモードステージは下記4通りの⾒せ⽅がある。

小さいステージスクリプトエリアが広く使えるため、プログラム開発に適している。

プレゼンテーションモードステージを画面いっぱいに表示して⾒せたい時に便利である。

ターボモードスクリプトを通常よりも⾼速で処理する。画面の更新速度が早くなるため、アニメーションなどグラフィカルなプロジェクトには不向きである。

数式処理が多いプロジェクトには適している。オンラインのターボモードとオフラインエディタのターボモードは速度が異なる。

38

標準レイアウト

標準のスクリプトエリア

少し大きいステージ

39

小さいステージ

小さいステージ

広いスクリプトエリア

40

プレゼンテーションモード41

サンプルプログラム

じゃんけんだるまさんがころんだめざせキングオブりんご拾い︕インベーダーウォーズクリックゲームスロットハードルピアノフルーツキャッチペイントリンゴへGO

図形描画工事ちゅう︕時計格闘猫ギャラクシー神経衰弱計算問題自動生成迷路魔王の逃走劇魚の冒険

九工大生が作成したプログラム科目名︓プログラム設計

九州工業大学情報工学部システム創成情報工学科2年生2015年度〜2018年度

2018年度については現在集計中

普段はJavaを用いるが、レポート課題としてScratchの作品を提出

学生間の投票で上位5作品を紹介

43

ScratchのWebサイトで検索

「システム創成情報工学科」で検索

44

ScratchのWebサイトで検索45

プログラミングの手順問題発生 問題解決のアイデア

仕様決定

設計

コーディング

デバッグ

ドキュメント作成

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

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

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

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

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

何をする︖どんなプログラムを作るか考えをまとめよう。

1. 紙やホワイトボードにアイデアを列挙する。どんな種類（ゲーム、アニメーション）︖スプライト（キャラクタ）は︖背景は︖マウス操作は︖キー操作は︖

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

3. プログラムを作る4. テストする（動作を確認する） → 直す

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

作成した作品について皆さんが作成した作品（プログラム）を自宅で実⾏できるようにします。3月20日（水）18時までに公開します。

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

インターネットの利用環境が必要です。

HPより作成したプログラム（sb3ファイル）をダウンロードして下さい。

問題があればメールでお問い合わせ下さい。scratch@slab.ces.kyutech.ac.jp

プログラミングの手順どんなプログラムを作るか考えをまとめる。

1. 紙やホワイトボードにアイデアを列挙する。どんな種類（ゲーム、アニメーション）︖スプライト（キャラクタ）は︖、背景は︖、マウス操作は︖、キー操作は︖

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

3. プログラムを作る4. テストする（動作を確認する） → 直す

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

49

目的を決める（要件定義）

機能検討（設計）

プログラム作成 テスト・修正

Scratchからステップアップ Scratchでプログラミングを体験しよう。

Scratchで、作る楽しさ、考える楽しさを知ろう。

もっと⾼度なプログラミングを学ぼう。異なるプログラミング言語（Java、C/C++など）プログラミング技術（アルゴリズムやデータ構造）

学習サイトCODE https://code.org/

アルゴロジック https://home.jeita.or.jp/is/highschool/algo/

paiza http://paiza.jp

50

プログラミング言語の種類51

プログラミング言語

機械語 アセンブラ言語 ⾼水準言語

インタプリタ言語 コンパイラ言語

BASICPython Ruby C Java

PHP

Perl C++

JavaScript

参考情報アルゴロジック

プログラミングの基本となるアルゴリズムをゲーム感覚で習得するための課題解決型ソフトウェア

http://home.jeita.or.jp/is/highschool/algo/index.html

52

参考情報 Code.org

2013年1月にハディとアリ・パルトヴィ兄弟が設⽴

https://code.org/

53

Scratchからステップアップ Scratchでプログラミングを体験しよう。

Scratchで、作る楽しさ、考える楽しさを知ろう。

もっと⾼度なプログラミングを学ぼう。異なるプログラミング言語（Java、C/C++など）プログラミング技術（アルゴリズムやデータ構造）

情報系の大学（九工大）に入学しよう。

最後に自宅でもプログラミングに取り組んで下さい。

Scratchはプログラミング言語の一つです。より⾼度なプログラミングを学びたい人は相談して下さい。九工大入学を目指そう︕算数（数学）、理科、語学（国語、英語）なども勉強しよう︕