情報メディア⼯房 2016 Part 1 Scratch...

22
情報メディア⼯房 2016 Part 1 Scratch ⼊⾨

Transcript of 情報メディア⼯房 2016 Part 1 Scratch...

Page 1: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

情報メディア⼯房 2016Part1Scratch⼊⾨

Page 2: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

今⽇のテーマ:未来の部屋

•部屋にPCとKinectがあったら、使いたい「作品(プロジェクト、プログラム)」を作ります。

•主な予定1. Scratch ⼊⾨2. ScratchX ⼊⾨3. 昼休み4. パネルディスカッション5. Kinect ⼊⾨6. 作品作り、発表会

2

Page 3: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

Scratchとは• 教育⽤プログラミング開発環境。

• アメリカのマサチューセッツ⼯科⼤学で2007年から開発

• 特⻑:• ブロックを組み合わせてプログラムを作る。

• 画像や⾳を簡単に使える。

3

Page 4: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

Scratchを使う通常のサイト:http://scratch.mit.edu

4

Page 5: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

本⽇使うサイト:http://scrachx.org

5

Page 6: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

http://scratchx.org/#scratch

6

Page 7: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

⽇本語で表⽰する。

7

Page 8: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

8

舞台 登場⼈物ごとの脚本

登場⼈物リスト

Page 9: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

Scratchの⽤語•ステージ: 舞台

•スプライト:登場⼈物• 登場⼈物、キャラクタに相当• モノやテキストでもよい。• もとは、妖精や何か動くモノ

•スクリプト:脚本• 登場⼈物別に脚本を書く。• セリフだけでなく、動作や判断などの指⽰も書く。• 情報科学の⽤語では、「プログラム」に相当。• 指⽰をブロックで⾏うところがScratchの特徴の⼀つ。

9

Page 10: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

スプライトをライブラリから追加。

10

Page 11: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

ブロック パレット

11

Page 12: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

パレットの種類• 動き• ⾒た⽬• ⾳• ペン• データ• イベント• 制御• 調べる• 演算• その他

12

Page 13: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

コスチュームの変更

13

Page 14: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

14

Page 15: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

2個⽬のスプライトの追加

15

Page 16: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

16

Page 17: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

17

Page 18: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

18

Page 19: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

背景の追加

19

Page 20: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

20

Page 21: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

プロジェクトの保存と復元

21

プロジェクトをファイルに保存

ファイルからプロジェクトを読み込んで復元する。

ブラウザのホームボタンや⽮印ボタンを押すとプロジェクトが失われます。時々ファイルに保存しましょう。

Page 22: 情報メディア⼯房 2016 Part 1 Scratch ⼊⾨csforall.jp/wordpress/wp-content/uploads/2018/01/... · 2018-01-26 · Scratch とは •教育⽤プログラ ミング開発環境。

実習1:試してみよう。• オリジナルのスプライトを作る。

• AnnaやBallを変更してみる。• スプライトのライブラリから追加する。

• 背景を追加する。• 背景のライブラリから選ぶ。• 何かがおきたら、背景が変更されるスクリプトを作ってみる。

• できたプロジェクト(スプライトの集まり)をファイルに保存し、復元してみる。

• (参考)サンプルは、AnnaBall.sb2という名前のファイルにある。

22