Download - プログラミング入門 - soi.wide.ad.jp€¦ · プログラミング入門 第2回「フローチャートで理解する」 講師: 斉藤賢爾 [email protected] ∆ 棟N205
プログラミング入門第2回「フローチャートで理解する」
講師:斉藤賢爾[email protected]
∆ 棟 N205
2004 年度秋学期
プログラミング入門第 2 回「フローチャートで理解する」 – p.1/62
http://www.soi.wide.ad.jp/授業マテリアルをダウンロードしてください
プログラミング入門第 2 回「フローチャートで理解する」 – p.2/62
今日のメニュー
はじめに
先週のおさらい
課題レビュー
練習問題 1: スイッチが押されたら回る
練習問題 2: スイッチが押されている間、回る
フローチャートで理解する
練習問題 3: フローチャートを描く
課題の出題
実習
プログラミング入門第 2 回「フローチャートで理解する」 – p.3/62
はじめに今週の配布物
みなさんのコメントから
今週の改善点
どこまで来たかな?
今日のゴール
プログラミング入門第 2 回「フローチャートで理解する」 – p.4/62
今週の配布物
次のものをみなさんに配布しますCricket本体 × 1個 (+電池)赤外線インタフェース × 1個 (+電池)シリアルケーブル × 1本マブチモーター × 2個タッチセンサー × 1個 NEW!
授業が終わったら回収します
プログラミング入門第 2 回「フローチャートで理解する」 – p.5/62
みなさんのコメントから
このコーナーでは、毎週の課題の提出時に「授業の進め方や SOIに対する意見、コメントなど」として寄せられたコメントを紹介します
今回は、課題 1として書いてもらった授業の感想も含みます
ポジティブな意見 (要望含む)ばかりでした
ありがとうございました
でも、苦情も大切なフィードバックですので、遠慮せずに!
プログラミング入門第 2 回「フローチャートで理解する」 – p.6/62
みなさんのコメントから©1 感想編
論理的に考える練習になればなぁとおもいます
⇒ そうですね結果が見えるので、とてもよい練習になるはずです
パソコンの中で動くのではなく、実際にどう動くのかを感じられるのは面白い
⇒ まさに、この授業でクリケットを採用している理由です
プログラミング入門第 2 回「フローチャートで理解する」 – p.7/62
みなさんのコメントから©2 要望編
休憩は 1時間ごとにとりませんか
⇒ そうしましょう1時間ごとに「7分 30秒」の休憩をはさみ、最後の1時間を実習に使えるようにしましょう
みんなの前で課題の発表をしてはどうですか
⇒ よいアイデアですね!毎回、「今週の Thumb Up!」(後述)の人に発表してもらいましょう
プログラミング入門第 2 回「フローチャートで理解する」 – p.8/62
コメント大募集!
毎回のレポートと一緒に、コメントも送ってもらえると嬉しいですポジティブな感想はスタッフの励みになります苦情・要望によって、授業を改善していくことができますその他、いろいろなコメントをお寄せください
課題提出ページの「授業の進め方や SOIに対する意見、コメントなど」からお願いします
プログラミング入門第 2 回「フローチャートで理解する」 – p.9/62
今週の改善点
アルカリ電池を買いました!クリケット本体に使ってくださいこれをぜひ、今学期間、もたせてくださいねちなみに講師の家で使っている電池は先学期から交換していません赤外線インタフェースはさほど電力を消費しないので、従来どおりの電池を使ってください
プログラミング入門第 2 回「フローチャートで理解する」 – p.10/62
どこまで来たかな?
第 1 回 9/29 Cricket入門
第 2 回 10/ 6フローチャートで理解する
第 3 回 10/13 PADによるアルゴリズムの表現
第 4 回 10/20 簡単なルールで動くロボットの制作
第 5 回 10/27 手続きと段階詳細化
第 6 回 11/10 例外と簡単なマルチタスク処理
第 7 回 11/17 状態遷移図によるシステムの記述
第 8 回 12/ 1 Cricketにおける赤外線通信
第 9 回 12/ 8 プロデューサ/コンシューマモデルによる設計
第 10 回 12/15 データの収集と利用
第 11 回 12/22 デザインワークショップ I ∼設計と実装第 12 回 1/10 デザインワークショップ II ∼テストしよう第 13 回 1/17 デザインワークショップ III ∼発表
プログラミング入門第 2 回「フローチャートで理解する」 – p.11/62
今日のゴール
新しい制御構造 aに親しむ次のことを使ったプログラムを作れるようになる
wait-until: 何かが起こるまで待つif-else: もし ∼ならば A、そうでなければ B のことをする
フローチャートで理解するこれまで習ったことを使ったプログラムを、フローチャートで表せるようになる各部品の意味をはっきりさせます
acontrol structure;プログラムが目的通りに動くようにコントロールするための部品。
みなさんはすでに、repeatという制御構造を使ったことがあります。
プログラミング入門第 2 回「フローチャートで理解する」 – p.12/62
今日のメニュー
はじめに
先週のおさらい
課題レビュー
練習問題 1: スイッチが押されたら回る
練習問題 2: スイッチが押されている間、回る
フローチャートで理解する
練習問題 3: フローチャートを描く
課題の出題
実習
プログラミング入門第 2 回「フローチャートで理解する」 – p.13/62
先週のおさらい先週、来られなかった人は? (1 名いると思いますが . . .)
隣の人に聞いて進めてください
Cricket/LogoBlocksとは?
プログラミングの手順のおさらい
プログラミングって何だろう?
プログラミング入門第 2 回「フローチャートで理解する」 – p.14/62
©k Cricket/LogoBlocks©L とは?
電源スイッチ
モーターポートab
センサーポートab
スタートボタン
バスポート赤外線ポート
スピーカー
Cricketは MITで開発された小型コンピュータ
LogoBlocks は、Logo 言語に基づいた視覚的プログラミング環境
Cricket/LogoBlocks で学ぶ意義
小さな、単純なコンピュータから触れて欲しい
覚えることや、間違えやすいところが少ない
私たちの生活空間に入ってくるコンピュータの例
プログラミング入門第 2 回「フローチャートで理解する」 – p.15/62
©p プログラミングの手順©o のおさらい
プログラミングの流れ1. ソースコード (source code)を書く
視覚的言語なので、組み立てる、と言った方がよいかも知れません
2. プログラムを実行できる状態にするプログラムを Cricketにダウンロードします
3. 実行する4. ちゃんと動いたか確かめる
意図通りでなかったら 1. に戻って直します
後ほど、課題レビューで、優秀作をみんなで動かしておさらいします
プログラミング入門第 2 回「フローチャートで理解する」 – p.16/62
©p プログラミングって©o 何だろう?
コンピュータに対して手順を指示することこれは狭い意味
計画することプログラムとはデータを収集し、処理し、結果を表現することを含む、問題の解決の手続き
それを計画し、実施して、確かめること
環境をかたちづくることプログラムは、私たちの生活や社会を変えるどのような情報環境をデザインしたいのか?社会はその技術とどう向き合うのか?
プログラミング入門第 2 回「フローチャートで理解する」 – p.17/62
今日のメニュー
はじめに
先週のおさらい
課題レビュー
練習問題 1: スイッチが押されたら回る
練習問題 2: スイッチが押されている間、回る
フローチャートで理解する
練習問題 3: フローチャートを描く
課題の出題
実習
プログラミング入門第 2 回「フローチャートで理解する」 – p.18/62
課題レビュー課題をふりかえる
提出状況と傾向
総評
今週の Thumb Up!
プログラミング入門第 2 回「フローチャートで理解する」 – p.19/62
課題1. 回る世界
1. 現時点でみなさんに考えられる、最もユニークで面白いルールでモーターを回すプログラムを作ってください。例: 1秒おきに反対向きに回す。どんなルールなのかを説明する文章を添えてください。
2. 今日の授業の感想は? この授業で学ぶことを通して、将来、どんなプログラムを作ってみたいですか? 簡単にまとめてください。
プログラミング入門第 2 回「フローチャートで理解する」 – p.20/62
提出状況と傾向
8人中 6人提出 (SOI学生含む; SFC履修生は 6名)RIS 2.0形式で提出した人はいませんでした
すべての課題は RIS 2.0でも解けるように出題することを心がけますので、是非、SOI学生のみなさんもチャレンジしてみてください!
プログラムの内容具体的なイメージを実現した人が多くてよかったです
「蝉」「エンジン」「風車」「チョロQ」
ゲームにしてくれた人もいました
プログラミング入門第 2 回「フローチャートで理解する」 – p.21/62
総評
すごく面白かったです!これから Thumb Up! な作品をピックアップして紹介しますが . . .
ちょっとしたインパクトや工夫などが決め手になりました
ピックアップしなかった作品も、みんな面白かったです
プログラミング入門第 2 回「フローチャートで理解する」 – p.22/62
宮武正和さんの作品
「蝉」
本人に説明してもらいましょう
ピックアップのポイントはリアルにできていると思います多分、自分のイメージに近づけるために、何度も確認しながら洗練させていったのではないでしょうかとても大切なプロセスです
プログラミング入門第 2 回「フローチャートで理解する」 – p.23/62
植木琢磨さんの作品
“fortune”
本人に説明してもらいましょう
ピックアップのポイントは今回の授業で紹介する制御構造を予習して作ってあります
プログラミング入門第 2 回「フローチャートで理解する」 – p.24/62
Thumb Up! な作品を動かしてみよう
レポートページからダウンロードしてください
プログラミング入門第 2 回「フローチャートで理解する」 – p.25/62
今日のメニュー
はじめに
先週のおさらい
課題レビュー
練習問題 1: スイッチが押されたら回る
練習問題 2: スイッチが押されている間、回る
フローチャートで理解する
練習問題 3: フローチャートを描く
課題の出題
実習
プログラミング入門第 2 回「フローチャートで理解する」 – p.26/62
練習問題 1スイッチが押されたら回るやってみよう
準備: タッチセンサーをつなぐ
ヒント: loopブロックを使う
ヒント: waituntilブロックを使う
プログラミング入門第 2 回「フローチャートで理解する」 – p.27/62
©L やってみようスイッチ aが押されたらモーターが回るプログラムを作ります
スイッチはプログラムの実行中、何度でも押せるようにします
スイッチが押されると、モーターが 3 秒間、回るようにします
どうやったらできるでしょうまず、スイッチを作る必要があります
何度でも試せるように、際限なく繰り返す必要があります
スイッチが押されるまで、モーターを回すのを待つ必要があります
a スタートボタンとは別のものとします。
プログラミング入門第 2 回「フローチャートで理解する」 – p.28/62
©k 準備: タッチセンサー©o をつなぐ
センサーポートa
スイッチがなければ始まりません
タッチセンサーをスイッチとして使いましょう
センサーポート aにタッチセンサーをつなぎます
向きに注意しましょう
プログラミング入門第 2 回「フローチャートで理解する」 – p.29/62
©L ヒント: loop©o ブロックを使う
何度もスイッチを押せるようにするためには?
(loop)ブロックを使います回数を指定せずに、際限なく処理を繰り返すことができます使い方は、回数を指定しないだけで、repeat ブロックと同じです
繰り返しが終わったときの処理も何故かつなげられそう . . .
⇒ つなげても、それは実行されませんので注意を!
プログラミング入門第 2 回「フローチャートで理解する」 – p.30/62
©L ヒント: waituntil©o ブロックを使う
ここに指定した条件が真になるまで待ちます
それから、ここにつないだ処理を実行します
タッチセンサー�aが押されている
条件:
waituntilブロックによって、条件が成立するまでプログラムの実行を待たせることができます
デフォルト (=省略値)で、toucha? ブロックが付いてきます
toucha? ブロックは条件ブロックの一種で、タッチセンサー aが押されているかどうかを示します
押されていれば真
押されていなければ偽
プログラミング入門第 2 回「フローチャートで理解する」 – p.31/62
ここでスライドを止めてください
自分の力で考えよう!
クラスメイトと相談するのは OK
プログラミング入門第 2 回「フローチャートで理解する」 – p.32/62
©L 解答例
センサー�a�がタッチされると、モーターを�3秒回す処理が走ります
センサー�a�がタッチされるまで待ちます
プログラミング入門第 2 回「フローチャートで理解する」 – p.33/62
今日のメニュー
はじめに
先週のおさらい
課題レビュー
練習問題 1: スイッチが押されたら回る
練習問題 2: スイッチが押されている間、回る
フローチャートで理解する
練習問題 3: フローチャートを描く
課題の出題
実習
プログラミング入門第 2 回「フローチャートで理解する」 – p.34/62
練習問題 2スイッチが押されている間、
回るやってみよう
ヒント: ifelseブロックを使う
改造しよう (モーター急停止)
プログラミング入門第 2 回「フローチャートで理解する」 – p.35/62
©L やってみようスイッチが押されている間だけ、モーターが回るプログラムを作ります
スイッチを押すとモーターが回り始めます
スイッチを離すとモーターが止まります
どうやったらできるでしょうスイッチが押されているかどうか、繰り返し判定する必要があります押されていたらモーターを回し (始め)ます押されていなければモータを止めます
プログラミング入門第 2 回「フローチャートで理解する」 – p.36/62
©L ヒント: ifelse©o ブロックを使う
ここに指定した条件を判定して...
真ならば、ここにつないだ処理を実行します
偽ならば、ここにつないだ処理を実行します
タッチセンサー�aが押されている
条件:
ifelseブロックによって、そのときの条件に応じてプログラムの実行を切り替えることができます
デフォルト (=省略値)で、toucha? ブロックが付いてきます
条件が真のときと、偽のときの処理を分けることができます
スイッチが操作されたときにはいつでも、変化が起きるように、繰り返し、条件を判定しなければなりません
モーターが回っているときに onブロックを使ったり、止まっているときに offブロックを使っても構いません
プログラミング入門第 2 回「フローチャートで理解する」 – p.37/62
ここでスライドを止めてください
自分の力で考えよう!
クラスメイトと相談するのは OK
プログラミング入門第 2 回「フローチャートで理解する」 – p.38/62
©L 解答例
センサー�a�がタッチされているかに応じて
タッチされていればモーターを�ON�にする
タッチされていなければモーターを�OFF�にする
プログラミング入門第 2 回「フローチャートで理解する」 – p.39/62
©L 改造しよう©o (モーター急停止)
スイッチを離した瞬間にモーターが止まるようにしてみましょう
モーターを瞬時に停止させるには
(brake)ブロックを使いますonブロックをクリックすると、次のように切り替わります
on → off → brake → on → . . .
プログラミング入門第 2 回「フローチャートで理解する」 – p.40/62
©L 余裕のある人は . . .
if-elseの代わりに wait-untilだけを使って作れるでしょうか
wait-untilは複数使えます「計算」テンプレートの中の not条件ブロックを活用しましょう
プログラミング入門第 2 回「フローチャートで理解する」 – p.41/62
今日のメニュー
はじめに
先週のおさらい
課題レビュー
練習問題 1: スイッチが押されたら回る
練習問題 2: スイッチが押されている間、回る
フローチャートで理解する
練習問題 3: フローチャートを描く
課題の出題
実習
プログラミング入門第 2 回「フローチャートで理解する」 – p.42/62
フローチャートで理解する何を理解するの?
プログラムを理解します
フローチャートって何?
フローチャートで描く普通のブロック
フローチャートで描く repeat/loopブロック
フローチャートで描く waituntilブロック
フローチャートで描く ifelseブロック
プログラミング入門第 2 回「フローチャートで理解する」 – p.43/62
©p フローチャートって何?
フローチャートは、処理の流れを描いた図です条件を表す菱形、処理を表す箱形、処理の順序を示す矢印で表します
組織におけるワークフローを表す場合などにも用いられます
その意味では、覚えておくと便利です
ただし、このコースで用いるのは今日だけです制御構造の意味をはっきりさせる目的で用いますそれぞれの制御構造と同じ意味をフローチャートで表します一般に、同じことを別の表現で表すと、意味が明確になります
プログラムの設計のためのツールとしては難点がありますCricket LogoBlocks での表現とギャップがあります矢印を追っていかないと読めません少し規模が大きくなると手に負えなくなります
プログラミング入門第 2 回「フローチャートで理解する」 – p.44/62
©L フローチャートで描く©o 普通のブロック
モーター�aを選択
モーターを�ON
3秒間待つ
モーターを�OFF
・順番に行う処理は、 縦に並べ、矢印で結びます
★
◎
◎
★
プログラミング入門第 2 回「フローチャートで理解する」 – p.45/62
©L フローチャートで描く©o repeat/loopブロック
モーターを�ON
1秒間待つ
1秒間待つ
モーターを�OFF
・繰り返しの処理では、 まず、条件を判定します
・条件が真だったら、 繰り返す処理を行い、 条件の判定に戻ります
・loop�では、条件判定が 必ず真になります
繰り返し3回目以内
YESYES
NONO
★
★
◎
◎
プログラミング入門第 2 回「フローチャートで理解する」 – p.46/62
©L フローチャートで描く©o waituntilブロック
・wait-until�は、 繰り返しの特殊例と 考えられます
・条件が真になるまで、 条件の判定を 繰り返します
YESYES
NONOセンサー�aタッチ?
★
★
◎
◎
プログラミング入門第 2 回「フローチャートで理解する」 – p.47/62
©L フローチャートで描く©o ifelseブロック
・判定が�YES/NO�の 場合の処理に分かれ、 その後、合流します
・実行されるのは どちらか一方です
YESYES
NONOセンサー�aタッチ?
モーターを�ON
モーターを急停止
★
★
◎
◎
プログラミング入門第 2 回「フローチャートで理解する」 – p.48/62
今日のメニュー
はじめに
先週のおさらい
課題レビュー
練習問題 1: スイッチが押されたら回る
練習問題 2: スイッチが押されている間、回る
フローチャートで理解する
練習問題 3: フローチャートを描く
課題の出題
実習
プログラミング入門第 2 回「フローチャートで理解する」 – p.49/62
練習問題 3フローチャートを描く
やってみよう
プログラミング入門第 2 回「フローチャートで理解する」 – p.50/62
©p やってみよう練習問題 1, 2のプログラムをフローチャートにしましょう
スイッチを押すと、3 秒間、モーターが回るプログラム
スイッチを押すとモーターが回り始め、離すと止まるプログラム
紙に鉛筆やペンで描くので OKです
色分けする必要はありません
プログラミング入門第 2 回「フローチャートで理解する」 – p.51/62
ここでスライドを止めてください
自分の力で考えよう!
クラスメイトと相談するのは OK
プログラミング入門第 2 回「フローチャートで理解する」 – p.52/62
©p 解答例スイッチが押されたらモーターを動かす
スイッチが押されている間モーターを動かす
モーター�aを選択
モーター�aを選択
モーターを�ON
センサー�aタッチ?
センサー�aタッチ?
TRUE
TRUE
3秒間待つ
モーターを�ON
モーターを�OFF
モーターを�OFF
YESYES
YESYES
YESYES
YESYES
NONO
NONO
プログラミング入門第 2 回「フローチャートで理解する」 – p.53/62
今日のメニュー
はじめに
先週のおさらい
課題レビュー
練習問題 1: スイッチが押されたら回る
練習問題 2: スイッチが押されている間、回る
フローチャートで理解する
練習問題 3: フローチャートを描く
課題の出題
実習
プログラミング入門第 2 回「フローチャートで理解する」 – p.54/62
課題の出題課題 2. 奇妙な楽器
提出方法
レポートの作り方 (再掲)
ヒント©1 : 音の鳴らし方
ヒント©2 : 押され方の区別
プログラミング入門第 2 回「フローチャートで理解する」 – p.55/62
課題2. 奇妙な楽器
1. スイッチの押され方に応じて色々な音を鳴らす、ユニークな楽器を作ってください。
例:クリックされたら「ド」の音を 0.5 秒鳴らす。ダブルクリックされたら「ミ」の音を 0.5 秒鳴らす。プレスされたら「ソ」の音を 0.5 秒鳴らす。
モーターの音なども使って、面白い音の表現を探求してみましょう。
どんなルールで鳴るのかを説明する文章を添えてください。
2. 自分で作った楽器を演奏してみた感想は? 簡単にまとめてください。
プログラミング入門第 2 回「フローチャートで理解する」 – p.56/62
提出方法
SOIのレポートシステムを用いて提出してくださいhttp://www.soi.wide.ad.jp/report/
Cricket LogoBlocksで保存したファイルをアップロードしてください(RIS 2.0でのプログラムも受け付けます)
〆切2004/10/11 23:59 JST
プログラミング入門第 2 回「フローチャートで理解する」 – p.57/62
レポートの作り方 (再掲)
1. メモ帳などを使ってレポートの文章部分を書きますふたつ書くことがあります
2. 書いた内容をコピーします
3. Cricket LogoBlocksの「ウィンドウ」メニューから「インフォメーション」を選びます
4. 現れたウィンドウに次の項目を記入しますName: 氏名を書きます
Title: プログラムの名前を書きます
Age, Location, Genderは無視して構いません
先にコピーしておいた内容を本文としてペーストします
5. 名前をつけてプログラムをファイルに保存します
プログラミング入門第 2 回「フローチャートで理解する」 – p.58/62
©L ヒント©1 :©o 音の鳴らし方
高さと長さを指定して音を鳴らす
(note)ブロックを使います♪マークのところに、音の高さを表す数値ブロックをつなぎます©└マークのところに、音の長さを表す数値ブロックをつなぎます数値と音の高さ
119 110 105 100 94 89 84 79 74 70 66 62 59
C C# D D# E F F# G G# A A# B C
ド レ ミ ファ ソ ラ シ ド
音の長さ100 ミリ秒単位 (1 ミリ秒は 1
1000秒)で指定します
プログラミング入門第 2 回「フローチャートで理解する」 – p.59/62
©L ヒント©2 :©o 押され方の区別
スイッチの押され方の区別の方法は?クリックは押された t→押されていない t→やっぱり押されていない
ダブルクリックは押された t→押されていない t→と思ったら押されている
プレスは押された t→まだ押されている
ただし . . .いずれの場合も、押されるまで何もしません
tは数百ミリ秒として考え、試行錯誤して決めてみてください
ここでは、きわめて大雑把に押され方を区別する方法を説明しています特にダブルクリックは、人間の方が歩み寄らないと検出できませんみなさんのパソコンでマウスのダブルクリックなどを検出するときは、もっと高度な方法を用いていると思います
この課題では必ずしもこの 3 つの押され方を採り入れる必要はありませんプログラミング入門第 2 回「フローチャートで理解する」 – p.60/62
今日のメニュー
はじめに
先週のおさらい
課題レビュー
練習問題 1: スイッチが押されたら回る
練習問題 2: スイッチが押されている間、回る
フローチャートで理解する
練習問題 3: フローチャートを描く
課題の出題
実習
プログラミング入門第 2 回「フローチャートで理解する」 – p.61/62
実習残りの時間、課題に励んでください
プログラミング入門第 2 回「フローチャートで理解する」 – p.62/62