プログラミング言語►Python開発

子供にプログラミングを教える時に役立つ方法　まとめ

はじめに

子供にプログラミングを教える機会があったので優良だと思ったサービスをまとめておきます。

対象

私が教えていたのは小学校低学年程度の子供です。
ただし、子供は理解の範囲や性質が個人によって大きく異なるので同じ物ややり方で行っても思った結果にならない場合が多分にあります。
私自身も勉強中ですが、児童心理学系の本や教育に関する本を読んでおくと心に余裕を持って教えることが出来るようになると思います。

これは例ですが、子供を「まず」椅子に座らせるだけでもかなり難しいです。
途中で立ち歩いたり、机の上のものを触って別のことをやり始めます。
このときに単純に叱るのではなく、なぜこのような行動をとるのかを理解しておくと焦らずに対応できるからです。
実際に本には「この行動がストレスが蓄積されて発散しようとしていて、叱るとストレスが蓄積されて更にその行動が助長される」という話が書いてあります。
(どの本かは忘れましたが…)

子供も一人の人であり、うまく伝えられなかったり やり方が分からなかったりするだけだと思うので、押し付けや決めつけをせずに教えてあげることが大事だと思います。

参考：私が読んだ本

教職ベーシック 発達・学習の心理学(新版)
算数・理科を学ぶ子どもの発達心理学: 文化・認知・学習
よくわかる教育心理学

教材

概要

私は基本的に「WEBで出来る」、「出来る限り実際のプログラミングで役立つ事」の条件で探しました。
ですので、これの範囲以外でもっと良いものがあるかもしれません。

下記に、個人的につまづきやすい点をまとめました。
個人毎にスペックがバラバラだと思いますので子供を見ながら考えたほうが良いかと思います。

プログラミングでつまづきやすい点

  • 英語
  • マウス操作
  • キーボード入力（ローマ字入力、半角/全角等）
  • 計算（低学年だと基本的に足し算/引き算しか分からないため）
  • 漢字（教材が対応していない場合、個人学習が難しい）
  • 独特な単語（エンター、スペース、カンマ等）
    また、キーボードやマウス操作が雑な場合があり壊してしまう可能性があります。

言語

Scratch

一番有名所はコレだと思います。
教材もかなり揃っていて、子供に教えるのには最適な部類だと思います。
また、「ひらがなで表示できる」など小学校低学年でも個人で学習を行わせやすい点でも素晴らしいです。

ただ、難点は通常のプログラミング開発では利用するタイミングが無いことです。
また他の言語に変更する事もできません。

サイト

スクリーンショット 2019-11-02 12.43.18.png

こちらで登録を行えばWEBページ上でコーディング、テスト、他者への共有も可能です。
また、簡単なチュートリアルも可能です。
https://scratch.mit.edu/

blockly

スクリーンショット 2019-11-02 13.17.44.png

Googleが作っているScratchのようにブロックを組み合わせて構築することが出来る言語です。
Scratch BlocksのようにScratchと一緒に作っているソリューションもあるようです。
この言語の利点は基本的にオープンソースですので、個人で問題や課題が作成できる事、また教材もいくつか量があることです。
また、Javascriptなどへの変換も可能ですのでそういった言語への移行もスムーズになるかもしれません。
（実際に最後に「Javascriptで書いたらあなたのコードはこうだよ！」と教えてくれるものもあります。）

https://developers.google.com/blockly

code

スクリーンショット 2019-11-02 12.42.56.png

プログラミングの学習を促進する非営利団体が提供するblockly学習サイトです。
課題の殆どが英語という点を除けば課題も潤沢にあり、おすすめです。
どうしても子供に教える場合、繰り返しで覚えさせることも重要だと思います。
その点では1コースの中で何度も復習しながら学習をすすめることが出来ると思います。

https://code.org/

blockly games

スクリーンショット 2019-11-02 12.43.09.png

blocklyで作成したゲームを使って基本的な学習が出来ます。
問題数が各10問と少ない点、課題によっては日本語対応していない点が何点ですが、結構楽しく学習できると思います。

https://blockly.games/

その他

Progate

pythonやjavascriptなどいろいろな学習を行えます。
レベルなどわかりやすく上がっていくので、非常に子供も熱心に取り組みます。
漢字での表示しか無い点と繰り返しの練習があまり出来ない点、また 無料での出来る範囲が制限されている点などのマイナスのポイントもあります。

https://prog-8.com/

Scrimba

スクリーンショット 2019-11-02 13.19.43.png

音声と操作を録画し、学習教材を作成/共有するソフトウエアです
vueの公式ページなどにもありますが、自分で課題を作る場合に簡単に作ることが出来ます。

https://scrimba.com/

私が作った課題をここに共有しておきます。

Documents

初期のときに、個人でDocumentsを作って教えていました。
かなりの工数が必要なので、あまりおすすめは出来ませんが…
私が途中まで作っていたものをここに共有しておきます…
（誤字脱字たくさんありますのでご注意を）

スクリーンショット 2019-11-02 13.19.10.png

https://docs.google.com/presentation/d/1q8anWaPxWDGSaR5_NxOaQfhQRQHQrEOr63Ys7zVTw6s/edit?usp=sharing

結論

私がやってきたことのまとめになっていまいました…
私が伝えたいことは親も無理せず、子に無理させずに楽しく教えてあげてください。

進展あったらまた似た記事を書くかもしれません

人工知能・機械学習►AI実装技術

距離センサを使ってみた

概要

距離センサを購入したので試してみました。

部品

距離センサ:HC-SR04
83円
image.png
※参考にしたSwitchScienceによるとこれには一部欠陥があるようで、そちらのほうが良いかもしれません。

表示機:TM1637が組み込まれた7セグLED
73円
image.png

コンピュータ:Arduino UNO互換機
699円
img.png

#配線
スクリーンショット 2020-03-22 7.46.02.png

Triggerを10マイクロ秒以上 UPさせると、40kHzで８回距離を測り、その結果をEchoに周波数で返す仕様らしいです。

#ソースコード 

  
#include <Arduino.h>  
#include <TM1637Display.h>  
#include <Wire.h>  
  
#define SERIAL_BAUD 115200  
#define CLK 2  
#define DIO 3  
TM1637Display display(CLK, DIO);  
int Trig = 5;  
int Echo = 4;  
  
void setup() {  
  Serial.begin(SERIAL_BAUD);  
  while(!Serial) {}  
   pinMode(Trig,OUTPUT);  
   pinMode(Echo,INPUT);  
  
  Wire.begin();  
  uint8_t data[] = { 0xff, 0xff, 0xff, 0xff };  
  display.setBrightness(0x0f);  
  display.setSegments(data);  
  delay(1000);  
}  
  
void loop() {  
  int Duration;  
  float Distance;  
    digitalWrite(Trig,LOW);  
    delayMicroseconds(1);  
    digitalWrite(Trig,HIGH);  
    delayMicroseconds(11);  
    digitalWrite(Trig,LOW);  
    Duration = pulseIn(Echo,HIGH);  
    if (Duration>0) {  
      Distance = Duration/2;  
      Distance = Distance*340*100/1000000; // 340m/s = 34000cm/s = 0.034cm/us   
      Serial.print(Distance);  
      Serial.println(" cm");  
      display.showNumberDec((unsigned int)(Distance*100), false);  
//      analogWrite(11, (unsigned int)(100-Distance));//ビープ音  
    }  
  delay(100);  
}

github

動作確認

gif動画で上げても分かりにくかったので、Youtubeにて確認いただけると幸いです。
IMAGE ALT TEXT HERE

クラウド・インフラ►AWS

73円の7セグLEDを光らせる！

最初に

73円の7セグLEDを入手したのでArduinoで光らせてみました。

用意するもの

Arduino IDEがインストールされたパソコン
私はMacbookProにインストール済みでしたのでそれを利用します。

Arduino UNO互換機
image.png
https://www.amazon.co.jp/gp/product/B013QV28CW/ref=ppx_yo_dt_b_asin_title_o08_s00?ie=UTF8&psc=1

TM1637が組み込まれた7セグLED(4桁)
image.png

73円！という価格です。
https://ja.aliexpress.com/item/4000174141889.html?spm=a2g0s.9042311.0.0.27424c4dboG22l
image.png

配線(4本)
image.png
https://www.amazon.co.jp/gp/product/B00P9BVKOK/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1

手順

1.チップ確認

7セグLEDに実装されているチップ番号を確認します。
image.png

間違えなく、TM1637ですね…
これをベースにArduinoのライブラリを検索していきます.

2.Arduino IDEでライブラリの検索

Arduino IDEを開きます。
「スケッチ」＞「ライブラリのインクルード」＞「ライブラリの管理」でライブラリマネージャを開きます
image.png

ライブラリマネージャで「TM1637」を検索し、ライブラリを検索します。
image.png

今回は「TM1637」という、そのままのライブラリを見つけたのでこれをインストールします。

3.スケッチ例を選択

ライブラリをインストールするとスケッチ例が追加されています。
「ファイル」＞「スケッチ例」＞「TM1637」＞「TM1637Test」を選択します
image.png

スケッチ例が開くので、中身を確認します。
image.png

最初の部分にModule connection pinsと書いてあります。
この部分にLEDのピンを挿せば動くようです。

4.配線

前回確認したコードを参考に、配線をこのようにしてみます。
image.png

実際に接続したものがこちら
image.png

5.書き込み and 動作確認

ArduinoとPCをUSBで接続し、書き込みボタンを押せば完了です。
こんな感じで光ります。

感想

細かいディスプレイも良いですが、こういうLEDを光らせるとかっこいいですよね。
自分で制御できるのも楽しいです。。
ダウンロード.gif

備考

今回の内容を動画にしてみました。
ご参考に共有です。

IMAGE ALT TEXT HERE

人工知能・機械学習►AI実装技術

Font Awesomeのアイコンを導入してみる

目的

サイトを作成するのに無料アイコンが必要だったので導入しました。
備忘録

流れ

1.登録:メール

下記のサイトにアクセスし、スタートをクリック
https://fontawesome.com/
image.png

下記に、自分のメールアドレスを入力し、「Send Kit Code」！
image.png

こんなメールが来るので「Click to Confirm Your Email Address + Set Things Up」！
image.png

2.登録：入力

新しいパスワードを入力
image.png

上から「ファーストネーム」、「ラストネーム」…「最初に使ったのはいつか」
って感じで入力。そのままですね
image.png

3.リンク取得

入力が終わると下記のような画面に移動します。
image.png
ここで表示されているコードをコピーしてホームページにCOPYすればOK 

  
<script src="https://kit.fontawesome.com/{serial}.js" crossorigin="anonymous"></script>

例もダウンロードできます。 

  
      <!doctype html>  
      <html>  
        <head>  
          <!-- Place your kit's code here -->  
          <script src="https://kit.fontawesome.com/{serial}.js" crossorigin="anonymous"></script>  
        </head>  
  
        <body>  
          <i class="fas fa-thumbs-up fa-5x"></i>  
        </body>  
      </html>

詰まったところ

フォントの最初の文字が異なる場合がある

フォントによって最初に入ってくる文字が異なる場合がります。
これがバージョンによって異なるらしく…注意が必要です。

fa s 

<i class="fas fa-map-marked-alt fa-3x"></i>

fa b 

<i class="fab fa-linkedin fa-1x"></i>

こちらのサイトにあるような分類になっているようです。
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

image.png

その他

ライセンス

ここにあります。
今日（2020年3月1日）現在はGPLライセンスのようです。
https://fontawesome.com/license/free

設定変更

設定を変更し、過去のバージョンも利用できるようです。
また、SVGかWebフォントも選択可能です。

kitのホーム画面で「your kit settings.」をクリックすると下記の画面に移動します。

image.png
プログラミング言語►Python開発

windows10にpythonとVisualStudioCodeをインストールする(2020年4月版)

概要

Windows10にPython3とVisualStudioCodeをインストールしたので備忘録

動画

動画版もこちらにおいておきます。
IMAGE ALT TEXT HERE

#手順

1.Python3 インストール

1-1. ダウンロード

下記のURLからダウンロードしてください。
https://www.python.org/
image.png

image.png

1-2. 実行

ダウンロードしたファイルを実行してください。
image.png
「Add Python3.8 PATH」はチェックを入れてください。

image.png

これでPythonのインストールは完了です。

2.VisualStudioCode インストール

2-1. ダウンロード

下記のURLからダウンロードしてください。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

image.png
image.png

image.png image.png

2-2. 実行

ダウンロードしたファイルを実行してください。
image.png

image.png image.png image.png

チェック項目に関しては自由に選択してください。

image.png

これでインストールは完了です。

2-3.デバッグ設定

VisualStudioCodeを起動してください。

image.png

四角が重なったようなアイコンから拡張機能をインストール出来ます。
その中からPythonを選択し、インストールしてください。

インストールが終わるとデバッグが可能になります。

image.png

実行したいpythonファイルを開いた状態で、虫のようなマークを選択、その後Run and Debugをクリックすると、下記のような画面になります。
image.png

Python Fileを選択するとデバッグすることが出来ます。

専門分野応用►IoTシステム開発

riot.jsでマウスムーブイベントでグリグリ動かす方法

最初

riotとsvgを使って手軽にぐりぐりできないかと思った。

onclickイベント？

公式のドキュメントとかを見ていると日本語ではonclickとかoninputとかのイベントしか記載がない…
試しにonmousemoveを下記のようにしてみたら動いた。 

<circle onmousemove={move} cx="10" cy="20" r="20" fill="blue" />

マウスの場所…

通常、マウスのイベントの戻り値としてマウスの情報が飛んで来るのだが、riotは…？
適当に引数を追加し参照したところそれっぽい物が戻ってきていた。 

move(e){  
  console.log(e);  
}

要素への参照

マウスイベントの戻り値のpathに要素をみつけたので下記のように記載 

    move(e){  
      e.path[0].setAttribute("cx",e.offsetX);  
      e.path[0].setAttribute("cy",e.offsetY);  
    }

これでうまく動きました。

#全体のソース 

<sample>  
<svg id="svg" width="300" height="340" style="border-width: thick; border-color: #EEE; border-style: solid; display: block; margin: auto;">  
    <circle onmousemove={move} onmousedown={down} cx="10" cy="20" r="20" fill="blue" />  
</svg>  
  <script>  
    var self=this;  
    move(e){  
      e.path[0].setAttribute("cx",e.offsetX);  
      e.path[0].setAttribute("cy",e.offsetY);  
    }  
  </script>  
</sample>  

<html>  
  <head>  
    <title>test</title>  
  </head>  
  <body>  
    <sample></sample>  
    <script type="riot/tag" src="sample.tag"></script>  
    <script src="https://cdn.jsdelivr.net/npm/riot@3.8/riot+compiler.min.js"></script>  
    <script>riot.mount('sample')</script>  
  </body>  
</html>
クラウド・インフラ►AWS

［電子工作入門］スイッチ入力を受け取る

概要

スイッチを使って入力を受け取りLEDを光らせる回路を作成しました。
超入門だと思うので…

IMAGE ALT TEXT HERE

回路図

今回は、ポート2,4を利用します。
ポート4でスイッチを押しているかどうかを受け取り、ポート2でLEDを光らせます。

スクリーンショット 2020-03-20 7.36.02.png

[スイッチの片方が抵抗を挟んでGNDに落ちている理由]
スイッチが切れている時に電気的にGNDにも5ｖにもならない状態にしないためです。

[LEDにも抵抗を挟んでいる理由]
これはLEDを5vとGNDに直接つないでしまうと、大量の電流が流れるためLEDが破損する事を防ぐためです。
※ArduinoのIOは基本的に直接つないでも問題なかったと思いましたが、念の為です。

ソースコード

void setup() {  
  pinMode(2, OUTPUT);  
  pinMode(4, INPUT);  
}  
  
void loop() {  
  int pin4=digitalRead(4);  
  digitalWrite(2, pin4);   
}

setup()で各pinを初期化しています。
loop()ではpin4で入力を受け取り、pin2に書き込みを行っています。

github
https://github.com/hashito/arduino_startup/tree/master/switch2led

結果

download.gif

ツール・技術►開発ツール

MQTTのMessageを残らずMySQL(MariaDB)に保存するコマンド

#個人的なメモ

db構造

  
sudo mysql -e "SHOW FULL COLUMNS FROM mqtt.msg"  
+-------+---------------+-------------------+------+-----+---------+-------+---------------------------------+---------+  
| Field | Type          | Collation         | Null | Key | Default | Extra | Privileges                      | Comment |  
+-------+---------------+-------------------+------+-----+---------+-------+---------------------------------+---------+  
| m     | varchar(1124) | latin1_swedish_ci | YES  |     | NULL    |       | select,insert,update,references |         |  
| tm    | int(11)       | NULL              | YES  |     | NULL    |       | select,insert,update,references |         |  
+-------+---------------+-------------------+------+-----+---------+-------+---------------------------------+---------+

コマンド

mosquitto_sub -t "#" -v | xargs -I@ sudo mysql -e "insert into mqtt.msg (m,tm)values('@',$(date +%s))"

上記だと、時間が固定になってしまいます。
SQLの方で持ってくるように変更 

mosquitto_sub -t "#" -v | xargs -I@ sudo mysql -e "insert into mqtt.msg (m,tm)values('@',UNIX_TIMESTAMP(NOW()))"

課題

・セキュリティ的に問題有り
・トピックとMessageが分割できていない

commentいただけると嬉しいです！

人工知能・機械学習►AI実装技術

npm http-server とDockerで無料HTTPS化

#はじめに
無料でHTTPSを立てたかったので、立て方をここに残します。（備忘録）

#やり方

用意するもの

下記のものがインストールされたlinuxサーバ
・npm
<参考>Ubuntuに最新のNode.jsを難なくインストールする
・docker and docker-compose
<参考>Ubuntu に docker と docker-compose を入れる
・domain
<参考>freenomでドメインの取得

手順

1,domainの設定

用意したlinuxサーバのグローバルIPを設定してあげます。
私のはさくらインターネットで購入したので下記のようなイメージで設定しました。
スクリーンショット 2019-08-18 3.49.14.png

2,各種インストール

httpサーバソフト：http-server

下記のコマンドでインストールしてください。 

$ sudo npm install -g http-server

ジョブ管理ソフト：cron

ubuntu等の場合は最初から入っているかと思いますが、centosなどでは入っていない場合もあるようなので、下記のようにインストールしてください。 

$ sudo yum -y install crontabs

ファイヤーウォール管理ソフト：ufw

下記のコマンドでインストールしてください。 

$ sudo apt -y install ufw

*centos系はこちらを参照ください。<参考>ufwをcentosにインストール

2,crontabへの登録

これを実行する事により、サーバが再起動した場合も自動的に再実行されます。
下記のコマンドを実行してください。 

$ sudo crontab -e

コマンドを実行すると編集画面が表示されますので、下記の行を追加し保存してください。 

@reboot sudo ufw allow 80;sudo ufw allow 443  
@reboot sudo http-server /{対象フォルダ} &

*{対象フォルダ}はhttpサーバで表示するindex.htmlなどが存在するフォルダを指定してください。

3,docker-compose.ymlの作成

下記のコマンドを実行し、ファイル編集を開始してください。（例ではEditorをnanoで利用しています） 

$ sudo nano docker-compose.yml

新規ファイル内容は下記としてください 

version: "3"  
services:  
  https-portal:  
    image: steveltn/https-portal:1  
    ports:  
      - 80:80  
      - 443:443  
    environment:  
      DOMAINS: '{ドメイン名} -> http://dockerhost:8080'  
      STAGE: production  
    volumes:  
      - ./org-chimata-ssl-certs:/var/lib/https-portal  
    restart: always

*{ドメイン名}は用意されているドメイン名を利用ください。

4,docker-compose.ymlの実行

最初に念の為、ファイヤーウォールに穴を開けます。 

$ sudo ufw allow 80;sudo ufw allow 443

http-serverを立ち上げます 

$ sudo http-server /{対象フォルダ} &

下記のコマンドでhttps-portalを起動 

$ sudo docker-compose up -d

これで、正常に立ち上がるはずです。

問題がある場合

まずもってログを確認していただいたほうが良いかと思います。

dockerのログの見方

1,下記のコマンドでdockerのコンテナIDを取得

$ sudo docker ps  
> CONTAINER ID        IMAGE                     COMMAND             CREATED             STATUS              PORTS                                      NAMES  
> {コンテナID}        steveltn/https-portal:1   "/init"             2 days ago          Up 2 days           0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp   {user name}_https-portal_1

2,下記のコマンドでコンテナのログを取得

$ sudo docker logs {コンテナID}

そして、エラーっぽいところの行をコピーしてググる！！

他の可能性

可能性としては…
・http-serverは2回目以降は別ポートで起動します。→多重起動していないか確認
・http-serverが立ち上がっているか？→curlなどでgetして確認
・ネットワーク全体で80/443PORTは許可されているか？→外部からtelnetなどで確認
・STAGE: productionで何度も作成していないか？→Let's Encryptに回数などの制限があるようです。

プログラミング言語►Python開発

pythonでLinuxコマンド文字列を整形する汎用的なプログラム

背景

Linuxコマンドを用いて例えばCPU温度などを定期的にDBに追加しています。
この時にコードをなるべく少なくしようとコマンドだけで色々と調べたのですがなかなか難易度が高かったので作成しました。

仕様

汎用的に利用できるようにしたいのでpythonのFormatのような動きを実現させたい。

コード

こうなりました。 

import sys;  
print(sys.argv[1].format(*sys.argv[2].split(" ")) )
  • 第一引数：Formatの指定文字列
  • 第二引数：空白で区切られたFormatに入れる文字列

利用方法

mosquitto_sub -t "#" -v |xargs -I@ python3 /home/hashito/command/text2format.py "insert into mqtt.msg (t,m,tm)values(\'{}\',\'{}\',UNIX_TIMESTAMP(NOW()))" @ | xargs -I@ mysql -e "@"

mqttの内容を雑にマリアDBにつっこめます

追記

@shiracamus 様からコメントいただきました。
コマンドのみだと下記の形で出来るようです。 

$ echo "a b" | xargs echo | xargs printf "insert into mqtt.msg (t,m,tm)values('%s','%s',UNIX_TIMESTAMP(NOW()))"  
insert into mqtt.msg (t,m,tm)values('a','b',UNIX_TIMESTAMP(NOW()))

これをずっと探していたのですが、自分の知識がなく助かりました！
ありがとうございました！