自動販売機をプログラミングする - フローチャートやいろいろな設計 - 自動販売機って どこにでもあって便利だよね 自動販売機も中に入っているコンピュータで動作しています 今回の授業では どのようなプログラムが動いているか考えてみましょう 今回は Scratch で自動販売機のプログラムを作って プログラムはどのように設計するか見ていきましょう プログラムなどは 高校 情報科 の教材 指導案作ってみました http://www.beyondbb.jp/ Zip の教材内に入っています Ver 1.0 2017/02/15 Go Ota, 2014 1.1 一番簡単な自動販売機 開始 100 円 金額 0000 簡単な仕組みの自動販売機 100 円玉を 1 枚だけ入れられる 商品は 1 つだけ 商品切れランプは無し お金返却ボタンは無し つり銭切れランプは無し お金を入れて一定時間たったら自動的にお金返却は無し お金が投入される 金額を 100 円にする 飲み物ボタンが押される まず 始めの一番簡単な自動販売機について考えてみましょう お金を入れることと製品のボタンを押すことしかできません このプログラムの動作をフローチャートで表すと右の図のようになります お金が 100 円入っている 飲み物缶を出す 2
フローチャートの書き方 プログラムの開始と終わり 処理の流れの表記 ( アルゴリズム ) 逐次型 ( 直線型 ) 分岐型 ( 開始 ) 処理 1 条件 条件 処理 2 の処理 の処理 の処理 ( 終了 ) 処理 3 プログラムや人間の判断などのアルゴリズムは基本的に 逐次型 分岐型 ループ型の組み合わせで表現できますね ループの処理 ループ型 ( 繰返し型 ) ループの処理 終了条件 終了条件 ループの処理 無限ループ後判断ループ前判断ループ 3 演習 : 一番簡単な自動販売機を作ってみよう では 一番簡単な自動販売機を Scratch で作ってみましょう こんな簡単なしくみでも ちゃんとした見栄えを考えると大変かもしれませんね 4
プログラムサンプル 1A [Vending01A] 自動販売機の動きだけをテキストでやってみました 5 プログラムサンプル 1B [Vending01B] 自動販売機のグラフィクを少しだけ追加してみました 6
プログラムサンプル 1C [Vending01C] お金を入れたり ボタンを押したりできるようにすると 少しプログラム自体も複雑になってきます 7 ちょっとだけ複雑な自動販売機 100 円 売り切れ 金額 0000 もう少し複雑な自動販売機を考えてみましょう 売切れランプを追加します フローチャートも少し複雑になりますね ポイントは 開始直後と 飲み物缶を出す の後の二か所に 商品の確認をして売切れランプの処理が入ることにあります 初めに品物が無い場合もありますから 簡単な仕組みの自動販売機 100 円玉を 1 枚だけ入れられる 商品は 1 つだけ 商品切れランプは有り お金返却ボタンは無し つり銭切れランプは無し お金を入れて一定時間たったら自動的にお金返却無し 開始 お金が投入される 金額を100 円にする 商品がある 売切れランプ On 飲み物ボタンが押される お金が100 円入っている 飲み物缶を出す 商品がある 売切れランプ On 8
演習 : もうちょっとだけ複雑な自動販売機 120 円返却売り切れ金額 0000 簡単な仕組みの自動販売機 100 円玉を 1 枚だけ入れられる 商品は 1 つだけ 商品切れランプは有り お金返却ボタンは有り つり銭切れランプは無し お金を入れて一定時間たったら自動的にお金返却無し もう少し複雑な自動販売機を考えてみましょう お金返却ボタンを追加します この自動販売機のプログラムを作ってみてください ( 早く終わった人は 複数の缶がある場合も作ってみてください ) 今までやったフローチャートにとらわれずに いろいろな方法でプログラムができると思いますので知恵を絞ってみてください 9 作ったプログラムを見てみよう A~E まであるよ どんなプログラムができましたか? 自動販売機といっても いろいろな方法でプログラミングできます そのいくつかを その設計図といっしょに見ていきましょう 10
A: 単純なフローチャートをもとにしたプログラム 開始商品がある 売切れランプOn お金が投入される 金額をxxx 円にする 返却ボタンの追加では お金が現在投入されたとか 金額表示を 0 円にするなどの処理も必要ですね このぐらいになるとフローチャートもごちゃごちゃして判りにくくなりますね 返却ボタンが押された お金が投入されている お金を返却する金額を0 円にする 飲み物ボタンが押される お金が100 円入っている 飲み物缶を出す 商品がある 売切れランプOn 11 プログラムサンプル 2A [Vending02A] フローチャートをもとにしたプログラムです これもかなりぐちゃぐちゃしてきましたね 12
B/C サブルーチンでフローチャートをすっきりせたプログラム メインルーチンサブルーチン 1 サブルーチン 2 開始 売切れランプの処理 返却ボタンの処理 売切れランプの処理お金が投入される 金額をxxx 円にする 商品がある 売切れランプ On 戻る 返却ボタンが押された お金が投入されている お金を返却する 返却ボタンの処理 サブルーチンの終わりは 戻る 金額を 0 円にする 飲み物ボタンが押される お金が100 円入っている 飲み物缶を出す 売切れランプの処理 フローチャートが複雑になってきたら サブルーチンを使いましょう これは を使って フローチャートを分けることができます サブルーチンに対して 大元のものをメインルーチンと呼びます 戻る 人間は沢山の情報をいっぺんに扱うことができません そこでチャンクという個別の情報の塊にして扱います 13 B/C サブルーチンでもっとフローチャートをすっきり メインルーチン サブルーチン4 サブルーチン3 開始 飲み物ボタンの処理 お金投入の処理 売切れランプの処理お金投入の処理返却ボタンの処理 飲み物ボタンが押される お金が100 円入っている 飲み物缶を出す お金が投入される 金額を xxx 円にする 戻る 売切れランプの処理 飲み物ボタンの処理 戻る サブルーチン 3 つり銭切れを入れた場合 サブルーチンをもっと作るとメインルーチンがもっとすっきりします こうすると この時点の自動販売機のプログラムは 1 つのメインルーチンと 4 つのサブルーチンから構成されます また つり銭切れの機能を入れる時は とりあえず お金の投入にサブルーチンを入れておいて 後で中身を考えることもできます お金投入の処理お金が投入される 金額をxxx 円にするつり銭切れの処理戻る 14
B/C 構造化設計でプログラミング考えてみる 上のモジュールが下のモジュールを利用している 自動販売機 3 つの処理がループになっていることを表す 1 売切れランプの処理をする お金投入後の処理をする 返却ボタンの処理をする 飲み物ボタンの処理する つり銭切れの処理をする 1 1 につながって 売切れランプ を利用 フローチャートはコンピュータのプログラムを設計する一つの手法ですが あまり大きなプログラムには向いていません 現在では多くの設計手法がありますが 構造化設計は古いものですが 手軽に利用できます また現在の設計手法の考え方のベースになっています フローチャートは処理の流れを中心に考えますが 構造化設計はモジュール ( サブルーチン ) の構造や関係を中心に表現します この構造を考えると上図のようにシンプルなものになります 参考図書 : ソフトウェアの複合 / 構造化設計,G.J. マイヤーズ (1978) 15 プログラムサンプル 2B [Vending02B] モジュール ( サブルーチン ) 使ったプログラムです 随分すっきりしたように見えます 16
プログラムサンプル 2C [Vending02C] メッセージで呼ばれる各モジュールは各スプライトのスクリプトを参照してください 同じくモジュール使ったプログラムです モジュールは Scratch の各スプライトに入れて メッセージで呼び出しています 17 D 割り込み処理でプログラムを考えてみる 割り込み処理レジスタ処理 ( ネコ ) 飲み物ボタン缶出し 売切れボタン 入金 金額変更 表示変更 返却 金額変更 表示変更 飲み物選択 金額変更 表示変更 缶出し 表示変更 割り込み処理は多くのコンピュータを内蔵した製品で使用されています ここでは UML のステート図を使って 動作を表現してみました 18
プログラムサンプル 2D [Vending02D] 割り込みの通知をする各モジュールは各スプライトのスクリプトを参照してください 各スプライトをクリックすることで割り込みをメッセージで通知するプログラムです 各イベントの発生に対してのプログラムがすっきりします 19 E オブジェクト指向っぽくプログラミングしてみる 入金 + 入金 (100) 返却 + 入金 (0) - 金額 - 在庫数 缶飲料制御 + 金額変更 () + 在庫数変更 () 売切れボタン + 売り切れボタン変更 () 飲み物ボタン + 飲み物ボタン変更 () 缶出し + 缶出し () 現在多くのプログラムがオブジェクト指向をもとに開発されています オブジェクトは個々のプログラムがある役割を持って それが協働して動くことにより大きな仕事をするものです ここでは Scratch のスクリプトごとに機能をもたせるようにプログラミングしてみました また その動作を UML のオブジェクト図類似したもので表現してみました 20
プログラムサンプル 2E [Vending02E] 飲み物ボタン 缶飲料制御 各スプライトのスクリプトを参照してください 各スプライトごとの役割がはっきりしています 21 自動販売機さん いつもご苦労様です 何気ない自動販売機でも いろいろなプログラムの作り方がありますね 22