小学生向け:本当のプログラムはこんな感じだよ

こんばんは、文京ウインドです。
音楽とはあまり関係ない話ですが、小学生がプログラミングを学ぶらしいぞ?ということで、できるだけやさしく、何か作るところを見せてみようかな?と思います。
小学生見てくれるかな?

たぶん、最初は「こんにちは」とか、「Hello,world!」とか表示するだけの、実行しても何の面白みもないプログラムを作るのかもしれませんが、ちょっとは実用性を考えてサンプルプログラムを作ってみましょう。すなわち、、

カップラーメン用3分待ったらお知らせタイマー

・Windows で動作するフォームアプリケーションだよ!
・開発環境は Visual Studio 2017(現場のプロがお仕事でも使うやつだよ!)
・開発言語は VC#(スマートフォンアプリも開発できるよ!)

ここから先は、大量の画像を交えて、手順を説明します(ちょっと長いよ!)
興味のある方だけ、ご覧ください。。

まず、Visual Studio 2017をインストール(パパやママにやってもらおう!)

インストールしたら、起動しよう(赤で囲ってるやつをクリックね)

 

マウスで、ファイル/新規作成/プロジェクト を選択しよう

「新しいプロジェクト」の画面が出たら、左のほうの画面で「Visual C#」を選んで、「Windowsフォームアプリケーション」を選んで、「名前」に「3minTimer」と入れて、OKを押します。(矢印の順番でね)

OKすると、フォームがでます。じつは、この状態ですでに「何もしないプログラム」ができています。

さて、フォームにはキャプション(ウインドウのタイトル)が表示されていますが、とりあえず名前を変えます。「3分タイマー」でいいでしょう。右下の「プロパティ」の「Text」に、「3分タイマー」と入れます。これでタイトルが変わりましたね?

つぎは、フォームの見た目をちょっと変えましょう。最大化と最小化ボタンはいらないので表示しないようにします。「プロパティ」のとこを画像のように、
「MaximzeBox」と「MinimizeBox」を「False」にします。その次は、黄色で囲んである「ツールボックス」を開きます。これからフォームにボタンとかを追加しますよ

ツールボックスの「Button」(ボタン)を探して、ダブルクリックしましょう。フォームに表示されます。位置が左上になっているけど、マウスでドラッグして位置を変えることができます。同じように、ツールボックスから「Timer」(タイマー)と「Label」も探して、ダブルクリックして追加しておいてください

こんな感じになります。この画像にはボタンは2個あるけど、1個でいいので「button2」はあとで選択して削除します。フォームに載せた部品はいらなければ削除できるんですよ。「label1」は、フォームに張り付けたポストイットみたいなものと考えてください。文字を表示できて、書き換えもできます。「button1」は、そのまんま、ボタンです。ボタンを押したらタイマーが動き出して、時間を表示しながら3分待つ感じのものをつくります。

ボタンの表示を「START」にします。「button1」をマウスで選択すると右下のプロパティにいろいろ表示されるので「Text」を探して、「START」と入れます。これは、3分計りたいときにタイマーをスタートさせるスイッチになります。

次に、フォームがボタンと文字だけでさびしいので、なんか画像でもいれちゃいましょうか。ツールボックスから「PictureBox」をさがしてダブルクリックしてね。フォームに点線の枠ができます。これ、画像を表示できる画用紙みたいなものなのです。右上のちっさい三角を押すと下のようになります。写真の通りに設定してみよう。あと、なにか適当な画像を用意してください。自分の顔写真でもいいよ。いまからこの点線の枠に、画像を表示させるんだけど、でかい画像でもはみ出したりしないようにするため、「サイズモード」を「StretchImage」にしておくんだ。そのあと、画像を選ぶために、「イメージの選択」をマウスでクリックしよう

画像選択の画面になったら、写真のように選んでいって、OKしよう。私はカップラーメンの画像にしましたw

これで画像が表示できたね!ボタンとラベルの位置もマウスで変えてみたよ

いよいよここから「プログラミング」なのだよ。
STARTボタンを黙ってダブルクリックだ!なんか難しそうな画面になってビックリするけど、余計なところを触らなければ、どうということはない。

次は、「デザイン」を押してこの画面に戻り、赤で囲ってる「timer1」を黙ってクリックだ!

はい、こうなりました。これは、「ボタンが押された時に何をするか」と、「タイマーが時間を計り終わったら何をするか」を「プログラミング」できる状態になったのです。画面がなんだか難しそうだけど、触りだすと難しいから余計なことしないほうがいいよ!

つくるのは「3分たったら教えてくれるアプリ」ですので、時間を計るものである「timer1」が一番大事そうなところです。なので「timer1」からいじっていきましょう。写真の画面に戻って、timer1をクリックして、プロパティの欄を見ましょう。「interval」(インターバル:時間の間隔)が100になっています。これ、100msecといって、1秒の1000分の100という意味なんです。つまり、0.1秒です。これを、1000(msec)にして、1秒のタイマーにします。こうすると、timer1が、1秒ごとに「合図をだしてくれる」ようになるんです。この合図を180回数えれば180秒だから、ちょうど3分になるよね!

タイマーが合図をくれたら、それを数えなくてはいけないので、どこかに今いくつなのか?をメモするやつが必要です。だから、count(カウント)という入れ物を用意しますよ。数字をメモすることができます。最初は、0を入れておこう、ということで static int count = 0; とプログラムします。そして、ここが大事です。画像の場所に、「count++;」とプログラムします。これ、「合図が来たら count に 1をたす」という意味です。これで、時間を数えることができるプログラムになってきました。3分たったら、 countが180になっているはずだよね。

こんどは、画像のようにプログラムを書き足していきます。これは、 countが60(秒)になったらタイマーを止めてくれよ、と書いています。60は、あとで180に書き換えますよ。テストするときにいちいち3分まつの嫌だしね。。

こんどはボタンを押したら、タイマーが動き出すようにしましょう

だいぶできてきましたね
でもまだ終わりではないよ!
合図がきたら数えてる数字を書き直すしくみにしましょう。こう書きます。
count に 1 が足されたら、すぐにポストイットを書き換えますよ!としているんです

さいごに、画像のように、時間がきたらタイマーを止めなさい!の下に、ポストイットの書き換えをプログラムしています。さっきの60は、180に直してあります。あと、スタートボタンを押したら、 count に 0 を入れています。これで、3分を何度でも繰り返して計るようにできますね。
これで、3分たったら「3分たちました!」と表示されるようになりました。

これでプログラムが終わったので、動かしてみましょう。「ビルド」メニューを開いて「リビルド」をクリックします。これでプログラムが動くようになります。

画像のように、「正常終了」と出ているのを確認してから、「開始」をクリックしてください。プログラムがうごきました!

「START」ボタンを押すと時間を計り始めますよ。カップラーメンにお湯を注いでから、「START」をおしてください。

3分経ちました!・・なんか文字がずれてますね。もうすこし左にポストイットを貼るのがよさそうです。右上の「×」を押してプログラムを終了させると、またプログラムができる状態になるので、「label1」をマウスでドラッグして。左にもっていきましょう。こんな感じで、プログラムは、動作させながら自分が考えているように動いているかな?を何度も確認しながらあれこれ直していって完成するものなのですよ。

さて、これでWindowsで動作する 64bitアプリケーションができたわけです。
プログラムは何度でも修正できるから、「お母さんが焼きそばを買ってきてしまった! 5分待たなくては!!」の場合も、180のところを、 60秒×5 = 300 だから、 300に書き直せばよいのです。

・・と小学生に教える設定で書いてみたけど、理解してくれるか自信ないですね。。
たぶん、Visual Studioで教えるのは無理だと思う。

これからの先生って大変なんだろうな・・・(^_^;

カテゴリー: 文京区の話題, 未分類 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。