バーチャル計測制御ラボ
OVERVIEW
「計測・制御のプログラミング」を、ロボットがなくても体験できる
センサーで周りの状況を測り、その値で判断して、モーターやLEDを動かす——中学校 技術・家庭科（技術分野）の「計測・制御のプログラミング」は、実物のロボットやセンサーの準備が大きな負担です。バーチャル計測制御ラボは、その学習をブラウザの中の3D空間で再現します。プログラムの結果がその場で見えるので、生徒は自分で試し、失敗の原因を見つけ、改善するサイクルを何度も回せます。
📏
計測
距離・明るさ・温度・人感・土の水分・時刻のセンサーで、周りの状況を数値で知る。
🤔
判断
「もし〜なら」「〜になるまで」で、値に応じて動きを切りかえる。
⚙️
制御
モーター・LED・ファン・ポンプ・ブザーを動かして、目的を達成する。
🔁
試行錯誤
走った跡・秒数・グラフでふりかえり、何度でもやり直せる。
| 項目 | 内容 |
|---|---|
| プラットフォーム | Web アプリ（ブラウザで動作・インストール不要・アカウント登録不要） |
| 技術スタック | HTML5 / CSS3 / Vanilla JavaScript ／ Blockly（ブロック）／ three.js（3D表示） |
| 公開 | GitHub Pages（静的ファイル）。ダウンロードして app.html を開けばオフラインでも動作 |
| 対象 | 小学校高学年〜中学生（中学校 技術「計測・制御のプログラミング」「生物育成の技術」）・教員研修 |
| 動作環境 | Chrome / Edge / Safari / Firefox（パソコン・Chromebook。WebGL が使える環境） |
| 保存 | 作ったプログラムとクリア記録は、利用者のブラウザ内にのみ保存（サーバーへの送信なし）。利用状況の把握のため Google アナリティクスを使用（匿名） |
STAGES
6つの章・23ステージで、段階的に深く学べる
順次 → 反復 → 分岐 → 計測と制御 → センサーの組み合わせ、と少しずつ難しくなるように並べています。6章では、植物の育成を題材に、時刻や土の水分で動く計測・制御に取り組みます。各ステージには、チャッピーによる説明・ヒント・お手本アニメーションがあります。
「前に進む」「待つ」「左／右に90°曲がる」「止まる」を順番に並べ、ゴールの中で止まる練習から始めます。はやさ50で1秒に1マス（30cm）進むため、マスを数えて秒数を考えられます。実行後は、まっすぐ進んだ区間ごとに「○秒・○マス」が表示されます。
1-1まっすぐ進もう ★
1-2曲がってみよう ★
1-3ちゅう車場に止めよう ★★
1-4くねくね道 ★★
池のまわりの①②③のチェックポイントを順に通る「1周」や、同じ形が続く「階段」で、くりかえしのまとまりを見つけます。長い順次処理を「くりかえし」で短く書ける良さに気づかせます。
2-1池のまわりを1周 ★★
2-2階段をのぼろう ★★★
部屋の明るさ・人感・温度センサーを使い、「暗くて人がいたら明かりをつける」「28℃以上でファンを回す」などの自動制御を作ります。実行すると明るさ・人・温度が台本どおりに変わり、出力が正しいかを自動でテスト。まちがえたときは「6秒のとき（暗い・人がいる・22℃）、明かりが消えていたよ」と具体的に返します。
3-1自動ライト ★★
3-2自動ファン ★★
3-3人がいるときだけ ★★★
3-4スマートルーム ★★★
距離センサーでかべやチャッピーまでの距離を測り、止まる・曲がるを判断します。かべの位置は実行のたびに変わるため、時間だけで止めるプログラムでは成功しません。横断歩道では、車の速さに合わせてチャッピーが飛び出してきます。最後のステージでは「止まって少し待ち、もう一度測る」ことで、かべとチャッピーを見分ける論理を考えます。
4-1かべの手前で止まろう ★★★
4-2ブロックのめいろ ★★★
4-3横断歩道のチャッピー ★★★★
4-4かべ？それともチャッピー？ ★★★★
床の明るさを測るセンサーで黒い線を見つけ、線のふちをたどるライントレースに挑戦します。左右のモーターの速さを変えてカーブさせる仕組みを体験し、最終ステージでは明るさセンサーと距離センサーを組み合わせて、線の上を横切るチャッピーにも対応します。
5-1黒い線で止まろう ★★★
5-2ライントレース（だ円） ★★★
5-3ライントレース（くねくね） ★★★★
5-4線の上のチャッピー ★★★★★
植物を観察・栽培するときによく使う計測・制御を、トマトを育てる部屋で体験します。部屋の中は1秒で1時間すすみ、窓の外の空・明るさ・温度が一日の流れにそって変わります。土の水分は時間とともに減り、水やりポンプを動かすと増えます。少なすぎるとトマトがしおれ、多すぎると根がくさるので、ちょうどよく保つ制御が必要です。
暗くなったら：植物ライト明るさセンサーで、くもりや夕方に植物ライト（LED）をつけます。夜は植物を休ませるため、時刻と組み合わせて「昼間だけ」に絞ります。
水分が減ったら：自動水やり土の水分センサーの値で、ポンプを動かす・止めるを切りかえる、フィードバック制御の基本です。
時間を決めて：タイマー水やり時刻センサーで「朝7時と夕方17時に1時間だけ」のように、決まった時間に動かします。
6-1暗くなったら植物ライト ★★
6-2土がかわいたら水やり ★★★
6-3朝と夕方に水やり ★★★
6-4くもりの日はライトでおぎなう ★★★★
6-5全自動ビニールハウス ★★★★★
機能一覧
学びを支える 4つのコア機能
「やってみる → 見る → 気づく → なおす」を、生徒が自分の力で回せるように設計しています。
各ステージは、チャッピーとのやりとりでミッションを説明し、続いて「お手本」として正解の動きを3Dで再生します。お手本の再生中はプログラムの画面にふたをし、プログラムそのものは見せません。生徒は「どう動けばよいか」だけを手がかりに、自分でプログラムを考えます。
やりとり形式の説明「つぎへ」で進むチャッピーの話と、ミッション・ヒントを表示。いつでも「説明」ボタンで見直せます。
動きだけを見せるお手本ゴールまでの動きを再生。ストップウォッチで「何秒で曲がったか」を観察できます。
失敗してもすぐに画面を切りかえず、仮想空間をそのまま残して結果バーで知らせます。生徒は、どこで、何秒で、なぜうまくいかなかったのかを自分で確かめてから、ヒントを見るか、やり直すかを選べます。
ストップウォッチと「○秒・○マス」実行中の経過時間と、まっすぐ進んだ区間ごとの秒数・マス数を表示します。
走った跡とセンサーの値車の軌跡、距離センサーのビームと測った距離、明るさの値を3D上に表示します。
計測グラフ距離・明るさ・温度の30秒分の変化をグラフで確認できます。
距離センサーは超音波センサーのように ±20° の広がりをもち、いちばん近い物までの距離を測ります。ぶつかるとチャッピーがのけぞって頭をおさえ、星が回る「いたい」アクションで失敗を知らせます。部屋のステージでは、明かりや温度に合わせてチャッピーが「くらいよ…」「ありがとう！」と反応します。
毎回変わるコース4-1・5-1 は実行するたびにかべや線の場所が変わり、センサーを使う必要性を実感できます。
4つの視点「ななめ」「真上」「追いかける」「ロボット」を切りかえ、ドラッグで自由に回せます。
ツールバー右端の 🔑（または Ctrl＋Shift＋K）からシークレットキーを入れると「先生モード」になり、各ステージの答えの例をブロックで確認できます。答えはお手本の動きと同じプログラムから自動で作られ、作業画面に読み込むこともできます。
🔐 キーの管理：キーそのものはファイルに書かず、元に戻せないハッシュ値だけを
js/config.js に置いています。キーは tools/make-key.html で変更できます。生徒には知らせないでください。
授業活用
技術の「計測・制御」「生物育成」を中心に、さまざまな場面で
実物の教材を使う前の導入や、台数が足りないときの代わり、家庭学習まで、目的に合わせて使えます。
技術
計測・制御のプログラミング
センサー → 判断 → アクチュエータの流れを、3Dで動きを確かめながら学ぶ。実機教材の前の導入にも。
技術
順次・反復・分岐
1〜3章で、プログラムの基本構造を段階的に習得。くりかえしの良さ、条件分岐の必要性に気づく。
総合・探究
身の回りの自動化
自動ライト・自動ファン・見守り（人感）など、生活の中の計測・制御と結びつけて考える。
技術・理科
生物育成と植物の観察
光・水分・温度と植物の育ちを結びつけ、育成環境を自動で調節するしくみ（植物工場・スマート農業）を考える。
家庭学習
自分のペースで
チャッピーの説明とお手本があるので、ひとりでも進められる。インストール不要で家庭のパソコンでも使える。
RECOMMENDED FLOW
推奨授業フロー（50分授業・4章の例）
1
導入：身の回りの「止まる」しくみ
自動ドアや自動ブレーキなど、センサーで測って止まる例を紹介し、「時間ではなく距離で判断する」必要性を問いかける。
5分
2
個人ワーク：4-1「かべの手前で止まろう」
お手本を見てから挑戦。時間で止めるプログラムは、かべの位置が変わると失敗することを体験する。
15分
3
ペアワーク：4-3「横断歩道のチャッピー」
ぶつかった場面を、走った跡と距離の値でふりかえりながら、しきい値（何cmで止まるか）を話し合って調整する。
20分
4
まとめ：計測 → 判断 → 制御
自分のプログラムを「計測・判断・制御」に分けて説明し、実際の機器（自動ブレーキなど）との共通点を確認する。
10分
📐 仮想ロボットの仕様
1マス＝30cm。はやさ50で1秒に1マス進みます。「左／右に90°曲がる」ブロックはその場で回って止まります。距離センサーは前方 ±20°・0〜100cm、明るさセンサーは車の前の下の床の明るさ（0〜100）を測ります。植物の部屋は1秒で1時間すすみ、土の水分センサーは0〜100、時刻センサーは0〜23時の値を返します。
SENSOR VALUES
センサーの値と目安（「暗い」「近い」はいくつから？）
「暗くなったら」「近づいたら」などを、どの数で分けるかをステージごとに決めています。アプリでは、ステージのはじめの説明と3D画面上のミッション欄に「📐 目安」として表示されます。センサー欄のスライダーにもさかいめの値が赤い目盛りで示され、いまの値が「暗い」「近い」などのどれにあたるかも表示されます。目安は答えの一例です。目的を達成できれば、ほかの値でもクリアできます。
| センサー | 値の範囲と、だいたいの値 | ステージの目安（さかいめ） |
|---|---|---|
| 💡 明るさ （へや・植物） | 0〜100。明るい部屋 80くらい・暗い部屋 10〜15。 植物の部屋：晴れの昼 85・朝夕 50・くもりの昼 20くらい・夜 8 | 30より小さい＝暗い（3-1・3-3・3-4・6-1・6-4・6-5） |
| 💡 明るさ （ロボットカー） | 車の前の下の床の明るさ。白い床・芝生 85〜95くらい、黒い線 10くらい | 50より小さい＝黒い線の上（5-1〜5-4） |
| 📏 きょり | 0〜100cm（1マス＝30cm）。前に何もないときは 100 | 10cmより小さい＝近い（4-1 かべの手前で止まる） 15cm（4-2 めいろ）・20cm（4-3・4-4・5-4 チャッピーやかべ） |
| 🌡️ 温度 | 0〜40℃。ふつう 22〜25℃、あつい日は 30℃をこえる | 28℃以上＝あつい（3-2・3-4 ファン）・35℃以上＝あぶない（3-4 ブザー） 30℃以上＝あつい（6-5 ビニールハウスのファン） |
| 💧 土の水分 | 0〜100。水やり直後 60〜90、時間がたつと へっていく | 30より小さい＝かわいた（6-2・6-5 水やり） 15より小さいと しおれて失敗、95をこえると 根がくさって失敗 |
| 🕐 時刻 | 0〜23時。植物の部屋では 1秒で1時間すすむ | 昼間＝6時〜17時台（6以上 かつ 18より小さい）（6-4・6-5） 7 または 17＝朝と夕方の水やりの時間（6-3） |