情報の科学 プログラミング教育 第2回(出力)

前回はプログラミングとは、命令すること、について取り扱いました。

今回は、出力をテーマに授業をしています。
(ちなみに次が入力で、その次は演算になる予定。 本当にそれでよいのかも考えながら・・・。)


前回すでに「音の出力」をやっているので、出力自体は軽めにし、フローチャートに重みを置きながらやりました。
また、初っ端にブラウザベースのjavascriptを選び、かつアラート表示までやってしまう事で、世の中に蔓延しているフィッシングサイトの仕組みを理解させるのも、実は隠れた意図だったりします。

大まかな流れ

1.出力させるプログラムについて今日はやる、と宣言
2.フローチャートの解説
3.作ってみよう

 ※drow.ioやwordの図形など色々と考えたが、今回は「ブロックを組み合わせる、組み立てていく」感覚を養いたいと思い、Wordのオブジェクトをコピー&ドラッグさせながら配置していく形にしてみた。尚、昨年はdrow.ioを使い、一昨年はWordで白紙から作図させたが・・・なんか違うんだよなあ。

 ※なお、図形の形を意識させるという面で手書きは毎年、何回か実施している。「形が重要だったけど、思い出せる?」「JIS規格なんだよなあー」なんて話をしつつ。

下図:用意したWordイメージ

下図:とりあえずのハローワールド。(ハローワールドの文化を紹介しつつ)

4.JavaScriptで実装してみよう
 この時、流れ図との対応を意識するように説明する。また、写経とならないよう、各機能の解説を挟みつつやる。

 4-1.今回のプログラムには始まりと、終わりがあるね
 ※ちなみに、始まりと終わりがないプログラムだって~
 4-2.コンピュータに宣言しよう。ここからScriptを始めます、との意味で~
 script //開始
/script//終了

 が対応しているね。

 4-3.この間に、「~~と表示する」という設計をしたね
 document.write(“hogehoge”)//docment と write と () を分解して解説し、仕組みを理解させる

下図:実行結果

※この時、javascriptでいう「var」や「;の省略」については触れていない。最初はprogramかんたん!で話を進めたい。

5.ついでにアラート表示も体験しよ?
フロー

実装

今回の肝だと思っています。慎重に立ち回り、クラスの状況把握に努めています。

※この時、「みんなできてるかな~」とか言いながらグルグル回り、
「出来た人は、文字を好きに変えてごらん?」とか
「いっぱい表示してみよう!」とか
好き勝手弄らせるのが本当に重要だと思います。

自由に命令できるんだ
・大量に表示する生徒(必ずいる)をフォーカスして、ブラクラ文化に触れる
・コメントを自由に変えることができる(ジョーク交じりからのアングラ文化

あたりを生徒全体に周知出来るよう立ち回っています。

6.フィッシングサイト紹介
使ったのは、「youtubeの動画をDL変換するサイト」です。
著作権の話や何故無料なのかなんかに触れつつ、期待している画面はこれ。

変換後に出てくる詐欺サイトの画面//URLは安全面から割愛

これの、この部分。

alert(“Windows10 によってWindowsシステムが古くなり破損していることが~”)

で簡単に再現できてしまうんですね。

7.まとめ

これ、君たちが作ってるアラートと同じものだよね?
詐欺サイトって、実はすごい簡単に作れる単純設計。
だけど、こうやって作られている~という知識がないと騙されてしまうかもしれない。
「情報技術に対する正しい理解」って、本当に重要だよね。
今これを学んだ君たちは、是非ともまだ知らない人に、なんかの機会に教えてあげてほしい。
「情報格差」を少しでも無くすのは、もはや我々の使命に近いよ! 

・・・なんて言い切って、授業を終えています。


若干テーマからはそれていますが、それでも生徒にはよく響いているようです。
「スゲー!」とか、「うわこれ(詐欺アラート)、これ(自分たちで実装したアラート)じゃん!」と素敵な反応が多々上がっておりました。


実はどこかで取り上げたいと思っているんですが、
フローチャート、プログラミングの粒度問題に頭を悩ませています
私の元々が独学プログラマーだったもんですから、フローチャートをしっかり学んで無いんですよね。
フリーソフトの開発・公開なんかをしている時も、脳内でガリガリやるタイプだったもんで、
設計を共有する機会に恵まれず。どこまで細かなフローで書くべきか、
同時にどこまで省くべきかの定義付けが上手くいっていません。
・・・この先、ちょっと心配です。 

情報の科学 プログラミング教育 第1回(後半)

前回の続き。
どうも文字ばかりで、読み辛い画面ですね。
改善せねば。


4.色々な方法

I)「音は出せたかな?」
「他にもいろいろな命令の仕方があるよ」
「例えばこのScratch!」
「言葉ではなく、ブロックで指示出来るんだ!」

II)音を出す機能で遊ばせる
「ネコを鳴かせてみよう」
「ずーっと鳴かせてみよう」
「他の音もあるね」
「ビートを刻めぇ!」
「吹奏楽部! リズムの指示をくれぇ!」

以下略(適当な時間まで遊び続けます)

5.方法ごとの、得意、不得意。
「他にも、JavaScript,VB,Python,C,Ruby,Swift,R などなど、色んな言葉あるよ!」
「言葉によって、命令の仕方や機能が違う。得意不得意があって、それによって言葉を選んでる。」

例えばJavaScriptなら~
VBなら~
流行りのPython~
以下略


・・・力尽きました。(手抜き)

大体こんな感じで第1回を終えました。
なかなか好評だったかと思います。
PCが好きな生徒は、VBSに感動していたし、
Scratchで遊ぶシーンではそれぞれの創意工夫が見られました。
やっぱり、「好き勝手弄らせる」ことは重要じゃないかなと思っています。

SwiftやJavaなどスマホとの関係を告げると、やってみたい!なんて声も上がってました。
次回以降、どの言語でどのように進めるかが課題ですね。
最初はとりあえず、JavaScriptかなと思っています。汎用性の高さと、身近な物として。

ブラウザ噛ませることでやりたい事とかもありますので!

情報の科学 プログラミング教育 第1回(前半)

(前回より) 早速、貯めました・・・。


科学におけるブログラミング授業の、第1回目です。
詳細は前回参照のこと。

40分授業という事もあり、様々なプログラムの種類に触れました。
フローチャートは一度スルーしています。

以下大まかな流れ。

1.プログラミングって何だろう?
>コンピュータに命令(指示出し)すること

2.機械と人間の違いって何だろう?
>細かく、そして正確な指示が必要であること。
>繰り返しが得意であること。
>動力さえあれば、不眠不休が可能であること。・・・ など!

3.早速命令(プログラム)してみよう
>hello.vbs CreateObject(“SAPI.SpVoice”).Speak”hello asami sensei”

4.色々な方法
>音を出す(喋らせる)だけでも色んな方法があるよ!
>例えばScratch、すごく簡単!

5.方法ごとの、得意、不得意。
>他にもいろいろあるよ!用途ごとに使い分けているよ!
>JavaScript,VB,Python,C,Ruby,Swift,R


大体上で書いた通り。第1回では、ひたすら体験&紹介するに留めました。
ふーん、こんなのあるんだって思ってもらえれば幸い。

1.プログラミングって何だろう?
クレーンゲームを例に人間との違いを示しました。

I) 座っている生徒に、黒いホワイトボードマーカーを取ってもらう。
「○○君、あそこにある、あの黒いペン、取ってきてくれない?」

II)人間ってすげえ!って話をする。
「具体的に指示しなくても理解してくれる。それってすげえ!」

III)コンピュータにお願いしたら、それはもう大変よ。
「例えばクレーンゲーム。」
「横(X軸)を上手く操作して、縦(Y軸)もうまく操作して・・・」
「コンピュータ相手はもっと厳密よ?」
「座標指定して、移動を支持して、腕の認識と、腕の操作と・・・」

2.機械と人間の違いって何だろう?

I)コンピュータには正確な指示が必要で大変

II)でも、一度命令したら「忘れない」

III)「止める」指示を出さない限りは「続ける」

IV)そして疲れない!
「人間が得意な分野」と「コンピュータが得意な分野」
「これを正しく理解して、適材適所として使いこなすことが」
「今後の社会で、とても重要になってくる」

3.早速命令(プログラム)してみよう

I)慣例的に、プログラムの世界に飛び込む時にはハローワールド!と呼びかける事が多いんだよ。

II)私たちも世界に挨拶してみよう!

III)でも、文字だけじゃつまらないから、コンピュータに喋ってもらおう?

ファイル名「hello.vbs」

CreateObject(“SAPI.SpVoice”).Speak”hello asami sensei”

IV)解説
「機械に対する命令を日本語に訳してみるよ」
「オブジェクト(機能)を作りなさい」
「その機能の名前は、SAPI.SpVoice」
「Speech Application Programming Interfaceの、SpVoice機能」
「SpVoice機能の、Speak(喋る)という動作を使いなさい」
「内容は、ハロー、あさみ先生。」 
「世界に対する挨拶では無くなってしまったけど」
「さあ、みんなも喋らせてごらん?」

V)ワイワイガヤガヤ
「好きな言葉に変えてごらん!」
「喋らない人は、隣の人と見比べてみよう」


・・・長い!
ちょっと次回に回します。

情報の科学 プログラミング教育(前書き)

引越二段落目!
家具なりなんなりを新調し終わり、やっとこさ落ち付いてきました。

さて、情報の科学の2学期は、「問題の解決と処理手順の自動化」です。
※「モデル化とシミュレーション」を1学期の最後にやっております。
※そういえば、「問題解決の基本的な考え方」はじっくりやっていなくて、それがプログラミングを教える際の障害になっている気が・・・。


閑話休題
「問題の解決と処理手順の自動化」についてです。

1.問題の解法をアルゴリズムを用いて表現する方法を習得
2.コンピュータによる処理手順の自動実行の有用性

が大分類としてあって、要は適切なソフトウェアやプログラム言語を選択して機械化していこうという話。

現状の私では、「ただのプログラミングを教える授業」となり果てていて
正直反省しています。

この項は、様々な教科書を見ていても、いまいちしっくりこないんですよね。
指導要領には上記のように書かれているにもかかわらず、
sampleが計算に偏っていたり。
アルゴリズムはO(オーダー)に触れるか触れないかの距離感で、「野菜を効率的に切る手順」
だったり。

いやいいんですけど。作業量が伝われば。 でもしっくりこない。

という事で、ぶっちゃけ私も模索中です。
東京のN先生あたりが、いつか素敵な教科書(前例)を作ってくれると信じています。


という事で、今年のプログラミング教育(授業?)に関しては、過去の全てを投げ出しつつ
毎回模索しながらやってみようと思い、生徒たちの前で宣言してみました。
(※自分が担任のクラスなので。やりやすかろうと思いまして。)

余り貯めないように、書き綴っていけたらいいなと思っております。