の操单説明 1. scratchsaitoh/scratch20151212...1 scratch の操单説明...

17
1 Scratchの操説明 9回九大わくわく科学室 一番はじめのプログラミング 201512121. Scratchをそう︕︕ パソコンをいます。 1. Scratchウェブサイトにアクセスする。 索サイト(Googleなど)から 接アクセス https://scratch.mit.edu/ 2. プログラムをる。 3. プログラムに前をつける。 4. 手のコンピュータにダウンロード 5. 手のコンピュータからアップロード 3 ウェブブラウザ ウェブブラウザを起動して、Scratchを⽤する。 ウェブブラウザは下のようなアイコンをクリックして 起動できる。 Internet Explorer Chrome Firefox Safari 4 パソコン起動時の 5 ブラウザ(Chrome)の起動 6

Upload: others

Post on 23-Jan-2021

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

1

Scratchの操作説明

第9回九工大わくわく科学教室一番はじめのプログラミング

2015年12月12日

③1. Scratchを試そう︕︕

パソコンを使います。

内容1. Scratch公式ウェブサイトにアクセスする。

�検索サイト(Googleなど)から�直接アクセス

�https://scratch.mit.edu/

2. プログラムを作る。3. プログラムに名前をつける。4. 手元のコンピュータにダウンロード5. 手元のコンピュータからアップロード

3

ウェブブラウザ�ウェブブラウザを起動して、Scratchを利⽤する。

�ウェブブラウザは下記のようなアイコンをクリックして起動できる。

Internet Explorer Chrome Firefox Safari

4

パソコン起動時の画面5

ブラウザ(Chrome)の起動6

Page 2: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

2

ブラウザ(Chrome)の起動画面7

Scratch公式ウェブサイトにアクセス(1/3)

Googleなどの検索画面

8

Scratch公式ウェブサイトにアクセス(2/3)

「scratch」を⼊⼒する。

9

Scratch公式ウェブサイトにアクセス(3/3)

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

10

Scratch公式ウェブサイト

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

11

プログラムを作ろう(1/8)

「×」をクリックする。

12

Page 3: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

3

プログラムを作ろう(2/8)13

プログラムを作ろう(3/8)(1)「イベント」をクリックする。

(2)「�がクリックされたとき」をドラッグして・・・

14

プログラムを作ろう(4/8)

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

15

プログラムを作ろう(5/8)(4)「⾒た目」をクリックする。

(5)「Hello!と言う」をドラッグして、「�がクリックされたとき」の下につなげる。

16

プログラムを作ろう(6/8)

プログラム完成

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

17

プログラムを作ろう(7/8)

「Hello!」が表示された。

18

Page 4: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

4

プログラムを作ろう(8/8)

(7)「●」をクリックする。

「Hello!」が消える。

プログラムが終了した。

19

プログラムに名前をつけよう(1/2)

「Untitled」を消して、プログラムの名前を⼊⼒する。

20

プログラムに名前をつけよう(2/2)

例えば「Hello!と言うプログラム」と⼊⼒する。

21 プロジェクトのアップロードとダウンロード

� Scratchでは、�パソコンに保存されているプロジェクトを読み込む(アップロード)

�作成したプロジェクトを利⽤しているパソコンに保存(ダウンロード)

できる。

�ただし、ブラウザをシークレットモードで利⽤している場合はダウンロードできない。

22

プロジェクトのアップロードとダウンロード

�アップロードとダウンロードについてブラウザ アップロード ダウンロード

通常モード(非シークレットモード) ○ ○

シークレットモード ○ ×

23 ウェブブラウザ・オフラインエディターサインイン有・無によるメニューの違い

ウェブブラウザ利⽤サインイン無し

ウェブブラウザ利⽤サインイン有り

Scratchのユーザ登録をすると、異なるメニューになる。

オフラインエディター

オフラインエディターはウェブブラウザと、異なるメニューになる。

24

Page 5: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

5

手元のコンピュータにダウンロード(1/4)

�ウェブブラウザ利⽤の場合は、非シークレットモードでダウンロードする。

�オフラインエディター利⽤の場合は、「手元のコンピュータにダウンロード」でなく、「名前をつけて保存」を選ぶ。

25

手元のコンピュータにダウンロード(2/4)

(1)「ファイル」-「手元のコンピュータにダウンロード」をクリックする。

26

手元のコンピュータにダウンロード(3/4)

�ファイルの保存場所を適切に選ぶ。�ファイル名は、デフォルトでは「プロジェクト名.sb2」となるが変更しても良い。

(2)保存場所とファイル名を確認し、必要に応じて変更する。 (3)保存をクリックする。

27

手元のコンピュータにダウンロード(4/4)

�プロジェクトがファイルとして保存される。

28

Scratch(ブラウザ)の終了(1/2)

●をクリックする。

29

Scratch(ブラウザ)の終了(2/2)30

Page 6: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

6

もう一度Scratchを起動しよう

できるかな︖

Scratchの起動

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

32

手元のコンピュータからアップロード(1/7)

�オフラインエディター利⽤の場合は、「手元のコンピュータからアップロード」でなく、「開く」を選ぶ。

33

手元のコンピュータからアップロード(2/7)

(1)「ファイル」-「手元のコンピュータからダウンロード」をクリックする。

34

手元のコンピュータからアップロード(3/7)

� sb2ファイルが保存されているフォルダに移動する。�開きたいsb2ファイルを選択する。

(2)開きたいファイルを選択する。 (3)開くをクリックする。

35

手元のコンピュータからアップロード(4/7)

(4)現在のプロジェクトを置き換えるか質問される。置き換える場合は「OK」をクリックする。

36

Page 7: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

7

手元のコンピュータからアップロード(5/7)

プロジェクトが読み込まれる。

37

手元のコンピュータからアップロード(6/7)

「�」をクリックする。

38

手元のコンピュータからアップロード(7/7)

「Hello!」が表示された。さっきと同じ動作になった︖

39

2. Scratchを学ぼう

パソコンは使いません。

Scratchの画面構成

ステージ

スプライトリスト

スクリプトエリア

ブロックパレット

41

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

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

42

Page 8: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

8

ステージ�「ステージ」

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

43

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

�240�240

�180

�180

X座標

Y座標

480画素

360画素�0, 0

�240, 0

�240, 180

�240,�180

�0, 180

��240,�180

��240, 180

��240, 0

�0, �180

44

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

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

45

ブロック�「ブロック」=「命令」

46

ブロック� 10グループに分かれている。グループ名 説明 ブロック数

動き スプライトを右や左に動かしたり、回転させたりするブロックのグループ 17

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

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

ペン ステージに何かを書いたりするブロックのグループ 11

データ 「変数」を作ったり、それに関係する操作をするブロックのグループ -

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

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

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

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

その他 上記に当てはまらないブロックのグループ -

合計 112

47

動き(1/2)48

Page 9: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

9

動き(2/2)49

方向の種類50

⾒た目(1/2)51

⾒た目(2/2)52

音(1/2)53

音(2/2)54

Page 10: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

10

ドラムの種類� 18種が⽤意されている。

(1) スネアドラム (10)ウッドブロック(2) バスドラム (11) カウベル(3) サイドスティック (12) 三角形(4) クラッシュシンバル (13) ボンゴ(5) オープンハイハット (14) コンガ(6) 閉じたハイハット (15) カバサ(7) タンバリン (16)ギロ(8) 拍手 (17)ビブラスラップ(9) クラーベ (18) オープンクイーカ

55

ペン56

イベント57

キーの種類�キーボードにあるキーを利⽤できる。

スペース上向き矢印下向き矢印右向き矢印左向き矢印any

a, b, … , z

0, 1, … , 9

58

制御59

調べる(1/2)60

Page 11: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

11

調べる(2/2)61

演算(1/2)62

演算(2/2)63

3. ブロックの操作

パソコンを使います。

ブロックの操作�ブロックをつなげる。�ブロックをはなす。�ブロックを移動する。�ブロックに⼊⼒する。�ブロックにブロックをはめ込む。�ブロックを複製(コピー)する。�ブロックを削除する。�ブロックのドロップダウンから選ぶ。�スプライトの実⾏と中⽌方法。

65

ブロックをつなげる(1/3)�ブロックの凹凸に注意する。�パズルみたいなもの

Hat block

Stack block Boolean blockC Block Reporter block

Cap block

66

Page 12: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

12

ブロックをつなげる(3/3)�ブロックの凹凸に注意する。�パズルみたいなもの

つなげられる。 つなげられない。

67

ブロックをはなす�はなしたい下側のブロックをドラッグアンドドロップする。

下側にドラッグする。ブロックがはなれる。

下側にドラッグする。 ブロックがはなれる。

68

ブロックを移動する�一番上のブロックをドラッグする。

�ブロックにブロックがはめ込まれた部分をドラッグすると、はめ込まれた部分だけが移動する(はなされる)。

一番上のブロックをクリックする。

ブロックの影ができる。

ドラッグして移動する。

69

ブロックに⼊⼒する�ブロックの白い部分をクリックすると、キーボードで⽂字や数字を⼊⼒できる。

白い部分をクリックする。 ⿊く反転する。 ⽂字や数字を⼊⼒

する。

70

ブロックにブロックをはめ込む(1/3)�ブロックのすきまにブロックをはめ込む。

「C」型のすきま ブロックを近づける。

ブロックのすきまにブロックをはめ込む。

71

ブロックにブロックをはめ込む(2/3)�ブロックのくぼみにブロックをはめ込む。

ブロックのくぼみ ブロックを近づける。

ブロックのくぼみにブロックをはめ込む。

72

Page 13: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

13

ブロックにブロックをはめ込む(3/3)

�ブロックのくぼみにブロックをはめ込む。

ブロックの白い部分

ブロックを近づける。

ブロックの白い部分にブロックをはめ込む。

73

ブロックを複製(コピー)する�作成したブロックと同じブロックを複製できる。�コピーしたいブロックを右クリックして「複製」を選ぶ。

�コピーされたブロックがマウスカーソルにくっついているため、置きたい場所で左クリックする。

ブロックを右クリックする。

メニューから「複製」を選ぶ。

複製されたブロック

74

ブロックを削除する�不要なブロックを削除する。�ブロックを右クリックして「削除」を選ぶ。

削除したいブロックを右クリックする。

メニューから「削除」を選ぶ。

ブロックが削除される。

75

ブロックのドロップダウンから選ぶ�ブロックには、いくつかの項目から内容を選べるものがある。

�右側の▼マークをクリックして、表示された中から使うものを選ぶ。

▼マークをクリックする。

メニューから選ぶ。

76

スプライトの実⾏と中⽌方法�ブロックをクリックすると実⾏される。もう一度ブロックをクリックすると実⾏が中⽌される。

� をクリックすると実⾏される。� をクリックすると実⾏が中⽌される。

ブロックをクリックする。 実⾏される。

クリックして実⾏

クリックして中⽌

77

ブロックの整理�スクリプトエリアのブロック以外の場所で、右クリックしてメニューから「clean up」を選択する。

�自動的にブロックが整理される。

ブロック以外の場所で右クリックする。

メニューから「clean up」を選ぶ。

ブロックが整理される。

78

Page 14: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

14

4.アニメーションにチャレンジ

パソコンを使います。

アニメーションにチャレンジ�スプライトを動かす。�スプライトを追加する。�コスチュームを変更する。

80

スプライトを動かそう(1/3)�○歩動かす

(1)「イベント」内のブロック

(2)「動き」内のブロック

(3) ”10”を⼊⼒する。

(4) 「フラッグマーク」をクリックする。

81

スプライトを動かそう(2/3)�○歩動かす 何か変わった︖

82

スプライトを動かそう(3/3)�○歩動かす

スプライトが10歩右に移動している。

83

1歩とは︖�(10歩)=(10画素)

�スプライト(画像)は画素(ピクセル、ドット)の集まり。

�「1歩動かす」は「1画素移動する」こと。

1画素

13×13画素

84

Page 15: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

15

スプライトを追加しよう(1/8)

キャラクターをクリックする。

Sprite1のスクリプト

85

スプライトを追加しよう(2/8)

下側にスクロールする。

86

スプライトを追加しよう(3/8)

「Gobo」をクリックする。

87

スプライトを追加しよう(4/8)

Goboが追加された。

88

スプライトを追加しよう(5/8)

Goboのスクリプト

Goboのスクリプトを作成する。

89

スプライトを追加しよう(6/8)

実⾏しよう︕︕

90

Page 16: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

16

スプライトを追加しよう(7/8)

何か変わった︖

91

スプライトを追加しよう(8/8)�スプライト毎に異なるスクリプトを作成できる。

92

コスチュームを変更しよう(1/4)

「コスチューム」をクリックする。

93

コスチューム(Cat)

Catは二つのコスチュームが⽤意されている。

94

コスチューム(Cat)

「2」をクリックすると

絵が変わる。

95

コスチューム(Gobo)

Goboは三つのコスチュームが⽤意されている。

96

Page 17: の操单説明 1. Scratchsaitoh/scratch20151212...1 Scratch の操单説明 匌9回九卋大わくわく科学卝室 一番はじめのプログラミング 2015 年12 月12 日 ③

17

コスチュームを変更しよう(2/4)�スクリプトでコスチュームを変更する。

ブロック「次のコスチュームにする」を挿⼊する。

97

コスチュームを変更しよう(3/4)

実⾏しよう︕︕

98

コスチュームを変更しよう(4/4)

どうなった︖

99

注意事項�休憩するときは、パソコンのフタを閉じて下さい。

100