4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ネットワークを利用した双方向性のあるコンテンツのプログラミング

Last updated at Posted at 2019-10-07

##2021年 新学習指導要領が中学校で完全実施
新学習指導要領において、小学校でのプログラミングが導入されることが話題となっております。それを受けて、2021年から中学校の技術家庭科では「ネットワークを利用した双方向性のあるコンテンツのプログラミング」の授業が開始されます。「双方向のプログラミング」の概略を体験させることを目的として教材を作成しました。
「ネットワークを利用した双方向性のあるコンテンツのプログラミング」ライトノベルの題名のように長いので省略して「ねそプロ」を開発しました。
20191007_nesopuro.png

##「ねそプロ」とは?
http://iwate-manabi-net.sakura.ne.jp/nesopuro/
 ↑ Chrome等のブラウザ上で作動します(IE不可)
ブロック部品を並べて、くつけるだけの簡単なプログラミングです。Google Blockly を使ってJavaScriptのコードを作成して実行します。データは、Ajaxで非同期通信をサーバとしています。
SNSを作成することを通して、プログラミングの楽しさと、セキュリティの大切さにつて学ぶことがでれば、と考え開発しました。

##《使い方》
1 左側のツールボックスから部品を真ん中にドラッグ

  画面に表示 スタート
  画面に「セキュリティ」を表示
  画面に「表示エリア」を表示
  画面に「入力エリア」を表示
  画面に「送信」ボタンを表示
  画面に「受信」ボタンを表示
  画面に「画像」ボタンを表示

上の「実行」ボタンを押すと、画面が作られます。
ブロックを配置した順番で画面がデザインされます。
(ボタンを上に置くことも可能です・・・使いにくいですが。)
「AIチャットボットに送信」で、機械による自動返信も体験できます。

2 「送信ボタンが押された」のブロックの中に
   入力エリアのデータ取得
   データを送信・受信
   受信データを表示
   入力エリア内を消去
   表示エリアをスクロール
  を入れます

上の「実行」ボタンを押すと、作動可能になります。
入力エリアに文字を書いて「送信ボタン」を押して下さい。
入力エリアに書いた文字が、表示エリアに出るはずです。
 → 出ない場合には、通信エラーです

アドレスとセキュリティの番号が同じ人とだけ、通信できます。

部品を消してから「実行」を押して、「送信ボタン」を押すと、その作動がない状況を確認できます。例えば、「表示エリアをスクロール」ブロックを外して消すと、自動スクロールしません。

※ブロックを変更しても「実行」を押さないとプログラムの変更が反映されません。

送受信に関しては、プログラムの順番が変わると、うまく作動しなくなることを体験させます。

3 受信の場合を、送信を例に作りながら考えさせます。

4 タイマーを使って、1分ごとに自動で受信する場合を作らせます。

5 画像ボタンの作動を作らせます。

##《工夫点》
・右上の「アドレス」は、「疑似IPアドレス」です。
 「iwate.jp」のように、文字を入力することもできます。
 「192.168.10.3」と同様に、「同じ文字」の場合のみ通信できます。
 → IDNSサーバによる「URL→IPアドレス」変換で、同じ物同士が通信できることを「擬似的」に体験させます。

・「セキュリティ番号」が同じ時だけデータを返します。
 →情報をやりとりする場合において、
「パスワードや、IDなどのセキュリティが大切である」
 ことを教えます。

・安全のために、SNSの書き込み内容は、日付が変わると表示されないようにしています。

・画面下にはプログラムしたHTMLとJavaScriptの一部が表示されます。

・「寝そべってでも、プログラミングできる簡単教材」を目指しました。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?