信号機を作ってみよう(フローチャートとプログラミング)
総合・探究

信号機はどのように動いているか。アルゴリズムやフローチャートの作成方法について学び、「SPACEBLOCK®(スペースブロック)」で信号機のプログラムを作成をしてみましょう。
学習目標
- 全てのアルゴリズムが「順次」、「分岐」、「反復」の要素の組み合わせで構成されていることを理解する。
- アルゴリズムをフローチャートなどを用いて図解する能力を身につける。
- 意図した処理をコンピュータに伝える方法について、プログラムを作成することを通じて、生徒が考える授業が可能になる。
- 「順次」、「分岐」、「反復」の構造を持つ基本的なプログラムを作成する活動を通じて、生徒に考えさせる授業ができるようになる。
準備
【必要なもの】
【実際に信号機を作る場合は以下※シミュレータでも代用可能】
- プログラミングをするパソコンやタブレット
【実際に信号機を作る場合は以下※シミュレータでも代用可能】
- スペースブロック専用マイコンボード
- 8×8 RGB LEDマトリックスパネル
※スペースブロック専用マイコンボードや8×8 RGB LEDマトリックスパネル(LEDパネル)はスペースブロックサイトより購入できます。
学習 - フローチャートの作り方
アルゴリズム・フローチャートとは?
問題を解決するための手順や方法をアルゴリズムと言います。
そして、そのアルゴリズムをコンピューターが実行できる形に変換することをプログラミングと呼びます。
アルゴリズムの手順や流れは、フローチャートなどを使って図に表すことができます。処理の流れを視覚的に表現すると、わかりやすくなります。特に、複雑なアルゴリズムや手順を扱う場合、フローチャートを使うことで、手順や条件分岐が明確になります。
フローチャートの作成手順について確認しよう!
フローチャートの基本的制御構造として、「順次」、「分岐」、「反復」の要素を組み合わせて構成されています。
スペースブロックで使えるブロックは以下の種類になります。

開始文・停止文
フローチャートの最初と最後を示すために、楕円形の開始と終了の記号を使用します。
条件文
条件によって処理が変わる場合は、条件分岐を表す菱形の記号を追加します。
それぞれの分岐には、条件が真の場合と偽の場合に実行される処理を示します。
実行文
処理ステップを表す四角形の記号を追加します。
各処理は、その中に実行される具体的な手順やアクションを記述します。
入出力
ユーザーからの情報や外部からの入力を表し、平行四辺形の記号を使用します。
繰り返し文
特定の条件が満たされる間、一連の処理を繰り返すために使用されます。
フローチャートを書いてみよう!
では、実際にスペースブロックでフローチャートを書いてみましょう。
まず、プログラミング制作画面の右側の方に出ている画面のタブ「ホワイトボード」をクリックします。

次に「パーツを追加」というボタンをクリックすると、ホワイトボートに追加できるパーツ一覧が表示されます。
その中に先ほど説明したフローチャートを作成するパーツが出てきます。


使用したいパーツを選択するとホワイトボート上にパーツを表示する事が出来ます。
パーツはドラッグで移動することができます。

図形同士を線で繋ぐ時は、図形を選択した時に浮かび上がるオレンジ色の四角のピンをクリックします。
すると次のような表示になります。

繋ぎたいピンをクリックまたはドラッグすると線が接続できます。

線をしたい場合は、線をクリックし、ゴミ箱マークをクリックすると消す事ができます。

実習1 - 信号機のアルゴリズムとフローチャートの作成
信号機の動きについて
では例として、信号機のアルゴリズムについて考えてみましょう。
ここでは赤と青を繰り返す、歩行者信号を例に出して動きを確認してみます。
色の意味:
赤色: 止まれ!停止しなければなりません。
緑色: 進め!進んでよいです。
順番:
緑 → 赤 → 緑…の順で変わります。
歩行者信号:
歩行者が渡ることができる時には、歩行者が赤や青の人型のマークで示されます。
緑色から赤色に変わる時、事前に点滅します。
信号機が点灯するアルゴリズムをフローチャート図で可視化しよう!
信号機は色がずっと繰り替し青から赤に変わります。
また赤に変わる前に青色が点滅してから赤に変わります。
それではアルゴリズムも組み込んでみましょう。
「開始」と「終了」の間に「ループ開始」「ループ終了」を置きます。

青色に点灯します。
ここでは5000ミリ秒間青色に点灯する信号にします。

赤に変わる前、5回点滅をする信号にします。
「ループ開始」「ループ終了」を出し、条件を「5回」ループするとします。

点滅なので、消灯と青色に点灯を繰り返します。
ここでは100ミリ秒点灯を繰り返します。

その後赤色に点灯します。
ここでは5,000ミリ秒間青色に点灯する信号にします。

赤から青に変わる時は何も変化がないため、ここで「ループ終了」につながります。
これで信号機のアルゴリズムをフローチャート図にできました。

実習2 - 信号機を作ってみよう
フローチャートを元にプログラミングしよう!
アルゴリズムをフローチャートにすることで、プロセスが論理的に明確になりました。これを元にプログラミングを進めましょう。
1. 繰り返しブロック
まず、フローチャートの「ループ開始」は繰り返しブロックを使います。
「繰り返し」という見出しの「繰り返す」ブロック、「(3)回繰り返す」や「iを(0)~(3)に変えて繰り返す」ブロック等を使用します。

繰り返しのブロックはプロジェクト作成画面のタブ「繰り返し」から選択できます。

2. LEDブロック
次に「青色に点灯」はLEDブロックを使って表現しましょう。
「LEDマトリックスパネル」という見出しの「RGB LED(A10)を点灯」ブロック、もしくは「(8)x(8)RGB LED (A10)を全て(赤色)に点灯」等を使用します。
絵を指定できるブロックは緑色を選択し、全体に塗ります。
全て点灯するブロックは緑色を選択します。

LEDを点灯・消灯ブロックはプロジェクト作成画面のタブ「LED」から選択できます。

3. 一時停止ブロック
次にLED点灯ブロックの下に「5000ミリ秒停止」の部分を作ります。
1000ミリ秒を5000ミリ秒に変更します。

一時停止をするにはプロジェクト作成画面のタブ「基本」から選択できます。「時間」という見出しの「一時停止(1000)ミリ秒」ブロックを使用します。

4. 回数を指定して繰り返す
次は5回点滅の部分を作成します。
(3)回くり返すというブロックを使います。
3回の部分を5回に変更します。

5. 消灯ブロックで点滅させる
「5回くり返す」ブロックの中にLEDを消灯させるブロックを入れ、点滅を表現します。
「LEDマトリックスパネル」という見出しの「RGB LED(A10)を点灯」ブロック、もしくは「RGB LED (A10)を全て消灯」等を使用します。
絵を指定できるブロックは黒色を選択し、全体に塗ります。

残りの分をフローチャートを確認しながら完成させましょう。
応用学習
・信号機の光り方をデザインしたりアニメーションを加えてみよう。
・カウント式の信号機に時間のカウントを追加してみよう。
・信号機の他、身近なアルゴリズムをフローチャートにしてみよう。
以下はサンプルプロジェクトの例です。

発表
工夫したところをまとめて、できた信号機のプログラムを動かしながらみんなで発表してみよう。
評価
・順次、分岐、反復の構造をフローチャート化できるようになったか?
・フローチャートの通りにプログラミングできたか?
・信号機の動きになっているか?
参考プロジェクト
参考プロジェクトはこちらからコピーできます。