高大連携授業『Scratchによるゲームプログラミング体験』

1. 高大連携授業
『Scratchによる
ゲームプログラミング体験（1）』
ゲーム・アプリケーション研究室
河野義広
東京情報大学 高大連携授業 2019.7.30

2. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
自己紹介
 名前：河野 義広（かわの よしひろ）
 所属：ゲーム・アプリケーション研究室
 専門：情報工学、社会情報学
 社会的課題をシステムで解決する！
 実生活すべてが研究対象
 ソーシャルメディアを「いかに人生に活かすか！」
 研究テーマ：サイバーワールド
 主体的な学修を促す子ども向け学修支援システム
 地域活動を通じた学生の主体性開発
 不正サイト検知のための自律分散協調型Webクローラ
 ポジティブ心理学に基づく目標達成支援SNS 2

3. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
目次
 プログラミングってなんだろう？
 プログラミングの基本要素
 プログラミングの基礎知識
 Scratchによるゲーム体験
 ゲームの観察&改造
 まとめ
3

4. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
使っているアプリは？
 普段使っているアプリはいくつある？
4

5. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
プログラミングってなんだろう？
1. プログラムと聞いて、思い付くのは？
 ゲーム、アプリ
 センサ、ロボット、AI
 インターネット、Webサイト、SNS
 買い物、チケット予約、ATM、自動改札、Suica、自販機
 家電、車、etc…
2. プログラミングができると何が便利だろうか？
 面倒な仕事をプログラムに任せて楽ができる
 仕事を自動化して人間は別の仕事ができるようになる
 たくさんのデータを集めて生活を便利にできる
 物事の仕組みが分かるようになる 5

6. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
プログラムとは？
1. プログラム（Program）とは？
2. 身近にプログラムで動いているもの？
 電子レンジ、炊飯器、テレビ、ラジオ、ロボット掃除機
 車、カーナビ、Suica、電車、改札、ATM、自販機
 コンビニのレジ、病院の受付・会計・カルテ
 買い物、チケット予約、アプリ
 Google、Facebook、Twitter
6
gram（書かれたもの）pro（あらかじめ）
program（予定表）

7. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
プログラムの動作イメージ
7
 猫が四角形の軌跡を移動しながら掛け声

8. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
プログラミングでできること
8

9. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
 課題解決までの繰り返しを経験学習
プログラミングで身に付く主体性
9ディスカッション（企画）
プロトタイプ（試作）
プレゼンテーション（発表）
主体性を
身に付ける

10. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
主体性とは？
 主体性：自分の意志で考えて行動しようとする姿勢
 × 人に言われてからやる ⇒ 反応的
 △ 自分から進んでやる ⇒ 自主的
 ○ 何をするかは自分で決める⇒ 主体的
10
『挨拶をしさない』
と言われてやる
自ら進んで挨拶をする
教室の雰囲気を明るく
したいと思い花瓶を飾る

11. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
プログラミングの基本要素
 3大要素
 逐次処理：書かれた順に処理が進む
 条件分岐：条件により処理が分かれる
 繰り返し：同じ処理を何度も繰り返す（ループ）
※ 処理の流れを書いたもの＝ソースコード（単にコード）
 格言の紹介
 プログラムは思ったとおりには動かない
書いたとおりに動くのだ
11

12. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
逐次処理
 書かれた順に処理が進む
12
Scratchの場合 プログラムの場合

13. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
逐次処理（Scratchの場合）
13

14. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
条件分岐
 条件により処理が分かれる
14
Scratchの場合 プログラムの場合

15. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
条件分岐（Scratchの場合）
15

16. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
繰り返し
 同じ処理を何度も繰り返す
16
Scratchの場合 プログラムの場合

17. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
繰り返し（Scratchの場合）
17

18. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
プログラミングの基礎知識
 基本的な用語
 変数：データを覚えておく入れ物
 配列：複数のデータをまとめて覚えておく入れ物リスト
 関数：特定の処理を定義したもの
 数学との関連
 変数は方程式や関数における変量（xとかyとか）と同じ
 配列は変数をリスト化したもの（x1, x2, x3, …, xnとか）
 関数は数学の関数と同じ
 数学の関数：ある変数を決めたら別の値が決まる式のこと
 x を決めたら y が決まる ※ y = 2x + 5 とか y = 3/x とか
 プログラムの関数：入力を与えたら出力が決まる
18

19. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
配列の基本
 配列の仕組み
 配列も変数の一種
 同じ型のデータがメモリ上に隙間なく並べられたもの
 配列変数を a とすると、a[0], a[1], …, a[9] で参照できる
 [ ] の中の数字を添え字とよび、要素番号を示す
 添字は 0 から始まり、 要素数-1 番目まである
19

20. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
関数の基本
 1次関数 y = 2x + 3 の定義
 入力：x の値
 出力：y = 2x + 3 の式の値（return文の箇所）
20

21. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
プログラミング体験
簡単なプログラムを
作ってみよう
21

22. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
Paiza.ioでプログラム体験
 Webブラウザを開いて、「paiza.io」で検索
22

23. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
Pythonでコード作成
 メニューの「新規コード」→言語「Python3」を選択
23

24. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
Pythonで自動作文を行うプログラム
 下記のコードを入力してみよう：20分
 主語（darega）, 述語（shitaka）, 目的語（naniwo）で作文
 主語、述語、目的語のリストには好きな言葉を入れる
 10回の繰り返し処理で自動作文
 全角と半角に注意する ※英数字・記号は半角で書く
24

25. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
プログラムを改良するには？
 自動作文プログラムの問題点
 主語、述語、目的語の組み合わせがランダム
 正しい文のときもあれば、変な文のときもある
 改良方法
 述語と目的語の組み合わせが正しい文か判別表を作る
 組み合わせが正しい、変、よい文か決める ※言葉は自由
25
食べる 買う 乗る 叫ぶ
ハンバーグ いいね！ いいね！ ダメダメ すごい！！
自転車 ダメダメ すごい！！ いいね！ いいね！
どら焼き いいね！ いいね！ ダメダメ いいね！
表．述語と目的語の組み合わせ判別表

26. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
自動作文プログラムの改良
 自動作文の結果（よい文か悪い文か）を判定
 さっき作った判別表を kotae のリストに入れる
 組み合わせ結果の言葉を imi のリストに入れる
26

27. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
Scratch ゲーム体験
Scratchで作られた
ゲームで遊んでみよう
27

28. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
ゲーム体験の流れ
 ゲームで遊ぶ
 次の4つのゲームを遊んで、どうやって作ったか考えよう
 制限時間：10分
 ゲームの中身を見る
 4つのゲームの中から1つを選んで、中身を見てみよう
 制限時間：10分
 ゲームを改造する
 オレンジアタックを改造してみよう
 オレンジやねこのスピード変更、オレンジを増やすなど
 制限時間：10分 28

29. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
サッカーPK戦
29
https://scratch.mit.edu/projects/118717636/

30. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
オレンジアタック
30
https://scratch.mit.edu/projects/237870953/

31. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
スイカ崩し
31
https://scratch.mit.edu/projects/189444894/

32. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
迷路脱出ゲーム
32
https://scratch.mit.edu/projects/118717675/

33. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
ゲームで遊ぶ
 流れ：10分
 4つのゲームで遊んでみる
 面白かったゲームの中身を覗いてみる
 着眼点のヒント
 登場キャラクタは何か
 それぞれの動きのトリガー（きっかけ）は何か
 ゲームのルール（開始・終了条件など）は何か
33

34. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
ゲームの中身を見る
 流れ：10分
 4つの中で面白かったゲームを1つ選ぶ
 画面右上の「中を見る」ボタンを押して中身を見る
 着眼点のヒント
 キャラクタ（スプライト）は何があるか
 各スプライトにスクリプトはいくつ書かれているか
 ゲームのルールはどう定義されているか
 それらはどうやって書かれているか
34

35. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
ゲームを改造する
 流れ：10分
 『オレンジアタック』を選ぶ
 画面右上の「中を見る」ボタンを押して中身を見る
 スピードを変更したり、オレンジを増やしたりしよう
 着眼点のヒント
 どの部分を変更すればスピードを変更できるか
 スプライトを増やしてみる（スクリプトもコピーする）
 オレンジをクローン（複製）して、一度にたくさん落下
35

36. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
お手本：オレンジアタック改
36
https://scratch.mit.edu/projects/238046491/

37. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
まとめ
 やったこと
 プログラムができると何が便利か
 Scratchによるゲーム体験
 ゲームの改造
 皆さんに期待すること
 Scratchで自作ゲームを作ってみよう
 Scratch以外のプログラミングを経験してみよう
 プログラミングのイベントに参加してみよう
37

38. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES
終わり
 ご質問・コメントなどありましたらお願いします
38
東京情報大学 総合情報学部 総合情報学科
ゲーム・アプリケーション研究室
河野 義広
Tel：043-236-1149
E-mail：ykawano@rsch.tuis.ac.jp
ご不明な点がありましたら以下にお問い合わせください