情報の科学 プログラミング教育 第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.まとめ

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

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


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


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

情報の科学 第3回 (データ量の話)

先に結論からいおう、ファイルサイズ問題は終わらなかった・・・。
授業研究が圧倒的に足りていない。
完全に私の力量不足、指導力不足である。

つい、雑談に逃げてしまう癖をなんとかしたい。
「BLOG書いてる時間で明日の教材研究をする」 だけで格段に良くなるだろうに。
ただまあ、それでも更新は続けたいと思う。
いつかきっと、未来の私、もしくはどこぞの誰かの役に立つことを願う。


さて、今日はファイルサイズについて授業を行った。
私が教えている2年生は、過去何度か触れているとおり1年次で社会と情報を履修しており、情報の科学を履修するに当たって重複した内容は簡単に復習するだけで、そのほとんどを省いている。
今回は授業冒頭に基数変換の確認をし、Excelの関数やその特徴を見直した上で、下記の流れで授業を進行した。

【データ量の話】
1.コンピュータ上において情報の最小単位はビット(bit)である。
2.8bit=1byteで、以降は1024倍ごとにKB,MB,GB,TB…と続いていく。(国際単位系・SI)

【画像のデータ量】
前々回(第1回)で学習したとおり、画像はピクセルの集合体である。
仮に下記のような5px*5pxの「モノクロ」画像があったとしよう。(実際にはホワイトボードにマス目を投射して板書した)

データ量

1.このとき、画像の「マス目」は5*5の25マスになる。
2.各マス目は、「白の時は0,黒の時は1」としてコンピュータ内で処理されている。
3.つまり、「各マス目の情報量は0か1の1bit」となる。

計算式は下記の通り。
5×5×1=25(bit)
25÷8=3.125 (bit→byte)
ファイルサイズ:約3byte


ここまで説明して、下記の流れへ進んだ。

【例題】
200px*100pxのモノクロ画像 の データ量はいくつか?

1. 200(px)*100(px)*1(bit)=20000(bit)
2. 20000÷8= 2500(byte)
3. 2500byteは約2.5KB

※2.4KBとすべきなのかどうかで悩んでしまった。どちらで指導するのが正解なのか・・・。
※便宜上1000で割るか、1024で割るかはケースバイケースで、試験問題なんかだと単位計算についての指示が書かれていることがほとんどである、とは伝えてある。


ここまでで終わってしまった。(時間切れ)

次回は【実際に作ってみよう】 の回。
mspaint(Windows標準搭載のペイントソフト)で100*200のモノクロビットマップを作成させ、ファイルサイズを確認させたい。また、「カラー画像(24bit)の場合はデータ量はどうなるのか」を考えさせた上で、再度作らせ反応を見てみたい。
※この時、各マスの情報量がRGBの8bit*8bit*8bitで24bitとなることを上手く伝えていきたい。

なお、フライング気味ではあるが、私が実際に作ってみた場合は下記のとおりである。

モノクロビットマップ
200px*100px
size:2.79KB (2862byte)

24bit.bmp
200px*100px
size:58.6KB (60054byte)

どんな色を設定しようが、ファイルサイズは変わらない。
興味のある人は是非試してみてほしい。

情報の科学 第2回

前回まではディジタル形式のなかでも、ベクタ画像とラスタ画像の違い、
アウトラインフォントとビットマップフォントの違い、などについて解説した。

※大まかなノートの再現を掲載しておく。

note_科学1


「情報の科学」なので(社会と情報との違いが現れる部分として)
今回はファイルサイズについて触れ・・・る予定であったが、
前提条件の2進法や10進法、16進法への相互変換(基数変換)の習熟度に不足が見られたため、急遽、相互変換についての学習を行った。

内容としては下の画像のようなプリントを配布し、解かせるという物であったが、予想以上に難航していた。

基数変換

基数変換については1年次に「社会と情報」での既習事項であるため、対応表などを用いて軽く説明するにとどめた。

binhex対応表の例
手抜き加工sry!!

その後は演習問題をだし、4人ごとでのグループ学習として定着を図る。
この時点で授業の残りが10分少々となってしまったので、これだけでは悔しいと
2進法:Binary 「BIN」
10進法:Decimal 「DEC」
16進法:Hexadecimal 「HEX」
だという説明をした上でExcelを起動させ、
2進法→16進法のことを、Binary To Hexadecimal だということで
=BIN2HEX()
=HEX2DEC()

などと説明し、対応する関数について学習した。
(上図の問題をEXCEL上で再現し、関数によって完成させた)


・・・次回こそファイルサイズ問題を終わらせるんだ。。。

情報の科学 第1回

本校では1年生で「社会と情報」を必修、
2年生で情報コース選択者が「情報の科学」と、「情報表現」、「情報デザイン」を履修する。
つまり、「情報の科学」においては「社会と情報」で既習している部分が多く、かなりのハイペースと偏りが発生する。
※本校は全日制、普通科、情報コースが設けられている。2年次に、理系、文系、情報コースとカリキュラムを別けている。

ので、あまり参考にはならないかもしれないが、ここは所詮匿名(?)のWEBLOG。知ったこっちゃねー。

初回は「画像と図形」と銘打ち、
ベクトル画像とラスタ画像、
ビットマップフォントとアウトラインフォント、
解像度について。

既習部分も多いため、直に触りながら双方の特徴に気付かせ、文書化させた。

解像度の話では「ビー玉」を教材として使用し、盛り上がったがこれは社会と情報でもあるのでまたいずれ。

memo:共通教科情報科の各科目内容とその取扱い

H22 学習指導要領解説http://www.mext.go.jp/component/a_menu/education/micro_detail/__icsFiles/afieldfile/2012/01/26/1282000_11.pdf より。


社会と情報の目標

情報の特徴と情報化が社会に及ぼす影響を理解させ、情報機器や情報通信ネットワークなどを適切に活用して情報を収集、処理、表現するとともに効果的にコミュニケーションを行う能力を養い、情報社会に積極的に参画する態度を育てる

内容とその取扱い

      1. 情報の活用と表現
        • 情報とメディアの特徴
        • 情報のディジタル化
        • 情報の表現・伝達の工夫
      2. 情報通信ネットワークとコミュニケーション
        • コミュニケーション手段の発達
        • 情報通信ネットワークの仕組み
        • 情報通信ネットワークの活用とコミュニケーション
      3. 情報社会の課題と情報モラル
        • 情報化が社会に及ぼす影響と課題
        • 情報セキュリティの確保
        • 情報社会における法と個人の責任
      4. 望ましい情報社会の構築
        • 社会における情報システム
        • 情報システムと人間
        • 情報社会における問題の解決

 


情報の科学の目標

情報社会を支える情報技術の役割や影響を理解させるとともに,情報と情報技術を問題の発見と解決に効果的に活用するための科学的な考え方を習得させ,情報社会の発展に主体的に寄与する能力と態度を育てる。

内容とその取扱い

      1. コンピュータと情報通信ネットワーク
        • コンピュータと情報の処理
        • 情報通信ネットワークの仕組み
        • 情報システムの働きと提供するサービス
      2. 問題解決とコンピュータの活用
        • 問題解決の基本的な考え方
        • 問題の解決と処理手順の自動化
        • モデル化とシミュレーション
      3. 情報の管理と問題解決
        • 情報通信ネットワークと問題解決
        • 情報の蓄積・管理とデータベース
        • 問題解決の評価と改善
      4. 情報技術の進展と情報モラル
        • 社会の情報化と人間
        • 情報社会の安全と情報技術
        • 情報社会の発展と情報技術

 

 


メモメモ。

WordPressのエディタ使いづらい・・・直打ちしないとあかんのか・・・