情報テクノロジー 第?回

今年はMicrobitを使って、共生社会やsociety5.0をテーマとしながら
「身体的な障害を持つ人でも、コミュニケーションが取れるデバイスを作ろう」 を行っていました。
※なんと今年は被験者・協力者もいます

ある班の、自作キーボードを使用したアイディアが大分形になってきたので、少し紹介したいと思います。
※自作キーボードとは、キーボードの形や、ボタンの個数、大きさ、ボタンの種類(EnterやA,B..)などを自由に作れるデバイスです

※なお、この版のアイディアはMicrobitでは限界を迎えたため、急遽別のマイコン(Pro micro)を使用することにしました。


【条件】
左半身しか動かない、喋る事が出来ない人に、コミュニケーションを可能とするデバイスを作る

【使用したもの】
自作キーボード:[shiro] https://yushakobo.jp/shop/shiro/
ソースコード(Ver0.1):https://github.com/asami-hoge/shiro_toggle/blob/master/keymap.c

まだ生徒達の葛藤は続いておりますが、一足先に出来栄えを載せておきたいと思います。
現時点での状況ですが、このあとどれくらいブラッシュアップできるのかが楽しみです。


※今回の取り組みを進める中で、自作キーボード界隈、特にこのキットを販売してくださった遊舎工房さん
また、私の知識不足を支えてくれ、ご指導いただきました Discord鯖 “Self-Made Keyboards in Japan” の
@s-showさん、@shelaさん、@hsgwさん、@takashiskiさん、@hyoshihara04さんに深く感謝申し上げます。

これから被験者の方と打ち合わせながら、より良いものへとPDCAを回しながら、生徒たちと取り組みたいと思います。
取り急ぎ、ご報告まで。

共通鍵(AES)と秘密鍵(RSA)の違い

暗号化方式の説明についてお悩みである、という話を聞きました。
ふと、私ならどう説明するのか、とメモしておきます。


  1. 共通鍵方式と公開鍵/秘密鍵方式の違い(細かい話)
  2. 例えるならば・・・
  3. 暗号化の説明(簡素化)

1.共通鍵方式と公開鍵/秘密鍵方式の違い

とても簡単に説明しているサイトを見つけましたので、表を参考に読んでいただくのが一番よろしいかと。

(AESとRSAの比較)
AES/RSA
【図解】初心者も分かる”公開鍵/秘密鍵”の仕組み~公開鍵暗号方式の身近で具体的な利用例やメリット〜 より


2.例えるならば・・・

専門的なことはさておき、授業では、どう伝えているかというと。
私は南京錠とダイヤルロックに例えて説明しています。

※昨今は宅配ボックスで例えるのが面白いかなと思っています。

荷物を受け渡す時に、どんな鍵でフタを閉じる(暗号化する)のか?
メリットデメリットを考えてみよう、と。

共通鍵方式

まずは共通鍵方式です。
いわゆるダイヤルロックに例えています。
鍵となる「番号」を共有して、使いまわす。

メリットとしては、送る人、受け取る人、双方からの開け閉めが容易です。速度も速いです。
デメリットとしては、「番号が漏れる」と、大変危険です。 基本的に1対1など、少数相手にしか使えません。
※大量に配布すると、番号漏れの可能性が高まる。
※番号を教えるときには、慎重に。

公開鍵方式

公開鍵/秘密鍵方式です。
いわゆる、南京錠タイプ。

「錠」の部分だけを相手に渡し、「鍵」は自分だけが持ちます。

メリットとしては、「錠」を大量にコピーして、配れます(公開)
デメリットとしては、送り人は「鍵を閉める」ことしかできません。(ロックしかできない。鍵がない。)
慎重に鍵を閉めねばなりませんので、速度は遅くなります。※例えです。厳密には大きく違います


3.暗号化の説明(簡素化)

RSA暗号の簡単な説明です。
※社会と情報では、シーザー暗号レベルしかやりません。
※情報の科学と情報テクノロジーで扱っています。

暗号とは、「第三者が通信文を見ても特別な知識なしでは読めないように変換」したものです。(wikipediaより)
正確な定義はさておいて、これを「素数の性質」と「その計算が難しい」ことを利用して実装しているのだと説明します。

たとえば、「15」という数字があります。 これは 3*5という素数の掛算によって導かれる数字です。
素数同士の積(半素数)では、その性質上、因数が限られています。(3と5の組み合わせしかない)

つまり、これを鍵とするのです。
「15という南京錠」を配っておき、これを開けるには、「3*5と書かれた鍵」が必要だとするのです。
15=3*5が成立したときに、開錠できるようにします。

・「15」ならば簡単に解けてしまうんじゃない?
おっしゃる通りです。
ここから先は、PCの性能と桁数の追いかけっこが始まります。

15は簡単すぎるけども、ならば「175146184831」はどうでしょうか?
素因数分解するにしても、結構な時間がかかりそうですよね・・・?
まさか、2,3,5,7,,,と続けていくわけにもいきません。
(※204749*855419  この桁数でも、PCなら一瞬で解読します)

このように、桁数を大きくすればするほど、計算が難しくなります。
コンピュータ相手でも、十分に時間を稼げる桁数まで増やしてしまえばそれでよい、という考えですね。
実際にはもう少し、複雑にするための工夫がなされておりますが、概要としてはこれで十分かと思います。


とまあ、こんな感じで、大体10分~15分位を説明の時間に割いています。
何かの参考になれば。

色のディジタル化

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

内容としては、
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年生)

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

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


じゃんけんアルゴリズムを題材に、プログラミングについて一歩踏み込んでみたいと思います。(予定)
//じゃんけんアルゴリズムはこちらを参照 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;」はリーダブルコードなの?
じゃんけんゲームを作るとして、「良いコード」って何だろう?

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

(忘れてました)情報の科学 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かなと思っています。汎用性の高さと、身近な物として。

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

情報の科学 プログラミング教育 第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先生あたりが、いつか素敵な教科書(前例)を作ってくれると信じています。


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

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

社会と情報:ネットワーク

8月31日付で引っ越しまして。夏休みの終了と同時でして。
2学期をスタートさせつつ荷解きの作業に追われています。


さて、2学期の社会と情報は「ネットワーク」からのスタートです。
IPアドレスとドメインの対応なんかを教えていくわけですが、
今年は理論から入らずに、実際に「ネットワークを歩いてみよう」と称して、
IPアドレスを元にWWWを渡り歩いて貰いました。

とはいえ、無作為にIP指定するのはかなり難しいので、ここはセキュリティ意識の教育もかねて千葉県の地方公共団体系ページを教材にしました。
そう、我らが千葉県のWebページはIP直打ちでアクセス出来てしまうんです。
(それでいいのか千葉県)

例として、ドメインとIPの対応を親元のwww.pref.chiba.lg.jpで紹介します。

【ドメインでアクセス】
千葉県ホームページ https://www.pref.chiba.lg.jp/
【IPアドレスでアクセス】
千葉県ホームページ http://114.179.201.1/

※(実際に授業を行う際、本当にそれでいいのかと小一時間悩みました。セキュリティ意識・・・)

で、面白いことに千葉県は、こっからIPが続いていくんですね。面白がって良いのかどうかはさておいて。

千葉県ホームページ http://114.179.201.1/
千葉県防災ポータルサイト http://114.179.201.2/
千葉県-銚子市 http://114.179.201.3/
千葉県-市川市 http://114.179.201.4

(上から)
https://www.pref.chiba.lg.jp/
http://www.bousai.pref.chiba.lg.jp/portal/
http://www.city.choshi.chiba.jp/
http://www.city.ichikawa.lg.jp

とまあ、こんな感じです。
ちなみに市川市は正しいアドレスとして http://114.179.201.139/ が割り振られている様です。
※じゃあ114.179.201.4は何なんだよお化けなのかよ消し忘れなのかと

いやもう本当に、良い教材を提供して頂いて・・・。授業では軽く触れるに止めましたが、大丈夫か千葉県
※なお、サブドメインについては触れていません。

このように数値を進めながら。
厳密には違うけれども。

1.例えとして「114.179.201」という名前のビルがあってここは主に千葉県が使用している
2.そこにはいろんな部屋があって、1号室には千葉県が、2号室は防災ポータルサイト、3号室には銚子市が~
3.順番に訪ねていけばいつか自分の市町村が見つかるね?
4.よし探そう。適当に入力していっても良い。 気づいたことは共有しよう
(探し終えたのち)

5.すっごい大変だったねえ。これがネットワークの歩き方。現実世界で住所や郵便番号をもとに訪ねるように、ネットでは~
6.で、判りやすくした住所。これすなわちアドレス。

https://www.pref.chiba.lg.jp/ を逆に読むと、
(jp)日本の~
(lg)地方公共団体の~
(chiba)千葉という名前の~
(pref)県の~
(www)Webサービス

に、アクセス(尋ねようと)するって行為なんだよ!

みたいな説明をしています。
今回は45分授業というのもあり、ここで終わりました。
次回からIPドメインの逆引きやDNSを交えた詳しい仕組みに触れられたらなと。

※この後に、覚えている限りの市町村のIP<>ドメインの一覧を乗っけて置きます。