(編集待ち)都高情研:ポスター発表の資料

2019/03/27に行なわれた都高情研で、ポスター発表をしました。
http://www.tokojoken.jp/session/

今回発表した内容をスライドかなんかで、(わかりやすく)まとめて公開したいと思います。
まあ・・早くて本日。遅くて、8月(全高情研)。

取り急ぎ、使用している資料を全て載せておきますので、見たいという方はご自由にご利用ください。
情報のディジタル化_社情の違い_wp
情報Ⅰでの取り扱い

第二世代iPad miniにスプレーで水滴をつけて、実物投影機で拡大した映像です。
(夜、資料を印刷しながらやっていますので裏の音はお気になさらず)

各画素の挙動がよく観察できて、「ディスプレイの仕組み」や「色の表現」に対して良い刺激になりました。

色のディジタル化

授業だけしていたい・・・(定期)
いつぞやビー玉を使った光の三原色についての原稿を書きましたが、
先日、内容を使い回すにあたって、どうせならとアップデートしてみました。

内容としては、
RGBの理解→ディスプレイの仕組み問いかけ で終わっていたところを、
RGBの理解→仕組み問いかけ→動作の確認(答え合わせ) までまとめてみました。
導入と実技を削って5分捻出した感じで。大雑把にはこんな感じ(PDF)

詳細は授業の実践報告(PDF)の後半を読んで頂くとして、ダイジェスト。


1.RGBってなーに?
2.16進で色を表すカラーコードで遊んでみよう(HTML,CSS)
※光の強さが2桁ずつの16進法で表されているね! (#FF FF FF)

3.ビー玉当てて、画面を確認してみよう

4.黒って何色が光ってるんだろうね?
※問いかけのみ、考えさせる。
https://kakakumag.com/av-kaden/?id=9556
ディスプレイの話

5.もっとよく見てみよう(今回追加分)

A.スプレーを用意する

B.RGBアプリを起動する

C.水滴を作り、実物投影機で色を確認する

※ブラウザで拡大すると見やすいです

 

FFFFFF(白)と比べると、他の色では消した色の部分(pixel)が黒くなっているのがわかります。


それはさておき、授業アンケートの精度というか、なんというか。
質をもうちょっと上げないといかんなあ・・・。(1年生)

授業検討会(?)を開催してみる。

ご無沙汰しております。生きております。
全く更新が。はかどっておりませんが。生きております。
時間のあるときまったり更新すればいいやと半ば投げています。

さておき。

正規の集まりではないのですが、講師や若手の先生方に声をかけて、
授業の検討会(?)を行うことになりました。


【内容】
3月21日(祝日)に集まれそうな人で
ゆるーく情報の授業検討会(?)をやろうと思っています。
※どこまで声をかけるかは未定です。
※ある講師の先生に、「情報の授業は何をすればよいかわからない」と聞かれたのが発端です

【検討(?)事項】
1.この範囲はこんな指導をした(したい)
2.この範囲の狙いは何か
3.場合によってはasami(仮)が模擬授業を行い、突っ込みや検討
4.もちろん他の先生に授業をして頂くのも大歓迎

また、以下の2点をお伝えした上でご参加頂こうと思います。
(ア)正規の研修会ではないので、交通費などが出せません。
(イ)参加不参加が何らかに影響することもありません。

場所:千葉県立○○○高等学校 PC教室
日時:3月21日(木) 0900~1200(予定)


とまあ、こんな感じで。

実はまだ2人くらいしか参加者を募っていないのですが、まあ緩ーく適当にまずはやってみようかと。
ご報告できる事があれば、またいずれご報告したいと思います。

「じゃんけんアルゴリズム」で考える

情報の科学では、プログラミングの範囲でまとめに入ろうとしています。
授業を終え次第、一気に更新をかけていきたいなあと思いつつ、ふと浮かんだ悩みを記録しておきます。
まとまっていないまま吐き出すので、読みにくいのは、ご愛敬。


じゃんけんアルゴリズムを題材に、プログラミングについて一歩踏み込んでみたいと思います。(予定)
//じゃんけんアルゴリズムはこちらを参照 https://staku.designbits.jp/check-janken/

要は、プログラムで「じゃんけんゲーム」を作るときの判定部分を、IF文あたりを使って書くわけですが、
特に何も考えずに書く場合は大抵以下のようになるかと思います。

//適当コーディングです。読み替えてください。むしろ読み飛ばしてください。

   if (自分 = グー) {
      if (相手 = グー) {
         引き分け;
      } else if (相手 = チョキ) {
         勝ち;
      } else {
         引き分け;
      }
   } else if (自分 チョキ) {
      if (相手 = グー) {
         引き分け;
      } else if (相手 = チョキ) {
         負け;
      } else {
         勝ち;
      }
   } else {
      if (相手 = グー) {
         勝ち;
      } else if (相手 = チョキ) {
         引き分け;
      } else {
         負け;
      }
   }
}

で、入れ子部分のアルゴリズムを工夫するとこうなる。

kekka = (jibun-aite+3)%3;

if(kekka==0){
   alert(“あいこ”);
}else if (kekka==1){
   alert(“負け”);
}else{
   alert(“勝ち”);
}


もうちょっとわかりやすくしましょう。
私も「このコード天才かよ!」と楽しんだ記憶があります。
それがこれ。

n=1-n;

これは、「0なら1を、1なら0を返す」というNOTを書いた物です。
それまでは、

if(n=1){
   return 0;
}else{
   return 1;
}

とかまあ、こんな感じで書いているわけです。


さてここからが本題
これらのプログラムは、はたして「良いコード」でしょうか?
様々なケースで考えさせたいと思っています。

効率的、短い、カッコイイ、そんなコード「n=1-n;」はリーダブルコードなの?
じゃんけんゲームを作るとして、「良いコード」って何だろう?

今回はプログラミングを指導するのであれば、その「考え方」にフォーカスを当てるべきだろうという考えの垂れ流しです。
まとまり次第、結果を報告したいと思います。

神奈川県の実践事例報告会に参加しています

神奈川県情報部会実践事例報告会に参加しています。(NOW)

しかし、神奈川県の情報教育への取り組みは本当にうらやましいです。(東京もすごいですけども)
千葉県も負けないように盛り上げなくては。

ちなみに、神奈川県の情報部会のWebサイトのURLが
http://www.johobukai.net/ です。 johobukai.net です。

oh…

本日の内容がまとまり次第、レポートしておきたいと思います。
http://www.johobukai.net/18jireihoukokukaisidai.html

執筆依頼を受けながら

情報教育の実践報告について原稿を書いています。
つくづく思うのが、このサイト作っといてよかったなあ、と。

まだ数例しか載せていませんが、いざってときに「あー。あんなことしたなあ」と振り返るのに最適というか。
良いぞ過去の私! そして未来の私よ!!続けて!!!
覚えている内に書き起こして!!!!

各教科で様々な動きがあるんですが、最近は担任しているクラス
の事ばかり考えておりまして。

難しいですよね。
情報教育の研究や研鑽に専念したい自分と
教科にとらわれない部分での教育活動にも考えを巡らせる自分と。
エトセトラ、エトセトラ。

最適解は情報教育一本で専念することなんでしょうが、なかなかそうも行かないのがこの職業です。うーむ。

原稿に戻ります・・・。

(生徒にバレました)

とてもすごく、ご無沙汰しております。
なぜご無沙汰していたかというと。

勤務校の生徒に、このブログの存在がバレてしまいました。

名前は伏せていたものの(伏せてない)
授業内容で検索をしたら、HITしてしまったとのこと。

やりにくいなあと思いつつも、やり始めたからにはやりきろうということで
更新を再開したいと思います。

やりにくいなあ・・・。

(忘れてました)情報の科学 bit・byteの文字コード

WordPressの「下書き」にファイルサイズの範囲で投稿し損ねた記事を見つけました。1学期の範囲で記憶が怪しいので概要だけさらっと・・・。

情報のディジタル化の範囲です。


1.ファイルサイズの話をする
2.notepadで適当な文字列を作る(2バイト文字などは指定する)
3.保存させ、「今作ったテキストデータのファイルサイズはいくつだと思う?」と予想させる
4.ファイルの右クリ、プロパティからファイルサイズを確認させる。
5.文字数や文字種を様々試させつつ、保存してファイルサイズを参照し、その移り変わりを観察する。

【発展】
ディスク上のファイルサイズは4kb毎に領域を取っているが、それはなぜか?

→HDDの仕組みとセクタについて再確認する

こ れ だ !!!!!!!!!

なるほど、となったところで、

1.すべての事象には意味があるよ
2.ふと疑問に思ったことは、どんどん調べてごらん。
3.もしくは聞いてごらん!
4.質問、常に待っています! 

なんて締めくくり、授業を終わりにしている。

※512と4kのHDDについては深く触れていません。サラっと流しています。
※教室内にSSDベースのPCが同時に存在していれば、もっと面白くなるのになあと思っています。

参考サイト:http://qa.elecom.co.jp/faq_detail.html?id=5439
からの、下記画像を引用

情報の科学 プログラミング教育 第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かなと思っています。汎用性の高さと、身近な物として。

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