<style>
/* basic design */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6,
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {
font-family: 'Meiryo UI', 'Source Sans Pro', Helvetica, sans-serif, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic';
text-align: left;
line-height: 1.8;
letter-spacing: normal;
text-shadow: none;
word-wrap: break-word;
color: #444;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {font-weight: bold;}
.reveal h1, .reveal h2, .reveal h3 {color: #2980b9;}
.reveal th {background: #DDD;}
.reveal section img {background:none; border:none; box-shadow:none; max-width: 95%; max-height: 95%;}
.reveal blockquote {width: 90%; padding: 0.5vw 3.0vw;}
.reveal table {margin: 1.0vw auto;}
.reveal code {line-height: 1.2;}
.reveal p, .reveal li {padding: 0vw; margin: 0vw;}
.reveal .box {margin: -0.5vw 1.5vw 2.0vw -1.5vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; background: #EEE; border-radius: 1.5vw;}
/* table design */
.reveal table {background: #f5f5f5;}
.reveal th {background: #444; color: #fff;}
.reveal td {position: relative; transition: all 300ms;}
.reveal tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa;}
.reveal tbody:hover tr:hover td {color: #444; text-shadow: 0 1px 0 #fff;}
/* blockquote design */
.reveal blockquote {
width: 90%;
padding: 0.5vw 0 0.5vw 6.0vw;
font-style: italic;
background: #f5f5f5;
}
.reveal blockquote:before{
position: absolute;
top: 0.1vw;
left: 1vw;
content: "\f10d";
font-family: FontAwesome;
color: #2980b9;
font-size: 3.0vw;
}
/* font size */
.reveal h1 {font-size: 5.0vw;}
.reveal h2 {font-size: 4.0vw;}
.reveal h3 {font-size: 2.8vw;}
.reveal h4 {font-size: 2.6vw;}
.reveal h5 {font-size: 2.4vw;}
.reveal h6 {font-size: 2.2vw;}
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;}
.reveal code {font-size: 1.6vw;}
/* new color */
.red {color: #EE6557;}
.blue {color: #16A6B6;}
/* split slide */
#right {left: -18.33%; text-align: left; float: left; width: 50%; z-index: -10;}
#left {left: 31.25%; text-align: left; float: left; width: 50%; z-index: -10;}
</style>
<style>
/* specific design */
.reveal h1 {
margin: 0% -100%;
padding: 2% 100% 4% 100%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 200% 200%;
animation: Gradient 60s ease infinite;
}
@keyframes Gradient {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}
.reveal h2 {
text-align: center;
margin: -5% -50% 2% -50%;
padding: 4% 10% 1% 10%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>
<!-- --------------------------------------------------------------------------------------- -->
#### 香川短期大学 プログラミング演習（2020）第３回・第４回
# Scratchを利用したプログラミング
<br>
<br>
#### 2020.10.06
### 米谷雄介
---
## 授業方式（1/2）
***<span class="blue">知識をインプット</span>*** → ***<span class="blue">実践としてアウトプット</span>*** → ***<span class="blue">振り返り</span>*** を繰り返しながら、<br> ***<span class="red">徐々に物事の理解を深めていく過程を経験</span>*** することをねらいとしています。
- 授業は、***前回の振り返りから再開*** します。（皆さんの作品を紹介）
- インプットとしては、教科書にある演習を通じて***プログラミングの作法や思考法***を習得します。
- アウトプットとして、これまで学んだことを踏まえた作品づくりに取り組みます。
-- こちらから、***作品のテーマ*** を皆さんに提示します。（テーマは毎回変更）
-- テーマに沿った ***自分なりの目的*** を決めます。（どんな作品／ゲーム／教材を作る？）
-- プログラミングを始める前に、必要に応じて、***絵コンテ*** を描きます。（デザイン）
-- スクラッチの開発画面を使って、***自由に思いのままに作って*** みます。（自己表現）
-- レポートは、第１回目におこなったのと同様に、作品のURLと ***作品の自己評価*** をアンケート形式で提出します。
---
## 授業方式（2/2）
休憩時間の取り方
- ***通常の授業*** は、90分実行 + 10分休憩 + 90分実行
- ***ポモドーロ・テクニック***： 25分実行 + 5分休憩 を繰り返すことで生産性向上
- ***プログラミング演習*** では、30分実行 + 5分休憩 + 30分実行 + 5分休憩 + 30分実行 + 5分休憩 + 30分実行
> 詳しくは次のサイトを参照：**[ポモドーロ・テクニック](http://work-switch.persol-pt.co.jp/pomodoro_tecnique/)**
---
## 今回のやること一覧
<div class="box">
1. 前回の振り返り（皆さんが提出してくれた作品の鑑賞会）
2. 指定教科書 ***<span class="red">p.10〜p.17</span>***
***プログラム、プログラミング言語、開発画面*** など用語を理解する。
3. 指定教科書 ***<span class="red">p.18〜p.27</span>***
***スクラッチの開発画面の構成*** を理解し ***基本操作を体得*** する。
4. ***本日のテーマ*** に沿った ***絵コンテ*** の作成
配布用紙に筆記用具で記入する。
5. ***プログラム作品の製作***
絵コンテに従って、スクラッチで製作する。
6. ***プログラム作品のレポート***
第１回と同様にアンケートに回答する
</div>
---
## 思い付き
### ハリネズミのおやつタイム
https://scratch.mit.edu/projects/430462766
- 内容：ハリネズミがおやつを食べに行く様子
- 成長：文字を入力することができた
- 改善：もう少し動きをつけたかった
<iframe src="https://scratch.mit.edu/projects/430462766/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 水族館に行った時の出来事
### 水族館の仲間たち
https://scratch.mit.edu/projects/430462756
- 内容：夏休みに新しくできた四国水族館に行ったときに見た魚たちを表現した。
- 成長：実際いた魚のイラストや魚っぽい動きが表現できたと思う。
- 改善：くらげをしなやかに上に動かすことができなかったところ。
<iframe src="https://scratch.mit.edu/projects/430462756/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 宇宙猫
### ただようただのねこ
https://scratch.mit.edu/projects/430462740
- 内容：猫がただただ宇宙で流されている作品
- 成長：猫のだるそうな表情
- 改善：円を中心に回転させたかった
<iframe src="https://scratch.mit.edu/projects/430462740/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 合コンに行った時の女の本音
### 女の本音
https://scratch.mit.edu/projects/430463079
- 内容：初回だったのでどう行動させたらいいのかわからなかったので、いとこに聞いた合コンに行った時に思っていることを参考に作りました
- 成長：表情を自然につくれたところとゆっくり歩かせられたところ
- 改善：回答の後に数秒黙らせたかったのですができなくて悔しいです
<iframe src="https://scratch.mit.edu/projects/430463079/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 友達と久しぶりに会った時のことをテーマにしました。
### 友達と会ったとき
https://scratch.mit.edu/projects/430463397
- 内容：今回は初めてだったので、簡単に友達と会ったときのことをアニメーションにしました。
- 成長：背景の切り替えをして、長い時間話し込んでいる様子を表現しました。
- 改善：動きがあまりなめらかではなかったので、次はうまくキャラクターを動かせるようにしたいです。
<iframe src="https://scratch.mit.edu/projects/430463397/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 人類の誕生
### 上陸
https://scratch.mit.edu/projects/430462760
- 内容：地球に人が来ました
- 成長：人物の配置
- 改善：やり方があまりよくわからなかったので、簡単なものしか作れなかった
<iframe src="https://scratch.mit.edu/projects/430462760/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 喋る猫
### 喋る猫
https://scratch.mit.edu/projects/430463152
- 内容：喋る猫を見たことないけど喋る猫を見た時の反応
- 成長：ないです
- 改善：会話がスムーズに出来なかった
<iframe src="https://scratch.mit.edu/projects/430463152/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 夢の中
### 宇宙
https://scratch.mit.edu/projects/430465393
- 内容：宇宙で移動しているところ
- 成長：どこにいくかわからないところ
- 改善：動きがはやすぎたところ
<iframe src="https://scratch.mit.edu/projects/430465393/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 日常
### よくある会話
https://scratch.mit.edu/projects/430462748
- 内容：すごく仲いいわけではないけど、まあ挨拶はするかな…ぐらいの友達と学校ですれ違った時の会話の一例を表しました。
- 成長：挨拶から入って一言二言話してすれ違う感じを表すことができたと思います。
- 改善：最初も歩くところから表現すればよかったかなと思いました。
<iframe src="https://scratch.mit.edu/projects/430462748/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 夢の中の出来事
### 宇宙旅行
https://scratch.mit.edu/projects/430465482
- 内容：宇宙でいるはずなのに、四角い透明な板で見たいなのものにはじかれて、どこにも行けないという夢を見たので再現してみました。
- 成長：はじかれてるところ
- 改善：いろんな方向にはじかれるという場面
<iframe src="https://scratch.mit.edu/projects/430465482/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 先週、１年ぶりに友達とバスケをした時のこと
### 試合中にシュートが入ったとき
https://scratch.mit.edu/projects/430462744
- 内容：久しぶりすぎて、なかなか入らなかったシュートが入ったとき
- 成長：秒間をかけて、フリースローのラインまで思っていたように移動することができた。
- 改善：シュートを打った後、次のポーズになるのが早かった。
<iframe src="https://scratch.mit.edu/projects/430462744/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 散歩
### 海の散歩
https://scratch.mit.edu/projects/430472440
- 内容：背景を変えながら散歩してみた
- 成長：背景を変えながら散歩ができた
- 改善：何を使ったらいいのかわからず１回の動作しかできなかった
<iframe src="https://scratch.mit.edu/projects/430472440/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 選ばれた文字たち
### SCRATCH
https://scratch.mit.edu/projects/430462725
- 内容：アルファベットを動かしてScratchの文字を作りました。
- 成長：文字をバラバラに動かして言葉を表すことができました。
- 改善：時間があれば、もう少し長い言葉や多くの単語を使って表現したかったです。
<iframe src="https://scratch.mit.edu/projects/430462725/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 私と飼い猫
### 日常
https://scratch.mit.edu/projects/430462733
- 内容：私が呼ぶとそばに来てくれる飼い猫を再現しました。
- 成長：初めは猫の姿を現さずに何秒か経った後で姿を現すところ。
- 改善：猫の歩くモーションがなかったので床をスライドしてくるように見えてしまうところ。
<iframe src="https://scratch.mit.edu/projects/430462733/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## ねこがりんごをさがしている。
### 背景を考えていたとき（木を描いているとき）に思い浮かびました。 ねこがりんごをさがしている
https://scratch.mit.edu/projects/430462742
- 内容："緑色の旗のボタンを押すと、にゃあ～と泣いて、マウスのポインタの位置の通りに動きます。赤色のリンゴと 薄赤いリンゴのところにポインタをうごかすと、これはりんご？と聞いてきます。「はい」と答えてください。"
- 成長："もしりんごに触れたとき、これはりんご？？と聞いてくるところです。
- 改善：マウスのポインタを利用して、動かすことです。" りんご以外に触れた時の行動が作れなかったです。（草むら・木・空に触れたときなど）
<iframe src="https://scratch.mit.edu/projects/430462742/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 逃走
### kaizyuu
https://scratch.mit.edu/projects/editor/
- 内容：逃げる
- 成長：動き
- 改善：オリジナリティ
<iframe src="https://scratch.mit.edu/projects/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 逃走
### 逃げる人間追うヘビ
https://scratch.mit.edu/projects/430462757/
- 内容：ヘビから逃げる人間 完了した動作を元に戻すのに苦労した。
- 成長：人間が反転するようにしたところ。
- 改善：歩く動作をつけたかったが、難しくてできなかった。
<iframe src="https://scratch.mit.edu/projects/430462757/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 普段の日々
### 日常
https://scratch.mit.edu/projects/430462785/
- 内容：かわいい猫と、サルに見立てた弟が騒がしい日常です。
- 成長：言葉を話さなくても、動きでうるさいのが伝わる。
- 改善：人間が動きがない。
<iframe src="https://scratch.mit.edu/projects/430462785/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## サッカー
### PK戦
https://scratch.mit.edu/projects/430462827
- 内容：PK戦をするところ
- 成長：同じタイミングで動かせた
- 改善：動くスピードを合わせるところ
<iframe src="https://scratch.mit.edu/projects/430462827/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 動かす
### 初めてのシュート
https://scratch.mit.edu/projects/430462773
- 内容：初めてのシュートを表しました
- 成長：斜めに飛ばしたところ
- 改善：複数のものを動かせなかったところ
<iframe src="https://scratch.mit.edu/projects/430462773/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
---
## 指定教科書 ***<span class="red">p.10〜p.17</span>***
### キーワード
<div class="box">
- プログラム
- プログラミング
- プログラミング言語
- 開発画面
- ソフトウェア
- ハードウェア
- システム
- ブロック
</div>
これらの言葉が何を指しているのか説明できるようになりましょう。
---
## 指定教科書 ***<span class="red">p.18〜p.27</span>***
### キーワード
<div class="box">
- ウェブブラウザー（Web browser）：Google Chrome、Microsoft Edge
- 操作対象：スプライト、ステージ
- 操作エリア：スプライトリスト → ブロックパレット → コードエリア
- 各種機能：
- スプライトをえらぶ、背景をえらぶ
- 言語の切り替え、拡張機能
- タブ：「コード」タブ、「コスチューム」タブ、「おと」タブ、「はいけい」タブ
- プログラムの作成・実行・保存・再開
</div>
これらの言葉が何を指しているのか説明できるようになりましょう。
---
## 本日のテーマに沿った絵コンテの作成
1. 以下のツールを使って、テーマを選出します。
2. 絵コンテ作成用の用紙を配布するので、まずは手書きでデザインする。
---
## プログラム作品の製作
1. スクラッチの開発画面で製作する。
2. 完成したら「共有」ボタンを押して共有しましょう
---
## プログラム作品のレポート
### 香川短期大学moodle▶プログラミング（2020）▶ レポート提出
1. Scratchの自分の作品のURLをコピーする
2. URLと自己評価とを一緒にアンケートフォームに回答する
{"metaMigratedAt":"2023-06-15T13:43:18.994Z","metaMigratedFrom":"YAML","title":"香川短期大学 プログラミング演習（2020）第３回・第４回","breaks":true,"slideOptions":"{\"theme\":\"white\",\"slideNumber\":\"c/t\",\"center\":false,\"transition\":\"none\",\"keyboard\":true,\"width\":\"93%\",\"height\":\"100%\"}","contributors":"[{\"id\":\"9fa84d74-755e-4449-be52-074e326d8a9d\",\"add\":13554,\"del\":1013}]"}