Download - Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …
![Page 1: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/1.jpg)
Scratch 拡張機能 TM2Scratch による、
大人も子どもも楽しめる
機械学習プログラミング
石原 淳也
合同会社つくる社 代表社員株式会社まちクエスト 代表取締役社長
![Page 2: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/2.jpg)
Google キッズAIプログラミングコンテスト
https://campaigns.google.co.jp/kids_ai/
![Page 3: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/3.jpg)
内容
● 子どもたち(小中学生)のプログラミングコンテスト
● AIを自分で作ってみよう 機械学習を使った作品
● TM2Scratch や ML2Scratch、AIブロックなど独自バー
ジョンの Scratch を利用する必要がある
![Page 4: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/4.jpg)
優勝者
![Page 5: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/5.jpg)
![Page 7: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/7.jpg)
● 缶のラベルを画像認識
● LEGOをコントロール
![Page 8: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/8.jpg)
ファイナリスト
![Page 9: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/9.jpg)
![Page 10: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/10.jpg)
● 本に貼られた付箋、画像の認識
![Page 11: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/11.jpg)
![Page 12: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/12.jpg)
● 鳥の鳴き声、音声の認識
● Microbit の LED を光らせる
![Page 13: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/13.jpg)
![Page 14: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/14.jpg)
● 自転車走行中の道路の状況、画像の認識
![Page 15: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/15.jpg)
![Page 16: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/16.jpg)
● ポーズの認識
![Page 17: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/17.jpg)
![Page 18: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/18.jpg)
● マスクをつけた顔とつけていない顔画像の認識
![Page 19: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/19.jpg)
TM2Scratchを使った作品
● おじいちゃんのお酒飲みすぎ防止システムⅡ
● ヤンバルクイナ危機一髪
![Page 20: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/20.jpg)
TM2Scratch を使えば小中学生でも機械学習を使ったアプリケーションを
簡単に作ることができる
![Page 21: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/21.jpg)
必要なこと
● 機械学習を使えること
● レゴや Microbit と連携できること
![Page 22: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/22.jpg)
TM2Scratch のデモ
![Page 23: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/23.jpg)
バックグラウンド
![Page 24: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/24.jpg)
● Ruby on Rails を使い Web シス
テムを開発
● こどもが2人、2011年より Scratch を教え始める
● Scratch2MCPI に関する書籍を
書く。拡張機能を作るのが得意
![Page 25: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/25.jpg)
● プログラミングの次は機械学習
だ!
● Scratch ではじめる機械学習(共
著)
![Page 26: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/26.jpg)
https://teachablemachine.withgoogle.com/
![Page 27: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/27.jpg)
Teachable Machine
● 簡単に分類モデルを作ることができる
● 教師、アーティスト、学生など試してみたい
アイデアがあるすべての人が対象
● 機械学習の予備知識は不要
![Page 28: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/28.jpg)
Teachable Machine
● モデルをエクスポートできる
○ ファイル
○ サーバーにおいてURLにアクセスする
![Page 29: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/29.jpg)
Teachable Machine
● アプリケーションを作るには、
TensorFlow.js、JavaScriptの知識が必要
● ml5.js を使えば少しは簡単になる
![Page 30: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/30.jpg)
Teachable Machine Library - Image
出典: https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
![Page 31: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/31.jpg)
Teachable Machine Scratch
TM2Scratch
![Page 32: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/32.jpg)
Scratch
- Scratch財団がMITメディアラボと共同開
発
- 無料の教育プログラミング言語
- 8 〜 16歳のユーザーがターゲット
- 全世界の登録ユーザー数は約6100万人
- 日本のユーザー数は69万人(1.2%)
出典: https://scratch.mit.edu/statistics/
![Page 33: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/33.jpg)
Scratch
- レゴのようにブロックを組んでプログラミ
ング
- ゲームやアニメーション、作曲
- ブラウザ上で使える
![Page 34: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/34.jpg)
Scratch
- 世界各国の言語に対応、「にほん
ご」もある
- 作品はすぐに共有可能
- 拡張機能が使え、さらに拡張機能
を自作可能
![Page 35: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/35.jpg)
TM2Scratchの特徴
● ブラウザだけで学習と分類ができる
○ 環境構築が不要(Python 2、Python 3かを意識する必要
がない)○ サーバーが不要
○ アプリケーションの構築だけに集中できる
● 画像そのものを保存しているわけではない
○ (こどもたちの)顔の画像を保存していない
● 分類モデルを保存しておける
○ Google のサーバーという安心感
![Page 36: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/36.jpg)
拡張機能の作り方
![Page 37: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/37.jpg)
![Page 38: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/38.jpg)
● Scratch は JavaScriptで書かれ
ている
○ Ruby は C で書かれている
○ プログラミング言語が他の言
語で書かれているのは珍しく
はないこと
● ソースコードは GitHub で公開さ
れている
![Page 39: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/39.jpg)
![Page 40: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/40.jpg)
● 対応している言語
○ 日本語
○ にほんご
○ 英語
● 各ブロックに各言語の表示
を設定する
![Page 41: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/41.jpg)
● ブロックのタイプ
○ COMMAND○ HAT○ REPORTER○ BOOLEAN
![Page 42: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/42.jpg)
● ブロックがクリックされた
とき、実行されたときの
処理内容を JavaScript で書く
![Page 43: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/43.jpg)
Stretch3
![Page 44: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/44.jpg)
Stretch3とは?
● https://stretch3.github.io/● Scratchコミュニティの開発者
● 野良拡張機能のショールーム
● 複数の拡張機能を同時に使うことができ、組み合わせは自由
![Page 45: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/45.jpg)
● 機械学習を使ったもの
○ Posenet2Scratch○ Handpose2Scratch○ Facemesh2Scratch○ Speech2Scratch
● 機械学習を使っていないもの
○ PaSoRich○ QRコード
○ IFTTT Webhooks
![Page 46: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/46.jpg)
GitHub Actions で自動ビルド
https://github.com/stretch3/stretch3.github.io/tree/source/.github/workflows
![Page 48: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/48.jpg)
● 様々なアイデア
○ 紙コップや毛糸、紙皿など
様々な素材を利用
![Page 49: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/49.jpg)
● 様々なアイデア
○ お皿に乗せられた素
材からおすすめのメ
ニューを表示
○ 風邪かどうかなど診
断結果を表示する自
動診断アプリ
![Page 50: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/50.jpg)
● 精度良く分類できるように学習するのが難しい
○ カメラの置き方を工夫
○ グリーンバックを自作
![Page 51: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/51.jpg)
まとめ
![Page 52: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/52.jpg)
● TM2Scratch を使えば 小中学生 誰でも 機械学習を使った
アプリケーションを簡単に作ることができる
● 機械学習を使うことは難しくない
● アイデアを実現するツール
○ プログラミング
○ 機械学習を追加した
![Page 53: Scratch 拡張機能 TM2Scratch による、 大人も子どもも楽しめる …](https://reader033.vdocuments.us/reader033/viewer/2022050612/627406618627ef3b95447296/html5/thumbnails/53.jpg)
Thank you