ScratchとTeachable Machineの使用で見えた、子供の未来と大人の現在。

# Makers Faire Tokyo 2020 を視聴しました。
はじめてのMakers Faireはコロナウイルス感染拡大防止のためオンライン視聴での参加でした。
Day1での、[キッズAIプログラミングコンテスト](https://youtu.be/KuYVJJ9la7Y?t=10841)の応募要件であったScratchとAI拡張機能を使った作品がどれも面白かったので、
私もScratchに触れてみることにしました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/c51c37de-f232-64d8-ce69-8ac45f974543.png" width="70%">

## Scratch + TeachableMachine
Scratchは全くの初体験でしたが以前、機械学習の制作で学んだTeachableMachineが拡張機能として使用できるとのことでしたのでこちらの組み合わせにしました。

## Scratch
こちらの資料を参考にしていきます。
[TeachableMachine 向け Scratch 拡張機能 (TM2Scratch) 使い方](https://mirapro.miraino-manabi.jp/assets/tm2scratch.pdf)
最初の注意点としては通常の検索でヒットするScrachではなくTM2Scratch拡張機能が入っているものを使います。
こちらから使用できます。

https://stretch3.github.io/

### とりあえず動かしてみる
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Scratchでクリックしたら猫がニャーと鳴いて30歩進むデモ。<a href="https://twitter.com/hashtag/Scratch?src=hash&amp;ref_src=twsrc%5Etfw">#Scratch</a> <a href="https://t.co/DOMSNYe7RW">pic.twitter.com/DOMSNYe7RW</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1314095678289657859?ref_src=twsrc%5Etfw">October 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

以前ハッカソンでM5Stackを使用した時のUiFlowと使い方がとても似ていたためスムーズにできました。
###UiFlow
![スクリーンショット 2020-10-08 15.58.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/77cb0bf3-b349-21cc-7fc9-9a07a74593c4.png)

###Scratch
![スクリーンショット 2020-10-08 15.59.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/138f4ce6-4d66-7a07-5dd5-d2af887378e1.png)


録音した音声も使えます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">録音した音声が使えるところがなかなか好きです。<a href="https://twitter.com/hashtag/Scratch?src=hash&amp;ref_src=twsrc%5Etfw">#Scratch</a> <a href="https://t.co/GfH0zdXLmb">pic.twitter.com/GfH0zdXLmb</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1314099741731557376?ref_src=twsrc%5Etfw">October 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# TeachableMachineで学習モデルを作る
今回は猫、犬、羊、鶏の四種類の動物を画像を学習してもらいました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/c72691ef-3401-0dab-c17f-4be5890141ef.png" width="70%"> 

TeachableMachineの使い方はこちらの記事を参考にさせていただきましたので是非ご覧ください。
[Google の Teachable Machine を使い、コーディングなしで手軽に画像認識をしてみる](https://qiita.com/Gerbera/items/165a4d026cf4999ef5b2)

モデルのアップロードで発行される共有可能なリンクのURLを保存しておいてください。
後ほどScratchで使用します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/a73e0d6d-9820-57c1-5f8b-909b430f4a03.png" src="70%">

#Scratchで学習モデルを利用する
ここからはScratchでの作業になります。

はじめに完成したものをお見せします。
学習した動物の写真を認識したら鳴き声が出ます。
小さい頃にタッチペンで絵に触れたら鳴き声が出る学習教材をイメージしました。
それの現代版と言ったところでしょうか。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/bc5f1d1e-87f1-0c1c-70ee-6be586d63895.png" width="70%">


###デモ1
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ScratchとTeachableMachineを組み合わせて猫の画像を認識したらミャオーンと鳴くデモ<a href="https://twitter.com/hashtag/scratch?src=hash&amp;ref_src=twsrc%5Etfw">#scratch</a> <a href="https://twitter.com/hashtag/teachablemachine?src=hash&amp;ref_src=twsrc%5Etfw">#teachablemachine</a> <a href="https://twitter.com/hashtag/AI?src=hash&amp;ref_src=twsrc%5Etfw">#AI</a> <a href="https://twitter.com/hashtag/%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#機械学習</a> <a href="https://t.co/9XPGmMFmaA">pic.twitter.com/9XPGmMFmaA</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1314162229680336896?ref_src=twsrc%5Etfw">October 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

自分で録音した音声も使えます。
###デモ２
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ScratchとTeachableMachineを組み合わせて犬の画像を認識したら自分で録音した「タイガーマスク」という音声が流れるデモ<a href="https://twitter.com/hashtag/scratch?src=hash&amp;ref_src=twsrc%5Etfw">#scratch</a> <a href="https://twitter.com/hashtag/teachablemachine?src=hash&amp;ref_src=twsrc%5Etfw">#teachablemachine</a> <a href="https://twitter.com/hashtag/AI?src=hash&amp;ref_src=twsrc%5Etfw">#AI</a> <a href="https://twitter.com/hashtag/%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#機械学習</a>　<a href="https://twitter.com/hashtag/%E3%82%AD%E3%83%A3%E3%82%B7%E3%83%BC%E5%A1%9A%E6%9C%AC?src=hash&amp;ref_src=twsrc%5Etfw">#キャシー塚本</a> <a href="https://t.co/YozMSPGZKJ">pic.twitter.com/YozMSPGZKJ</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1314166420532465665?ref_src=twsrc%5Etfw">October 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 完成までの手順
###1.左下のボタンをクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/18d35d39-ce66-b8eb-6c7c-2bd021f60843.png" width="70%">
### 2.拡張機能の選択
TM2Scratchを選択します
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/1b7c9d75-d6e9-14c5-62e1-499fd6fbb183.png" width="70%">
###3.カメラの許可、拡張機能の出現
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/98255707-e984-6f7c-c052-02d783365b4d.png" width="70%">

###4.プログラムの作成
1.イベント > 🏳が押された時を配置
2.TM2Scrath > 画像認識分類モデルURLに先ほどコピーした学習モデルのURLを入力
3.クリックで学習モデルの読み込みを行う
4.画像を選択する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/42fa3da1-37b9-50f9-9d2d-53539287412d.png" width="70%">

###4.完成
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/85df1db1-dcb1-7a19-6f35-57d7430ab7cb.png" width="70%">

#感想
直感的な操作でコードを書かなくてもパーツ組み合わせて処理を作る過程は子供の頃ガンダムやエヴァンゲリオンのプラモデルを作っていた時のようなワクワクがありました。
自分も小中で使う機会あったら結構ハマってると思います。
大人の私ですらScratchを使ってプログラムを書くことが楽しいと思えるのですから、
幼い人がScratchに対しての好奇心と熱量を持ったままプログラミング熱中して成長した後の未来は・・・

現役エンジニアとして自分ができることを改めて見直さないといけないと思いました。
いつでも若い人から学ぶことは沢山ありますね。ありがとうございました。