小学生向けハンズオン：AIじゃんけんゲームを作ろう！

## 概要

- **対象年齢：** 10歳～
- **目的：**
    - AI（エーアイ：Artificial Intelligence）の仕組みを体験する
    - 簡単なプログラミングでゲームを作る楽しさを知る

## 準備するもの

- インターネットに接続されたパソコン（カメラ付き）
- Teachable Machine（ティーチャブル・マシン）へのアクセス ( [https://teachablemachine.withgoogle.com/](https://teachablemachine.withgoogle.com/train) )
- [拡張版Scratchの公式サイトStreach3](https://stretch3.github.io/)（スクラッチ）へのアクセス ( [https://stretch3.github.io/](https://stretch3.github.io/))
- **（オプション：特徴量を増やす小道具）カラー手袋、紙テープ、テーピング等**

## 時間配分 (全体で約10分 + α)

- 説明・準備 (2分)
- Teachable Machine（ティーチャブル・マシン）で学習 (4分)
- Scratch（スクラッチ）でプログラミング (3分)
- 遊んでみよう！ (1分)
- **精度アップ演習 (時間に応じて)**

## 手順１：説明・準備 (2分)

- AI（エーアイ）って知ってる？
    - みんなの手や声を認識して、反応してくれるプログラムのことだよ！
    - 今日は、みんなの手の形をAI（エーアイ）に教えて、じゃんけんゲームを作るよ！
- 使うツールを紹介
    - Teachable Machine（ティーチャブル・マシン）： AI（エーアイ）に画像や音を教えるためのツール
    - Scratch（スクラッチ）： ブロックを組み合わせて、簡単にプログラムが作れるツール
- パソコンを開いて、Teachable Machine（ティーチャブル・マシン）とScratch（スクラッチ）を開いておこう！

## 手順２：Teachable Machineで学習 (4分)

- ブラウザー（Chromeクローム）で、下記アドレスを開く
[https://teachablemachine.withgoogle.com/](https://teachablemachine.withgoogle.com/train)
- Teachable Machine（ティーチャブル・マシン）で「画像プロジェクト (Image Project)」⇒「標準の画像モデル (Standard image model)」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/d489bd3f-e99c-31b0-2eb1-25499c15defa.png)
![image 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/1a4cde26-1222-79a8-9dd1-b7f0b38ea0b8.png)

    - **事前に、Case3を追加しておきましょう**
    
    
    - **「1 (グー)」のクラス：**
        - 「ウェブカメラ (Webcam)」で「グー」を撮影（ボタン”長押しして撮影”で20枚くらい撮る）
        - ポイント：同じ写真にならないように、少し角度や位置を変えると良い！
        

![image 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/818439fe-af3e-0d3d-7cb7-68458744bc75.png)


- **「2 (チョキ)」のクラス：**
    - 「ウェブカメラ (Webcam)」で「チョキ」を撮影
- **「3 (パー)」のクラス：**
    - 「ウェブカメラ (Webcam)」で「パー」を撮影、
- モデルをトレーニング する
    
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/567896b5-ba92-6fed-5242-7052e3ee5d39.png)

    
- 「プレビュー 」で確認：
    - 手をかざして、正しく認識されるか確認 (1, 2, 3の数字で認識される)
    - うまくいかない時は、再トレーニング (Retrain)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/ea135e12-09f8-7fa9-941f-0d5bd43d19ab.png)


## 手順３：Scratchでプログラミング (3分)

- ブラウザー（Chromeクローム）で、下記アドレスを開く
 [https://stretch3.github.io/](https://stretch3.github.io/)
- 「拡張機能を追加 」⇒「TM2Scratch」を選択
    
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/be871b41-0c7a-2cd4-28c4-003103bcb38d.png)
    
- 制御⇒旗が押されたとき
- TM2Scratch⇒カメラを””に切り替える
- TM2Scratch⇒画像分類モデルURL
    
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/4fb7b6c8-df5a-a4f1-9779-4fd4b86f08fc.png)


    
- **「1 (グー)」を判定：**
    - TM2Scratch⇒画像ラベル””を受け取ったとき
    - ””の中を**「1」**に変更
    - 見た目⇒こんにちはという⇒「こんにちは」を「ぐー」に変更
- **「2 (チョキ)」と「3 (パー)」も同様に作成：「チョキ！ (2!)」「パー！ (3!)」と言うように**


- Teachable Machineに戻って、
    - [モデルをエクスポートする]
    - [モデルをアップロード]
    - [コピー]
        
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181708/66ae4977-e25e-f78f-6809-2ec2df8a34c6.png)

        


        

        


## 手順４：遊んでみよう！ (1分)

- Scratch（スクラッチ）の緑の旗をクリックしてスタート！
- スペースキーを押した後に、カメラに「グー」「チョキ」「パー」をかざす
- 猫のキャラクターが、AI（エーアイ）が認識した結果（1, 2, 3）をしゃべるか確認


## 発展

- ”それ以外（手が写っていない状態）”をケース４につくる（例：もし、画像認識結果が4なら.「じゃんけん」という）
- 他の手の形を教えてみよう！（例：OKサイン (OK sign)、ピースサイン (Peace sign)）
    - `ケースを増やした場合には`
    - `eachable Machineに戻って下記の作業が必要です`
        - `[モデルをエクスポートする]`
        - `[クラウドモデルを更新する]`
- じゃんけんの結果によって、猫の動きを変えてみよう！
- 数字を使って、勝敗判定をプログラミングしてみよう！（例：1は3に勝つ）
- 音声でじゃんけんをできるようにしてみよう！（上級者向け）

## 追加演習：画像認識の精度を上げる方法

- **精度が悪い時は、AI（エーアイ）の学習方法を工夫してみよう！**
- **方法１：特徴を強調する**
    - **1.1. 背景をシンプルにする**
        - 背景に物が多いと、AI（エーアイ）が手の形を認識しにくくなる
        - できるだけシンプルな背景で試してみよう
    - **1.2. カラー手袋を使う**
        - 背景と手の色の差が大きいと、AI（エーアイ）が手の形を認識しやすくなる
        - 背景と違う色のカラー手袋を使うと効果的！
- **方法２：例外を作る（より正確に）**
    - **2.1. Teachable Machine（ティーチャブル・マシン）のクラスを増やす**
        - 「何も無し」「指一本」「指3本」など、じゃんけんの手以外のクラスを作る
        - AI（エーアイ）が、じゃんけんの手とそれ以外を区別しやすくなる
        - 特に「2 (チョキ)」と「3 (パー)」の間の曖昧な形を減らせる
    - **再トレーニングして、精度が上がるか試してみよう！**

## ポイント

- 子どもたちが自分で手を動かして体験
- 難しい言葉は使わず、わかりやすく
- うまくいかない時は、一緒に考える
- 創造性を引き出し、自由に発展させる
- 数字を使うことで、勝敗判定を簡単にできることを伝える
- **AI（エーアイ）の学習には、データの質と量が重要であることを伝える**

## まとめ

- この企画を通して、AI（エーアイ）とプログラミングの楽しさを体験しよう！
- 未来のテクノロジーに興味を持つきっかけに！

## 参考にしたサイト

https://qiita.com/tregu148/items/2aba1712cd64ff78516a

https://scrapbox.io/CoderDojoNara/%E3%82%82%E3%81%86%E3%81%B2%E3%81%A8%E3%81%A4%E3%81%AEScratch%E3%81%AE%E9%80%86%E8%A5%B2