変化を乗り越えた2020年

コロナで大きく変化した2020年。学校が休校になったり、生活様式がかわったり、とにかく変化が大きい年でした。それでも無事、新しい年を迎えることができそうです。

コロナの話題ばかりだった

2020年はコロナの年だったと思います。

コロナのインパクトが強すぎて話題にあがりませんが、プログラミング教育が必修化した年でもありました。

影の薄いプログラミング教育について、少し記録を残そうと思います。

始まった?プログラミング教育

2020年、日本でプログラミング教育が必修化し、小学生もプログラミングを学ぶようになりました。

しかしコロナで新年度から学校が休校。必修化した日本最初のプログラミング教育は、家庭で始まりました。

親がプログラミングを教えます。

学校教育がコロナに対応できなかった

突然休校になってから、すぐにオンライン授業が始まるほど、日本の学校教育に柔軟性や機動性はありません。(仕方ないと思います。)

教育は家庭に託されました。

学校に行かない子供たちに、何かを教えないといけない・・・と、あせる親は多かったと思います。

とはいえ、親も激変する仕事への対応で、余裕がありません。

選択と集中

余裕がない時は何かを捨てます。

うちの家庭では、国語と算数と理科と社会を捨てました。

捨てすぎなんですが・・・小4と小2の子供に、プログラミングだけを教えます。

楽しければ自ら学ぶ

プログラミングに絞ったのは、子供たちが自主的に学べると考えたからです。

自主的に学べれば、親の教える時間は少なくて済みます。親の都合です。

ゲームを作りながらプログラミングを学べば、ゲーム好きの子供が自ら楽しんで学ぶと考えました。

ビジュアルプログラミング「スクラッチ」

小学生が英単語のコードを書かなくても、視覚的にプログラミングできるソフトがあります。

ビジュアルプログラミング「スクラッチ」です。

最低限、私(父)も使い方を学ぶため、スクラッチを使ってゲームを公開するところまではやりました。

しかし、そこまでしなくても、NHK for Schoolで「Why!?プログラミング」が配信されており、この動画で十分子供たちは自習できるようでした。

学校再開 そして「ビスケット」

学校が再開しました。

プログラミング授業が始まると、使うソフトはスクラッチではなく「ビスケット」でした。予想を外します。

ただ、知らないソフトでも、あまり関係ありません。プログラミング教育はソフトの使い方ではなく、考え方を学んでいます。

実際長男は、ビスケットもスクラッチも楽しんで使いこなしていました。

今後はさらに考える力が必要

2020年末の時点では、新しく始まったプログラミング教育の成果や、コロナによる教育の遅れの影響は、まだ分かりません。

ただ、コロナで激変している社会では、間違いなくプログラミングのような考える力が必要になっていくと考えています。

何はともあれ、無事1年を過ごせたことを感謝し、来年もできるだけ楽しんで変化を乗り越えられればと思います。

BERTScoreで文章を類似度順に並べる

自然言語の評価基準「BERTScore」を使って、類似度の高い文章をスコア順に並べてみます。

この記事について

自然言語処理について基礎知識すら無い人(私)が、とにかく試して、自然言語処理とはどんなものか、イメージを掴むための内容です。

環境構築

BERTScoreのGitHub参照

Python 3.6以上の環境が必要です。

コマンドプロント(Windows)やターミナル(Mac)で下記を入力して、BERTScoreをインストールします。

エラーが出ないことを祈ります。

Windows、Mac共に、私の環境では問題なくインストールできました。

テスト用の文章

今回は簡単なテストで、4つの文章を用意します。test.txtという名前で、任意の場所に保存してください。

4つの文章を他3つの文章と比べ、類似度のスコアを出します。

Pythonコード

BERTScoreで文章の類似性を測定してみた」のコードを大部分参考にさせていただきました。しっかり学びたい場合は、このサイトの閲覧をお勧めします。

先に進む場合は、下記Pythonコードをtest.pyという名前で保存してください。test.pyは、さきほどのtest.txtと同じ階層に格納します。

BERTScoreでは、Precision(適合率), Recall(再現率), F1(適合率と再現率の調和平均)を取得できるようです。

とりあえずF1で類似度を評価することにしました。

出力結果

コマンドプロントなどで「python test.py」を実行すると、文章の類似度スコアが算出されます。

初回実行時のみ時間がかかります。1GB近くある学習済みモデルをダウンロードしているようでした。

しばらく待つと、各文章に対し、類似度の高い順にスコアと文章が掲載されます。

結果としては納得いくスコアです。

「吾輩は猫である」であれば、「未来の世界の猫である」が類似しており、「猫型のロボットである」は少し違い、「眼鏡をかけた黄色い服の少年」は全く違います。

ただ、今回の文章サンプルだと、BERTのすごさを引き出せていない気もします。単純な文章で、昔からある自然言語処理でも結果が変わらないかもしれません。

まずは結果が見られたことに感謝

自然言語処理を使いこなそうと思うと、まだまだ学習と経験の積み重ねが必要だと感じます。しかし、知識がほぼ無い状況でも、BERTScoreとその使い方の情報があったおかげで、自然言語処理のイメージは掴むことができました。

感謝します。

OpenCVで色を抽出して概数をカウント

OpenCVの勉強をしていたら、となりで子供が黄色いボールで遊んでいました。ちょうど良い題材なので、黄色いボールを数える画像認識プログラムを作ります。

黄色のボールだけをカウントする

黄色いボールを取るたびに、画像左下の数字が減っていきます。

赤いミニトマトが減っても数字は変わらず、黄色いボールだけを認識します。

色だけのボール検出は難しい

黄色を抽出するだけなら簡単です。

ボールが重なっていない状態なら、ボールの数を検出することも、比較的簡単です。

しかし、2つのボールが重なっている場合、それを2つのボールと認識させるのは、難易度が高めかもしれません。

機械学習を取り入れることになりそうです。

大ざっぱにでも数えたい

低いコストで、大ざっぱにボールを数えられないでしょうか?

黄色の面積を計算すれば、ボールの概数は出せるかと思います。

元の映像だと、奥に行くほどボールの面積が小さくなるため、まずは射影変換で調整します。

射影変換が下手で、ボールが横に潰れてしまいましたが・・・面積がだいたいそろった気がします。

これで黄色の面積を、1つ当たりのボール面積で割れば、ボールの数をカウントできます。

ボールの数が分かる1フレームを使ってマスクを生成し、cv2.countNonZero(mask) / ボールの数で、1つ当たりボール面積は計算できます。

今回の映像だと、1つのボールの面積は約9,200pxでした。

黄色ボールの概数を数えるコード

色の抽出やマスク生成は前回までのコードを使いました。

射影変換はOpenCV-Pythonチュートリアルを参考にしています。

動作の参考に、冒頭の画像を再掲載します。

今回はボールでしたが、色が識別できれば、形状は何でもOKです。

色だけで概数を簡単に調べたいときのサンプルでした。

OpenCVで特定の色の位置を取得

OpenCVで特定の色の位置を取得するサンプルです。精度がよくなく、おおざっぱな方法のため、使える場面は限定されるかもしれません。

青・緑・赤のボールだけ認識

吊るされたコットンボールの中で、青、緑、赤のみを認識させます。

認識した場合、緑の円が描画されます。

精度はあまり高くなく、作ったサンプルコードでは、1色につき1つまでしかボールを認識できない制限もあります。

環境・バージョン

Windows10
Python 3.6.4
OpenCV3.4.0

2018年末にOpenCV4が出ているようです。OpenCV3でしか動作確認していないので、ご注意ください。

ボールの色認識のコード

昔書いたボールの輪郭抽出のコードを少し作り変えています。

認識する色の範囲や、最小半径は、扱う映像に合わせて調整してください。

コードの53~55行目で、各色のマスクを作っています。

getMask([最小の色相,彩度,明度], [最大の色相,彩度,明度])で抽出したい色の範囲を指定します。(ただし赤のみ諸事情で最小明度と最大明度・彩度の値が無視されます。)

上記コードでは、例えば青のマスクの場合、色相110~150の間、彩度45~255、明度30~255を取得しています。

そして58~60行目で、各色でマスクされた画像を元に、輪郭(位置)を取得します。

getContoursの最後の引数(75)が、認識する最小半径の指定です。より小さいものを認識するときは、値を小さくします。

ただし、小さいほどノイズに反応して、誤認されるかもしれません。

値段以上の学習価値「たのしいおすしやさん」

知育菓子「たのしいおすしやさん」がスーパーのお菓子売り場に並んでいました。少し値段が高いですが、子供たちが作っている姿を見ると、値段以上の学習価値を感じます。

「たのしいおすしやさん」250円

スーパーのお菓子コーナーに行っても、なかなか買うことのない知育菓子。

1つ250円ですが、うちの場合は子供4人で1000円。

お菓子で1000円は高い気がします。しかし、正月間近で奮発して、買って帰りました。

調理開始?

「たのしいおすしやさん」を開封して、子供たちが作り始めました。

ものづくりが得意な長男が先導して、調理(?)が進みます。

基本的には粉と水を混ぜる作業が多いです。

図工と家庭科、そして理科の学習

シャリを握ります。

粘土のような、料理のような、図工と家庭科が合わさった感覚です。

イクラを作っています。

水の中に別の水滴を垂らすと、固まってイクラになります。

これは科学実験で見る「つかめる水」。

乳酸カルシウム水溶液にアルギン酸ナトリウム水溶液を入れると、膜ができて水の玉ができるようです。

図工と家庭科だけでなく、理科への関心につながりそうです。

独創的な寿司

小学生の長男・次男は、見本に近い寿司を作ります。しかし、園児の三男は、独創的な寿司を作りました。

巻き寿司のしょうゆ漬けでしょうか?

しょうゆでとても辛そうですが、味は甘いです。

なお、四男は作りながら食べてしまい、完成品はありません。

値段以上の学習価値

「たのしいおすしやさん」のような知育菓子は、お菓子売り場で値段が高い部類なので、買わない家庭が多いと思います。

しかし、1つ250円で学習になるなら、安い買い物かもしれません。

値段以上の価値を感じました。

災害時の備えにソーラーチャージャー

ソラーパネルがなんとなく好きで、屋根やベランダに付けています。そしてもう一つ「BigBlue 28W ソーラーチャージャー 」を購入してしまいました。災害時の備えが充実していきます・・・。

元を取ることを考えてはいけない

ソーラーパネルで電気代を浮かせることは困難です。

仮にソーラーで10,000mAhのモバイルバッテリーを充電しても、浮いた電気代は1円程度です。

BigBlueソーラーは、Amazonタイムセールで5,000円で買いました。5,000回充電すれば元を取れますが、現実的ではありません。

年間約250日ある晴れの日に、毎日充電しても、元を取るには20年かかります。

災害時の備え

28Wのソーラーチャージャーを購入するメリットは、災害時の備えになることです。(私はソーラーパネルが好きで買っただけで、そこまで考えていませんが・・・)

自然災害の多い日本なので、停電の備えで大きめのソーラーチャージャーが家に常備されていると、安心かもしれません。

情報収集や連絡手段となるスマホのバッテリーを持続させられると心強いです。

充電速度は文句なし

冬の晴れの日、BigBlueソーラーを南側のベランダに干しました。

洗濯物みたいな雑な干し方で、1.5Aくらい安定して充電できています。最大で1.8Aまで上がります。

例えばiPhone(3000mAh弱のもの)なら、2時間以内でフル充電できる計算です。

日差しが弱くてソーラー発電量が落ち込む12月に、これだけ発電していれば十分災害時の備えになると思います。

光る手まり・コットンボールライト

クリスマス。静かに光る手まりを楽しみます。コットンボールライトの手まりバージョンで、部屋を彩ります。

光る手まりのインテリア

カーテンレールにつけて飾ったり・・・

クリスマスにツリーに付けて光らせたり・・・。

コロナで家の中で過ごすとが増えました。

室内を明るくして、新しい年を迎えられればと思います。

メリークリスマス・七色に光る手まり

七色に光る手まりを見ながら、静寂のクリスマスイブを過ごそうと思います。手まりの中には傾斜センサーが入っており、傾きで点灯します。

時間経過で色の変わる手まり

桜の花をかたどった手まりです。

この中にフルカラーLEDが仕込まれており、時間経過で色が変わります。

※早送りしてしまいましたが、実際はもっとゆっくり時間をかけて色が変わります。

手まりの傾きで光がON・OFF

手まりの中に、傾斜センサーと電池とLEDを突っ込みました。

傾きで点灯する、不思議な手まりです。

 

それでは、すてきなクリスマスをお過ごしください。

Photoshopで動画フレームを縦並びにするJavaScript

動画ファイルから、フレームが縦並びになった1枚の画像ファイルを作る場合、PhotoShopでJavaScriptを動かせば、瞬時に生成可能です。ゲームやWebの素材として利用する場面があります。

ビデオをレイヤーに読み込み

まずはPhotoShopのメニューで「ファイル>読み込み>ビデオフレームからレイヤー」を選択します。

加工したい動画を選択すると、読込の設定画面が開きます。

おそらく、今回のような動画を画像に変換するケースでは、軽量化を求められると思います。

頻度制限の値を大きくしたり、動画の尺を短く調整してみてください。

「OK」を押すと、レイヤーに動画フレームが読み込まれます。

Photoshopを自動化するJavaScript

PhotoshopはJavaScriptで自動化できます。

下記のJavaScriptをコピーして、「convert.js」など、適当な名前で保存します。

保存したJavaScriptを、Photoshopのツールバーのどこでも良いので、ドラッグします。

うまくいかない場合は、メニューの「ファイル>スクリプト>参照」から、JavaScriptファイルを選択してください。

Photoshopの最新バージョンでは、スクリプト実行前に警告が出ると思います。

「はい」を押すと実行されます。

縦並びで画像を生成

JavaScriptを実行したら、自動でフレームの縦並び画像が生成されます。

画像サイズが大きかったり、フレーム数が多い場合は負荷がかかるのでご注意ください。

例えば、縦サイズ1080pxのフレームを100枚立て並びにしたら10万8000pxになってしまいます。

画像を必要なサイズに縮小してからJavaScriptを実行させた方が、負荷なく早く仕上がります。

micro:bit爆破スイッチ完成まで

レバースイッチを押し込むと爆発する・・・謎の電子工作に励んでいます。あとは、爆発アニメーションと音を用意してHTMLに組み込めば完成です。

レバーを押し込むと爆発

前々回、micro:bitを取り付けた爆破レバーを作り前回、レバーの傾きを取得してブラウザで受信するプログラムを書きました

すでにレバーの傾きをJavaScriptで取り込めていれば、爆発させるのは難しくありません。

爆発アニメーションのダウンロード

動画素材サイトPixabayで、商用利用無料、帰属表示は必要なしの動画をダウンロードできます。

利用させてもらったのはNicolas Boulardさんの爆発アニメーションです。

Photoshopで動画を1枚画像に

動画をPhotoshopに取り込みます。

メニューの「ファイル>読み込み>ビデオフレームからレイヤー」で、フレームごとのレイヤーを作り、縦に並べました。

全フレームを1枚の画像にまとめることで軽量化できます。

今回は15フレーム、幅480px × 高さ4050(270×15)pxの画像を用意しました。

※加工した素材の再配布はできないため、ここにはアップしません。

爆発効果音をダウンロード

効果音ラボから大爆発の効果音をダウンロードさせて頂きました。

こちらも商用利用無料、帰属表示なしで利用できます。

ディレクトリ構造

下記の用の素材を配置しました。

img
┗explosion.jpg(爆発画像)
sound
┗big-explosion1.mp3(爆発効果音)
index.html(本体)

爆発させるHMTL

micoro:bitを持っていない場合や、手軽に検証したい場合のため、レンジスライダーで動作するようにもしました。

上記HTMLはサーバーにアップしなくても、ローカルで動きます。

プロジェクターで投影しよう

もし、プロジェクターがあれば、壁に投影すると面白いかもしれません。

作ったHTMLは黒背景になっているため、プロジェクターで壁に投影すると、黒部分が透明になり、現実に爆発している感じがアップします。

また、大きく映し出すことができれば、より爆発の臨場感が増えるでしょう。

以上、爆破スイッチを作りたい人の参考になれば。