【Scratch 2019】 画像認識・デバイス連携・関連の独自拡張（2019/12/7）

この記事は 「Scratch Advent Calendar 2019 - Qiita」の 7日目 の記事です。　
Scratch Advent Calendar 2019 の6日目の記事として書いたものの続きになります。画像認識・デバイス連携関連の Scratch用独自拡張（※自分が作ったものではない）について書いていきます。

はじめに

前回書いた記事は、こちらになります。

この記事でも書き切れなかった拡張機能に、以下の 3つがあります。
・PoseNet2Scratch（ https://github.com/champierre/posenet2scratch ）
・Scratch2Maqueen（ https://github.com/champierre/scratch2maqueen ）
・ImageClassifier2Scratch
この記事では、これらを順番に見ていこうと思います。

今回見ていく拡張機能は、前回の記事にも記載していた下記から試すことができます！
　https://champierre.github.io/scratch3/

1） PoseNet2Scratch

この拡張機能について、説明が以下の GitHubのページに書かれています。
　●champierre/posenet2scratch: Pose Detection on Scratch 3 using PoseNet
　https://github.com/champierre/posenet2scratch

上記のページの日本語版から、冒頭の部分を抜粋してみます。

PoseNet2Scratchは人の姿勢を検出し、身体の各部分のxとyの位置を取得できるScratch拡張ブロックを追加することができます。
リアルタイムの姿勢検出をおこなうためにPoseNetを使っています。Kinectのような特別なデバイスを使うことなく、普通のウェブカメラで素早く高精度で検出できるところが大きな特徴です。

GitHubのページの PoseNet という単語の部分のリンク先は PoseNet の TensorFlow.js 版の記事になっていますが、GithubのページにはScratch連携している機能の実装について、以下のように書かれています（ml5js で実装されているようです）。 

また、Scratch 3の拡張機能として利用できるように、機械学習用JavaScriptライブラリml5.jsを使用して実装しています。

余談ですが、上記の PoseNet と書かれた単語に貼られていたリンクについて、リンク先は具体的には以下になるのですが、ライブデモへのリンクもあって手軽に PoseNet の TensorFlow.js 版 を体験できるみたいでした。

簡単に、カメラでうつった自分の顔のパーツの位置座標を検出できるか、下記のように試してみました。

処理としては、ずっとのブロックの中で、右目と鼻のそれぞれの y座標と x座標の位置を変数に代入するだけ、というものです。
この処理を実行する際に、変数の値を表示できるように設定して、カメラにうつる顔の位置を上下や左右に動かしてみて値の変化を見る、ということをやってみました。顔を動かした方向に合わせて、y座標や x座標の位置が変化していました（今回、正確な位置を捉えられているかは未確認）。

ちなみに、下記は拡張機能に含まれるブロックの一部ですが、いろいろな種類の体のパーツの位置を検出できるようです。

Github のページでは、検出できる対象の体のパーツは、以下のように書かれていました。

PoseNet2Scratch拡張ブロックを使うと、以下の各身体の部分のxおよびy座標を取得できます。
　鼻、左目、右目、左耳、右耳、左肩、右肩、左ひじ、右ひじ、
　左手首、右手首、左腰、右腰、左ひざ、右ひざ、左足首、右足首

顔のパーツから、体・手足の特定の箇所がいろいろと検出対象となっており、全身の動きをとらえて何か処理をするようなことも行えそうですね。

また、座標を取得するブロックの最初に「1人目の」という記載があります。この部分をクリックすると、以下のように10人目までが指定できるようになっているようでした。

余談ですが、複数の人の認識に関して、上記の PoseNet の TensorFlow.js 版の記事を見ていたときに、認識する人数が増えても処理負荷が増大しないという特長があるという話が書いてありました。

Moreover, an attractive property of this algorithm is that performance is not affected by the number of persons in the input image. Whether there are 15 persons to detect or 5, the computation time will be the same.

ざっくりと訳してみると、こんな感じのことが書かれていました。
「このアルゴリズムの魅力的な特性として、処理パフォーマンスは画像中の人の数に影響をうけることはないというものがあり、検出する人数が5人でも15人でも計算処理時間は同じになる。」

2） Scratch2Maqueen

この拡張機能について、説明が以下の GitHubのページに書かれています。
　●champierre/scratch2maqueen: Control DFRobot Maqueen from Scratch
　　https://github.com/champierre/scratch2maqueen

こちらは、DFRobot社の micro: Maqueen を Scratch から操作するものになるようです。

余談ですが、この micro: Maqueen は自分も所有していて、Microsoft MakeCode for micro:bit と組み合わせて良く使ったりしています。
非常に利用頻度が高く、子ども向けのプログラミングサポート活動でも大活躍していたり、スマートスピーカーとガジェット連携の試作を行う際にも利用したりしました。そのため、ベストバイガジェットというアドベントカレンダーで記事を書いた時に取り上げてかつ、その記事（下記）の中で自分にとってのベストバイガジェットに選びました。

拡張機能でできることを見てみると、micro:bit の機能を使うブロックや、以下にあるような micro: Maqueen の機能を使うものがありました。

ちなみに、Microsoft MakeCode for micro:bit の拡張機能を読み込んで使えるブロックは以下のようになっています。下記と比較すると「赤外線利用」と最近のバージョン（V4）で対応した「サーボモーター」の機能以外、以下の機能が利用できるようです（細かく言うと、底面のフルカラーLEDなんかもついていたりするのはあるのですが）。

　・「左右のタイヤを動かすモーターの制御」
　・「超音波センサ」の機能
　・底面の「ライントレース」に使う機能や「前方に2つついている単色LED」。。。組み合わせて使うと。。。★★★

こちらと比較すると「赤外線利用」と最近のバージョン（V4）で対応した「サーボモーター」の機能を除く、以下の機能が利用できるようです（細かく言うと、底面のフルカラーLEDなんかもついていたりするのはあるのですが）。

　・「左右のタイヤを動かすモーターの制御」
　・「超音波センサ」の機能
　・底面の「ライントレース」に使う機能
　・前方に2つついている「単色LED」

障害物を検知しつつ動かしたり、ライントレーサーとして動かしたり、これらを使って楽しいことができそうです！

3） ImageClassifier2Scratch

GitHubのページがないようなので（2019/12/5 時点）、まずは @jishiha さんの関連ツイートを引用しておきます。
自分で画像を用意して学習させる、ということをしなくても、既に用意された学習済みモデルを使って画像認識が利用できるようです。

ツイートの中に、こちらの機能は「ml5.js の Image Classifier をベースに作られた」とあります。
気になったので、少し ml5.js の ImageClassifier のリファレンスを見てみました。

冒頭に書かれたこの部分が、学習済みモデルに関する記述のようです。

It should be noted that the pre-trained model provided by the example below was trained on a database of approximately 15 million images (ImageNet). The ml5 library accesses this model from the cloud. What the algorithm labels an image is entirely dependent on that training data -- what is included, excluded, and how those images are labeled (or mislabeled).

学習済みモデルは、1500万枚の画像を使った学習が行われているようです。そのたくさんの画像は、画像系の研究でもよく登場する、下記の ImageNet を使っていると書かれていました。

細かい情報も見ていきたかったのですが、時間の関係で追い切れず・・・。

拡張機能で用意されているブロックを見ると、このようになっていました。

使い方の例については、@jishiha さんのツイートのプログラムの部分を見てみました。例えば、以下のような処理の流れにするようです。
　「1）画像認識を行う頻度の設定」⇒「2）認識結果を受け取ったときをきっかけに処理を実行」⇒「3・4）受け取った認識結果を日本語に翻訳し、その結果の文字を画面上の吹き出しで表示する」

このサンプルを参考にして、別途、実際に試したりしてみたいと思います。

おわりに

今回、Scratch用の独自拡張機能の中で、画像認識・デバイス連携・関連の独自拡張を提供するものを取り上げてみました。
下記の前回の記事と合わせて、色々な機能があるのをあらためて実感しました。

これら記事を書くなかで、いろいろ調べたり寄り道をしたりしていたら、想像以上に時間を使ってしまい、試すところをじっくりとは行えませんでした。今後は実際にこれらを使った作品を作ってみたりしてみようと思います。
また、主に Scratch や micro:bit に関して子ども向けのプログラミングサポートをすることが多い CoderDojo の活動で、紹介してみたり興味を持った子と試してみたり、といった形で活用してみようと思います。