機械学習×Scratch!? 使ってみた

続編更新しました：[機械学習モデルとScratchを連携! TM拡張機能使ってみた
](https://qiita.com/Hiroki-Fujimoto/items/631fdfc37d1b7e57c83f)  LEGOMindsotrms × Scratch：[ScratchでLEGO Mindstormsを動かしてみる](https://qiita.com/Hiroki-Fujimoto/items/4841917f81579a2d4f13)

以前とある子供向けScratchのワークショップが面白そうだったので、見学させて頂いたことがある。お題目は「機械学習×スクラッチで、どこにもないアプリを作ろう」で、画像認識ができる拡張機能を使ったワークショップだった。それがなかなかおもしろかったので、備忘録として「使ってみた」を以下に書いていきたいと思う。　　


# ML2Scratch
[Scratch](https://ja.wikipedia.org/wiki/Scratch_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E))については今回は説明を省略する。  
今回利用する拡張機能である[ML2Scratch](https://github.com/champierre/ml2scratch)はPCに接続されたカメラから画像を取得してラベル付け、学習を行い、画像認識を行う。そこにScratch特有のGUIプログラミングを織り交ぜることができるものになっている。  
<img width="300" alt="ml2scratch.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/bd7a8a09-a38d-e577-c4e9-d1fdcbc8ee6c.png">

# 準備
Chromeブラウザで、ML2Scratchを使えるように[カスタマイズされたScratch](https://stretch3.github.io/)にアクセスする  

左下の＋マークから拡張機能を追加する
<img width="900" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/86bf5952-e0d8-666e-7376-ce7714c25e9c.png">

ML2Scratchを選択する(EV3を動かす拡張機能もあるよ!ｽﾃﾏ)
<img width="900" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/1cec0ed5-cc3f-07e6-f4c8-d7a3fb5cd02c.png">

以下のように拡張ブロックが追加され、PCに接続されているカメラ画像が右側の実行画面に映される
<img width="900" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/12223a51-7b96-dcc6-4fa9-79797f4c2a21.png">

`ラベル` 、`ラベル1の枚数`、`ラベル2の枚数`、`ラベル3の枚数`ブロックの横のチェックボックスにチェックを入れて実行画面に表示する
<img width="900" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/21b3e81e-8018-c828-b312-d7f0071f1960.png">

これで学習前の準備は整った！　　

# カメラ画像の学習
ここからカメラ画像を収集して学習させていくわけだが、やり方はとっても簡単だった。小学生でも1回教えてもらえば扱えるレベルまで落とし込まれている。  
以下が今回作るモノについてだ。　　

- なにも写っていない時、ラズパイが写っている時、SDカードが写っている時を認識させる
- 上記の3パターン時にそれぞれネコが吹き出しでコメントする

では、さっそく画像の学習を行なっていく。  

まずは、なにも写っていない状態を学習させるので、カメラ前方はそのままにして、`ラベル1を学習する`ブロックをクリックする。この操作で「何もない風景」をラベル1として撮影し学習させる。 
目安としては20回程度学習させるのが良いらしい。撮影回数は実行画面のラベル1の枚数として表示されている。(このためのチェックボックスだったのだ)  
<img width="900" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/c7698e97-132f-3e4e-b5f8-4793a089a33c.png">


次に「ラズパイ(RaspberyPi)」をカメラに映し、同様にラベル2の枚数が20になるまで`ラベル2を学習する`ブロックをクリックする。この際、ラズパイなどモノはいろいろな位置に動かして撮影すると認識率が向上する。
<img width="900" alt="13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/36cb8dfb-c8bd-ffb4-82d7-b0c8a18d9907.png">

上記と同様に「SDカード」をカメラに映して、ラベル3の枚数が20になるまで`ラベル3を学習する`をクリックしていく。
<img width="900" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/87e08525-8c2b-8718-efbf-bc459bc0bacb.png">

たったこれだけで学習が完了する。
# カメラ映像からの認識
学習を行うと実行画面の`ラベル`の数字が各状況に合わせて変動するのがわかる。何も映していない時は「1」、ラズパイを映している時は「2」、SDカードを映しているときは「3」と表示して各状況を識別しているのがわかる。
<img width="900" alt="movie.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/6cc3b9bf-5313-57cf-8301-de2833fdb393.gif">



各状況に合わせてネコにコメントさせるために`ラベルのどれかを受け取ったとき`を配置し、`どれか`を1~3に変更し、ネコがコメントするブロックをそれぞれ配置する。プログラムをみるとわかるが、それぞれ  
- なにも映していないときは「なにもねえ・・・」
- ラズパイを映しているときは「ラズパイがあるぞぉ」
- SDカードを映しているときは「こいつぁSDカードって言うんだぜ」
と言うように設定。  
<img width="900" alt="movie2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/440646/f53bd99a-041a-5a4c-e56f-6b8a4305fe0a.gif">


# まとめ
いい感じに学習部分をブラックボックス化できていて、かなり小学生でも使いやすい感じになっている。見学させて頂いたワークショップでも画像認識でキャラクターを動かしたり、音楽を流したり様々な工夫が見られた。　　
拡張ブロックの中身としてはTensorFlow.jsを用いて実装されている。開発者の石原氏がGitHubにソースコードを公開しているので、興味があれば確認してほしい。  

次回：[ScratchでLEGO® MINDSTORMS EV3を動かしてみる](https://qiita.com/Hiroki-Fujimoto/items/4841917f81579a2d4f13)
  
# 追記  
(2020/08/03)  

ML2Scratch開発者の石原さん著書の[「Scratchではじめる機械学習」](https://www.amazon.co.jp/Scratch%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92-%E2%80%95%E4%BD%9C%E3%82%8A%E3%81%AA%E3%81%8C%E3%82%89%E6%A5%BD%E3%81%97%E3%81%8F%E5%AD%A6%E3%81%B9%E3%82%8BAI%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E3%82%AA%E3%83%A9%E3%82%A4%E3%83%AA%E3%83%BC%E3%83%BB%E3%82%B8%E3%83%A3%E3%83%91%E3%83%B3-%E7%9F%B3%E5%8E%9F-%E6%B7%B3%E4%B9%9F/dp/4873119189/ref=pd_sbs_14_1/355-1037418-6366504?_encoding=UTF8&pd_rd_i=4873119189&pd_rd_r=52c136bb-0692-4176-ae9c-8f3c563d26cf&pd_rd_w=LHHR8&pd_rd_wg=GhnzM&pf_rd_p=7642417c-6494-4d06-a2b0-fcb0e0b3c563&pf_rd_r=FPWK2GSTWGZHGBVDYR4F&psc=1&refRID=FPWK2GSTWGZHGBVDYR4F)が発売されました。  
本拡張機能を使った作例はもちろん、Scratchの標準機能単体での機械学習実装まで掲載されていますので気になった方はぜひチェックしてみてください。