米MITメディアラボ開発
ビジュアル・プログラミング環境「Scratch」Web版version3
基本操作と例題
令和3年7月22日
茂出木敏雄
ホームページ http://www.bekkoame.ne.jp/~modegi/
掲載プログラムの全データは上記サイトよりダウンロードできます。
Scratch_example.zip内の¥Scratch¥man¥フォルダScrachとは米国ＭＩＴ（マサチューセッツ工科大学）メディアラボが開発した、子供向けのプログ
ラム開発環境（IT用語で「Scratch」とは、プログラムを一から作成すること）。
公立小学校では2020年から（新型コロナ感染拡大より2021年より本格化） 、中学校
では2021年からプログラミング教育が必修化されることとなり、巷で子供向けプログラミング教室も開設されている。これらの学校で「Scratch」の採用が増えている。
［特徴］（１）Webブラウザが動く各種パソコン(Windows/Mac）、タブレット（iPad/Android）を用いて、インストールせずにオンライン環境で無償で使用できる。
（インストールしてオフライン使用も可）。
（２）ブロックとよばれるソフトウェア部品を画面上のドラッグ操作により、組合わせながらプログラミングできる（一部、数値・文字のキーボード入力が必要）。
（３）変数名などプログラム内で使用する言語は英語に限らず、日本語など数十カ国の言語を使用できる。
（４）ＳＮＳ機能を備えていて、作成したプログラムを友達と共有できる。
（５）プログラミング言語で代表的なＣ言語を意識したソフトウェア部品が多数用意されており、Ｃ言語の関数（組込み関数）に相当する独自ブロックを定義することにより、子供向けでありながら高度なアプリケーションを開発できる。
→変数・関数の概念を子供に理解させる必要があり、教育は容易ではない。

2

１．Web版「Scrach」ソフトウェアの起動方法

Web版Scratch起動（クリック）

Webブラウザ（下記はEdgeの例）でアドレスバーに、URL” https://scratch.mit.edu/”を入力。上部メニューで「作る」をクリック（サインインは必須ではない） （参考：インストー
ル版を使用する場合は、”https://scratch.mit.edu/download/”よりダウンロード）3

２．プログラム開発環境の概要（１）：画面構成
自動起動されるチュートリアル画面を閉じて、プログラム入力画面を準備します。
以下、分割画面の機能を把握しておいてください。
ブロックパレット［プログラミング用のブロック・部品のメニュー］

プログラムの起動

コードエリア［プログラム入力エリア］
左欄よりブロックをドラッグ＆ドロップして組み合わせる。
クリックしてチュートリアル
画面を閉じる。

プログラムの停止

ステージ［プログラム実行エリア］

データ表示、マウス・キー
ボード入力

スプライトリスト4２．プログラム開発環境の概要（２）：ブロック・部品の連結規則
プログラミング用ブロック・部品の形状が同じであれば、ドラッグ操作により連結・合成することができます。以下、典型的な形状例を示します。
［ブロックの縦連結］［楕円ブロック（変数、演算）の連結］［ひし形ブロック（条件）の連結］

制御ブロック内の白スペースに、ブロックを載せると、ひし形条件が満たされた場合に実行される。

白楕円には、数値・文字を直接入力したり、変数・演算子のブロックを載せることができる。

5

３．プログラミング（１）：キャラクターに「こんにちは」と喋らせる（１）はじめに、左欄のコードのメニューより「イベント」を選択し、「(旗)が押されたとき」を中央のプログラム入力エリアにドラッグ＆ドロップして配置します。プログラムの第１ブロックは原則として、 「(旗)が押されたとき」ブロックで始めます。

マウスの左ボタンを押しながら移動させる。

6

３．プログラミング（１）：キャラクターに「こんにちは」と喋らせる（２）
左欄のコードのメニューより「見た目」を選択し、「（こんにちは！）と（２）秒言う」を中央のプログラム入力エリアに配置されている「(旗)が押されたとき」ブロックの直下にドラッグ＆ドロップして配置し、上のブロックと結合させます（凹凸部を重ねると結合します）。

7

３．プログラミング（１）：キャラクターに「こんにちは」と喋らせる（３）：実行プログラムを実行させる場合は、プログラム実行エリアの左上の「緑色の旗」をクリックします。実行中のプログラムを停止させる場合は、右横の「赤丸」をクリックします。
プログラムの起動プログラムの停止［プログラム実行エリア］

実行結果

8

３．プログラミング（２）：キャラクターの大きさを変更する（１）
まず、「（こんにちは！）と（２）秒言う」ブロックを下方にドラッグして切り離します。次に、キャラクターの大きさをキーボード入力する変数を作成します。左欄のコードのメニューより「変数」を選択し、「変数を作る」をクリックします。

9

３．プログラミング（２）：キャラクターの大きさを変更する（２）「新しい変数」ダイアログで「新しい変数名：」のテキストボックス内に、例えば、「大きさ[%]」を入力し、「OK」ボタンをクリックして閉じます。

10

３．プログラミング（２）：キャラクターの大きさを変更する（３）
左欄のコードのメニューより「調べる」を選択し、「（あなたの名前は何ですか？）と聞いて待つ」を「(旗)が押されたとき」ブロックの直下にドラッグ＆ドロップして配置し、上のブロックと結合させます。質問文の（あなたの名前は何ですか？）を（大きさ[%]を入力してください）に変更します。
また、上記メニューの下の「答え」ブロックもプログラム入力エリア内の適当な空きスペースにドラッグ＆ドロップしておきます。

プログラム実行エリア内の変数表示の位置やキャラクターのレイアウトはドラッグで変更できます。

11

３．プログラミング（２）：キャラクターの大きさを変更する（４）
左欄のコードのメニューより「変数」を選択し、「大きさ[%]を（0）にする」を「（大きさ[%]を入力してください）と聞いて待つ」ブロックの直下にドラッグ＆ドロップして配置し、上のブロックと結合させます。また、プログラム入力エリアに置いていた「答え」ブロックを「大きさ[%]を（0）にする」の白丸(0)の上にドラッグして載せます。

12

３．プログラミング（２）：キャラクターの大きさを変更する（５）
左欄のコードのメニューより「見た目」を選択し、「大きさを（100%）にする」を「（大きさ[%]を（答え）にする」ブロックの直下にドラッグ＆ドロップして配置し、上のブロックと結合させます。

13

３．プログラミング（２）：キャラクターの大きさを変更する（５）
左欄のコードのメニューより「変数」を選択し、変数「大きさ[%]」を「大きさを（100%）にする」ブロックの白丸（100%）の上にドラッグ＆ドロップして載せます。そして、下方に切り離しておいた「（こんにちは！）と（２）秒言う」ブロックを上方にドラッグして、 「大きさを（大きさ[%]）にする」ブロックに結合させます。

14

３．プログラミング（２）：キャラクターの大きさを変更する（６）：実行１
プログラム実行エリアの左上の「緑色の旗」をクリックして実行させますと、プログラム実行エリアのキャラクターの下にテキストボックスが表示されます。例えば、「150」と入力し、エンターキーまたは右端のチェックマークをクリックします。

15

３．プログラミング（２）：キャラクターの大きさを変更する（７）：実行２
以下のようにキャラクターの大きさが変更されます。

16

３．プログラミング（３）：キャラクターの位置をマウスに連動させる（１）
まず、「（こんにちは！）と（２）秒言う」ブロックを下方にドラッグして切り離します。次に、左欄のコードのメニューより「制御」を選択し、「（ひし形）まで繰り返す」を、「大きさを（大きさ[%]）にする」ブロックの直下にドラッグ＆ドロップして配置し、上のブロックと結合させます。

17

３．プログラミング（３）：キャラクターの位置をマウスに連動させる（２）
左欄のコードのメニューより「調べる」を選択し、「マウスが押された」を「（ひし形）まで繰り返す」ブロックの（ひし形）マークの上にドラッグ＆ドロップして載せます。

18

３．プログラミング（３）：キャラクターの位置をマウスに連動させる（３）
左欄のコードのメニューより「動き」を選択し、変数「（どこかの場所）へ行く」を「（マウスが押された）まで繰り返す」ブロックの中央のスペース上にドラッグ＆ドロップして挿入させます。挿入したブロック内の（どこかの場所）の上をクリックしてプルダウンメニューを表示させ、（マウスのポインター）に変更します。そして、下方に切り離しておいた「（こんにちは！）と（２）秒言う」ブロックを上方にドラッグして、 「（マウスが押された）まで繰り返す」ブロックに結合させます。

19

３．プログラミング（３）：キャラクターの位置をマウスに連動させる（４） ：実行
プログラム実行エリアの左上の「緑色の旗」をクリックして実行させますと、１５ページと同様に、プログラム実行エリアのキャラクターの下のテキストボックスが表示されます
ので、大きさを％で入力します。そうしますと、マウスに連動してキャラクターが移動するようになります。マウスの左ボタンを押しますと、「こんにちは」と喋り終了します。

20

３．プログラミング（４）：キャラクターの大きさ設定部をブロック化する（１）プログラムが複雑になると縦長で見にくくなります。そこで、繰り返し出てくる一連の処
理やまとまった処理を、ユーザ定義ブロック（赤色、Ｃ言語の関数に相当）で表現することができます。まず、左欄のコードのメニューより「ブロック定義」を選択し、「ブロックを作る」をクリックします。

21

３．プログラミング（４）：キャラクターの大きさ設定部をブロック化する（２）以下の「ブロックを作る」ダイアログで「ブロック名」を例えば「大きさ設定」に変更し、「OK」ボタンをクリックして閉じます。

22

３．プログラミング（４）：キャラクターの大きさ設定部をブロック化する（３）
作成していたプログラムの「（大きさ[%]を入力してください）と聞いて待つ」を下方にドラッグして、「旗が押されたとき」より切り離します。更に、「<マウスが押された>まで繰り返す」をを下方にドラッグして、「大きさを（大きさ[%]）%にする」より切り離します。

23

３．プログラミング（４）：キャラクターの大きさ設定部をブロック化する（４）切り離した「（大きさ[%]を入力してください）と聞いて待つ」を先頭とする３ブロックを、左上に新規に生成されたユーザ定義ブロック「定義（大きさ設定」の下方にドラッグして連結させます。 「旗が押されたとき」ブロックは右上の空きスペースに移動させます。

24

３．プログラミング（４）：キャラクターの大きさ設定部をブロック化する（５）
左欄のブロック定義メニューに新規に生成されたユーザ定義ブロック「大きさ設定」を「旗が押されたとき」ブロックの下方にドラッグ＆ドロップさせて連結させます。続いて、「大きさ設定」 ブロックの下方に「<マウスが押された>まで繰り返す」を先頭とする３ブロックをドラッグして連結させます。これで２０ページと同様に実行できます。

25

４．プログラムの保存：作成したプログラム（ブロック配置）を保存する作成したプログラムは左上の「ファイル」メニューの「コンピュータに保存する」をクリックすることにより、”Scratchのプロジェクト.sb3”という名称でローカルＰＣのダウンロードフォルダに保存できます（ファイル名を変更して、適当なフォルダに保存して下さい）。
逆に「コンピュータから読み込む」でローカルＰＣに保存されているプログラムのファイルを再読み込みできます。

26

５．例題（１）：１から１００までの整数の総和を求める
count変数とsum変数を定義し、Ｃ言語のforループに相当する機能を使用します。”Scratch3_sum.sb3”（ メニュー「ファイル」ー「コンピュータから読み込む」 で本ファイルを指示すれば、本プログラムを読み込めます。）

27

５．例題（２）：リアルタイム時計
年・月・日・時・分・秒の６つの変数を定義し、現在の日時を取得して６つの各変数の値を更新する処理を、１秒間隔に繰り返し、秒の更新に合わせてキャラクターを回転させます。”Scratch3_time.sb3”

28

５．例題（２）：リアルタイム時計（２）：目覚まし時計
リアルタイム時計に対してアラーム時刻（時・分）を入力させると、指定時刻になると、キャラクターが「ニャー」と５回鳴きながら「時間ですよ」としゃべります。
”Scratch3_alarm.sb3”

29

５．例題（２）：リアルタイム時計（３）：ストップウォッチ
リアルタイム時計に対して、起動時の時刻（時・分・秒）を記録し、起動時の時刻からの経過時間（時・分・秒）を表示させるようにします（年月日の表示は削除）。
”Scratch3_swatch.sb3”

30

５．例題（３）：四則演算
２つの数値Ａ・Ｂをキーボード入力し、四則演算と剰余算（AをBで割った余りを計算）を行った結果を表示します。
”Scratch3_calc.sb3”

31

５．例題（４）：入力された整数の素数判定
１またはそれ自身の値でしか割り切れない整数を素数と言います。入力した整数値を２以上の整数で順に割り算を行い、余りが０になる場合がなければ素数であると判定できます。プログラミン
グの基本３要素である順次処理、反復処理、条件分岐を全て使用します。”Scratch3_prime.sb3”

32

５．例題（５）：体格指数BMIの計算
身長と体重の値をキーボード入力し、BMIを計算し、体格判定します。体格判定は、ユーザ定義ブロック（赤色、Ｃ言語の関数に相当）で表現し、22が標準で、25以上を肥満、18.5未満を痩せとします。”Scratch3_bmi.sb3”

BMI=

体重[kg]×10000
身長[cm]×身長[cm]33

５．例題（６）：検査精度指数（感度と特異度）の計算（１）新型コロナウィルスのPCR検査、抗原検査で話題になる検査精度（感度と特異度）の計算を行います。感度とは、真の感染者数（誤って陰性判定された見逃し感染者を含む）に対して陽性判定された割合[%]、特異度は真の健常者数（誤って陽性判定された健常者を含む）に対して検査で陰性判定された割合[%]です。
各値が高いほど精度が良いが、通常は一方の値が高いと、もう一方の値は低くなる傾向があります。健康診断（がん検診）では、感度＞特異度の場合が多く（見逃しは少ないが要精密検査が多い）、PCR検査・抗原検査では感度＜特異度になっています（健常者を誤って陽性判定して隔離することは少ないが、感染者の見逃しが多い）。
以下例は新型コロナウィルスのPCR検査の典型的な精度”Scratch3_kensa.sb3”

34

５．例題（６）：検査精度指数（感度と特異度）の計算（２）被験者数、陽性判定数、偽陽性者数、偽陰性者数の４つの値をキーボード入力し、感染者数、健常者数、感度、特異度の各値を計算します。”Scratch3_kensa.sb3”

35

５．例題（６）：検査精度指数（感度と特異度）の計算（３）：プログラム部拡大”Scratch3_kensa.sb3”

36

５．例題（７）：カレンダー曜日の計算（１）
年・月・日の３つの値をキーボード入力し、曜日を計算します。”Scratch3_yobi.sb3”

37

５．例題（７）：カレンダー曜日の計算（２）：プログラム部拡大”Scratch3_yobi.sb3”

38

５．例題（８）：キャラクターのランダムウォーク（１）キャラクターの位置（X,Y）、向き、大きさの４つのパラメータを0.5秒間隔に乱数で変更し、キャラクターに生きているような動きを付けます。”Scratch3_life.sb3”

39

５．例題（８）：キャラクターのランダムウォーク（２）：プログラム部拡大”Scratch3_life.sb3”

40